Feat/main

package.json

@@ -11,6 +11,8 @@
     "react-icons": "^4.8.0",
     "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "^1.8.1",
     "styled-components": "^6.0.0-rc.1",
     "web-vitals": "^2.1.0"
   },

src/App.js

@@ -3,6 +3,10 @@ import Main from "./pages/Main";
 import NotFound from "./pages/NotFound";
 import Login from "./pages/Login";
 import SignUP from "./pages/SignUp";
+import Rank from "./pages/Rank";
+import Mens from "./pages/Mans/index";
+import Girls from "./pages/Grils";
+import Brand from "./pages/Brand";
 
 function App() {
   return (
@@ -12,6 +16,10 @@ function App() {
         <Route path="/*" element={<NotFound />}/>
         <Route path="/login" element={<Login />} />
         <Route path="/join" element={<SignUP />}/>
+        <Route path="/rank" element={<Rank />} />
+        <Route path="/mens" element={<Mens />} />
+        <Route path="/girls" element={<Girls />} />
+        <Route path="/brand" element={<Brand />} />
       </Routes>
     </BrowserRouter>
   );

src/components/Header/index.jsx

@@ -28,7 +28,7 @@ const Header = () => {
                 <S.Tab_Name currentSlider={location.pathname === "/rank"}><Link to="/rank">랭킹</Link></S.Tab_Name>
                 <S.Tab_Name currentSlider={location.pathname === "/mens"}><Link to="/mens">남성</Link></S.Tab_Name>
                 <S.Tab_Name currentSlider={location.pathname === "/girls"}><Link to="/girls">여성</Link></S.Tab_Name>
-                <S.Tab_Name currentSlider={location.pathname === "/brand"}><Link to="/brand">브랜드</Link></S.Tab_Name>
+                <S.Tab_Name currentSlider={location.pathname === "/brand"}><Link to="/brand">발견</Link></S.Tab_Name>
             </S.Tabs>
         </S.Container>
     )

src/components/Product/index.jsx

@@ -4,10 +4,12 @@ const Product = (props) => {
     console.log(props.color)
     return (
         <S.Container>
-            <S.ProductImg image={props.image}></S.ProductImg>
+            <S.ProductImg image={props.image}>
+                {props.rank ? <S.Rank>{props.rank}</S.Rank> : <></>}
+            </S.ProductImg>
             <S.ProductTitle>{props.brand}</S.ProductTitle>
             <S.ProductSubTittle>{props.name}</S.ProductSubTittle>
-            <S.ProductPrice>{props.price}원</S.ProductPrice>
+            <S.ProductPrice>{props.price ? `${props.price}원` : "-"}</S.ProductPrice>
             <S.RightNow>즉시 구매가</S.RightNow>
         </S.Container>
     );

src/components/Product/style.jsx

@@ -9,6 +9,8 @@ export const Container = styled.div`
 export const ProductImg = styled.div`
     width: 100%;
     height: 294px;
+    padding: 8px;
+    box-sizing: border-box;
     border-radius: 8px;
     background-image: url(${props => props.image});
     background-size: cover;
@@ -49,4 +51,15 @@ export const RightNow = styled.p`
     font-size: 11px;
     color: rgba(34,34,34,.5);
     margin-top: 2px;
+`
+
+export const Rank = styled.div`
+    width: 26px;
+    height: 26px;
+    background-color: rgb(100, 106, 118);
+    color: rgb(255, 255, 255);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
 `

src/components/Slider/index.jsx

@@ -1,11 +1,67 @@
-import * as S from "./style";
-
-const Slider = () => {
+import React from "react";
+import styled from "styled-components";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import dummy from "../../dummy";
 
+const MainSlider = () => {
+  const settings = {
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    autoplay: true,
+    autoplaySpeed: 4000,
+    arrows: true,
+    fade: true,
+    prevArrow: <PrevArrow src="images/prevArrow.png" alt="PREVARROW" />,
+    nextArrow: <NextArrow src="images/nextArrow.png" alt="NEXTARROW" />,
+  };
   return (
-    <S.ImgArea>
-    </S.ImgArea>
+    <Slider {...settings}>
+      {dummy.map((o) => (
+        <Indexing key={o.id} color={o.color}>
+          <SlideImg src={o.src} alt={`MAINSLIDEIMG${o.id}`} />
+        </Indexing>
+      ))}
+    </Slider>
   );
 };
 
-export default Slider;
+const PrevArrow = styled.img`
+  height: 40px;
+  position: absolute;
+  top: 50%;
+  left: 20px;
+  transform: translateY(-50%);
+  z-index: 2;
+  cursor: pointer;
+`;
+
+const NextArrow = styled.img`
+  height: 40px;
+  position: absolute;
+  top: 50%;
+  right: 20px;
+  transform: translateY(-50%);
+  cursor: pointer;
+`;
+
+const Indexing = styled.div`
+  /* width: 100%; */
+  height: 480px;
+  /* overflow: hidden; */
+  display: flex;
+  justify-content: center;
+  background-color: ${(props) => props.color};
+`;
+
+const SlideImg = styled.img`
+  object-fit: cover;
+  max-width: 100%;
+  margin: 0 auto;
+  height: 100%;
+  /* width: 100%; */
+`;
+
+export default MainSlider;

src/data/product.js

@@ -16,6 +16,15 @@ import popular06 from "../assets/popular/popular06.webp"
 import popular07 from "../assets/popular/popular07.webp"
 import popular08 from "../assets/popular/popular08.webp"
 
+import new01 from "../assets/newIn/new01.webp"
+import new02 from "../assets/newIn/new02.webp"
+import new03 from "../assets/newIn/new03.webp"
+import new04 from "../assets/newIn/new04.webp"
+import new05 from "../assets/newIn/new05.webp"
+import new06 from "../assets/newIn/new06.webp"
+import new07 from "../assets/newIn/new07.webp"
+import new08 from "../assets/newIn/new08.webp"
+
 export const productData = [
     {
         image: product01,
@@ -133,4 +142,54 @@ export const popularData = [
       name: "Nike V2K Run Summit White Metallic Silver",
       price: "178,000",
     },
-  ];
+  ];
+
+export const newInData = [
+  {
+    image: new01,
+    brand: "Jansport",
+    name: "Jansport Half Pint Mini Backpack Loden Frost",
+    price: "73,000"
+  },
+  {
+    image: new02,
+    brand: "Baracuta",
+    name: "Baracuta G9 Harrington Jacket Natural",
+    price: "359,000"
+  },
+  {
+    image: new03,
+    brand: "Laarvee",
+    name: "Laarvee PEA001 Sliver Precision Steel Black Bezel Black Dial",
+    price: "2,100,000"
+  },
+  {
+    image: new04,
+    brand: "The Museum Visitor",
+    name: "[Pre-Order] The Museum Visitor Star Damaged Denim Half Shirts Light Blue",
+    price: "184,500"
+  },
+  {
+    image: new05,
+    brand: "Salomon",
+    name: "Salomon Trailblazer 20 Black",
+    price: "95,000"
+  },
+  {
+    image: new06,
+    brand: "Hysteric Glamour",
+    name: "Hysteric Glamour x P.A.M Alien Girl Mesh Cap Black",
+  },
+  {
+    image: new07,
+    brand: "Damiani",
+    name: "Damiani Belle Epoque Diamonds Necklace White Gold",
+    price: "9,690,000"
+  },
+  {
+    image: new08,
+    brand: "Bulgari",
+    name: "Bulgari Divas Dream Necklace Rose Gold Mother of Pearl Diamond",
+    price: "2,849,000"
+  },
+]

src/dummy.js

@@ -0,0 +1,14 @@
+const dummy = [
+    { src: "../../assets/mainSliderImg/mainSlideImg1.png", id: 1, color: "#DEDEDE" },
+    { src: "../../assets/mainSliderImg/mainSlideImg2.png", id: 2, color: "#7E98D5" },
+    { src: "../../assets/mainSliderImg/mainSlideImg3.png", id: 3, color: "#D5AE3B" },
+    { src: "../../assets/mainSliderImg/mainSlideImg4.png", id: 4, color: "#FBF2E9" },
+    { src: "../../assets/mainSliderImg/mainSlideImg5.png", id: 5, color: "#FCF8EA" },
+    { src: "../../assets/mainSliderImg/mainSlideImg6.png", id: 6, color: "#C0C0C0" },
+    { src: "../../assets/mainSliderImg/mainSlideImg7.png", id: 7, color: "#CDCBBD" },
+    { src: "../../assets/mainSliderImg/mainSlideImg8.png", id: 8, color: "#E2F050" },
+    { src: "../../assets/mainSliderImg/mainSlideImg9.png", id: 9, color: "#262626" },
+    { src: "../../assets/mainSliderImg/mainSlideImg10.png", id: 10, color: "#262626" },
+  ];
+
+  export default dummy;

src/pages/Brand/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Header from '../../components/Header';
+import * as H from "../Main/style"
+
+const Brand = () => {
+    return (
+        <div>
+            <Header />
+            <H.Container>
+
+            </H.Container>
+        </div>
+    );
+};
+
+export default Brand;

src/pages/Grils/index.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Header from '../../components/Header';
+
+const Girls = () => {
+    return (
+        <div>
+            <Header />
+        </div>
+    );
+};
+
+export default Girls;