Skip to content

Commit

Permalink
[장바구니 협업 Step 1] 헤다(윤다혜) 미션 제출합니다. (#104)
Browse files Browse the repository at this point in the history
* feat: add contents

* fix typos

* feat: remove requirements

* [장바구니 미션 Step 1] 타미(김태은) 미션 제출합니다. (#172)

* chore: init project

* docs: 기능 목록 작성

* design: 전역 스타일링 적용

* feat: router 설정

* design: styles.d.ts 파일 생성

* feat: Svg 컴포넌트 생성

* feat: Header 컴포넌트 생성

* docs: 기능 목록 업데이트

Co-authored-by: 정호진 <hozzijeong@users.noreply.github.com>

* chore: storybook에 Global Style 적용

Co-authored-by: hozzijeong <ghwls0905@naver.com>

* feat: Counter 컴포넌트 생성

Co-authored-by: 정호진 <hozzijeong@users.noreply.github.com>

* chore: storybook에서 svg sprite를 사용할 수 있게 설정

Co-authored-by: hozzijeong <ghwls0905@naver.com>

* feat: CartItem 컴포넌트 구현

Co-authored-by: hozzijeong <ghwls0905@naver.com>

* feat: 상품 목록 목데이터 생성

Co-authored-by: hozzijeong <ghwls0905@naver.com>

* design: CartItem 디자인 수정

Co-authored-by: hozzijeong <ghwls0905@naver.com>

* feat: 상품 목록을 fetch해오는 로직 구현

Co-authored-by: hozzijeong <ghwls0905@naver.com>

* refactor: CartItem -> ProductItem으로 네이밍 변경

Co-authored-by: 정호진 <hozzijeong@users.noreply.github.com>

* feat: SVG 기본 props를 받아오게 설정

Co-authored-by: hozzijeong <ghwls0905@naver.com>

* feat: 장바구니 버튼을 눌렀을 때 수량 변경하는 기능 구현

Co-authored-by: hozzijeong <ghwls0905@naver.com>

* docs: 기능 목록 업데이트

Co-authored-by: hozzijeong <ghwls0905@naver.com>

* design: Counter 컴포넌트 디자인 수정

Co-authored-by: 정호진 <hozzijeong@users.noreply.github.com>

* refactor: add, remove하는 로직을 custom hook으로 분리

Co-authored-by: hozzijeong <ghwls0905@naver.com>

* refactor: 수량이 변경될 때 해당 컴포넌트만 렌더링 되게 atomFamily로 리팩토링

Co-authored-by: 정호진 <hozzijeong@users.noreply.github.com>

* design: 폰트 설정

Co-authored-by: 정호진 <hozzijeong@users.noreply.github.com>

* design: header 고정 및 스타일 변경

Co-authored-by: 정호진 <hozzijeong@users.noreply.github.com>

* feat: CartId, ProductId 타입 생성

Co-authored-by: hozzijeong <ghwls0905@naver.com>

* feat: 데이터 수정

Co-authored-by: hozzijeong <ghwls0905@naver.com>

* feat: error, success svg icon 추가

Co-authored-by: hozzijeong <ghwls0905@naver.com>

* refactor: 스토리북 분류 추가

Co-authored-by: hozzijeong <ghwls0905@naver.com>

* feat: Toast popup 컴포넌트 구현

Co-authored-by: hozzijeong <ghwls0905@naver.com>

* refactor: productId, cartId 타입 명시

Co-authored-by: hozzijeong <ghwls0905@naver.com>

* chore: build 설정

* chore: 스토리북 자동배포 설정

* docs: 기능 목록 업데이트

* feat: favicon 변경 및 title 수정

* design: 토스트 팝업이 사라지는 애니메이션 구현

* refactor: Counter 컴포넌트에 맞춰 add, remove를 increment, decrement로 네이밍 변경

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

* style: props를 DOM 요소로 인식하지 않게 변수 앞에  추가

* feat: Toast 컴포넌트를 렌더링 하는 custom hook 구현

* style: baseUrl을 src로 수정 및 코드 스타일 수정

* feat: BrowserRouter에서 createBrowserRouter로 변경

* feat: api Loading state 추가

* refactor: renderToast를 함수에서 JSXElement 형태로 변경

* design: 헤더와 ProductList 페이지에 반응형 구현

* feat: 로고를 클릭했을 때 상태가 초기화되도록 구현

* chore: tsconfig target을 ES2015->ES5로 수정

* feat: 로고 클릭 시 메인 페이지로 이동하는 기능 구현

* docs: update README.md

* feat: 토스트 메시지들이 겹치지 않게끔 ToastContainer 생성

* fix: fix typo

* fix: 요구사항에 맞춰 물품 개수->품목 개수로 수정

---------

Co-authored-by: 정호진 <hozzijeong@users.noreply.github.com>
Co-authored-by: hozzijeong <ghwls0905@naver.com>

* [장바구니 미션 Step 2] 타미(김태은) 미션 제출합니다. (#196)

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

* move: Counter 컴포넌트를 common 디렉토리로 이동

* feat: Toast 컴포넌트에 createPortal 적용

* feat: ProductItem 스켈레톤 컴포넌트 구현

* chore: msw 설치

* feat: msw로 API 모킹

* chore: 배포 브랜치 추가

* fix: 배포 환경 수정

* design: theme에 색상 추가 및 폰트 네이밍 변경

* feat: 휴지통 svg 아이콘 추가

* feat: CartItem 컴포넌트 생성

* feat: post요청을 할 수 있도록 useFetch 훅 변경

* refactor: useProductSelect export 방식 변경

* fix: CartItem 컴포넌트 props 수정

* feat: 결제 예상 금액을 알려주는 PaymentDetail 컴포넌트 구현

* feat: CartId와 ProductId 통일

* feat: 헤더에서 atom 전체를 reset하는 로직 제거

* feat: localStorage setItem, getItem을 할 수 있는 hook 생성

* feat: cartList를 localStorage에 저장하고 불러오는 기능 구현

* feat: useFetch hook에 patch request 함수 추가

* feat: ProductList 페이지에서 카운터를 눌렀을 때 변경된 수량에 대해 post, patch 요청 구현

* feat: CartList 페이지 마크업

* fix: CartItem의count props를 currentItem의 quantity로 수정

* feat: 카운터의 숫자가 최소값일 때 button disabled 속성 추가

* docs: 기능 목록 업데이트

* feat: useFetch hook에 delete request 함수 추가

* feat: 휴지통 아이콘을 클릭해 장바구니 아이템을 삭제하는 기능 구현

* fix: ProductItem의 카운터 min값을 0으로 변경

* refactor: cartId와 productId를 통일함에 따라 productId->cartId로 네이밍 변경

* docs: 완료된 기능 목록 업데이트

* feat: 체크박스가 선택된 아이템에 대해 상품 가격 계산 기능 구현

* feat: 장바구니 페이지에서 체크박스 기능 구현

* refactor: 장바구니 이동하는 부분을 버튼으로 변경

* design: 장바구니 헤더 스타일, 체크박스 색상 수정

* design: 모바일 환경 반응형 대응

* feat: 로딩 skeleton ui 적용

* docs: 기능 목록 업데이트

* feat: 장바구니가 비어있는 경우 대응

* chore: storybook의 RecoilRoot를 각 컴포넌트로 이동

* refactor: ProductItemList 컴포넌트로 상품 리스트 이동

* chore: storybook에 msw-addon 설치

* fix: 전체 삭제를 했을 때 undefined가 되는 문제 해결

* chore: RecoilRoot decorator을 다시 preview 파일로 롤백

* feat: CartItemList 컴포넌트 스토리북 작성

* feat: ProductItemList 컴포넌트 스토리북 작성

* move: 컴포넌트 디렉토리를 Common/Product/Cart로 분리

* refactor: useFetch hook을 useGet, useMutate로 분리

* feat: api request를 모아놓은 파일 생성

* refactor: 바뀐 hook 구조에 따라 fetch하는 로직 수정

* refactor: cartList를 atomFamily->atom으로 관리하도록 변경

* refactor: localStorage를 사용하는 로직을 hook->util로 변경

* design: 로고 아이콘에 cursor:pointer 속성 추가

* refactor: 인라인 함수로 있었던 함수를 onNavigateCart로 분리

* refactor: ContentLayout 컴포넌트에 Header 컴포넌트 추가

* refactor: totalPriceSelector 계산 로직 리팩토링

* refactor: 사용하지 않는 로직 제거

* refactor: 컴포넌트 리턴문이 모호하게 작성된 부분 리팩토링

* feat: 로딩 스피너 컴포넌트 구현

* feat: 장바구니 목록을 불러올 때 로딩 스피너 적용

* style: 사용하지 않는 코드 제거

* refactor: any 제거

* feat: 장바구니에 로딩 문구 추가

* refactor: checkedItems를 전역상태에서 제거

* feat: index.html에 메타태그 추가

* feat: github pages에서 새로고침 했을 때 404가 뜨는 현상 해결

* feat: 존재하지 않는 페이지로 라우팅시 404 페이지 노출

* feat: 상품을 선택 삭제할 때 모달 적용

* feat: checkedItems를 다시 전역상태로 롤백

* fix: CartItem 스토리북 수정

* fix: 장바구니가 비어있는 텍스트가 나오지 않는 경우 수정

* fix: 장바구니 페이지에서 수량변경 시 모든 아이템이 체크되는 문제 해결

* refactor: 함수명, 파일명 네이밍 수정

* refactor: 라우팅 주소 상수화

* feat: 서버를 선택하는 select box 마크업

* fix: 카운터를 클릭했을 때 체크가 해지되는 버그 해결

* refactor: 서버 end point를 받아옴에 따라 api request를 받는 부분 수정

* fix: 서버 api 명세에 맞춰 cartId와 productId를 분리

* feat: authorization header 설정

* feat: 백엔드와 api 연결

* refactor: 함수 네이밍 리팩토링

* refactor: cartList를 useCart에서만 사용하게 수정

* feat: 서버 주소 상수로 선언

* fix: 서버를 바꿔도 select box가 변하지 않는 오류 해결

* fix: 타입스크립트 오류 해결

* feat: 서버에 따라 렌더링이 달라지게 구현

* fix: CartList에도 Suspense 적용

---------

Co-authored-by: devJang <devjang2016@gmail.com>
Co-authored-by: Taeeun Kim <xodms0309@naver.com>
Co-authored-by: 정호진 <hozzijeong@users.noreply.github.com>
Co-authored-by: hozzijeong <ghwls0905@naver.com>
  • Loading branch information
5 people committed May 25, 2023
1 parent 3942b06 commit eafd56f
Show file tree
Hide file tree
Showing 85 changed files with 28,501 additions and 0 deletions.
18 changes: 18 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"root": true,
"env": {
"es6": true,
"node": true
},
"parserOptions": {
"ecmaVersion": "latest"
},
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": [
"eslint:recommended",
"prettier",
"plugin:@typescript-eslint/recommended",
"plugin:storybook/recommended"
]
}
22 changes: 22 additions & 0 deletions .github/workflows/chromatic.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
# Workflow name
name: 'Chromatic Deployment'

# Event for the workflow
on: push

# List of jobs
jobs:
test:
# Operating System
runs-on: ubuntu-latest
# Job steps
steps:
- uses: actions/checkout@v1
- run: yarn
#👇 Adds Chromatic as a step in the workflow
- uses: chromaui/action@v1
# Options required for Chromatic's GitHub Action
with:
#👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/ to obtain it
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
token: ${{ secrets.GITHUB_TOKEN }}
36 changes: 36 additions & 0 deletions .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
name: NodeJS with Webpack

on:
push:
branches: ['step1', 'step2']

jobs:
deploy:
runs-on: ubuntu-latest
permissions:
contents: write
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}

steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 18

- uses: actions/cache@v3
id: cache
with:
path: '**/node_modules'
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- run: npm ci
if: steps.cache.outputs.cache-hit != 'true'

- run: npm run build

- uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./build
25 changes: 25 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -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*

.gitmessage.txt
4 changes: 4 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"singleQuote": true,
"endOfLine": "auto"
}
19 changes: 19 additions & 0 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import type { StorybookConfig } from "@storybook/react-webpack5";
const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/preset-create-react-app",
"@storybook/addon-interactions",
],
framework: {
name: "@storybook/react-webpack5",
options: {},
},
docs: {
autodocs: "tag",
},
staticDirs: ["../public"],
};
export default config;
52 changes: 52 additions & 0 deletions .storybook/preview-body.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<div id="custom-root" style="display: none">
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" display="none">
<defs>
<symbol
width="51"
height="44"
viewBox="0 0 51 44"
fill="white"
id="header-cart"
>
<path
d="M46.2746 34.705L50.8177 9.95501C50.8287 9.8454 50.8287 9.73461 50.8177 9.62501C50.8177 9.26033 50.6981 8.9106 50.4851 8.65273C50.2721 8.39487 49.9832 8.25001 49.682 8.25001H13.2691L11.6563 0.976256C11.5855 0.69321 11.4411 0.445361 11.2447 0.269497C11.0483 0.093633 10.8103 -0.000872914 10.566 6.07642e-06H1.97952C1.6783 6.07642e-06 1.38941 0.144872 1.17641 0.402734C0.963411 0.660597 0.84375 1.01033 0.84375 1.37501C0.84375 1.73968 0.963411 2.08942 1.17641 2.34728C1.38941 2.60514 1.6783 2.75001 1.97952 2.75001H9.70277L16.7446 34.7738C16.7921 34.9655 16.8736 35.1423 16.9835 35.292C17.0934 35.4416 17.2289 35.5604 17.3806 35.64C16.9566 36.505 16.7366 37.4942 16.7446 38.5C16.7446 39.9587 17.2232 41.3576 18.0752 42.3891C18.9272 43.4205 20.0827 44 21.2877 44C22.4926 44 23.6481 43.4205 24.5001 42.3891C25.3521 41.3576 25.8307 39.9587 25.8307 38.5C25.8259 37.5328 25.6104 36.5842 25.2061 35.75H37.8131C37.4088 36.5842 37.1933 37.5328 37.1885 38.5C37.1885 39.9587 37.6671 41.3576 38.5191 42.3891C39.3711 43.4205 40.5266 44 41.7316 44C42.9365 44 44.092 43.4205 44.944 42.3891C45.796 41.3576 46.2746 39.9587 46.2746 38.5C46.271 37.4843 46.0352 36.4896 45.5932 35.6263C45.7583 35.5478 45.9059 35.4236 46.0243 35.2636C46.1426 35.1036 46.2284 34.9123 46.2746 34.705ZM41.6066 11H48.2622L47.2514 16.5H41.1069L41.6066 11ZM13.8711 11H21.4012L21.901 16.5H15.0863L13.8711 11ZM16.9149 24.75L15.6997 19.25H22.1622L22.6733 24.75H16.9149ZM17.5282 27.5H22.9232L23.4229 33H18.7549L17.5282 27.5ZM21.2877 41.25C20.8384 41.25 20.3992 41.0887 20.0256 40.7865C19.6521 40.4844 19.3609 40.0549 19.189 39.5524C19.0171 39.0499 18.9721 38.497 19.0598 37.9635C19.1474 37.4301 19.3637 36.9401 19.6814 36.5555C19.9991 36.1709 20.4039 35.909 20.8445 35.8028C21.2851 35.6967 21.7419 35.7512 22.1569 35.9593C22.572 36.1675 22.9268 36.52 23.1764 36.9722C23.426 37.4244 23.5592 37.9561 23.5592 38.5C23.5592 39.2294 23.3199 39.9288 22.8939 40.4445C22.4679 40.9603 21.8901 41.25 21.2877 41.25ZM30.3738 33H25.7058L25.2061 27.5H30.3738V33ZM30.3738 24.75H24.9562L24.4451 19.25H30.3738V24.75ZM30.3738 16.5H24.1952L23.6955 11H30.3738V16.5ZM37.3134 33H32.6454V27.5H37.8131L37.3134 33ZM38.0744 24.75H32.6454V19.25H38.5741L38.0744 24.75ZM38.8353 16.5H32.6454V11H39.3237L38.8353 16.5ZM41.7316 41.25C41.2823 41.25 40.8431 41.0887 40.4695 40.7865C40.096 40.4844 39.8048 40.0549 39.6329 39.5524C39.461 39.0499 39.416 38.497 39.5037 37.9635C39.5913 37.4301 39.8076 36.9401 40.1253 36.5555C40.443 36.1709 40.8478 35.909 41.2884 35.8028C41.729 35.6967 42.1858 35.7512 42.6008 35.9593C43.0159 36.1675 43.3707 36.52 43.6203 36.9722C43.8699 37.4244 44.0031 37.9561 44.0031 38.5C44.0031 39.2294 43.7638 39.9288 43.3378 40.4445C42.9118 40.9603 42.334 41.25 41.7316 41.25ZM44.2303 33H39.5963L40.096 27.5H45.2411L44.2303 33ZM40.3573 24.75L40.8684 19.25H46.763L45.7522 24.75H40.3573Z"
fill="white"
/>
</symbol>
</defs>
<defs>
<symbol
width="25"
height="22"
viewBox="0 0 25 22"
id="cart-icon"
fill="#AAAAAA"
>
<path
d="M2.27577 17.3525L0.00422287 4.9775C-0.00124931 4.9227 -0.00124931 4.8673 0.00422287 4.8125C0.00422287 4.63017 0.0640526 4.4553 0.170551 4.32637C0.27705 4.19744 0.421495 4.125 0.572107 4.125H18.7785L19.5849 0.488128C19.6204 0.346605 19.6925 0.222681 19.7907 0.134749C19.8889 0.0468165 20.008 -0.000436457 20.1301 3.03821e-06H24.4233C24.5739 3.03821e-06 24.7184 0.0724359 24.8249 0.201367C24.9314 0.330298 24.9912 0.505167 24.9912 0.687503C24.9912 0.869839 24.9314 1.04471 24.8249 1.17364C24.7184 1.30257 24.5739 1.375 24.4233 1.375H20.5617L17.0408 17.3869C17.017 17.4827 16.9763 17.5712 16.9213 17.646C16.8664 17.7208 16.7986 17.7802 16.7228 17.82C16.9348 18.2525 17.0448 18.7471 17.0408 19.25C17.0408 19.9793 16.8015 20.6788 16.3755 21.1945C15.9495 21.7103 15.3717 22 14.7693 22C14.1668 22 13.589 21.7103 13.163 21.1945C12.737 20.6788 12.4977 19.9793 12.4977 19.25C12.5001 18.7664 12.6079 18.2921 12.8101 17.875H6.50652C6.70869 18.2921 6.81642 18.7664 6.81886 19.25C6.81886 19.9793 6.57953 20.6788 6.15353 21.1945C5.72754 21.7103 5.14976 22 4.54731 22C3.94486 22 3.36708 21.7103 2.94109 21.1945C2.51509 20.6788 2.27577 19.9793 2.27577 19.25C2.27757 18.7421 2.3955 18.2448 2.6165 17.8131C2.53394 17.7739 2.46011 17.7118 2.40094 17.6318C2.34177 17.5518 2.2989 17.4562 2.27577 17.3525ZM4.60978 5.5H1.28197L1.78738 8.25H4.85965L4.60978 5.5ZM18.4776 5.5H14.7125L14.4626 8.25H17.8699L18.4776 5.5ZM16.9556 12.375L17.5633 9.625H14.332L14.0764 12.375H16.9556ZM16.649 13.75H13.9515L13.7016 16.5H16.0356L16.649 13.75ZM14.7693 20.625C14.9939 20.625 15.2135 20.5444 15.4003 20.3933C15.587 20.2422 15.7326 20.0274 15.8186 19.7762C15.9045 19.5249 15.927 19.2485 15.8832 18.9818C15.8394 18.715 15.7312 18.47 15.5724 18.2777C15.4135 18.0854 15.2112 17.9545 14.9908 17.9014C14.7705 17.8484 14.5422 17.8756 14.3346 17.9797C14.1271 18.0837 13.9497 18.26 13.8249 18.4861C13.7001 18.7122 13.6335 18.9781 13.6335 19.25C13.6335 19.6147 13.7531 19.9644 13.9661 20.2223C14.1791 20.4801 14.468 20.625 14.7693 20.625ZM10.2262 16.5H12.5602L12.8101 13.75H10.2262V16.5ZM10.2262 12.375H12.935L13.1905 9.625H10.2262V12.375ZM10.2262 8.25H13.3155L13.5653 5.5H10.2262V8.25ZM6.75639 16.5H9.0904V13.75H6.50652L6.75639 16.5ZM6.3759 12.375H9.0904V9.625H6.12603L6.3759 12.375ZM5.99542 8.25H9.0904V5.5H5.75123L5.99542 8.25ZM4.54731 20.625C4.77195 20.625 4.99154 20.5444 5.17831 20.3933C5.36509 20.2422 5.51066 20.0274 5.59663 19.7762C5.68259 19.5249 5.70508 19.2485 5.66126 18.9818C5.61744 18.715 5.50926 18.47 5.35042 18.2777C5.19158 18.0854 4.98921 17.9545 4.76889 17.9014C4.54857 17.8484 4.32021 17.8756 4.11267 17.9797C3.90513 18.0837 3.72775 18.26 3.60295 18.4861C3.47815 18.7122 3.41154 18.9781 3.41154 19.25C3.41154 19.6147 3.5312 19.9644 3.7442 20.2223C3.9572 20.4801 4.24609 20.625 4.54731 20.625ZM3.29796 16.5H5.61494L5.36507 13.75H2.79254L3.29796 16.5ZM5.23445 12.375L4.9789 9.625H2.03157L2.53699 12.375H5.23445Z"
fill="#AAAAAA"
/>
</symbol>
<symbol viewBox="0 0 24 24" focusable="false" id="error" fill="#FFFFFF">
<path
fill="#FFFFFF"
d="M11.983,0a12.206,12.206,0,0,0-8.51,3.653A11.8,11.8,0,0,0,0,12.207,11.779,11.779,0,0,0,11.8,24h.214A12.111,12.111,0,0,0,24,11.791h0A11.766,11.766,0,0,0,11.983,0ZM10.5,16.542a1.476,1.476,0,0,1,1.449-1.53h.027a1.527,1.527,0,0,1,1.523,1.47,1.475,1.475,0,0,1-1.449,1.53h-.027A1.529,1.529,0,0,1,10.5,16.542ZM11,12.5v-6a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Z"
/>
</symbol>
<symbol viewBox="0 0 24 24" focusable="false" id="success">
<path
fill="#FFFFFF"
d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"
/>
</symbol>
<symbol viewBox="0 0 24 24" id="trash-can">
<path
d="M3 6v18h18v-18h-18zm5 14c0 .552-.448 1-1 1s-1-.448-1-1v-10c0-.552.448-1 1-1s1 .448 1 1v10zm5 0c0 .552-.448 1-1 1s-1-.448-1-1v-10c0-.552.448-1 1-1s1 .448 1 1v10zm5 0c0 .552-.448 1-1 1s-1-.448-1-1v-10c0-.552.448-1 1-1s1 .448 1 1v10zm4-18v2h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.315c0 .901.73 2 1.631 2h5.712z"
fill="#CCCCCC"
/>
</symbol>
</defs>
</svg>
</div>
<div id="toast-container"></div>
51 changes: 51 additions & 0 deletions .storybook/preview.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import type { Preview } from '@storybook/react';
import { withThemeFromJSXProvider } from '@storybook/addon-styling';
import { initialize, mswDecorator } from 'msw-storybook-addon';
import { ThemeProvider } from 'styled-components';
import GlobalStyle from '../src/styles/GlobalStyle';
import theme from '../src/styles/theme';
import { handlers } from '../src/mocks/handlers';
import { RecoilRoot } from 'recoil';
import React from 'react';

let options = {};
if (location.hostname === 'xodms0309.github.io') {
options = {
serviceWorker: {
url: '/react-shopping-cart/mockServiceWorker.js',
},
};
}

initialize(options);

export const decorators = [
withThemeFromJSXProvider({
GlobalStyles: GlobalStyle, // Adds your GlobalStyle component to all stories
themes: {
theme: theme,
},
Provider: ThemeProvider,
}),
mswDecorator,
(Story) => (
<RecoilRoot>
<Story />
</RecoilRoot>
),
];

const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
msw: handlers,
},
};

export default preview;
43 changes: 43 additions & 0 deletions docs/REQUIREMENTS.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
# 장바구니 미션

## 📝 1단계 기능 목록

- [x] mock 데이터를 만든다.
- [x] 저장된 mock 데이터를 불러와서 화면에 렌더링된 상품들의 정보를 나타낼 수 있다.
- [x] 상품을 장바구니에 담을 수 있다.
- [x] 장바구니 버튼 클릭시에 상품이 1개로 장바구니에 추가된다.
- [x] 이미 담긴 상품이라면 수량을 조절할 수 있다.
- [x] 갯수가 1인 상태에서 '-'를 누른다면 해당 상품을 장바구니에서 삭제한다.
- [x] 헤더에서 장바구니에 담긴 물품 개수를 나타낸다.

## 📝 2단계 기능 목록

- [x] MSW를 활용하여 실제 서버와 연동될 수 있는 API Mocking을 구현
- [x] get요청을 통해 장바구니 목록을 불러온다.
- [x] post요청을 통해 장바구니에 추가 한다.
- [x] patch요청을 통해 장바구니의 수량을 수정한다.
- [x] delete요청을 통해 장바구니 아이템을 삭제한다.
- [x] 새로고침 해도 장바구니에 담은 상품 유지 (localStorage 저장)
- [x] 장바구니 페이지 구현
- [x] 장바구니에서 체크박스 클릭 시 결제 예상 금액이 추가된다.
- [x] 체크박스 전체 선택/해제를 할 수 있다.
- [x] 장바구니에 담긴 물품의 수량을 조절할 수 있다.
- [x] 장바구니에서 상품을 개별적으로 삭제할 수 있다.
- [x] 장바구니에서 선택된 상품을 삭제할 수 있다.
- [x] 모바일 환경 반응형 대응

---

- [x] 최초 장바구니 추가시에 toast alert 를 통해 장바구니에 상품이 추가됐음을 알려준다.
- [x] 이미지 로딩 시 Skeleton UI 구현
- [x] 장바구니가 비어있는 경우 대응
- [x] 장바구니 로딩 스피너 구현
- [x] 삭제를 할 때 모달 구현

## 협업 step1

- [x] 체크박스 버그 고치기 (uncheck상태에서 수량변경시 checked로 변하는 버그)
- [x] 서버선택필드 마크업
- [ ] API 연동
- [ ] 로컬스토리지 로직 제거
- [ ]
Loading

0 comments on commit eafd56f

Please sign in to comment.