[장바구니 미션 Step 2] 가브리엘(윤주현) 미션 제출합니다. (#231)

* chore: vite 초기 설정

* docs: 기능 요구 사항 반영하여 구현 목록 작성

Co-authored-by: Gabriel Ju Hyun, Yoon <gabrielyoon7@gmail.com>

* chore: github page 자동 배포 설정

* chore: storybook 설치 및 자동배포 설정

* test: product item 컴포넌트 스토리북 테스트 추가

* feat: product item 컴포넌트 뼈대 구현

* chore: styled-components 및 해당 타입 설치

* feat: product item 컴포넌트 스타일 구현

* test: product item 컴포넌트 스타일북 케이스 추가

* feat: product item type 별도로 분리

* feat: CartController 컴포넌트 구현 및 적용

* test: CartController 스토리 추가

* refactor: ProductItem 스타일 높이 변경 및 배경 색상 제거

* refactor: 사용하지 않는 App, index 스타일 제거

* chore: svg 이미지 파일 추가 및 타입 설정

* feat: global style 적용하여 기본 스타일링 reset

* chore: svg 파일 타입 컴포넌트로 지정

* feat: Header 컴포넌트 스타일 적용하여 구현

* test: Header 컴포넌트 스토리 테스트 추가

* refactor: 프로젝트 title 변경

* feat: style theme 적용

* test: header 컴포넌트 스토리에 providers 적용

* fix: globalStyle 오탈자 수정

* test: ProductItem 컴포넌트 스토리북에 providers 적용

* chore: 배포 중 eslint 적용하지 않도록 설정

* fix: 배포시 빌드 버그 수정

* fix: 사용하지 않는 라이브러리 import 제거

* chore: react-router-dom 설치

* feat: react router dom을 위한 공통 레이아웃 구현 및 적용

* fix: base url 버그 수정

* fix: storybook 테스트를 위한 router-dom providers에 추가

* chore: recoil 설치

* feat: 상품 리스트 mock 데이터 생성

* feat: recoil root 적용 및 providers에 추가

* feat: Home 컴포넌트 구현 및 상품 리스트를 mock api로 구현

* feat: cart list 상태로 관리 및 장바구니 등록 버튼 클릭시 상태 변경 구현

* feat: 장바구니 리스트 수량 조절 기능 구현

* fix: useCart 커스텀 훅 mockAPI 통신 순서 변경

* fix: CartController 컴포넌트 자체로 갖고 있던 quantity 상태 제거

* refactor: useCart 커스텀훅 반복되는 로직 추상화

* feat: 반응형 ui 적용

* refactor: CartController 컴포넌트 높이 등 세부 스타일링 수정

* feat: mockApi 적용하여 장바구니 아이템 local storage에 등록 구현

* feat: mockApi 이용하여 장바구니 업데이트 및 local storage 등록

* feat: 상품 리스트 local storage 등록 및 로딩 시 불러오기 구현

* feat: mockApi 이용하여 장바구니 아이템 삭제 기능 구현

* fix: 컴포넌트 수정으로 인한 storybook 수정사항 적용

* refactor: 사용하지 않는 지역변수 제거

* docs: 기능 요구사항 문서 최신화

* refactor: 기본 이미지를 고양이에서 다른 이미지로 변경

* refactor: atom 모듈화

* fix: 수량이 100개 이상 설정되는 문제 수정

* docs: 기능 목록 요구사항 최신화

* docs: readme 작성

* style: 불필요한 코드 제거 및 코드 간격 조정 등

* feat: 데이터 처리 중 오류 발생 시 콘솔에 결과가 출력되는 기능 구현

* Update readme.md

* Update readme.md

* refactor: html lang을 en 에서 ko 로 변경

* refactor: 과도한 래핑 함수 제거

* refactor: 가독성 개선을 위해 quantity 삼항연산자 분리

* style: jsx self-closing element 적용

* style: 불필요한 주석 제거

* refactor: 검색한 카트의 수량을 nullish coalescing operator으로 접근하도록 개선

* refactor: 타입 import 방식 변경

- Type-Only Imports and Exports 로 변경
- https://www.typescriptlang.org/ko/docs/handbook/release-notes/typescript-3-8.html

* refactor: import * as S from ... 표기법 제거

* refactor: 신규 장바구니 아이템 추가 전 검사하는 로직 개선

* style: 불필요한 Fragment 제거

* refactor: addCart에서 이미 있는 장바구니 아이템이 발견되는 경우 반환되는 로직을 개선

* style: 주석 스타일 개선

* refactor: 장바구니 페이지 품목 임시 표시용 텍스트 스타일 변경

* chore: storyvook v6 => v5.3.10으로 다운그레이드

* chore: 미사용 패키지 제거

* refactor: newCartItem을 타입으로 강제하도록 개선

* refactor: nested object 의 프로퍼티 값을 수정하기 위한 새로운 함수 구현
- map 함수를 제거

* chore: recoil-persist 설치

* refactor: mockApi 제거

- recoil-persist를 활용하여 장바구니 리스트를 세션 스토리지에서 관리

- 추후 msw로 이전하기 위한 기초 작업

* refactor: ProductList 컴포넌트 추가

- useRecoilValueLoadable에서 데이터를 받아오도록 개선

* refactor: 불필요한 커스텀훅 제거

* refactor: 장바구니 갯수를 selector로 계산하도록 개선

* refactor: 함수명 변경

* refactor: 장바구니 수량 조회 로직 개선

- atoms selector로 조회

* fix: vite 환경에서의 Duplicate atom key 에러 해결

facebookexperimental/Recoil#733 (comment)

* fix: selector 버그 수정을 위해 원상 복구

* refactor: recoil-persist 제거

- recoil 상태 유지를 하지 않는 것으로 계획 변경

* chore: msw 설치 및 기본 세팅

* refactor: 상품 목록을 fetch에 연결 및 msw 모킹 구현

* chore: react-error-boundary 설치

* refactor: 상품 리스트 수신 에러 핸들링

* refactor: 장바구니 목록을 msw로 mocking

* refactor: 신규 장바구니 추가 fetch 추가 및 msw mocking 구현

* refactor: 삭제 fetch 구현 (msw)

* refactor: 장바구니 아이템 수량 변경 fetch 코드 구현 및 msw mocking

* refactor: mockData 이미지 주소를 http => https 변경

* fix: 배포시 이미지가 뜨지 않는 문제 수정

* fix: 이미지 요청이 필터링 되는 문제 수정

* refactor: api 계층 분리

* fix: 이미지 버그 수정

- 기존에 사용한 임시 파일이  https가 아닌 http로 변환되는 문제가 있었음.

* style: 불필요한 코드 제거

* refactor: 불필요한 코드 제거

* refactor: 버튼 디자인 개선

* refactor: 헤더 디자인 개선

* feat: 장바구니 기본 html 뼈대 작업

* feat: 장바구니 컴포넌트 뼈대 추가

* refactor: 장바구니 아이템 기본 디자인 추가

* refactor: 장바구니 목록 디자인 뼈대 구현

* chore: eslint 규칙 추가

* refactor: 테마의 색상을 nested 객체로 수정

* refactor: 변수명 변경
- Column => Col
- Cart => CartItem

* fix: 오탈자 수정

* refactor: CartList 컴포넌트 분리

* feat: 구매 박스 모듈화 및 기본 디자인 적용

* refactor: 장바구니 페이지 디자인 개선 작업

- 구매 박스 모듈화
- 장바구니 페이지 내 간격 및 구조 개선 등

* fix: 브랜치 변경으로 인해 자동 배포가 되지 않던 문제 해결

* refactor: fetchAddCart 로직 개선

* refactor: useCart 코드 정리

- 일부 코드 모듈화
- 과도한 연산을 요구하는 함수의 역할을 이전

등

* feat: 장바구니 아이템이 선택됐는지 확인할 수 있는 체크용 프로퍼티 추가

- 기본 값으로 참(체크됨) 처리

* feat: 장바구니 페이지에서 아이템을 직접 삭제할 수 있는 기능 추가

* feat: 모든 아이템이 선택되었을 때 전체 선택이 자동으로 체크 처리 되는 기능 구현

* feat: 장바구니 아이템 구매여부 체크기능 구현

* fix: storybook 배포 버그 문제 수정

- 프로퍼티 변경 반영

* feat: 장바구니 리스트 전체 선택/해제 기능 구현

* feat: 장바구니 리스트에서 현재 몇 개의 상품이 선택됐는지 확인하는 기능 구현

* feat: 장바구니 결제 금액 계산기 구현

* refactor: 장바구니 리스트와 구매 박스 styled-components 추가 적용

* feat: 장바구니 리스트가 비어있을 때 대응하는 페이지 추가

* test: 스토리북에서 장바구니 아이템을 아주 많이 추가했을 때의 케이스를 추가

* feat: 장바구니 페이지에 반응형 시스템 추가

* refactor: 숫자 표기가 1,000단위에서 끊기게 수정

* refactor: 디자인 개선

- 결제 텍스트 간격 개선
- 휴지통에 커서 효과 적용

* feat: 물품 삭제 시 확인 문구 출력하는 기능 추가

* refactor: recoil 상태관리에 필요한 selectors 구조 개선

* feat: 상품에 hover 효과 적용

* feat: 상품에 스켈레톤 효과 적용

* feat: 상품 정보를 출력할 모달 추가

* feat: 상품 정보를 출력할 모달 구현 및 디자인 완료

* feat: 상품에 장바구니 수량이 뜨는 디자인 기능 구현

* feat: 장바구니에서 빈 공간을 눌렀을 때의 상호작용 기능 추가

- 장바구니 쉽게 체크하기
- 장바구니 전체 쉽게 체크하기

* feat: 선택 삭제 기능 구현

* refactor: 상품 조회 모달 디자인 개선

* refactor: 장바구니 수량 조절 디자인 개선

* refactor: Modal 컴포넌트의 styled 모듈화

* refactor: 상품 모달 코드 구조 개선

- styled 모듈화

* refactor: selectFamily를 활용하여 특정 상품의 장바구니 수량을 얻을 수 있도록 로직 개선

* refactor: selectFamily를 활용하여 특정 상품의 장바구니 수량을 수정할 수 있는 로직 구현

* refactor: updateCartListQuantitySelector에서도 fetch가 되도록 개선 및 기존 코드 제거

* refactor: 불필요한 함수 제거

* refactor: 함수명 변경

- updateCartListQuantitySelector => updateCartItemQuantitySelector

* refactor: 장바구니 아이템을 추가하는 로직 개선

* refactor: 장바구니 아이템을 삭제하는 로직 개선

* refactor: 장바구니 아이템 수량 조절기로 삭제하는 로직 복구

* refactor: 선택된 장바구니 아이템을 삭제하는 기능 로직 개선

* refactor: 장바구니 구매 체크박스 선택 로직 개선

* refactor: 장바구니 전체 선택 기능 로직 개선

- 커스텀훅 완전 제거

* fix: 배포 버그 수정

* chore: 스토리북 배포 설정 수정

* fix: 스토리북 중복 키 문제 수정

* Update readme.md

* style: 전체 프로젝트 prettier 적용

* fix: 병합 충돌 문제 해결

* refactor: 불필요한 코드 제거

* refactor: 카트 아이콘 코드 개선

* refactor: 상품 목록을 요청하는 기능을 모듈화 하기 위해 컴포넌트로 분리

* refactor: 불필요한 변수 제거

* refactor: 모든 장바구니 아이템 체크 여부 확인 로직 개선

* refactor: useRecoilCallback를 활용한 상태 업데이트 로직 개선

- useSetRecoilState에서 인자를 반드시 넘겨줘야 하는 문제를 해결하기 위해 useRecoilCallback을 사용

- https://recoiljs.org/docs/api-reference/core/useRecoilCallback/

---------

Co-authored-by: ukkodeveloper <ukkodeveloper@gmail.com>

.eslintrc.cjs

@@ -1,16 +1,23 @@
 module.exports = {
   env: {
     browser: true,
-    es2020: true
+    es2020: true,
   },
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
-  parser: '@typescript-eslint/parser',
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:storybook/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module'
+    ecmaVersion: "latest",
+    sourceType: "module",
   },
-  plugins: ['react-refresh'],
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': 'warn'
-  }
-};
+    "react-refresh/only-export-components": "warn",
+    "eol-last": 2,
+    semi: 2,
+  },
+};

.github/workflows/chromatic.yml

@@ -4,7 +4,7 @@ name: 'Chromatic Deployment'
 # Event for the workflow
 on:
   push:
-    branches: ['step1']
+    branches: ['step2']
 
 # List of jobs
 jobs:

.github/workflows/deploy.yml

@@ -4,7 +4,7 @@ name: Deploy static content to Pages
 on:
   # 기본 브랜치에 대한 푸시 이벤트 발생 시 실행
   push:
-    branches: ['step1']
+    branches: ['step2']
 
   # Actions 탭에서 수동으로 워크플로우를 실행할 수 있도록 구성
   workflow_dispatch:

index.html

@@ -1,16 +1,14 @@
 <!DOCTYPE html>
 <html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Shopping Cart</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>React Shopping Cart</title>
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-
-</html>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>