[Team18] [FE] 배민찬 프로젝트 마무리 (#68)

* Update README.md * 리액트 개발환경 설정 * Update README.md * Style: 기본 레이아웃 생성 * Update README.md * docs: README파일 이미지 업데이트 * feat: [#1] 헤더 컴포넌트 작업중 (5 / 6) - React-icons 모듈 사용 - DropdownMenu 작업중.. * 리액트 개발환경 설정 * Style: 기본 레이아웃 생성 * feat: Tag 컴포넌트 생성 * npm install하면서 package-lock.json 변경됨 * feat: Button 컴포넌트 생성 * feat: 헤더의 메뉴아이템에 마우스를 올리면 DropdownMenu 생성 - 헤더 완성 (1차) * chore: .gitignore 설정 변경 - .gitignore 설정 변경 및 git cached 초기화 * chore: .gitignore 설정 변경 (issue #1) - .gitignore 설정 변경 및 git cached 초기화 * fix: 삼항연산자로 텍스트 바뀌도록 수정 * fix: 스타일 컴포넌트 변수명 수정 * feat: Title 컴포넌트 생성 * type 값에 따라서 타이틀 문자열 반환 * feat: baseURL 담긴 객체 생성, * style: 태그 간 간격 스타일 추가 * feat: useFetch 커스텀 훅 작성 * feat: ProductCard 컴포넌트 생성 * fix: 스타일 컴포넌트를 컴포넌트 함수 밑으로 이동 * feat: hover에 따라 반투명박스 생기는 기능 구현 * delete: 디렉토리 구조 변경하면서 이전 경로 파일 삭제 * refactor: 디렉토리 구조 변경 * refactor: 디렉토리 구조 변경 * fix: themeProvider 스타일 추가, 피그마에 맞춰 키값 변경 * chore: 폴더명 변경 (Header 폴더 -> header) * chore: import 관련 path 수정 * feat: 캐러셀 슬라이더 프로토타입 완성 - 추후 리팩토링 필요 (재사용성을 위함) * feat: 캐러셀 슬라이더 파일 분리 및 SubContents 완성 - SubContents 렌더 시, useFetch 사용하여 MOCK 데이터 Get후 렌더링 * feat: 캐러셀 버튼 - 캐러셀의 위치정보에 따라 색상 변경 * fix: 이미지 에러 시 나오는 이미지 변경, border-radius 추가 * feat: Carousel을 재사용 할 수 있게 리팩토링 & 상세페이지 하단에도 쓰일 수 있게 변경 * feat: Carousel - Default 설정 변경 * style: margin-bottom 추가 * chore: Carousel 컴포넌트 폴더 위치 변경 * feat: Title, TabList, MainContents를 감싸는 MainContentsContainer 컴포넌트 생성 * feat: ProductCard를 감싸는 MainContents 컴포넌트 생성 * feat: 탭 요소 생성, 탭 기능 구현 * feat: loading 기능 구현, 에러처리 추가 필요 * feat: [#37] 상세정보 창 (Detail) 작업중.. - Modal (틀, 재사용 가능한 컴포넌트) 완성 - 상세정보 창에서 쓰일 SideDishStore(context) 생성 * feat: [#37] 상세정보 창 (Detail) 작업중.. 2 - DetailTop 1차 완성 * feat: [#37] 상세정보 창 (Detail) 작업중.. 3 - DetailTopGallery 동작 방식 변경 * feat: [#37] 상세정보 창 (Detail) 데이터 핸들링 테스트 중.. 1 - 버그 많음.. 수정 중 - customHook - useFetch 통합 * feat: [#37] 상세정보 창 (Detail) - DetailTop 1차 완성 - 이미지 제대로 안뜨던 버그 수정완료 * feat: [#37] 상세정보 창 (1차 마무리) - DetailBottom 완성 - Detail 페이지 1차 완성 * feat: SubContents 카테고리 모두 보이기 / 가리기 기능 추가 및 리팩토링 - SubContents 컴포넌트 작동 방식 변경 (리팩토링) - 카테고리 모두 보이기 / 가리기 기능 추가 * feat: [#57] 상세페이지 큰 이미지 업데이트 안되는 버그 수정 - DetailTopGallery의 Ref 관련 수정 * fix: hover 버그 수정 * useRef로 classList 수정하는 방식에서 state변경하는 방식으로 변경 * feat: Mock 데이터 제거 후 API 적용 (1차) * fix: Detail & DetailBottom 페이지 렌더 방식 변경 - 이에 따라 페이지 초기 렌더시 SubContents에서 비동기 통신 시 (데이터 가져올 시) 서브콘텐츠 (슬라이더) 데이터의 구조 변경 * fix: DetailTopGallery -> top_image 데이터 핸들링하는 방식으로 변경 - DetailTopInfo의 volumne -> quantity로 변경 * feat: 주문하기 (프로토타입) 1차완성 Co-authored-by: Kyu <59721293+kyu-kim-kr@users.noreply.github.com> Co-authored-by: eve712 <62237639+eve712@users.noreply.github.com>
codesquad-members-2021 · May 4, 2021 · dfae06a · dfae06a
1 parent 1ae4476
commit dfae06a
Show file tree

Hide file tree

Showing 39 changed files with 2,078 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,32 @@
 # sidedish
 그룹프로젝트 #2
+
+---
+
+## 커밋 메시지 규칙
+
+- feat : 새로운 기능 추가
+- fix : 버그 수정
+- docs : 문서의 수정
+- style : (코드의 수정 없이) 스타일(style)만 변경(들여쓰기 같은 포맷이나 세미콜론을 빼먹은 경우)
+- refactor : 코드를 리펙토링
+- test : Test 관련한 코드의 추가, 수정
+- chore : (코드의 수정 없이) 설정을 변경
+
+커밋은 기본적으로 한글로, 말머리만 영어로
+
+---
+
+## 브랜치 규칙
+![브랜치 규칙](https://user-images.githubusercontent.com/62237639/115202663-94fcd880-a131-11eb-8708-23c7a09cc200.png)
+
+---
+
+## 프로젝트 관리
+
+![프로젝트 관리](https://user-images.githubusercontent.com/62237639/115204101-16a13600-a133-11eb-994c-f4c8ba1d22db.png)
+
+---
+![프로젝트 진행 방식](https://user-images.githubusercontent.com/62237639/115204313-4fd9a600-a133-11eb-9e1a-13d6f06182c5.png)
+
+
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -0,0 +1,25 @@
+# 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*
+
+package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "sidedish-frontend",
+  "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",
+    "http-proxy-middleware": "^1.3.1",
+    "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/frontend/public/img/testimg.jpg b/frontend/public/img/testimg.jpg
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -0,0 +1,43 @@
+<!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/
+    -->
+    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
+    <!--
+      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/frontend/src/App.js b/frontend/src/App.js
@@ -0,0 +1,31 @@
+import "./style/reset.css";
+import { createGlobalStyle, ThemeProvider } from "styled-components";
+import theme from "./style/theme";
+import Header from "./header/Header";
+import SubContents from "./subContents/SubContents";
+import Detail from "./detail/Detail";
+import { SideDishStore } from "./utilComponent/SideDishStore";
+import MainContentsContainer from "./mainContents/MainContentsContainer";
+
+const GlobalStyle = createGlobalStyle`
+  body {
+      width: 1440px;
+      margin: 0 auto;
+  }
+`;
+
+const App = () => (
+  <ThemeProvider theme={theme}>
+    <GlobalStyle />
+    <Header />
+
+    <SideDishStore>
+      <MainContentsContainer />
+      <SubContents />
+      <Detail />
+    </SideDishStore>
+
+  </ThemeProvider>
+);
+
+export default App;
diff --git a/frontend/src/detail/Detail.jsx b/frontend/src/detail/Detail.jsx
@@ -0,0 +1,79 @@
+import styled from "styled-components";
+import { useState, useEffect, useContext } from "react";
+import { SideDishContext } from "../utilComponent/SideDishStore";
+
+import Modal from "../utilComponent/modal/Modal";
+import DetailTop from "./DetailTop";
+import DetailBottom from "./DetailBottom";
+
+const Detail = () => {
+  const {
+    isModalVisible, setIsModalVisible,
+    currProductData, setCurrProductData,
+    slideDataObject
+  } = useContext(SideDishContext);
+
+  // useFetch 사용안함 --
+  const initialDetail = { result: null, error: null };
+  const [ detailData, setDetailData ] = useState(initialDetail);
+  const [ loading, setLoading ] = useState(true);
+
+  const executeFetch = async (url, addProps = { subject: null, badge: null, type: null } ) => {
+    try {
+      const res = await fetch(url);
+      const json = await res.json();
+      const { subject, badge, type } = addProps;
+      setDetailData({
+        ...detailData,
+        result: {
+          ...json,
+          data: {
+            ...json['data'],
+            subject, badge, type
+          }
+        }
+      });
+    } catch (error) {
+      setDetailData({ ...detailData, error });
+    }
+  };
+
+  useEffect(() => {
+    if (!currProductData) return;
+    const { alt: subject, badge, detail_hash, type } = currProductData;
+    executeFetch(`/api/detail/${detail_hash}`, {subject, badge, type});
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currProductData]);
+
+  useEffect(() => !detailData.data && setLoading(false), [detailData]);
+  // ----
+
+  const handleAddCloseBtnClick = () => {
+    setLoading(true);
+    setDetailData(initialDetail);
+    setCurrProductData(null);
+  };
+
+  const visibleOptions = {
+    isModalVisible,
+    setIsModalVisible,
+    addCbFunc: handleAddCloseBtnClick,
+  };
+
+  return (
+    !loading && 
+      <Modal visibleOptions={visibleOptions}>
+        <StyledDetail>
+          <DetailTop {...detailData} />
+          <DetailBottom {...detailData} slideDataObject = {slideDataObject} />
+        </StyledDetail>
+      </Modal>
+  );
+};
+
+export default Detail;
+
+// --- Styled Components ---
+const StyledDetail = styled.div`
+  max-width: 960px;
+`;
diff --git a/frontend/src/detail/DetailBottom.jsx b/frontend/src/detail/DetailBottom.jsx
@@ -0,0 +1,55 @@
+import { useEffect, useState } from "react";
+import styled from "styled-components";
+import Carousel from "../utilComponent/carousel/Carousel";
+import { MdKeyboardArrowLeft, MdKeyboardArrowRight } from "react-icons/md";
+import ProductCard from "../utilComponent/ProductCard";
+
+const DetailBottom = ({ result, slideDataObject }) => {
+  const [bottomSlideData, setBottomSlideData] = useState(null);
+
+  useEffect(() => {
+    if (!result || !result.data || !slideDataObject) return;
+    const thisType = result.data.type;
+    setBottomSlideData(slideDataObject[thisType]);
+  }, [result, slideDataObject]);
+
+  const carouselOptions = {
+    itemsPerCnt: 5,
+    arrowOption: {
+      leftIcon: <MdKeyboardArrowLeft />,
+      rightIcon: <MdKeyboardArrowRight />,
+      arrowLocation: "top",
+      btnSize: "28px",
+    },
+  };
+
+  return (
+    bottomSlideData && (
+      <StyledDetailBottom>
+        <BottomCaption>함께하면 더욱 맛있는 상품</BottomCaption>
+        <Carousel {...carouselOptions}>
+          {bottomSlideData.length > 0 &&
+            bottomSlideData.map((item, i) => (
+              <ProductCard key={i} size="x-small" item={item} />
+            ))}
+        </Carousel>
+      </StyledDetailBottom>
+    )
+  );
+};
+
+export default DetailBottom;
+
+// --- Styled Components ---
+const StyledDetailBottom = styled.div`
+  padding: 32px 48px;
+  border-radius: 0 0 5px 5px;
+  background-color: ${({ theme }) => theme.colors.gray6 || "#F5F5F7"};
+`;
+
+const BottomCaption = styled.div`
+  font-weight: ${({ theme }) => theme.fontWeight.bold || 700};
+  font-size: ${({ theme }) => theme.fontSize.MM || "18px"};
+  color: ${({ theme }) => theme.colors.gray1 || "gray"};
+  margin: 0px 0px 10px 4px;
+`;
diff --git a/frontend/src/detail/DetailTop.jsx b/frontend/src/detail/DetailTop.jsx
@@ -0,0 +1,25 @@
+import styled from "styled-components";
+import DetailTopGallery from "./DetailTopGallery";
+import DetailTopInfo from "./DetailTopInfo";
+
+const DetailTop = ({ result }) => {
+  return result && result.data && (
+    <StyledDetailTop>
+      <DetailTopGallery {...result.data}  />
+      <DetailTopInfo data={result.data} hash={result.hash} />
+    </StyledDetailTop>
+  );
+};
+
+export default DetailTop;
+
+// --- Styled Components ---
+const StyledDetailTop = styled.div`
+  padding: 32px 48px 0;
+  border-radius: 5px 5px 0 0;
+  background-color: ${({ theme }) => theme.colors.white || "#FFF"};
+
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 32px;
+`;