Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[1단계 - 장바구니 미션] 초코(강다빈) 미션 제출합니다. #274

Merged
merged 101 commits into from
May 21, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
101 commits
Select commit Hold shift + click to select a range
2007fe1
docs : 기능 구현 목록 작성
00kang May 14, 2024
65135b5
feat : .gitignore에 .env 추가
00kang May 14, 2024
7d85cf2
feat : 인증 정보 생성 메서드 구현
00kang May 14, 2024
4440286
feat : 사용자의 장바구니 목록 조회 API 구현
00kang May 14, 2024
bd129c4
feat : 장바구니 아이템 수량 조회 API 구현
00kang May 14, 2024
ec8b3c8
feat : 장바구니 아이템 수량 변경 API 구현
00kang May 14, 2024
e2e2bb0
refactor : API 호출 메서드명 METHOD로 시작하도록 수정
00kang May 14, 2024
f460fa7
feat : 사용자의 장바구니 목록 조회 API 메서드에 파라미터 추가
00kang May 14, 2024
e8e77f6
feat : 장바구니 아이템 삭제 API 구현
00kang May 14, 2024
86b7450
feat : 사용자의 장바구니에 아이템 추가 API 구현
00kang May 14, 2024
a7ba11f
feat : ConfirmButton 컴포넌트 구현
00kang May 14, 2024
4d44700
feat : HeaderButton 컴포넌트 구현
00kang May 14, 2024
3e17cc6
feat : Header 컴포넌트 구현
00kang May 14, 2024
7720760
feat : CartHeader 컴포넌트 구현
00kang May 14, 2024
3cca2fc
feat : ConfirmButton, HeaderButton 컴포넌트 스타일 수정
00kang May 14, 2024
730f8b8
feat : assets 폴더에 버튼에 사용되는 이미지 추가
00kang May 14, 2024
3c920da
feat : ActioinButton 컴포넌트를 통해 select, delete, plus, minus 버튼 구현
00kang May 14, 2024
c6a5bc2
feat : CartItemCard 컴포넌트 구현
00kang May 15, 2024
d0bd43e
feat : 상품 이름과 가격 사이 여백 추가
00kang May 15, 2024
a8d5b1d
feat : CartItemCardList 컴포넌트 구현
00kang May 15, 2024
f496cfb
feat : CartItemCardList 에 여백 스타일링 추가
00kang May 15, 2024
9234c22
feat : CartSummaryItem 컴포넌트 구현
00kang May 15, 2024
0921e0b
feat : CartSummry 컴포넌트 구현
00kang May 15, 2024
3846324
refactor : 컴포넌트 스타일 디테일 수정
00kang May 15, 2024
5f886fa
feat : CartContentSection 컴포넌트 구현
00kang May 15, 2024
dedd353
feat : CartPage 컴포넌트 구현
00kang May 15, 2024
aacc386
feat : OrderConfirmationPage 컴포넌트 구현
00kang May 15, 2024
e8a4ca7
chore : react-router-dom 라이브러리 설치
00kang May 15, 2024
08a7c58
feat : react-router-dom 을 활용한 라우팅 연결
00kang May 15, 2024
77492f1
refactor : 색상형식 통일
00kang May 15, 2024
1bd11f4
feat : OrderConfirmationPage에 ConfirmButton 추가
00kang May 15, 2024
8a82e56
fix : styled-component 문제 해결
00kang May 15, 2024
dc91470
fix : App.css import
00kang May 15, 2024
c35f527
feat : 상품목록조회 API 연동 및 상태 업데이트 로직 구현
00kang May 15, 2024
91f1acc
feat : 상품 종류 수량 API 연동 및 상태 업데이트 로직 구현
00kang May 15, 2024
f3fba46
feat : 장바구니 개별 상품 삭제 API 연동 및 상태 업데이트 로직 구현
00kang May 15, 2024
89cabee
feat : 상품 선택 상태 업데이트 로직 구현
00kang May 15, 2024
573f678
feat : 장바구니 개별 상품 수량 변경 API 연동 및 상태 업데이트 로직 구현
00kang May 15, 2024
54817a2
feat : 장바구니 주문 금액 상태 업데이트 로직 구현
00kang May 15, 2024
c7e7df8
feat : 배송비 상태 업데이트 로직 구현
00kang May 15, 2024
ac882be
feat : 총 결제 금액 상태 업데이트 로직 구현
00kang May 15, 2024
e7cb606
feat : 상품 금액 디테일 수정
00kang May 15, 2024
f6ee470
feat : 선택한 상품은 삭제되지 않도록 구현
00kang May 15, 2024
c1995fa
feat : devlievryPrice와 totalPrice selector로 변경
00kang May 16, 2024
98573b8
feat : 주문 확인 페이지에 필요한 데이터 상태 업데이트 로직 구현
00kang May 16, 2024
25a12bc
refactor : UI 디테일 수정
00kang May 16, 2024
d5bdfea
feat : 로컬스토리지에 장바구니 상품 선택 여부 저장하고 불러오기
00kang May 16, 2024
f8bb236
refactor : 폴더 구조 변경 및 경로 수정
00kang May 16, 2024
0011a39
chore : storybook 설치
00kang May 16, 2024
ec90530
fix : 장바구니에 아이템 추가 시 실시간 렌더링되지 않는 문제 해결
00kang May 16, 2024
8a84c85
refactor : atom과 selector 파일 구조 변경 및 경로 수정
00kang May 16, 2024
50ee8aa
test : atom 으로 관리하는 상품 목록 조회, 상품 총 수량 초기값 테스트
00kang May 16, 2024
ebc8d16
test : selector으로 관리하는 상품 종류 수량, 주문 금액 초기값 테스트
00kang May 16, 2024
dc31724
feat : 테스트에 사용할 mockData 생성
00kang May 16, 2024
39d5dd7
feat : mockData를 활용한 장바구니 데이터 로딩 테스트
00kang May 16, 2024
bc2a26e
feat : 테스트를 위한 mockCartItemsData 네이밍 변경
00kang May 16, 2024
488df09
feat : 테스트를 위한 mockSelectedItemsData 생성
00kang May 16, 2024
9a7c21a
test : 개별 상품 선택 및 전체 상품 선택 기능 테스트
00kang May 16, 2024
4733c51
test : 주문 금액 확인 테스트
00kang May 16, 2024
dcc7e7c
test : 결제 금액에 따른 배송비 계산 테스트
00kang May 16, 2024
d5c31e1
feat : 수량 증가 테스트를 위한 mockChangeCountData 생성
00kang May 16, 2024
c79c55b
test : 수량 증가 테스트
00kang May 16, 2024
741a439
feat : baseURL 추가
00kang May 16, 2024
e94c43a
build : CI/CD 환경 구축
00kang May 16, 2024
9928f8b
build : .gitignore에서 dist 삭제 후 재 빌드
00kang May 16, 2024
24d48a2
chore : baseURL 세팅
00kang May 16, 2024
3c9de79
feat : 각종 상수화 파일 생성
00kang May 19, 2024
bc8899a
refactor : 상수 처리
00kang May 19, 2024
52eab9e
refactor : 공통 헤더 및 응답 처리를 유틸리티 함수로 추출
00kang May 19, 2024
e5aefac
feat: ActionButton에서 CounterButton 분리
00kang May 19, 2024
1502b73
feat: ActionButton에서 DeleteButton 분리
00kang May 19, 2024
a7087e7
refactor : ActionButton을 대체하는 CheckboxButton, CounterButton, DeleteBu…
00kang May 19, 2024
b96e678
refactor : ActionButton을 대체하는 CheckboxButton, CounterButton, DeleteBu…
00kang May 19, 2024
e1a7bd4
fix : useEffect 의존성 배열 수정
00kang May 19, 2024
49583a3
feat : 버튼색을 LIGHT와 DARK로 상수 처리
00kang May 19, 2024
f7bf55f
refactor : 버튼색을 mode(LIGHT와 DARK)로 전달하기
00kang May 19, 2024
d5877ad
refactor : categoryCount를 uniqueItemCount로, cartItemsCount를 totalItem…
00kang May 19, 2024
89e2104
refactor : clicked와 checked를 isChecked로 변경
00kang May 19, 2024
12d9b60
refactor : useDecreaseCartItemQuantity 커스텀 훅으로 로직 분리
00kang May 19, 2024
123f838
refactor : useDeleteCartItem 커스텀 훅으로 로직 분리
00kang May 19, 2024
c79f5a5
refactor : useIncreaseCartItemQuantity 커스텀 훅으로 로직 분리
00kang May 19, 2024
3669fd6
refactor : CartItemCard 에서 커스텀 훅 사용
00kang May 19, 2024
6d5f0a4
feat : CartSummaryState에 필요한 type 선언
00kang May 19, 2024
fea87a3
refactor : orderPriceState, deliveryPriceState, totalPriceState를 cart…
00kang May 19, 2024
df70a80
refactor : cartSummarySelectorState 사용으로 수정
00kang May 19, 2024
d72a4a4
refactor : getLocalStorageState 유틸함수로 분리
00kang May 19, 2024
054c0a5
refactor : env 설정을 import.meta에서 process로 변경
00kang May 19, 2024
e6ac675
refactor : atom 테스트 케이스 설명 디테일하게 작성
00kang May 19, 2024
6d3272b
feat : 수정된 selector 에 맞는 테스트 케이스 작성
00kang May 19, 2024
1c31651
refactor : .gitignore 에 dist 추가
00kang May 19, 2024
1c883a3
refactor : Storybook 삭제..
00kang May 19, 2024
dc88138
fix : env 세팅 재수정
00kang May 19, 2024
b5da3f7
feat : dist 디렉터리 삭제
00kang May 19, 2024
72a8c8e
refactor : increment 상수처리
00kang May 19, 2024
d448f5c
refactor : CheckedButtonIcon과 UncheckedButtonIcon 이미지 해상도 높이기
00kang May 20, 2024
25bc571
refactor : 주문금액이 0원일 때에도 배송비가 0원이 되도록 수정
00kang May 20, 2024
e0ade2a
refactor : 선택된 상품에 한해서 주문금액을 계산하도록 수정
00kang May 20, 2024
13b7b6b
refactor : 선택한 상품에 한해서 상품 종류 수량과 상품 총 갯수 계산하도록 수정
00kang May 20, 2024
1e32d0c
refactor : 체크한 상품이 아니라 장바구니에 담긴 상품 개수를 기준으로 빈페이지 렌더링하도록 수정
00kang May 20, 2024
5799164
refactor : index.ts 를 활용해서 import문 수정
00kang May 20, 2024
6633c22
refactor : 상태값에 따른 테스트 코드 수정
00kang May 20, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
Expand Down
42 changes: 42 additions & 0 deletions .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
name: Deploy
on:
push:
branches: ["step1"]
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: "pages"
cancel-in-progress: true
jobs:
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Set up Node.js
uses: actions/setup-node@v3
with:
node-version: 18
cache: "npm"
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
env:
VITE_BASE_URL: ${{ secrets.VITE_BASE_URL }}
VITE_USER_ID: ${{ secrets.VITE_USER_ID }}
VITE_PASSWORD: ${{ secrets.VITE_PASSWORD }}
- name: Build storybook
run: |
npm run build-storybook
mv ./storybook-static ./dist/storybook
- name: Deploy to gh-pages branch
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.TOKEN }}
publish_dir: ./dist
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,6 @@ dist-ssr
*.njsproj
*.sln
*.sw?

.env
*storybook.log
52 changes: 51 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,51 @@
# react-shopping-cart
## STEP1 기능 구현 목록

- 장바구니 API 연동
- [x] 장바구니 목록 조회
- [x] 장바구니 아이템 추가
- [x] 장바구니 아이템 수량 조회
- [x] 장바구니 아이템 수량 변경
- [x] 장바구니 아이템 삭제
- Recoil로 장바구니 상태 관리
- [x] 상품 목록 조회
- [x] 상품 종류 수량
- [x] 개별 상품의 수량
- [x] 개별 상품 삭제
- [x] 전체 상품의 선택 여부
- [x] 개별 상품의 선택 여부
- [x] 개별 상품의 수량 업데이트
- [x] 주문 금액
- [x] 배송비
- [x] 총 결제 금액
- Storage
- [x] 장바구니의 상품 선택 상태를 스토리지에 저장 및 불러오기
- [x] 새로고침 시에도 장바구니 상태 유지
- UI 컴포넌트 작업
- [x] Header
- [x] CartHeader
- [x] CartItemCardList
- [x] CartItemCard
- [x] CartSummary
- [x] CartSummaryItem
- [x] HeaderButton
- [x] ConfirmButton
- [x] ActionButton
- [x] CheckButton
- [x] Plus/Minus Button
- [x] Select Button
- UI 페이지 작업
- [x] CartPage
- [x] OrderConfirmationPage
- [x] 라우터
- Storybook
- [ ]
- RTL
- [x] 상품 목록 조회, 상품 총 수량 초기값 테스트
- [x] 상품 종류 수량, 주문 금액 초기값 테스트
- [x] 장바구니 데이터 로딩: mockData를 통해 초기 장바구니 데이터를 정상적으로 불러오는지 테스트
- [x] 게별 상품 선택 기능: 개별 상품의 선택/해제 여부가 정상적으로 변경되는지 테스트
- [x] 전체 상품 선택 기능: 전체 상품의 선택/해제 여부가 정상적으로 변경되는지 테스트
- [x] 결제 금액 계산: 선택된 상품들의 가격 합계가 결제 금액으로 정상 반영되는지 테스트
- [x] 배송비 계산: 결제 금액에 따라 배송비가 정상적으로 계산되는지 (10만원 이상 무료) 테스트
- [x] 수량 변경 기능: 상품의 수량을 변경할 때 올바르게 반영되는지 테스트
- [ ] 상품 제거 기능: 장바구니에서 상품을 제거할 때 정상적으로 동작하는지 테스트
Loading