홈 배너

src/entities/home/ui/favorite-wrapper.tsx

@@ -5,6 +5,7 @@ import 'swiper/css';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { UserFavorite } from '@/entities/user/model/types';
 import { useStore } from '@/shared/model/store';
+import { useLocation } from 'react-router';
 
 /*
 const items: Array<UserFavorite> = [
@@ -31,7 +32,7 @@ export const FavoriteWrapper = ({
   setMenuOn
 }: FavoriteWrapperProps) => {
   const { navigate } = useNavigate();
-  
+    
   const [favoriteItems, setFavoriteItems] = useState<Array<UserFavorite>>([]);
   
   const itemAdd: UserFavorite = {
@@ -40,7 +41,7 @@ export const FavoriteWrapper = ({
   };
   
   const onClickToFavoriteEdit = () => {
-    if(usingType === 'menu' && setEditMode){
+    if(setEditMode){
       setEditMode(true);
     }
   };
@@ -51,7 +52,6 @@ export const FavoriteWrapper = ({
       if(setMenuOn){
         setMenuOn(false);
       }
-      
     }
   };
 
@@ -109,12 +109,13 @@ export const FavoriteWrapper = ({
   useEffect(() => {
     getFavoriteList();
   }, [changeMenuId]);
-
+ 
   return (
     <>
       <Swiper 
         spaceBetween={ 9 }
         slidesPerView={ 4 }
+        style={{height: '75px'}}
       >
       { (favoriteItems.length > 0) && makeFavoriteItems() }
       { makeAddFavoriteItem() }

src/entities/home/ui/hidden-page.tsx

@@ -0,0 +1,14 @@
+import { useSetFavoriteEdit, useSetMenuOn } from '@/widgets/sub-layout/use-sub-layout';
+
+export interface HiddenPageProps {
+
+}
+export const HiddenPage = ({
+  
+}: HiddenPageProps) => {
+  useSetMenuOn(true);
+  useSetFavoriteEdit(true);
+  return (
+    <></>
+  );
+};

src/entities/menu/ui/menu-category.tsx

@@ -4,6 +4,8 @@ import { useStore } from '@/shared/model/store';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { UserFavorite } from '@/entities/user/model/types';
 import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router';
+import { PATHS } from '@/shared/constants/paths';
 
 export const MenuCategory = ({
   menuId,
@@ -15,6 +17,7 @@ export const MenuCategory = ({
   setChangeMenuId
 }: MenuCategoryProps) => {
   const { navigate } = useNavigate();
+  const location = useLocation();
 
   const [favoriteItems, setFavoriteItems] = useState<Array<UserFavorite>>([]);
   const [menuIds, setMenuIds] = useState<Array<string | undefined>>([]);
@@ -53,6 +56,9 @@ export const MenuCategory = ({
     useStore.getState().UserStore.setUserFavorite(userFavorite);
     setChangeMenuId(`${menuId}-${checked}`);
     callFavoiteItems();
+    if(location.pathname === PATHS.home){
+      
+    }
   };
 
   const callFavoiteItems = () => {
@@ -123,7 +129,7 @@ export const MenuCategory = ({
           <span>{ menuName }</span>
         </div>
         <ul className="category-items">
-          { getMenuItems() }
+        { getMenuItems() }
         </ul>
       </div>
     </>

src/pages/home/home-page.tsx

@@ -1,6 +1,5 @@
 import moment from 'moment';
 import { useEffect, useState } from 'react';
-import { useUserInfo } from '@/entities/user/lib/use-user-info';
 import { FavoriteWrapper } from '@/entities/home/ui/favorite-wrapper';
 import { DayStatusBox } from '@/entities/home/ui/day-status-box';
 import { HomeBottomBanner } from '@/entities/home/ui/home-bottom-banner';
@@ -14,13 +13,16 @@ import {
 	useSetHeaderTitle,
 	useSetHeaderType,
 	useSetFooterMode,
-  useSetFooterCurrentPage,
+  useSetFooterCurrentPage
-  useSetFavoriteEdit,
-  useSetMenuOn
 } from '@/widgets/sub-layout/use-sub-layout';
+import { HiddenPage } from '@/entities/home/ui/hidden-page';
+
+export let homeReloadKey = 1;
+export const setHomeReloadKey = () => {
+  homeReloadKey++;
+};
 
 export const HomePage = () => {
-  const { callLogin } = useUserInfo();
   const { 
     isNativeEnvironment,
     openBiometricRegistrationPopup,
@@ -31,15 +33,14 @@ export const HomePage = () => {
   useSetHeaderType(HeaderType.Home);
   useSetFooterMode(true);
   useSetFooterCurrentPage(FooterItemActiveKey.Home);
-  //useSetFavoriteEdit(true);
+  
-  //useSetMenuOn(true);
-
   const today = moment().format('YYYYMMDD').toString();
   let bannerToday = getLocalStorage(StorageKeys.BottomBannerClose);
   
   const [bottomBannerOn, setBottomBannerOn] = useState<boolean>(false);
   const [authRegisterOn, setAuthRegisterOn] = useState<boolean>(false);
   const [loginSuccess, setLoginSuccess] = useState<boolean>(true);
+  const [homeEditMode, setHomeEditMode] = useState<boolean>(false);
 
   const checkBottomBannerOpen = () => {
     if(!!bannerToday){
@@ -54,15 +55,14 @@ export const HomePage = () => {
         setAuthRegisterOn(true);
       }
     }).catch((e) => {
-      console.log('catch', e)
+      console.log('catch', e); 
       
     }).finally(() => {
-      console.log('finally')
+      console.log('finally');
        setAuthRegisterOn(true);
     });
   };
-  
+    
-  
   useEffect(() => {
     checkBottomBannerOpen();
     checkAuthRegisterOpen();
@@ -92,6 +92,9 @@ export const HomePage = () => {
               <>
                 <FavoriteWrapper
                   usingType='home'
+                  editMode={ homeEditMode }
+                  setEditMode={ setHomeEditMode }
+                  key={ homeReloadKey }
                 ></FavoriteWrapper>
                 <DayStatusBox></DayStatusBox>
               </>
@@ -109,6 +112,9 @@ export const HomePage = () => {
           authRegisterOn={ authRegisterOn }
         ></AuthRegister>
       }
+      { (!!homeEditMode) && 
+        <HiddenPage></HiddenPage>
+      }
     </>
   );
 };

src/shared/ui/assets/css/style-fix.css

@@ -88,7 +88,9 @@ main {
 .billing-label{
   width: 85px;
 }
-
+.full-menu-container{
+  padding-top: 234px;
+}
 .full-menu-header{
   position: fixed;
   z-index: 20;
@@ -117,8 +119,8 @@ main {
 }
 
 .full-menu-list{
-  position: absolute;
+  position: relative;
-  top: calc(234px + env(safe-area-inset-top));
+  top: calc(env(safe-area-inset-top));
   margin-top: 0;
   width: 100%;
 }

src/shared/ui/menu/index.tsx

@@ -8,6 +8,7 @@ import { useStore } from '@/shared/model/store';
 import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants, MenuItems } from '@/entities/common/model/constant';
 import { useEffect, useRef, useState } from 'react';
 import { useLocation } from 'react-router';
+import { setHomeReloadKey } from '@/pages/home/home-page';
 
 export interface MenuProps {
   menuOn: boolean;
@@ -49,6 +50,9 @@ export const Menu = ({
     }
     else{
       setMenuOn(false);
+      if(location.pathname === PATHS.home){
+        setHomeReloadKey();
+      }
     }
   };
   
@@ -86,6 +90,12 @@ export const Menu = ({
   useEffect(() => {
     shortBtnsSetting();
   }, []);
+
+  useEffect(() => {
+    if(favoriteEdit){
+      setEditMode(favoriteEdit)
+    }
+  },[favoriteEdit]);
   
   return (
     <>

src/widgets/navigation/footer.tsx

@@ -114,8 +114,7 @@ export const FooterNavigation = ({
           setIsFooterOn(true);
         }
       };
-    };
+    };    
-    
     
     window.addEventListener('touchstart', handleTouchStart);
     window.addEventListener('touchmove', handleTouchMove);
@@ -130,7 +129,7 @@ export const FooterNavigation = ({
     <>
       { isFooterOn && 
         <nav className="bottom-tabbar">
-          { getFooterButtonItems() }
+        { getFooterButtonItems() }
         </nav>
       }
     </>

src/widgets/navigation/header.tsx

@@ -49,7 +49,9 @@ export const HeaderNavigation = ({
     let mids = useStore.getState().UserStore.selectOptionsMids;
     setSelectOptions(mids);
   }, []);
-  
+  useEffect(() => {
+    console.log('menuOn : ', menuOn)
+  }, [menuOn])
   return (
     <>
       {
@@ -95,8 +97,8 @@ export const HeaderNavigation = ({
               </button>
               {
               /*
-              <button className="header-btn profile-btn" id="profileBtn">
+              <button className="header-btn profile-btn">
-                  <span className="profile-icon">👤</span>
+                <span className="profile-icon">👤</span>
               </button>
               */
               }