Merge branch 'main' into feature/payment-Func

fullminji · Nov 1, 2023 · c0b43bf · c0b43bf
2 parents d0de6c0 + b4dbcf1
commit c0b43bf
Show file tree

Hide file tree

Showing 50 changed files with 1,145 additions and 160 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -6,5 +6,5 @@
     "source.fixAll.eslint": true
   },
   "javascript.format.enable": false,
-  "files.autoSave": "onFocusChange"
+  "files.autoSave": "afterDelay"
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
     "sass": "^1.69.4",
+    "swiper": "^11.0.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/public/data/menu.json b/public/data/menu.json
@@ -0,0 +1,7 @@
+{
+  "menu": [
+    { "id": 1, "name": "창작적", "subType": "creative" },
+    { "id": 2, "name": "수집성", "subType": "collection" },
+    { "id": 3, "name": "종합적", "subType": "basic" }
+  ]
+}
diff --git a/public/data/slideList.json b/public/data/slideList.json
@@ -0,0 +1,260 @@
+{
+  "newProducts": [
+    {
+      "id": 27,
+      "name": "신상품 패브릭아트",
+      "price": 24000,
+      "image": "https://images.unsplash.com/photo-1615486363990-dff6c0722a38?auto=format&fit=crop&q=80&w=2787&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "content": "아름다운 패브릭 아트 작품을 만들 수 있는 키트입니다.",
+      "top_category_id": 1,
+      "bottom_category_id": 2,
+      "delete_status": 0,
+      "created_at": "2023-10-26T08:50:00.000Z",
+      "sales": 45
+    },
+    {
+      "id": 26,
+      "name": "패브릭 아트 DIY",
+      "price": 24000,
+      "image": "https://images.unsplash.com/photo-1615486363973-f79d875780cf?auto=format&fit=crop&q=80&w=2786&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "content": "아름다운 패브릭 아트 작품을 만들 수 있는 키트입니다.",
+      "top_category_id": 1,
+      "bottom_category_id": 2,
+      "delete_status": 0,
+      "created_at": "2023-10-26T08:50:00.000Z",
+      "sales": 45
+    },
+    {
+      "id": 25,
+      "name": "패브릭 아트 DIY",
+      "price": 24000,
+      "image": "https://images.unsplash.com/photo-1557677514-666eb39d6d23?auto=format&fit=crop&q=80&w=2874&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "content": "아름다운 패브릭 아트 작품을 만들 수 있는 키트입니다.",
+      "top_category_id": 1,
+      "bottom_category_id": 2,
+      "delete_status": 0,
+      "created_at": "2023-10-26T08:50:00.000Z",
+      "sales": 45
+    },
+    {
+      "id": 24,
+      "name": "패브릭 아트 DIY",
+      "price": 24000,
+      "image": "https://images.unsplash.com/photo-1619798049549-a23f03c1e8d1?auto=format&fit=crop&q=80&w=2864&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "content": "아름다운 패브릭 아트 작품을 만들 수 있는 키트입니다.",
+      "top_category_id": 1,
+      "bottom_category_id": 2,
+      "delete_status": 0,
+      "created_at": "2023-10-26T08:50:00.000Z",
+      "sales": 45
+    },
+    {
+      "id": 23,
+      "name": "패브릭 아트 DIY",
+      "price": 24000,
+      "image": "https://images.unsplash.com/photo-1595756553598-0c1c8cd044e8?auto=format&fit=crop&q=80&w=2877&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "content": "아름다운 패브릭 아트 작품을 만들 수 있는 키트입니다.",
+      "top_category_id": 1,
+      "bottom_category_id": 2,
+      "delete_status": 0,
+      "created_at": "2023-10-26T08:50:00.000Z",
+      "sales": 45
+    },
+    {
+      "id": 21,
+      "name": "패브릭 아트 DIY",
+      "price": 24000,
+      "image": "https://images.unsplash.com/photo-1577547078777-ff1088d792b1?auto=format&fit=crop&q=80&w=2787&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "content": "아름다운 패브릭 아트 작품을 만들 수 있는 키트입니다.",
+      "top_category_id": 1,
+      "bottom_category_id": 2,
+      "delete_status": 0,
+      "created_at": "2023-10-26T08:50:00.000Z",
+      "sales": 45
+    }
+  ],
+  "mdRecommendation": [
+    {
+      "id": 12,
+      "name": "MD추천 스티커 디자인 북",
+      "price": 14000,
+      "image": "https://images.unsplash.com/photo-1613592370120-bb4dee6eca1b?auto=format&fit=crop&q=80&w=2825&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "content": "DIY 스티커의 디자인을 담은 북입니다.",
+      "top_category_id": 2,
+      "bottom_category_id": 4,
+      "delete_status": 0,
+      "created_at": "2023-10-26T08:49:53.000Z",
+      "sales": 23
+    },
+    {
+      "id": 13,
+      "name": "미니 피규어 세트",
+      "price": 28000,
+      "image": "https://images.unsplash.com/photo-1569966175608-8de1e16e23dd?auto=format&fit=crop&q=80&w=2875&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "content": "다양한 디자인의 미니 피규어를 만들 수 있습니다.",
+      "top_category_id": 2,
+      "bottom_category_id": 5,
+      "delete_status": 0,
+      "created_at": "2023-10-26T08:49:53.000Z",
+      "sales": 34
+    },
+    {
+      "id": 14,
+      "name": "커스텀 스티커 세트",
+      "price": 11000,
+      "image": "https://images.unsplash.com/photo-1615227233206-385e97c8d111?auto=format&fit=crop&q=80&w=2787&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "content": "스티커를 커스터마이징하여 만들 수 있는 세트입니다.",
+      "top_category_id": 2,
+      "bottom_category_id": 4,
+      "delete_status": 0,
+      "created_at": "2023-10-26T08:49:57.000Z",
+      "sales": 12
+    },
+    {
+      "id": 15,
+      "name": "DIY 액션 피규어",
+      "price": 37000,
+      "image": "https://images.unsplash.com/photo-1602267774924-38124c047174?auto=format&fit=crop&q=80&w=2940&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "content": "다양한 부품으로 액션 피규어를 만들 수 있습니다.",
+      "top_category_id": 2,
+      "bottom_category_id": 5,
+      "delete_status": 0,
+      "created_at": "2023-10-26T08:49:57.000Z",
+      "sales": 23
+    },
+    {
+      "id": 17,
+      "name": "패브릭 아트 DIY",
+      "price": 24000,
+      "image": "https://images.unsplash.com/photo-1534702795526-bab4dfcad657?auto=format&fit=crop&q=80&w=2940&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "content": "아름다운 패브릭 아트 작품을 만들 수 있는 키트입니다.",
+      "top_category_id": 1,
+      "bottom_category_id": 2,
+      "delete_status": 0,
+      "created_at": "2023-10-26T08:50:00.000Z",
+      "sales": 45
+    },
+    {
+      "id": 18,
+      "name": "DIY 캐릭터 포스터",
+      "price": 15000,
+      "image": "https://images.unsplash.com/photo-1471943311424-646960669fbc?auto=format&fit=crop&q=80&w=2848&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "content": "가장 좋아하는 캐릭터의 포스터를 디자인해보세요.",
+      "top_category_id": 2,
+      "bottom_category_id": 3,
+      "delete_status": 0,
+      "created_at": "2023-10-26T08:50:00.000Z",
+      "sales": 56
+    },
+    {
+      "id": 19,
+      "name": "스티커 컬렉션 북",
+      "price": 13000,
+      "image": "https://images.unsplash.com/photo-1607346705575-8bb4fffec3e7?auto=format&fit=crop&q=80&w=2940&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "content": "스티커 컬렉션을 저장하고 디스플레이할 수 있는 북입니다.",
+      "top_category_id": 2,
+      "bottom_category_id": 4,
+      "delete_status": 0,
+      "created_at": "2023-10-26T08:50:00.000Z",
+      "sales": 67
+    }
+  ],
+  "bestProducts": [
+    {
+      "id": 12,
+      "name": "베스트상품 패브릭 벽걸이 DIY",
+      "price": 22000,
+      "image": "https://images.unsplash.com/photo-1521217144314-9ee2822b8487?auto=format&fit=crop&q=80&w=2787&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "content": "아름다운 패브릭 벽걸이를 만들 수 있는 DIY 키트입니다.",
+      "top_category_id": 1,
+      "bottom_category_id": 2,
+      "delete_status": 0,
+      "created_at": "2023-10-26T08:49:48.000Z",
+      "sales": 78
+    },
+    {
+      "id": 10,
+      "name": "베스트상품 DIY 테이블 키트",
+      "price": 48000,
+      "image": "https://images.unsplash.com/photo-1588676000557-dc67e2d3bd19?auto=format&fit=crop&q=80&w=2874&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "content": "이 키트로 나만의 테이블을 디자인하고 만들어보세요.",
+      "top_category_id": 1,
+      "bottom_category_id": 1,
+      "delete_status": 0,
+      "created_at": "2023-10-26T08:49:48.000Z",
+      "sales": 67
+    },
+    {
+      "id": 11,
+      "name": "베스트상품 패브릭 벽걸이 DIY",
+      "price": 22000,
+      "image": "https://images.unsplash.com/photo-1590079130852-0d203eb4829b?auto=format&fit=crop&q=80&w=2788&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "content": "아름다운 패브릭 벽걸이를 만들 수 있는 DIY 키트입니다.",
+      "top_category_id": 1,
+      "bottom_category_id": 2,
+      "delete_status": 0,
+      "created_at": "2023-10-26T08:49:48.000Z",
+      "sales": 78
+    },
+    {
+      "id": 9,
+      "name": "DIY 테이블 키트",
+      "price": 48000,
+      "image": "https://images.unsplash.com/photo-1591894435695-2f96f1314f42?auto=format&fit=crop&q=80&w=2832&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "content": "이 키트로 나만의 테이블을 디자인하고 만들어보세요.",
+      "top_category_id": 1,
+      "bottom_category_id": 1,
+      "delete_status": 0,
+      "created_at": "2023-10-26T08:49:48.000Z",
+      "sales": 67
+    },
+    {
+      "id": 20,
+      "name": "베스트상품 패브릭 벽걸이 DIY",
+      "price": 22000,
+      "image": "https://images.unsplash.com/photo-1551978245-67f1c131ac55?auto=format&fit=crop&q=80&w=2854&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "content": "아름다운 패브릭 벽걸이를 만들 수 있는 DIY 키트입니다.",
+      "top_category_id": 1,
+      "bottom_category_id": 2,
+      "delete_status": 0,
+      "created_at": "2023-10-26T08:49:48.000Z",
+      "sales": 78
+    },
+    {
+      "id": 7,
+      "name": "DIY 테이블 키트",
+      "price": 48000,
+      "image": "https://images.unsplash.com/photo-1513887100517-bbc2903388fd?auto=format&fit=crop&q=80&w=2946&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "content": "이 키트로 나만의 테이블을 디자인하고 만들어보세요.",
+      "top_category_id": 1,
+      "bottom_category_id": 1,
+      "delete_status": 0,
+      "created_at": "2023-10-26T08:49:48.000Z",
+      "sales": 67
+    },
+    {
+      "id": 8,
+      "name": "베스트상품 패브릭 벽걸이 DIY",
+      "price": 22000,
+      "image": "https://images.unsplash.com/photo-1582821798669-6d5887b6936e?auto=format&fit=crop&q=80&w=2944&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "content": "아름다운 패브릭 벽걸이를 만들 수 있는 DIY 키트입니다.",
+      "top_category_id": 1,
+      "bottom_category_id": 2,
+      "delete_status": 0,
+      "created_at": "2023-10-26T08:49:48.000Z",
+      "sales": 78
+    },
+    {
+      "id": 6,
+      "name": "DIY 테이블 키트",
+      "price": 48000,
+      "image": "https://images.unsplash.com/photo-1613302152423-33a13f12756f?auto=format&fit=crop&q=80&w=2948&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "content": "이 키트로 나만의 테이블을 디자인하고 만들어보세요.",
+      "top_category_id": 1,
+      "bottom_category_id": 1,
+      "delete_status": 0,
+      "created_at": "2023-10-26T08:49:48.000Z",
+      "sales": 67
+    }
+  ]
+}
diff --git a/public/images/icon_basic.svg b/public/images/icon_basic.svg
diff --git a/public/images/icon_collection.svg b/public/images/icon_collection.svg
diff --git a/public/images/icon_creative.svg b/public/images/icon_creative.svg
diff --git a/public/images/icon_star.svg b/public/images/icon_star.svg
diff --git a/public/images/sampleIcon.png b/public/images/sampleIcon.png
diff --git a/sampleIcon.png b/sampleIcon.png
diff --git a/src/Router.jsx b/src/Router.jsx
@@ -10,6 +10,7 @@ import Detail from './pages/Detail/Detail';
 import Main from './pages/Main/Main';
 import PayComplete from './pages/PayComplete/PayComplete';
 import Payment from './pages/Payment/Payment';
+import FindPW from './pages/FindPW/FindPW';
 
 const Router = () => {
   return (
@@ -18,6 +19,7 @@ const Router = () => {
         <Nav />
         <Routes>
           <Route path="/" element={<Login />} />
+          <Route path="/findpw" element={<FindPW />} />
           <Route path="/cart" element={<Cart />} />
           <Route path="/delivery" element={<Delivery />} />
           <Route path="/detail/:productId" element={<Detail />} />

diff --git a/src/components/Carousel/Carousel.jsx b/src/components/Carousel/Carousel.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, A11y } from 'swiper/modules';
+import ProductCard from '../ProductCard/ProductCard';
+import PrevBtn from './PrevBtn';
+import NextBtn from './NextBtn';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import './Carousel.scss';
+
+const Carousel = ({ slideList, spaceBetween, slidesPerView, loop }) => {
+  return (
+    <div className="carousel">
+      <Swiper
+        modules={[Autoplay, A11y]}
+        spaceBetween={spaceBetween}
+        slidesPerView={slidesPerView}
+        loop={loop}
+        autoplay={{
+          delay: 3000,
+          disableOnInteraction: false,
+        }}
+      >
+        {slideList?.map(list => (
+          <SwiperSlide key={`slideLIst${list.id}`}>
+            <ProductCard
+              src={list.image}
+              title={list.name}
+              price={list.price}
+              score={list.score}
+              commentCount={list.commentCount}
+              content={list.content}
+            />
+          </SwiperSlide>
+        ))}
+        <div className="btnWrapper">
+          <PrevBtn />
+          <NextBtn />
+        </div>
+      </Swiper>
+    </div>
+  );
+};
+
+export default Carousel;