[FE][team17] 2주차 PR (#50)

* First Commit * [FE][Team17] 1주차 PR (#26) * First Commit * Chore : 디렉토리 및 컴포넌트 파일 셋업 - 노션에 정리한 디렉토리구조를 토대로 컴포넌트 구조를 셋업했습니다 - CRA를 통해 app생성 및 레거시 파일을 삭제 했습니다. * Feat : MainItems View 제작 및 스타일 적용 중 - 공통 스타일 컴포넌트를 Styles안에 관리했습니다. - 현재 svg같은 icons들을 따로 icons 폴더 안에 두었습니다. - mock API를 이용해서 받아온 데이터를 통해 렌더까지 구현한 상태입니다. * Feat: 디렉터리 내 파일 기본 세팅 진행 - BestItems, Header 컴포넌트 기초 코드 추가 * style : 폴더 이름 변경 및 이미지 픽셀 세부 조정 - MainItemsImage의 픽셀 308px -> 296px 로 변경 - DetailModalWrapper -> DetailModalWindow로 네이밍 수정 * Feat : Detail Modal 구현 중 - Detail Modal 구성중입니다. - Badge의 switch문에 default case를추가하였습니다. * Feat: Header, Best Items UI 추가 * Feat : 모달창 구현 중 - 목데이터를 이용한 렌더까지 구현완료 - 공통 스타일 컴포넌트 관리 방법 리펙토링 필요함 - utils에 sortBadges.js 파일 추가 * Feat: Header animation 추가 * Feat: BE API 사용하여 데이터 repalce * Feat: Styled Component 중복 코드 제거 * chore : FE폴더안으로 전체 파일 이동 * chore : FE폴더로 파일 이동 * Feat : 메인 아이템 및 모달창 뷰 구현 완료 - 변경 된 스타일 컴포넌트 정책 반영 - theme.js 오류 수정 - 전체 해상도 1440px로 조정 Co-authored-by: Dami Kim <dami.k.dev@gmail.com> Co-authored-by: Dami Kim <56783350+damilog@users.noreply.github.com> * Feat : 모달창 기능 구현 완료 - 썸네일 누를 시, 하이라이트 되며 메인이미지 변경 - 아이템의 재고 현황에 맞는 버튼 활성화 및 스타일 변경 - count에 따른 총 주문 금액 변경 - 주문하기 버튼 누를 시 모달창 close 이벤트 생성 예정 * Merge pull request #32 from swing-park/team17-FE-Swing Feat : 모달창 기능 구현 완료 * Feat: commonStyles 적용, Tab click 이벤트 추가(fetch 미구현) * Feat: BestItems Hover 기능 추가 * Feat: BestItems Tab UI 클릭시 데이터 fetch 기능 추가 * Feat: 가격 단위, 뱃지 변경 기능 추가 * Merge pull request #34 from swing-park/team17-FE-Daisy Team17 fe daisy - dev merge * Feat: 실종된 Header 추가 * Feat: Header Style 문제 해결, Slider 컴포넌트 추가 * Feat: bestItems 랜덤 정렬, hover text fetch 받은 data로 적용 * Feat : 모달 창 상세 기능 구현 완료 , 모든 카테고리 보기 기능 구현 완료 , 호버 박스 기능 적용 - 카드를 누르면 detail modal을 띄우는 메서드 구현 - 주문하기 or 모달창 클로즈 버튼 누르면 모달창 close - 모든 카테고리 버튼 누르면 모든 카테고리가 뜨며, 숨김 버튼으로 전환됨. - 숨기기 버튼을 누르면 원 상태로 복귀 - 특가와 기존 가격이 같으면 기존 가격만 렌더되도록 하는 기능 구현 - 카드에 호버하면 delivery_type이 보이는 호버 박스 보여주기 - 카운트가 0이거나 stock을 초과하면 주문하기 버튼 비활성화 - 카운트는 사용자가 상한선,하한선을 지정할 수 있음 * Feat: Best Items에 Detail Modal 기능 추가 * Style: 불필요한 코드 제거 * Refactor : proxy설정 제거 , 스타일 컴포넌트 이름 재정의 , 기타 리뷰받은 것 리펙토링 * Fix: setupProxy 제거, 8080 붙인 url로 수정 * Feat: slider 컴포넌트 추가 * Fix: Slider 컴포넌트 버그 해결 * Feat : Slider -> MainItems에 적용 완료 * Feat : put요청 기능 구현 완료 , 슬라이드 컴포넌트 모달창에 적용 완료 - PUT요청 시 실제 주문 수량 반영됨 - 슬라이드에 optionalFn 받을 수 있게 추가함 - 컴포넌트에 맞도록 모달 슬라이더 UI 조정 * Fix: Slider 컴포넌트 내 optionalFn 예외 처리로 오류 해결 * Style: Header MenuWrapper Style 수정 * Style: 클릭이 일어나는 요소에 cursor 속성 추가 Co-authored-by: Dami Kim <dami.k.dev@gmail.com> Co-authored-by: Dami Kim <56783350+damilog@users.noreply.github.com>
codesquad-members-2021 · Apr 29, 2021 · 3a98b08 · 3a98b08
1 parent 6c7afec
commit 3a98b08
Show file tree

Hide file tree

Showing 99 changed files with 19,440 additions and 25 deletions.
diff --git a/FE/banchan-project/.gitignore b/FE/banchan-project/.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/FE/banchan-project/package-lock.json b/FE/banchan-project/package-lock.json
diff --git a/FE/banchan-project/package.json b/FE/banchan-project/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "banchan-project",
+  "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.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "styled-components": "^5.2.3",
+    "styled-reset": "^4.3.4",
+    "web-vitals": "^1.1.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build"
+  },
+  "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/FE/banchan-project/public/index.html b/FE/banchan-project/public/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <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"
+    />
+    <title>빡빡이네 반찬가게</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/FE/banchan-project/src/App.js b/FE/banchan-project/src/App.js
@@ -0,0 +1,40 @@
+import { useState } from "react";
+import GlobalStyles from "./Styles/GlobalStyles";
+import MainItems from "./MainItems/MainItems.jsx";
+import Header from "./Header/Header";
+import BestItems from "./BestItems/BestItems";
+import DetailModal from "./DetailModal/DetailModal";
+
+const App = () => {
+  const [detailUrl, setDetailUrl] = useState(null);
+  const [modalFlag, setModalFlag] = useState(false);
+
+  const handleClickCard = async detail_url => {
+    setDetailUrl(detail_url);
+    await handleModalFlag();
+    setModalFlag(true);
+  };
+
+  const handleModalFlag = () => {
+    modalFlag === true ? setModalFlag(false) : setModalFlag(true);
+  };
+
+  return (
+    <div className="App">
+      <div className="container">
+        <GlobalStyles />
+        <Header />
+        <BestItems handleClickCard={handleClickCard} />
+        <MainItems handleClickCard={handleClickCard} />
+        <DetailModal
+          detailUrl={detailUrl}
+          modalFlag={modalFlag}
+          handleModalFlag={handleModalFlag}
+          handleClickCard={handleClickCard}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default App;
diff --git a/FE/banchan-project/src/BestItems/BestItems.jsx b/FE/banchan-project/src/BestItems/BestItems.jsx
@@ -0,0 +1,53 @@
+import { useState, useEffect } from "react";
+import * as S from "./BestItemsStyles";
+import BestItemsTitle from "./BestItemsTitle";
+import BestItemsTab from "./BestItemsUI/BestItemsTab/BestItemsTab";
+import BestItemsCardWrapper from "./BestItemsUI/BestItemsCardWrapper";
+
+const URL =
+  "http://ec2-15-164-123-251.ap-northeast-2.compute.amazonaws.com:8080/dish/best";
+
+const BestItems = ({ handleClickCard }) => {
+  const [titleList, setTitleList] = useState([]);
+  const [bestItemsData, setBestItemsData] = useState({});
+
+  const getTitleListData = async () => {
+    const rawData = await fetch(URL).then(res => res.json());
+
+    return rawData.reduce((titleList, title) => {
+      titleList.push(title.best_category_name);
+      return titleList;
+    }, []);
+  };
+
+  const getBestItemsData = async id => {
+    const rawData = await fetch(`${URL}/${id}`).then(res => res.json());
+    return rawData;
+  };
+
+  useEffect(() => {
+    getTitleListData().then(res => {
+      setTitleList(res);
+    });
+  }, []);
+
+  useEffect(() => {
+    getBestItemsData(1).then(res => {
+      setBestItemsData(res);
+    });
+  }, []);
+
+  if (!bestItemsData) return null;
+
+  return (
+    <S.BestItems>
+      <BestItemsTitle />
+      <BestItemsTab {...{ titleList, setBestItemsData, URL }}></BestItemsTab>
+      <BestItemsCardWrapper
+        {...{ bestItemsData, handleClickCard }}
+      ></BestItemsCardWrapper>
+    </S.BestItems>
+  );
+};
+
+export default BestItems;
diff --git a/FE/banchan-project/src/BestItems/BestItemsStyles.jsx b/FE/banchan-project/src/BestItems/BestItemsStyles.jsx
@@ -0,0 +1,116 @@
+import styled from "styled-components";
+import theme from "../Styles/theme";
+
+const BestItems = styled.div`
+  width: 1440px;
+  height: 782px;
+  padding: 0px 80px;
+  margin-bottom: 80px;
+`;
+
+const BestItemsTitle = styled.div`
+  padding: 48px 0px 32px 0px;
+`;
+
+const BestItemsCardWrapper = styled.div`
+  display: flex;
+  padding: 40px;
+  height: 620px;
+  background: #eef4fa;
+  box-shadow: 0px 1px 30px rgba(224, 224, 224, 0.3);
+  border-radius: 0px 5px 5px 5px;
+`;
+
+const BestItemsCard = styled.div`
+  margin-right: 24px;
+`;
+
+const BestItemsCardBadge = styled.div`
+  margin-top: 16px;
+`;
+
+const BestItemsCardNPrice = styled.div`
+  display: inline-block;
+  text-decoration-line: line-through;
+  color: #bdbdbd;
+  margin-left: 8px;
+`;
+
+const BestItemsCardSPrice = styled.div`
+  display: inline-block;
+  margin-top: 16px;
+`;
+
+const BestItemsCardTitle = styled.div`
+  margin: 16px 0px 8px 0px;
+`;
+
+const BestItemsTabTitle = styled.ul`
+  width: 1100px;
+  padding: 0px;
+  margin: 0px;
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+`;
+
+const BestItemsTabTitleList = styled.li`
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 26px;
+  padding: 16px 32px;
+  height: 58px;
+  background: ${props =>
+    props.active ? theme.boxColors.WHITE_BLUE : theme.boxColors.GRAY6};
+  font-weight: ${props => (props.active ? "bold" : "normal")};
+  color: ${props =>
+    props.active ? theme.fontColors.GRAY1 : theme.fontColors.GRAY3};
+  border-radius: 5px 5px 0px 0px;
+  margin-right: 8px;
+`;
+
+const BestItemsCardImageWrapper = styled.div`
+  position: relative;
+`;
+
+const BestItemsHoverBox = styled.div`
+  position: absolute;
+  top: 0px;
+  cursor: pointer;
+`;
+
+const BestItemsHoverTopText = styled.div`
+  position: absolute;
+  top: 140px;
+  left: 147px;
+`;
+
+const BestItemsHoverBottomText = styled.div`
+  position: absolute;
+  top: 208px;
+  left: 147px;
+`;
+
+const BestItemsHoverLine = styled.div`
+  position: absolute;
+  top: 191px;
+  left: 147px;
+`;
+
+export {
+  BestItems,
+  BestItemsTitle,
+  BestItemsCardWrapper,
+  BestItemsCard,
+  BestItemsCardBadge,
+  BestItemsCardNPrice,
+  BestItemsCardSPrice,
+  BestItemsCardTitle,
+  BestItemsTabTitleList,
+  BestItemsTabTitle,
+  BestItemsCardImageWrapper,
+  BestItemsHoverBox,
+  BestItemsHoverLine,
+  BestItemsHoverTopText,
+  BestItemsHoverBottomText,
+};
diff --git a/FE/banchan-project/src/BestItems/BestItemsTitle.jsx b/FE/banchan-project/src/BestItems/BestItemsTitle.jsx
@@ -0,0 +1,14 @@
+import * as S from "./BestItemsStyles";
+import * as CS from "../Styles/commonStyles.jsx";
+
+const BestItemsTitle = () => {
+  return (
+    <S.BestItemsTitle>
+      <CS.ColorFont.GRAY1_XL_BOLD>
+        후기가 증명하는 베스트 반찬
+      </CS.ColorFont.GRAY1_XL_BOLD>
+    </S.BestItemsTitle>
+  );
+};
+
+export default BestItemsTitle;
diff --git a/FE/banchan-project/src/BestItems/BestItemsUI/BestItemsCard/BestItemsCard.jsx b/FE/banchan-project/src/BestItems/BestItemsUI/BestItemsCard/BestItemsCard.jsx
@@ -0,0 +1,42 @@
+import * as S from "../../BestItemsStyles";
+
+import BestItemsCardImage from "./BestItemsCardImage";
+import BestItemsCardTitle from "./BestItemsCardTitle";
+import BestItemsCardBadge from "./BestItemsCardBadge";
+import BestItemsCardDescription from "./BestItemsCardDescription";
+import BestItemsCardNPrice from "./BestItemsCardNPrice";
+import BestItemsCardSPrice from "./BestItemsCardSPrice";
+
+const BestItemsCard = ({ item, handleClickCard }) => {
+  const {
+    id,
+    image,
+    title,
+    description,
+    s_price,
+    n_price,
+    badge,
+    delivery_type,
+    detail_url,
+  } = item;
+
+  return (
+    <S.BestItemsCard id={id}>
+      <BestItemsCardImage
+        image={image}
+        delivery={delivery_type}
+        detailURL={detail_url}
+        handleClickCard={handleClickCard}
+      ></BestItemsCardImage>
+      <BestItemsCardTitle {...{ title }}></BestItemsCardTitle>
+
+      <BestItemsCardDescription {...{ description }}></BestItemsCardDescription>
+      <BestItemsCardSPrice {...{ s_price }}></BestItemsCardSPrice>
+      <BestItemsCardNPrice {...{ s_price, n_price }}></BestItemsCardNPrice>
+
+      <BestItemsCardBadge {...{ badge }}></BestItemsCardBadge>
+    </S.BestItemsCard>
+  );
+};
+
+export default BestItemsCard;
diff --git a/FE/banchan-project/src/BestItems/BestItemsUI/BestItemsCard/BestItemsCardBadge.jsx b/FE/banchan-project/src/BestItems/BestItemsUI/BestItemsCard/BestItemsCardBadge.jsx
@@ -0,0 +1,14 @@
+import * as S from "../../BestItemsStyles";
+import sortBadge from "../../../utils/sortBadges";
+
+const BestItemsCardBadge = ({ badge }) => {
+  return (
+    badge && (
+      <S.BestItemsCardBadge>
+        {badge.map((badge, index) => sortBadge(badge, index))}
+      </S.BestItemsCardBadge>
+    )
+  );
+};
+
+export default BestItemsCardBadge;
diff --git a/FE/banchan-project/src/BestItems/BestItemsUI/BestItemsCard/BestItemsCardDescription.jsx b/FE/banchan-project/src/BestItems/BestItemsUI/BestItemsCard/BestItemsCardDescription.jsx
@@ -0,0 +1,10 @@
+import * as CS from "../../../Styles/commonStyles";
+const BestItemsCardDescription = ({ description }) => {
+  return (
+    <>
+      <CS.ColorFont.GRAY3_XS_NORMAL>{description}</CS.ColorFont.GRAY3_XS_NORMAL>
+    </>
+  );
+};
+
+export default BestItemsCardDescription;