[FE][Team19] Sidedish 1주차 PR (#31)

* [#1] init: 🎉 개발 환경 구축 * [#3] feat: ✨ Header 만들기 * [#5] feat: ✨ BestTab UI 구현 - BestTab UI - 상수 파일 - const.js - 재사용 컴포넌트 - Label.jsx - ItemCard.jsx * [#7] feat: ✨ Slide UI 구현 - App.jsx - SlideContainer import - BestItem.jsx - 삭제 (미사용) - BestItems.jsx - ItemCard prop 추가 - BestTab.jsx - 스타일 수정 - SlideContainer.jsx - UI 구현 - SlideItems.jsx - UI 구현 - SlideArrowBtn.jsx - UI 구현 - ItemCard.jsx - 스타일 수정 - prop 추가 - Label.jsx - prop 추가 - 기본 값 추가 * [#8] feat: ✨ ShowMoreBtn UI 구현 - App.js - ShowMoreBtn import - ShowMoreBtn.jsx - UI 구현 * [#10] feat: ✨ Header Dropdown 구현 - App.js - Header 경로 수정 - Header.jsx - 경로 변경 - HeaderLeft & Right 분리 - HeaderLeft.jsx - 컴포넌트화 - Navigations 컴포넌트화 - HeaderRight.jsx - 컴포넌트화 - Navigations.jsx - 컴포넌트화 - Dropdown 구현 * [#13] feat: ✨ API에 fetch 요청 로직 구현 * [#13] feat: ✨ API 요청, 베스트 기능구현 - BestItems.jsx - API 데이터 동기화 - BestTab.jsx - useState, useEffect, API 요청 - BestTabContainer.jsx - API 데이터 동기화 - BestTabNavigator.jsx - API 데이터 동기화 - ItemCard.jsx - prop 변경 - Label.jsx - COLOR변수 추가 * [#15] feat: ✨ 상세 modal 페이지 UI 구현 - App.js - PopUpContainer import - PopUpContainer.jsx - UI 구현 - PopUpImages.jsx - UI 구현 - PopUpInformations.jsx - UI 구현 Co-authored-by: kowoohyuk <kowoohyuk91@gmail.com>
codesquad-members-2021 · Apr 26, 2021 · 9793aba · 9793aba
1 parent 1ae4476
commit 9793aba
Show file tree

Hide file tree

Showing 29 changed files with 17,648 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/README.md b/README.md
@@ -1,2 +1,7 @@
 # sidedish
-그룹프로젝트 #2
+## Team19 (a.k.a DJ)
+### 조원
+Json
+
+Dico 
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "sidedish",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.10",
+    "@testing-library/react": "^11.2.6",
+    "@testing-library/user-event": "^12.8.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-icons": "^4.2.0",
+    "react-scripts": "4.0.3",
+    "styled-components": "^5.2.3",
+    "web-vitals": "^1.1.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,21 @@
+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";
+
+function App() {
+  return (
+    <>
+      <GlobalStyle />
+      <Header />
+      <BestTab />
+      <SlideContainer />
+      <ShowMoreBtn />
+      <PopUpContainer/>
+    </>
+  );
+}
+
+export default App;
diff --git a/src/api.js b/src/api.js
@@ -0,0 +1,20 @@
+const api = () => {
+    const URL = "https://codesquad-2021-api.herokuapp.com/sidedish";
+    const api = (path="", data="") => {
+        const req = {
+            method : 'GET',
+            headers: {
+                "Content-Type": "application/json",
+            }
+        };
+        return fetch(URL + path, req);
+    }
+    return async(path, data) => {
+        const result = await api(path, data);
+        let json = await result.json();
+        if (!json || json.length === 0) json = null;
+        return json;
+    }
+}
+
+export default api();
diff --git a/src/component/ShowMoreBtn.jsx b/src/component/ShowMoreBtn.jsx
@@ -0,0 +1,16 @@
+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;
+`;
+
+export default function ShowMoreBtn() {
+  return <ShowMoreBtnStyle>모든 카테고리 보기</ShowMoreBtnStyle>;
+}
diff --git a/src/component/bestTab/BestItems.jsx b/src/component/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].img}
+            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}/>
+        ))
+      }
+    </BestItemsStyle>
+  )
+}
diff --git a/src/component/bestTab/BestTab.jsx b/src/component/bestTab/BestTab.jsx
@@ -0,0 +1,37 @@
+import { useState, useEffect } from 'react';
+import styled from "styled-components";
+import BestTabContainer from "./BestTabContainer";
+import BestTabNavigator from "./BestTabNavigator";
+import api from '../../api';
+
+const BestTabStyle = styled.div`
+  h2 {
+    margin-bottom: 2rem;
+  }
+  margin-bottom: 5rem;
+`;
+
+export default function BestTab() {
+  const [active, setActive] = useState(0);
+  const [bestItems, setBestItems] = useState(null);
+
+  useEffect(() => {
+    if (!bestItems) {
+      (async() => {
+         const data = await api('/best');
+         setBestItems(data);
+      })();
+    }
+    return;
+  }, [bestItems]);
+
+  if(!bestItems) return null;
+
+  return (
+    <BestTabStyle>
+      <h2>후기가 증명하는 베스트 반찬</h2>
+      <BestTabNavigator bestItems={bestItems} active={active} setActive={setActive}/>
+      <BestTabContainer bestItem={bestItems[active]}/>
+    </BestTabStyle>
+  )
+}
diff --git a/src/component/bestTab/BestTabContainer.jsx b/src/component/bestTab/BestTabContainer.jsx
@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import BestItems from "./BestItems";
+
+const BestTabContainerStyle = styled.div``;
+
+export default function BestTabContainer({ bestItem }) {
+  return (
+    <BestTabContainerStyle>
+      {<BestItems childs={bestItem.childs}/>}
+    </BestTabContainerStyle>
+  )
+}
diff --git a/src/component/bestTab/BestTabNavigator.jsx b/src/component/bestTab/BestTabNavigator.jsx
@@ -0,0 +1,42 @@
+import styled from "styled-components";
+
+const BestTabNavigatorStyle = styled.div`
+  display: grid;
+  grid-gap: 0.5rem;
+  grid-template-columns: repeat(5,13rem);
+`;
+
+const BestTabNavigatorItemStyle = styled.div.attrs(props => ({
+  weight: props.active ? 600 : 400,
+  color: props.active ? "#333" : "#828282"
+}))`
+  font-size: 1.125rem;
+  background-color: #EEF4FA;
+  padding: 1rem 2rem;
+  text-align: center;
+  font-weight: ${(props) => props.weight};
+  color: ${(props) => props.color};
+  cursor: pointer;
+  &:hover {
+    color: #333;
+  }
+`;
+
+export default function BestTabNavigator({ bestItems, active, setActive }) {
+  return (
+    <BestTabNavigatorStyle>
+      {bestItems.map((bestItem, i) => (
+        <BestTabNavigatorItemStyle 
+          key={i}
+          onClick={() => setActive(i)} 
+          active={(i === active)}>{bestItem.title}
+        </BestTabNavigatorItemStyle>
+      ))}
+      {/*
+      <BestTabNavigatorItemStyle>풍성한 고기반찬</BestTabNavigatorItemStyle>
+      <BestTabNavigatorItemStyle>편리한 반찬세트</BestTabNavigatorItemStyle>
+      <BestTabNavigatorItemStyle>간편한 덮밥요리</BestTabNavigatorItemStyle>
+      <BestTabNavigatorItemStyle>우리아이 영양반찬</BestTabNavigatorItemStyle> */}
+    </BestTabNavigatorStyle>
+  )
+}
diff --git a/src/component/header/Header.jsx b/src/component/header/Header.jsx
@@ -0,0 +1,20 @@
+import styled from "styled-components";
+import HeaderLeft from "./HeaderLeft";
+import HeaderRight from "./HeaderRight";
+
+const HeaderStyle = styled.header`
+  display: flex;
+  margin-top: 1rem;
+  margin-bottom: 5rem;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export default function Header() {
+  return (
+    <HeaderStyle>
+      <HeaderLeft/>
+      <HeaderRight/>
+    </HeaderStyle>
+  )
+};
diff --git a/src/component/header/HeaderLeft.jsx b/src/component/header/HeaderLeft.jsx
@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import Navigations from "./Navigations";
+
+const HeaderLeftStyle = styled.div`
+  display: flex;
+  align-items: center;
+  width: 60vw;
+`;
+
+const LogoStyle = styled.div`
+  font-size: 2.5rem;
+  font-weight: 900;
+  margin-right: 4rem;
+  padding-bottom: 0.2rem;
+`;
+
+export default function HeaderLeft() {
+  return (
+    <HeaderLeftStyle>
+      <LogoStyle>BANCHAN</LogoStyle>
+      <Navigations/>
+    </HeaderLeftStyle>
+  );
+}