[2단계 - 장바구니 미션] 하루(김하루) 미션 제출합니다. (#54)

* feat: RedirectNotice 컴포넌트 구현

* feat: 결제 실패 안내 기능 구현

* refactor: pages 디렉토리 components 밖으로 분리

* refactor: 누락된 prop-types 추가

* refactor: 공통 컴포넌트 네이밍 변경

* refactor: CSS 레이아웃, 브레이크포인트, 색상 상수화

* refactor: Confirm 컴포넌트 props 의존성 주입

* refactor: useConfirm 커스텀 훅 추가

* fix: rgba 값에 hex 값이 잘못 들어가는 문제 해결

* refactor: props가 없는 경우 에러처리

* feat: 화면 폭 일정 크기 이하일 때 Title 숨기기

* refactor: 각 Page 의 Item 컴포넌트 depth 변경

* feat: deepCamalize 유틸 함수 추가

* feat: 상품목록 api 연결

* refactor: statics 디렉토리 생성

* chore: swr 설치

* feat: Skeleton 컴포넌트 추가

* refactor: END_POINT => BASE_URL 변수명 변경

* feat: 상품목록 skeleton 구현, swr 마이그레이션

* feat: ErrorBoundary 컴포넌트 추가

* refactor: api PATH 파라미터 네이밍 변경

* feat: deepDecamelize 유틸함수 추가

* feat: 장바구니 swr 마이그레이션

* refactor: 원화 포맷 함수 정규식에서 DOM API 로 변경

* refactor: fetcher 함수 네이밍 변경

* refactor: 주문 총 금액 포맷팅 위치 변경

* feat: 주문/결제 swr 마이그레이션

* feat: 주문목록 swr 마이그레이션

* refactor: 고객이름 상수화, 배열에서 마지막인덱스 접근 구문 변경

* fix: 상품목록 페이지 에러 화면 문구 수정

* refactor: useProduct => useProducts 네이밍 변경

* fix: font impot 경로 수정

* feat: useProduct 커스텀 훅 추가

* feat: 상품 상세 페이지 UI 및 기능 구현

* refactor: 불필요한 redux, dispatch 구문 제거, 핸들러 네이밍 변경

* refactor: Stepper UI 너비 '%' 단위 제거 및 상수화

* refactor: 크기가 0인 input의 위치를 화면 밖으로 조정

* refactor: ROUTE path 수정

* chore: 배포 설정

* chore: 테스트 관련 패키지 devDependencies 하위로 이동

* style: EOL 추가

* feat: 장바구니 아이템 추가/삭제 API throttle 적용

* chore: 사용하지 않는 파일 삭제

* feat: 네트워크 요청 구문 try...catch문 추가

* feat: 상품상세 페이지 스케일 수정

* test: mock.js 파일 분리

* docs: 2단계 구현기능 목록 업데이트

REQUIREMENTS.md

@@ -56,10 +56,10 @@
 
 ## 상품목록
 
-- [ ] 상품을 클릭하면 상품 상세 페이지로 이동한다.
+- [x] 상품을 클릭하면 상품 상세 페이지로 이동한다.
 
 ## 상품상세
 
-- [ ] 상품의 사진, 상품명, 가격을 표시한다.
-- [ ] '장바구니' 버튼을 클릭하면 해당 상품이 장바구니에 담긴다.
-  - [ ] 이때, 내비게이션바에 표시된 장바구니에 담긴 상품 개수도 업데이트 된다.
+- [x] 상품의 사진, 상품명, 가격을 표시한다.
+- [x] '장바구니' 버튼을 클릭하면 해당 상품이 장바구니에 담긴다.
+  - [x] 이때, 내비게이션바에 표시된 장바구니에 담긴 상품 개수도 업데이트 된다.

cspell.json

@@ -2,6 +2,9 @@
   "version": "0.1",
   "language": "en",
   "words": [
+    "decamelize",
+    "camelize",
+    "camelized",
     "firestore",
     "firebaseapp",
     "appspot",

package.json

@@ -3,9 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/user-event": "^12.8.3",
     "firebase": "^8.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -14,7 +11,8 @@
     "react-scripts": "4.0.3",
     "redux": "^4.1.0",
     "redux-devtools-extension": "^2.13.9",
-    "styled-components": "^5.2.3"
+    "styled-components": "^5.2.3",
+    "swr": "^0.5.6"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -43,6 +41,9 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/react": "^11.2.6",
+    "@testing-library/user-event": "^12.8.3",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
     "prettier": "^2.2.1"

public/_redirects

@@ -0,0 +1 @@
+/*        /index.html   200

src/components/atoms/BlueScreen/index.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+import { Image } from './style';
+import blueScreen from '../../../statics/images/blueScreen.png';
+
+export const BlueScreen = () => {
+  return <Image src={blueScreen} alt="blue screen" />;
+};

src/components/atoms/BlueScreen/style.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Image = styled.img`
+  width: 5.5rem;
+`;

src/components/commons/atoms/Button/index.js → src/components/atoms/Button/index.js

@@ -2,10 +2,11 @@ import PropTypes from 'prop-types';
 import * as S from './style.js';
 
 export const Button = (props) => {
-  return <S.Button {...props}></S.Button>;
+  const { onClick, ...rest } = props;
+
+  return <S.Button onClick={onClick} {...rest}></S.Button>;
 };
 
 Button.propTypes = {
-  style: PropTypes.object,
   onClick: PropTypes.func,
 };

src/components/commons/atoms/Checkbox/index.js → src/components/atoms/Checkbox/index.js

@@ -15,5 +15,10 @@ export const Checkbox = (props) => {
 
 Checkbox.propTypes = {
   label: PropTypes.string,
+  isChecked: PropTypes.bool.isRequired,
   onChange: PropTypes.func,
 };
+
+Checkbox.defaultProps = {
+  isChecked: true,
+};

src/components/commons/atoms/Checkbox/style.js → src/components/atoms/Checkbox/style.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { COLOR } from '../../../constants';
 
 export const Container = styled.label`
   display: inline-block;
@@ -13,11 +14,13 @@ export const Container = styled.label`
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  color: #333333;
+  color: ${COLOR.HEX.GRAY_800};
 `;
 
 export const Checkbox = styled.input.attrs({ type: 'checkbox' })`
   position: absolute;
+  top: -9999px;
+  left: -9999px;
   opacity: 0;
   cursor: pointer;
   height: 0;
@@ -31,14 +34,14 @@ export const CheckMark = styled.span`
   height: 1.75rem;
   width: 1.75rem;
   border-radius: 0.125rem;
-  background-color: #ffffff;
+  background-color: ${COLOR.HEX.WHITE};
 
   &:before {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
-    border: 0.0625rem solid #22a6a2;
+    border: 0.0625rem solid ${COLOR.HEX.CYAN_700};
     box-sizing: border-box;
     border-radius: 0.125rem;
   }
@@ -51,15 +54,15 @@ export const CheckMark = styled.span`
     left: 0.6rem;
     width: 0.375rem;
     height: 1rem;
-    border: solid white;
+    border: solid ${COLOR.HEX.WHITE};
     border-width: 0 0.2rem 0.2rem 0;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
   }
 
   ${Checkbox}:checked + & {
-    background-color: #22a6a2;
+    background-color: ${COLOR.HEX.CYAN_700};
 
     &:after {
       display: block;

src/components/commons/atoms/DownwardIcon/index.js → src/components/atoms/IconDownward/index.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
+import { COLOR } from '../../../constants';
 
-export const DownwardIcon = (props) => {
+export const IconDownward = (props) => {
   const { width, color, ...rest } = props;
 
   return (
@@ -17,12 +18,12 @@ export const DownwardIcon = (props) => {
   );
 };
 
-DownwardIcon.propTypes = {
+IconDownward.propTypes = {
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   color: PropTypes.string,
 };
 
-DownwardIcon.defaultProps = {
+IconDownward.defaultProps = {
   width: 10,
-  color: '#333333',
+  color: COLOR.HEX.GRAY_800,
 };

src/components/commons/atoms/TrashCanIcon/index.js → src/components/atoms/IconTrashCan/index.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
+import { COLOR } from '../../../constants';
 
-export const TrashCanIcon = (props) => {
+export const IconTrashCan = (props) => {
   const { width, color, ...rest } = props;
 
   return (
@@ -14,12 +15,12 @@ export const TrashCanIcon = (props) => {
   );
 };
 
-TrashCanIcon.propTypes = {
+IconTrashCan.propTypes = {
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   color: PropTypes.string,
 };
 
-TrashCanIcon.defaultProps = {
+IconTrashCan.defaultProps = {
   width: 22,
-  color: '#BBBBBB',
+  color: COLOR.HEX.GRAY_400,
 };

src/components/commons/atoms/UpwardIcon/index.js → src/components/atoms/IconUpward/index.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
+import { COLOR } from '../../../constants';
 
-export const UpwardIcon = (props) => {
+export const IconUpward = (props) => {
   const { width, color, ...rest } = props;
 
   return (
@@ -10,12 +11,12 @@ export const UpwardIcon = (props) => {
   );
 };
 
-UpwardIcon.propTypes = {
+IconUpward.propTypes = {
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   color: PropTypes.string,
 };
 
-UpwardIcon.defaultProps = {
+IconUpward.defaultProps = {
   width: 10,
-  color: '#333333',
+  color: COLOR.HEX.GRAY_800,
 };

src/components/atoms/Line/index.js

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+import * as S from './style.js';
+import { COLOR } from '../../../constants';
+
+export const Line = (props) => {
+  const { width, thickness, color, ...rest } = props;
+
+  return <S.Line width={width} thickness={thickness} color={color} {...rest} />;
+};
+
+Line.propTypes = {
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  thickness: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  color: PropTypes.string.isRequired,
+};
+
+Line.defaultProps = {
+  width: '100%',
+  thickness: '0.25rem',
+  color: COLOR.HEX.BLACK,
+};

src/components/commons/atoms/Line/style.js → src/components/atoms/Line/style.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const Line = styled.span`
   display: inline-block;
-  width: ${(props) => props.length};
+  width: ${(props) => props.width};
   height: ${(props) => props.thickness};
   background-color: ${(props) => props.color};
 `;