[Team19][Json, Dico] Sidedish 2주차 PR (Final)

README.md

@@ -1,7 +1,36 @@
-# sidedish
+# 🥑 sidedish
 ## Team19 (a.k.a DJ)
-### 조원
-Json
+### Members
+[Json😇](https://github.com/kowoohyuk), [Dico🌷](https://github.com/ha3158987)
+
+----
+## 📝 Table of Contents
+- [Links](#links)
+- [Customized NPM Module](#module)
+- [Skeleton UI](#Skeleton)
+- [UI](#ui)
+----
+## 🔗 [Links](#Links)
+### [Git Strategy](https://github.com/ha3158987/sidedish/wiki/Git-Strategy-%F0%9F%8C%B3)  
+### [Naming Rule](https://github.com/ha3158987/sidedish/wiki/Naming-Rule-%F0%9F%8D%92)  
+### [Reference](https://github.com/ha3158987/sidedish/wiki/Reference-%F0%9F%93%94)  
+### Blueprint
+- [Component](https://www.notion.so/Component-f3ea0a6769d14acf97b0f2bc13b63ca9)
+- [Carousel](https://www.notion.so/DicoJsonCarousel-4a8ccb91cb9e4edb9b4e3bfffae1f7ca)
+- [Notion](https://www.notion.so/Sidedish-Json-Dico-cb7c0605253840da922952c6e910ea60)
+
+----
+## 🎠 [Customized NPM Module](#module)
+[dico-json-carousel NPM](https://npmjs.com/package/dico-json-carousel)
+![Carousel](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/1f61e9d5-f75b-428c-af74-52357bf1522f/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210502%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210502T134930Z&X-Amz-Expires=86400&X-Amz-Signature=e6c4ff35984ebe0977a127959b9494172e7c61802dfbac4029af6c88ab330ee3&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)
+
+-----
+## ☠️ [Skeleton UI](#Skeleton)
+![Skeleton UI](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/eadb8270-8871-4b16-b63e-f233ca888319/_2021_04_30_16_54_31_768.gif?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210502%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210502T134428Z&X-Amz-Expires=86400&X-Amz-Signature=6c68fa970a8b048efbf29f5166f9d224b9d355a0be969d6cad45081a68ed1ad7&X-Amz-SignedHeaders=host)
+
+----
+## 🏠 [UI](#ui)
+![screencapture-localhost-3000-2021-05-02-22_42_10](https://user-images.githubusercontent.com/65105537/116815304-d52f7280-ab97-11eb-93c2-220afdd5c943.png)
+
 
-Dico 
 

src/App.js

@@ -1,20 +1,15 @@
-import BestTab from "./component/bestTab/BestTab.jsx";
 import Header from "./component/header/Header.jsx";
-import PopUpContainer from "./component/popUp/PopUpContainer.jsx";
-import ShowMoreBtn from "./component/ShowMoreBtn.jsx";
-import SlideContainer from "./component/slideContainer/SlideContainer.jsx";
-import GlobalStyle from "./style.js";
+import Main from "./component/main/Main.jsx";
+import GlobalStyle from "./common/style.js";
+import { ContextProvider } from "./component/Context.jsx";
 
 function App() {
   return (
-    <>
+    <ContextProvider>
       <GlobalStyle />
       <Header />
-      <BestTab />
-      <SlideContainer />
-      <ShowMoreBtn />
-      <PopUpContainer/>
-    </>
+      <Main />
+    </ContextProvider>
   );
 }
 

src/common/api.js

@@ -0,0 +1,28 @@
+const API = () => {
+    const URL = "https://codesquad-2021-api.herokuapp.com/sidedish";
+    const API = path => {
+        const req = {
+            method : 'GET',
+            headers: {
+                "Content-Type": "application/json",
+            }
+        };
+        return fetch(URL + path, req);
+    }
+    return async (path) => {
+        let json;
+        try {
+            const result = await API(path);
+            json = await result.json();
+        } catch(e) {
+            console.log(e);
+        } finally {
+            if(!json || json.length === 0) {
+                json = null;
+            }
+        }
+        return json;
+    }
+}
+
+export default API();

src/common/const.js

@@ -0,0 +1,15 @@
+const TEXT = {
+  "bestTab-title": "후기가 증명하는 베스트 반찬",
+  "order" : {
+    true : {
+      "title": "주문 성공",
+      "content": "감사합니다! \r\n맛있게 준비해드릴게요!"
+    },
+    false : {
+      "title": "주문 실패",
+      "content": "재고가 부족합니다!"
+    }
+  }
+};
+
+export { TEXT };

src/common/style.js

@@ -0,0 +1,27 @@
+import { createGlobalStyle } from "styled-components";
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    overflow-x: hidden;
+    color: #333;
+  }
+  button {
+    background-color: transparent;
+    border:none;
+    cursor: pointer;
+  }
+  input {
+    border: none;
+  }
+  input:focus {
+    outline:none;
+  }
+  button:focus {
+    outline:none;
+  }
+  * {
+    box-sizing: border-box;
+  }
+`;
+
+export default GlobalStyle;

src/common/util.js

@@ -0,0 +1 @@
+export const addCommaToNumber = (number) => number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

src/component/Context.jsx

@@ -0,0 +1,82 @@
+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);
+
+  useEffect(() => {
+    if (!mainItems) {
+      (async () => {
+        const data = await API("/main");
+        setMainItems(data);
+      })();
+    }
+    return;
+  }, [mainItems]);
+
+  const onFetchDetailData = async (id) => {
+    setPopUpToggle(true);
+    setDetailData(null);
+    const data = await API(`/detail/${id}`);
+    if (data) {
+      setTimeout(() => setDetailData(data), 1000);
+    }
+  };
+
+  return (
+    <DetailDataContext.Provider value={detailData}>
+      <OnFetchDetailDataContext.Provider value={onFetchDetailData}>
+        <PopUpToggleContext.Provider value={popUpToggle}>
+          <SetPopUpToggleContext.Provider value={setPopUpToggle}>
+            <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>
+    </DetailDataContext.Provider>
+  );
+}
+
+export function useDetailContext() {
+  return useContext(DetailDataContext);
+}
+
+export function useOnFetchDetailDataContext() {
+  return useContext(OnFetchDetailDataContext);
+}
+
+export function usePopUpToggleContext() {
+  return useContext(PopUpToggleContext);
+}
+
+export function useSetPopUpToggleContext() {
+  return useContext(SetPopUpToggleContext);
+}
+
+export function useMainItemsContext() {
+  return useContext(MainItemsContext);
+}
+
+export function useMainItemsActiveContext() {
+  return useContext(MainItemsActiveContext);
+}
+
+export function useSetMainItemsActiveContext() {
+  return useContext(SetMainItemsActiveContext);
+}

src/component/main/Main.jsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from "react";
+import BestTab from "./bestTab/BestTab.jsx";
+import PopUpContainer from "./popUp/PopUpContainer.jsx";
+import ShowMoreBtn from "./ShowMoreBtn.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 />
+      {active ? (
+        mainItems.map((mainItem, id) => (
+          <CarouselContainer key={id}>
+            <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 options={{ loop: true }}>
+            {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 />
+    </>
+  );
+}

src/component/main/ShowMoreBtn.jsx

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+const ShowMoreBtnStyle = styled.div`
+  margin: 0 -4rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  padding: 2.321225rem;
+  text-align: center;
+  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({ active, onShowMoreItems }) {
+  return <ShowMoreBtnStyle active={active} onClick={onShowMoreItems}>모든 카테고리 보기</ShowMoreBtnStyle>;
+}

src/component/main/bestTab/BestItems.jsx

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+import ItemCard from "../../util/ItemCard";
+
+const BestItemsStyle = styled.div`
+  background-color: #eef4fa;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 1.5rem;
+  padding: 2.5rem;
+`;
+
+export default function BestItems({ childs }) {
+  const getRandom = (n, max) => {
+    const set = new Set();
+    while (set.size < n) {
+      set.add(Math.floor(Math.random() * max));
+    }
+    return Array.from(set);
+  };
+
+  const getSalePrice = (price, discountRate) => {
+    return price - price * (discountRate / 100);
+  };
+
+  return (
+    <BestItemsStyle>
+      {getRandom(3, childs.length).map((idx) => (
+        <ItemCard
+          src={childs[idx].main_image}
+          title={childs[idx].title}
+          description={childs[idx].description}
+          salePrice={getSalePrice(childs[idx].price, childs[idx].discount)}
+          normalPrice={childs[idx].price}
+          labels={childs[idx].label}
+          key={idx}
+          id={childs[idx]._id}
+          large={true}
+        />
+      ))}
+    </BestItemsStyle>
+  );
+}