첫 커밋

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

@@ -0,0 +1,60 @@
+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'
+
+
+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: '정산달력'}
+  ];
+
+  const itemAdd = {
+    img: IMAGE_ROOT + '/ico_menu_plus.svg',
+    text: '편집하기'
+  };
+
+  const getItems = () => {
+    let rs = [];
+    for(let i=0;i<items.length;i++){
+      let img = items[i]?.img;
+      let text = items[i]?.text;
+      let key = 'slide-key-'+i;
+      rs.push(
+        <SwiperSlide
+          key={ key }
+        >
+          <FavoriteItem 
+            img={ img } 
+            text={ text }
+          ></FavoriteItem>
+        </SwiperSlide>
+      );
+    }
+    
+    return rs;
+  };
+
+  return (
+    <>
+      <Swiper 
+        spaceBetween={9}
+        slidesPerView={4}
+        onSlideChange={() => console.log('slide change')}
+      >
+        { getItems() }
+        <SwiperSlide>
+          <FavoriteItem
+            img={ itemAdd.img }
+            text={ itemAdd.text }
+          ></FavoriteItem>
+        </SwiperSlide>
+      </Swiper>
+    </>
+  );
+};