Merge pull request #26 from ha3158987/team19/25

슬라이드 API 데이터 동기화 + 모든 카테고리 보기 기능 구현
ha3158987 · Apr 29, 2021 · ed90c4d · ed90c4d
2 parents 732e74f + 3be4a7c
commit ed90c4d
Show file tree

Hide file tree

Showing 23 changed files with 460 additions and 478 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,19 +1,16 @@
 import Header from "./component/header/Header.jsx";
 import Main from "./component/main/Main.jsx";
 import GlobalStyle from "./common/style.js";
-import { ContextProvider } from './component/Context.jsx';
-import { DJSlider } from './component/util/dj-slider/DJSlider';
+import { ContextProvider } from "./component/Context.jsx";
 
 function App() {
   return (
     <ContextProvider>
       <GlobalStyle />
       <Header />
       <Main />
-      <DJSlider />
     </ContextProvider>
   );
 }
 
-
 export default App;
diff --git a/src/common/util.js b/src/common/util.js
@@ -0,0 +1 @@
+export const addCommaToNumber = (number) => number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
diff --git a/src/component/Context.jsx b/src/component/Context.jsx
@@ -1,29 +1,51 @@
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 import API from "../common/api.js";
 
 const DetailDataContext = createContext();
 const PopUpToggleContext = createContext();
 const OnFetchDetailDataContext = createContext();
 const SetPopUpToggleContext = createContext();
+const MainItemsContext = createContext();
+const MainItemsActiveContext = createContext();
+const SetMainItemsActiveContext = createContext();
 
 export function ContextProvider({ children }) {
   const [detailData, setDetailData] = useState(null);
   const [popUpToggle, setPopUpToggle] = useState(false);
+  const [mainItems, setMainItems] = useState(null);
+  const [mainItemsActive, setMainItemsActive] = useState(false);
 
-  const onFetchDetailData = async (id) => {
+  useEffect(() => {
+    if (!mainItems) {
+      (async () => {
+        const data = await API("/main");
+        setMainItems(data); // 8, 5, 4
+      })();
+    }
+    return;
+  }, [mainItems]);
+
+  const onFetchDetailData = async (id) => { 
     const data = await API(`/detail/${id}`);
     if(data) {
       setDetailData(data);
-      setPopUpToggle(!popUpToggle);
+      setPopUpToggle(true);
     }
   }
 
+  // if(!mainItems) return null;
   return (
     <DetailDataContext.Provider value={detailData}>
       <OnFetchDetailDataContext.Provider value={onFetchDetailData}>
         <PopUpToggleContext.Provider value={popUpToggle}>
           <SetPopUpToggleContext.Provider value={setPopUpToggle}>
-            {children}
+            <MainItemsContext.Provider value={mainItems}>
+              <MainItemsActiveContext.Provider value={mainItemsActive}>
+                <SetMainItemsActiveContext.Provider value={setMainItemsActive}>
+                  {children}
+                </SetMainItemsActiveContext.Provider>
+              </MainItemsActiveContext.Provider>
+            </MainItemsContext.Provider>
           </SetPopUpToggleContext.Provider>
         </PopUpToggleContext.Provider>
       </OnFetchDetailDataContext.Provider>
@@ -46,3 +68,15 @@ export function usePopUpToggleContext() {
 export function useSetPopUpToggleContext() {
   return useContext(SetPopUpToggleContext);
 }
+
+export function useMainItemsContext() {
+  return useContext(MainItemsContext);
+}
+
+export function useMainItemsActiveContext() {
+  return useContext(MainItemsActiveContext);
+}
+
+export function useSetMainItemsActiveContext() {
+  return useContext(SetMainItemsActiveContext);
+}
diff --git a/src/component/main/Main.jsx b/src/component/main/Main.jsx
@@ -1,14 +1,84 @@
+import { useEffect, useState } from "react";
 import BestTab from "./bestTab/BestTab.jsx";
 import PopUpContainer from "./popUp/PopUpContainer.jsx";
 import ShowMoreBtn from "./ShowMoreBtn.jsx";
-import SlideContainer from "./slideContainer/SlideContainer.jsx";
+import API from "../../common/api.js";
+import { DicoJsonCarousel } from "../util/dj-slider/DicoJsonCarousel.jsx";
+import ItemCard from "../util/ItemCard";
+import styled from "styled-components";
+
+import {
+  useMainItemsContext,
+  useMainItemsActiveContext,
+  useSetMainItemsActiveContext
+} from "../Context";
+
+const CarouselContainer = styled.div`
+  margin-bottom: 5rem;
+`;
 
 export default function Main() {
+  const mainItems = useMainItemsContext();
+  const active = useMainItemsActiveContext();
+  const setActive = useSetMainItemsActiveContext();
+
+  const onShowMoreItems = () => {
+    setActive(true);
+  }
+  const getSalePrice = (price, discountRate) => {
+    return price - price * (discountRate / 100);
+  };
+  if(!mainItems) return null;
   return (
     <>
       <BestTab/>
-      <SlideContainer/>
-      <ShowMoreBtn />
+        {
+          active 
+          ? (mainItems.map(mainItem => 
+              <CarouselContainer>
+                <h2>{mainItem.title}</h2>
+                <DicoJsonCarousel>
+                  {
+                    mainItem.childs.map((item, idx) => 
+                      <ItemCard
+                        src={item.main_image}
+                        title={item.title}
+                        description={item.description}
+                        salePrice={getSalePrice(item.price, item.discount)}
+                        normalPrice={item.price}
+                        labels={item.label}
+                        key={idx}
+                        id={item._id}
+                      />
+                    )
+                  }
+                </DicoJsonCarousel>
+              </CarouselContainer>
+            )) 
+          :
+            (
+              <CarouselContainer>
+                <h2>{mainItems[0].title}</h2>
+                <DicoJsonCarousel>
+                  {
+                    mainItems[0].childs.map((item, idx) => 
+                      <ItemCard
+                        src={item.main_image}
+                        title={item.title}
+                        description={item.description}
+                        salePrice={getSalePrice(item.price, item.discount)}
+                        normalPrice={item.price}
+                        labels={item.label}
+                        key={idx}
+                        id={item._id}
+                      />
+                    )
+                  }
+                </DicoJsonCarousel>
+              </CarouselContainer>
+            )
+        }
+      <ShowMoreBtn active={active} onShowMoreItems={onShowMoreItems}/>
       <PopUpContainer/>
     </>
   );

diff --git a/src/component/main/ShowMoreBtn.jsx b/src/component/main/ShowMoreBtn.jsx
@@ -9,8 +9,9 @@ const ShowMoreBtnStyle = styled.div`
   background-color: #F5F5F7;
   box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.05);
   cursor: pointer;
+  display: ${props => props.active ? 'none' : 'block'};
 `;
 
-export default function ShowMoreBtn() {
-  return <ShowMoreBtnStyle>모든 카테고리 보기</ShowMoreBtnStyle>;
+export default function ShowMoreBtn({ active, onShowMoreItems }) {
+  return <ShowMoreBtnStyle active={active} onClick={onShowMoreItems}>모든 카테고리 보기</ShowMoreBtnStyle>;
 }
diff --git a/src/component/main/bestTab/BestItems.jsx b/src/component/main/bestTab/BestItems.jsx
@@ -34,6 +34,7 @@ export default function BestItems({ childs }) {
           labels={childs[idx].label}
           key={idx}
           id={childs[idx]._id}
+          large={true}
         />
       ))}
     </BestItemsStyle>

diff --git a/src/component/main/popUp/PopUpContainer.jsx b/src/component/main/popUp/PopUpContainer.jsx
@@ -2,6 +2,7 @@ import styled from "styled-components";
 import { FaTimes } from "react-icons/fa";
 import PopUpImages from "./PopUpImages";
 import PopUpInformations from "./PopUpInformations";
+import PopUpItemsSlide from "./PopUpItemsSlide";
 import {
   usePopUpToggleContext,
   useSetPopUpToggleContext,
@@ -24,16 +25,38 @@ const PopUpContainerStyle = styled.div`
     background-color: rgba(0, 0, 0, 0.5);
     z-index: -1;
   }
+  & > div {
+    position: relative;
+    width: 60rem;
+    margin: 6vh auto;
+  }
+  `;
+
+const PopUpContainerBody = styled.div`
+  background-color: #fff;
+  width: 100%;
+  height: 88vh;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 0.875rem;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #cacaca;
+    border-radius: 0.375rem;
+    &:hover {
+      background-color: #b2b2b2;
+    }
+  }
+  &::-webkit-scrollbar-track {
+    background-color: #eee;
+  }
 `;
-
+  
 const PopUpDetailContainerStyle = styled.div`
+  padding: 3rem;
   display: grid;
   grid-template-columns: 24.5rem auto;
-  padding: 3rem;
   grid-gap: 2rem;
-  background-color: #fff;
-  width: 60rem;
-  margin: 6vh auto;
   position: relative;
 `;
 
@@ -44,7 +67,6 @@ const CloseBtnStyle = styled.button`
   right: -2.5rem;
   font-size: 1.25rem;
   cursor: pointer;
-
   &:hover {
     opacity: 1;
   }
@@ -59,13 +81,18 @@ export default function PopUpContainer() {
   if (!toggle) return null;
   return (
     <PopUpContainerStyle>
-      <PopUpDetailContainerStyle>
+      <div>
         <CloseBtnStyle onClick={onClick}>
           <FaTimes></FaTimes>
         </CloseBtnStyle>
-        <PopUpImages />
-        <PopUpInformations />
-      </PopUpDetailContainerStyle>
+        <PopUpContainerBody>
+          <PopUpDetailContainerStyle>
+            <PopUpImages />
+            <PopUpInformations />
+          </PopUpDetailContainerStyle>
+          <PopUpItemsSlide />
+        </PopUpContainerBody>
+      </div>
     </PopUpContainerStyle>
   );
 }
diff --git a/src/component/main/popUp/PopUpImages.jsx b/src/component/main/popUp/PopUpImages.jsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useDetailContext } from "../../Context";
 
 const PopUpImagesStyle = styled.div``;
@@ -34,20 +34,25 @@ export default function PopUpImages() {
   const detailData = useDetailContext();
   const { main_image, thumbnail_images } = detailData;
   const images = [main_image, ...thumbnail_images];
-  const [activeImage, setActiveImage] = useState(images[0]);
+  const [activeIndex, setActiveIndex] = useState(0);
 
   const onChangeMainImage = (idx) => {
-    setActiveImage(images[idx]);
+    setActiveIndex(idx);
   };
 
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [detailData]);
+
   return (
     <PopUpImagesStyle>
-      <PopUpMainImageStyle src={activeImage} />
+      <PopUpMainImageStyle src={images[activeIndex]} />
       <PopUpThumbnailImagesStyle>
         {images.map((URL, idx) => (
           <PopUpThumbnailImageStyle
-            active={activeImage === URL}
+            active={images[activeIndex] === URL}
             src={URL}
+            key={idx}
             onClick={() => onChangeMainImage(idx)}
           />
         ))}

diff --git a/src/component/main/popUp/PopUpInformations.jsx b/src/component/main/popUp/PopUpInformations.jsx
@@ -2,6 +2,7 @@ import styled from "styled-components";
 import Label from "../../util/Label";
 import PopUpItemCountContainer from "./PopUpItemCountContainer";
 import { useDetailContext } from "../../Context";
+import { addCommaToNumber } from '../../../common/util.js';
 
 const PopUpInformationsStyle = styled.div``;
 
@@ -59,42 +60,6 @@ const PopUpItemBuyingInformationContent = styled.div`
   line-height: 1.5rem;
 `;
 
-// const PopUpItemTotalPriceContainer = styled.div`
-//   display: flex;
-//   justify-content: flex-end;
-//   padding: 2rem 0;
-// `;
-
-// const PopUpItemTotalPriceTitle = styled.div`
-//   margin-right: 1.5rem;
-//   color: #828282;
-//   font-size: 1.125rem;
-//   align-self: center;
-// `;
-
-// const PopUpTotalPrice = styled.div`
-//   font-size: 2rem;
-//   font-weight: 600;
-// `;
-
-// const PopUpItemOrderBtn = styled.button`
-//   background-color: #82d32d;
-//   color: #fff;
-//   font-size: 1.125rem;
-//   font-weight: 600;
-//   border-radius: 0.3125rem;
-//   border: 1px solid #82d32d;
-//   padding: 1rem;
-//   text-align: center;
-//   cursor: pointer;
-//   width: 100%;
-//   transition: all 0.2s ease-in-out;
-//   &:hover {
-//     background-color: #fff;
-//     color: #82d32d;
-//   }
-// `;
-
 export default function PopUpInformations() {
   const detailData = useDetailContext();
   const {
@@ -116,9 +81,9 @@ export default function PopUpInformations() {
       <PopUpItemPriceContainer>
         <Label text="이벤트특가" />
         <SalePriceStyle>
-          {Math.floor(price - price * (discount / 100))}원
+          {addCommaToNumber(Math.floor(price - price * (discount / 100)))}원
         </SalePriceStyle>
-        <NormalPriceStyle>{price}원</NormalPriceStyle>
+        <NormalPriceStyle>{addCommaToNumber(price)}원</NormalPriceStyle>
       </PopUpItemPriceContainer>
       <PopUpItemBuyingInformations>
         <PopUpItemBuyingInformation>
@@ -146,7 +111,7 @@ export default function PopUpInformations() {
           </PopUpItemBuyingInformationContent>
         </PopUpItemBuyingInformation>
       </PopUpItemBuyingInformations>
-      <PopUpItemCountContainer price={price} id={_id}/>
+      <PopUpItemCountContainer price={Math.floor(price - price * (discount / 100))} id={_id}/>
     </PopUpInformationsStyle>
   );
 }