작업중

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

@@ -1,56 +1,98 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import { IMAGE_ROOT } from '@/shared/constants/common';
-import { FavoriteItem } from './favorite-item';
-import { FavoriteItemProps } from '../model/types'
+import { UserFavorite } from '@/entities/user/model/types';
+import { useStore } from '@/shared/model/store';
 
+/*
+const items: Array<UserFavorite> = [
+  {img: IMAGE_ROOT + '/ico_menu_01.svg', title: '지급대행'},
+  {img: IMAGE_ROOT + '/ico_menu_02.svg', title: '거래내역조회'},
+  {img: IMAGE_ROOT + '/ico_menu_03.svg', title: '정산달력'},
+  {img: IMAGE_ROOT + '/ico_menu_02.svg', title: '거래내역조회'},
+  {img: IMAGE_ROOT + '/ico_menu_03.svg', title: '정산달력'}
+];
+*/
+export interface FavoriteWrapperProps {
+  usingType: 'home' | 'menu'
+};
 
-export const FavoriteWrapper = () => {
-  const items: Array<FavoriteItemProps> = [
-    {img: IMAGE_ROOT + '/ico_menu_01.svg', text: '지급대행'},
-    {img: IMAGE_ROOT + '/ico_menu_02.svg', text: '거래내역조회'},
-    {img: IMAGE_ROOT + '/ico_menu_03.svg', text: '정산달력'},
-    {img: IMAGE_ROOT + '/ico_menu_02.svg', text: '거래내역조회'},
-    {img: IMAGE_ROOT + '/ico_menu_03.svg', text: '정산달력'}
-  ];
+export const FavoriteWrapper = ({
+  usingType
+}: FavoriteWrapperProps) => {
+  const { navigate } = useNavigate();
 
-  const itemAdd = {
+  const [edit, setEdit] = useState<boolean>(false);
+  const [favoriteItems, setFavoriteItems] = useState<Array<UserFavorite>>([]);
+  
+
+  const itemAdd: UserFavorite = {
     img: IMAGE_ROOT + '/ico_menu_plus.svg',
-    text: '편집하기'
+    title: '편집하기'
+  };
+  
+  const onClickToFavoriteEdit = () => {
+    setEdit(true);
   };
 
-  const getItems = () => {
+  //useSetFavoriteEdit(true);
+  //useSetMenuOn(true);
+
+  const onClickToNavigate = (path?: string) => {
+    if(!!path){
+      navigate(path);
+    }
+  };
+
+  const getFavoriteItems = () => {
     let rs = [];
-    for(let i=0;i<items.length;i++){
+    for(let i=0;i<favoriteItems.length;i++){
       rs.push(
-        <SwiperSlide
-          key={ 'slide-key-'+i }
-        >
-          <FavoriteItem 
-            img={ items[i]?.img } 
-            text={ items[i]?.text }
-          ></FavoriteItem>
+        <SwiperSlide key={ `favorite-slide-key-${i}` }>
+          <div 
+            className="swiper-item"
+            onClick={ () => onClickToNavigate(favoriteItems[i]?.path) } 
+          >
+            <div className="swiper-icon coin-icon">
+              <img 
+                src={ favoriteItems[i]?.img } 
+                alt={ favoriteItems[i]?.title } 
+              />
+            </div>
+            <span className="swiper-text">{ favoriteItems[i]?.title }</span>
+          </div>
         </SwiperSlide>
       );
     }
     
+    rs.push(
+      <SwiperSlide key={ `favorite-item-add-slide-key` }>
+        <div 
+          className="swiper-item"
+          onClick={ onClickToFavoriteEdit }
+        >
+          <div className="swiper-icon coin-icon">
+            <img 
+              src={ itemAdd.img } 
+              alt={ itemAdd.title } 
+            />
+          </div>
+          <span className="swiper-text">{ itemAdd.title }</span>
+        </div>
+      </SwiperSlide>
+    );
+    
     return rs;
   };
 
   return (
     <>
       <Swiper 
-        spaceBetween={9}
-        slidesPerView={4}
-      >
-        { getItems() }
-        <SwiperSlide>
-          <FavoriteItem
-            img={ itemAdd.img }
-            text={ itemAdd.text }
-          ></FavoriteItem>
-        </SwiperSlide>
-      </Swiper>
+        spaceBetween={ 9 }
+        slidesPerView={ 4 }
+      >{ getFavoriteItems() }</Swiper>
     </>
   );
 };