Skip to content

[1단계 - 장바구니] 캉골(김문경) 미션 제출합니다. #352

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

Merged
merged 76 commits into from
Jun 6, 2025
Merged
Show file tree
Hide file tree
Changes from 57 commits
Commits
Show all changes
76 commits
Select commit Hold shift + click to select a range
5484192
chore: 의존성 제거
woowa-euijinkk May 27, 2025
ed13dc4
docs: README.md에 구현 기능 목록 및 요구 사항 추가
mun-kyeong May 27, 2025
c7248b9
feat: emotion 설치 및 적용
mun-kyeong May 27, 2025
37a2e4e
feat: Header 컴포넌트 및 스타일 추가
mun-kyeong May 27, 2025
628b072
chore: App.css 파일 삭제 및 스타일 리셋 추가
mun-kyeong May 27, 2025
afd8aa7
feat: Main 컴포넌트 및 스타일 추가
mun-kyeong May 27, 2025
7511f5c
feat: 장바구니 및 상품 컴포넌트 추가, 버튼 및 수량 선택기 구현
mun-kyeong May 27, 2025
9152bdf
feat: CheckBox 컴포넌트 및 스타일 추가
mun-kyeong May 28, 2025
1f13716
feat: Line 컴포넌트 및 스타일 추가
mun-kyeong May 28, 2025
11019c6
feat: CartProduct 및 CartProductContainer 스타일 및 구조 개선
mun-kyeong May 28, 2025
134eea3
feat: CheckBox 컴포넌트의 스타일 import 수정 및 id prop 추가
mun-kyeong May 28, 2025
3323b89
feat: SelectAllLayout 추가 및 전체 선택 체크박스 구현
mun-kyeong May 28, 2025
bd0374a
feat: PaymentSummary 컴포넌트 추가 및 스타일 정의
mun-kyeong May 28, 2025
9ad9554
feat: SummaryRow 컴포넌트 추가 및 스타일 적용
mun-kyeong May 28, 2025
7896b81
feat: PaymentSummary 컴포넌트의 레이아웃 및 스타일 개선
mun-kyeong May 28, 2025
b671550
feat: 주문 확인 버튼 추가
mun-kyeong May 28, 2025
653c771
feat: 주문 확인 버튼 위치 변경
mun-kyeong May 28, 2025
05531e3
feat: 체크박스 컴포넌트에 onChange 핸들러 추가 및 CartProductContainer에서 선택 기능 구현
mun-kyeong May 28, 2025
4757dd1
feat: 장바구니 API 기능 추가 (GET, POST, PATCH, DELETE)
mun-kyeong May 28, 2025
6cb5d8f
feat: 장바구니 데이터 관리 훅 및 컴포넌트 통합
mun-kyeong May 28, 2025
c72d7ef
feat: 장바구니 관련 상태 관리 훅 제거 및 컴포넌트 통합
mun-kyeong May 28, 2025
2249cf1
feat: Toast 컴포넌트 및 스타일 추가
mun-kyeong May 28, 2025
d575844
feat: Toast 컴포넌트 추가 및 오류 처리 기능 구현
mun-kyeong May 28, 2025
095229b
fix: handleDelete 함수에서 삭제할 아이디를 동적으로 처리하도록 수정
mun-kyeong May 28, 2025
1b10d05
refactor: maxQuantity 속성 제거 및 QuantitySelector에서 관련 코드 정리
mun-kyeong May 28, 2025
e531aac
refactor : 장바구니 아이템 상태 끌어올리기
mun-kyeong May 28, 2025
53dae78
feat: PaymentSummary 가격 계산 로직 추가
mun-kyeong May 28, 2025
6314108
feat: 버튼 스타일 및 상태에 따
mun-kyeong May 28, 2025
8a4b775
fix: 상태 관리 개선을 위한 useEffect 최적화
mun-kyeong May 29, 2025
ec2bb19
feat: 장바구니가 비었을 때 표시할 EmptyShoppingCart 컴포넌트 추가
mun-kyeong May 29, 2025
34a7f0e
feat: react-router-dom 패키지 추가
mun-kyeong May 29, 2025
77074f2
feat: 장바구니 페이지 및 스타일 컴포넌트 추가
mun-kyeong May 29, 2025
8b26cd2
feat: 장바구니 페이지 및 스타일 컴포넌트 재구성
mun-kyeong May 29, 2025
e5170b3
feat: PageLayout 컴포넌트 추가
mun-kyeong May 29, 2025
2263c57
feat: 주문 확인 페이지 및 스타일 컴포넌트 추가
mun-kyeong May 29, 2025
cebc4e7
feat: getTotalPrice 유틸리티 함수 추가
mun-kyeong May 29, 2025
aa78b7c
feat: 라우팅 추가 및 장바구니 페이지 레이아웃 개선
mun-kyeong May 29, 2025
d080f17
feat: 장바구니 페이지에 CartProductList 추가 및 Footer 컴포넌트 구현
mun-kyeong May 29, 2025
327872c
feat: PageLayout 컴포넌트의 배경색 추가
mun-kyeong May 29, 2025
eec994a
chore : vitest 설치 및 환경 세팅
mun-kyeong May 29, 2025
7864b18
feat: 장바구니 페이지에 대한 테스트 추가
mun-kyeong May 29, 2025
0c9813f
feat: msw 패키지 추가
mun-kyeong May 29, 2025
edb2267
feat: MSW 설정 및 테스트 환경 구성
mun-kyeong May 29, 2025
5c1a4bc
feat: 제품 및 장바구니 데이터 추가
mun-kyeong May 29, 2025
cf369a5
fix: CartItemTypes의 quantity 타입을 number로 수정
mun-kyeong May 29, 2025
3c2b4b4
feat: 장바구니 핸들러 및 API 엔드포인트 추가
mun-kyeong May 29, 2025
3da9aac
feat: 라우터에 basename 추가 및 장바구니 테스트 추가
mun-kyeong May 29, 2025
b53dd00
chore: jest 설정 파일 삭제
mun-kyeong May 29, 2025
8f153f2
fix: jest 타입 제거
mun-kyeong May 29, 2025
13d668f
fix: ProductTypes에서 quantity 필드 제거
mun-kyeong May 29, 2025
aaf7032
feat: SummaryRow에 dataTestId 추가 및 장바구니 수량 변경 테스트 추가
mun-kyeong May 29, 2025
48786b2
test: 장바구니 수량 변경에 대한 테스트 추가 및 getTotalPrice 테스트 파일 생성
mun-kyeong May 29, 2025
5ff07ad
feat: CheckBox 컴포넌트에 dataTestId 추가 및 장바구니 전체 선택 기능에 대한 테스트 케이스 추가
mun-kyeong May 29, 2025
45fbbcd
feat: 주문확인 페이지에 총 결제금액 표시 형식 수정 및 테스트 추가
mun-kyeong May 29, 2025
c5b8d32
feat: package.json에 deploy 스크립트 추가 및 homepage 필드 업데이트
mun-kyeong May 29, 2025
0003cbc
feat: README 및 PR 템플릿 추가
mun-kyeong May 29, 2025
a1c30dc
fix: 이미지 경로를 절대 경로로 수정하여 올바른 리소스 로드 보장
mun-kyeong May 29, 2025
02bdc8b
refactor: api 호출을 apiClient로 통합하고 관련 함수 재구성
mun-kyeong Jun 3, 2025
32986aa
refactor: PAGEABLE_DEFAULT 상수 내보내기 제거
mun-kyeong Jun 3, 2025
f25d3f4
refactor : domain 기준으로 폴더구조 변경
mun-kyeong Jun 3, 2025
5d21582
refactor: 테스트 파일을 관련 함수와 같은 디렉토리로 이동
mun-kyeong Jun 3, 2025
df75372
refactor: 핸들러 함수 구조 개선 및 코드 정리
mun-kyeong Jun 4, 2025
9edfed9
refactor: reduce 함수의 가독성 향상
mun-kyeong Jun 4, 2025
88a253e
feat: useSelectedCartIds 훅 추가
mun-kyeong Jun 4, 2025
bb60966
feat: useShoppingCartApi 훅 추가
mun-kyeong Jun 4, 2025
4aed9f8
refactor: selectedCartId를 selectedCartIds로 변경하여 일관성 유지
mun-kyeong Jun 4, 2025
7149203
refactor: CartProductContainer 및 useSelectedCartIds 훅의 구조 개선 및 코드 정리
mun-kyeong Jun 4, 2025
eb7f652
refactor: 아이템 삭제 후 selectedCartIds 배열에서의 id값 동기화 문제 해결
mun-kyeong Jun 4, 2025
e6d89e3
refactor: withErrorHandling 함수의 반환 타입 정의
mun-kyeong Jun 4, 2025
681e1c1
refactor: cartItem을 cartItems로 변경
mun-kyeong Jun 4, 2025
36e5516
refactor: CartProvider 및 useCart 훅 추가로 상태 관리 개선
mun-kyeong Jun 4, 2025
2882908
refactor: patchShoppingCart 함수의 productId 타입을 string으로 변경
mun-kyeong Jun 4, 2025
c20f179
refactor: useShoppingCartApi에서 patchCartItem 함수 추가 및 상태 관리 개선
mun-kyeong Jun 4, 2025
5a904a6
refactor: useCart 훅에서 불필요한 함수 사용 제거 및 patchCartItem 사용
mun-kyeong Jun 4, 2025
2aca1b9
refactor: getTotalPrice 테스트에서 selectedCartId를 복수형으로 변경
mun-kyeong Jun 4, 2025
8ea762d
refactor: onChange 인터페이스 명칭 변경 (handleCheckBox)
mun-kyeong Jun 4, 2025
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
58 changes: 58 additions & 0 deletions .github/pull_request_template.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
## 📦 장바구니 미션

이번 미션을 통해 다음과 같은 학습 경험들을 쌓는 것을 목표로 합니다.

### 1단계

- 클라이언트 상태를 효과적으로 모델링하고 관리할 수 있다.
- Jest, React Testing Library(RTL)를 활용하여 주요 기능에 대한 테스트를 작성할 수 있다.

## 🕵️ 셀프 리뷰(Self-Review)

### 제출 전 체크 리스트

- [ ] 기능 요구 사항을 모두 구현했고, 정상적으로 동작하는지 확인했나요?
- [ ] RTL 테스트 케이스를 모두 작성했나요?
- [ ] 배포한 데모 페이지에 정상적으로 접근할 수 있나요?

- 배포 링크 기입: **\_\_**

- [ ] 리뷰어가 장바구니 추가를 쉽게 할 수 있도록 Curl 명령어를 DM 으로 전달해주세요.

```
curl -X 'POST' \
'<url>' \
-H 'accept: */*' \
-H 'Authorization: Basic <토큰>' \
-H 'Content-Type: application/json' \
-d '{
"productId": 1,
"quantity": 1
}'
```

### 리뷰 요청 & 논의하고 싶은 내용

### 1) 상태 설계 의도

### 2) 이번 단계에서 가장 많이 고민했던 문제와 해결 과정에서 배운 점

### 3) 이번 리뷰를 통해 논의하고 싶은 부분

---

## ✅ 리뷰어 체크 포인트

<!-- 리뷰어가 이 PR을 검토할 때 중점적으로 확인할 사항입니다.
코드의 완성도뿐만 아니라, 리뷰이가 구현 과정에서 어떤 고민과 결정을 하며 학습했는지도 함께 고려해 주세요. -->

### 1. 클라이언트 상태관리

- 원본상태/파생상태를 적절히 구분하여 선언하였나요?
- React state 를 불필요하게 선언한 부분은 없나요?
- 상태 관리 로직의 책임이 적절히 응집/분리되었나요? (ex. reducer, hook, Context)

### 2. MSW/Test

- 주요 기능을 적절히 정의하였나요?
- 주요 기능/예외에 대한 테스트가 충분히 이루어졌나요?
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,7 @@ dist-ssr
*.njsproj
*.sln
*.sw?


text.txt
.env
43 changes: 43 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1 +1,44 @@
# react-shopping-cart

## 구현 기능 목록

- [x] /cart-items API를 호출하여 장바구니 상품 데이터를 불러온다.
- [x] 상품 선택에 따른 결제 금액의 동적인 변경 사항을 처리한다.
- [x] 상품 선택/해제 시 결제 금액을 동적으로 변경한다.
- [x] 상품 선택에 따른 배송비의 동적인 변경 사항을 처리한다.
- [x] 결제 금액이 10만원 이상일 경우 배송비는 무료이다.
- [x] 진입 시, 전체 선택 되어 있는 것이 디폴트이다.
- [x] 장바구니 상품의 수량을 변경할 수 있다.
- [x] 장바구니에 담긴 상품을 제거할 수 있다.
- [x] Jest, React Testing Library를 사용하여 주요 기능에 대한 테스트 케이스를 작성한다.

## 🎯 기능 요구 사항

- 불러온 데이터를 기반으로 클라이언트 상태를 구성하고 관리한다.
- 개별 상품의 선택 여부, 결제 금액, 배송비 등의 상태를 관리한다.

## ✅ 프로그래밍 요구사항

이전 미션의 프로그래밍 요구사항은 기본으로 포함한다.

**State Management**

- React의 상태 관리 훅(useState, useReducer)을 사용하여 상태를 구성하고, 필요 시에 Context API 등을 활용해 해당 상태가 필요한 컴포넌트 트리에 상태를 전달합니다.
- 결제 금액, 배송비 등의 파생 상태(Derived State)를 동적으로 계산한다.

**API**

- /cart-items API를 호출하여 장바구니 데이터를 받아오고 수정한다. 자세한 API 스펙은 링크를 참고한다.
관리자 페이지에서 상품 추가 및 삭제가 가능하다.
- 설정에서 계정 정보(username, password)를 확인할 수 있다.
- email: github username, password: 'password'

**Test**

- Jest, React Testing Library를 사용하여 주요 기능에 대한 테스트 케이스를 작성한다.
- 주요 기능을 명확히 정의하고, 그것을 어떻게 테스트할 지 스스로 판단한다.

**Library**

- 스타일링에는 CSS Module, styled-components, emotion 중 한 가지를 선택하여 사용한다.
- 명시된 라이브러리 외에는 사용하지 않고 직접 구현한다.
11 changes: 0 additions & 11 deletions jest.config.ts

This file was deleted.

1 change: 0 additions & 1 deletion jest.setup.ts

This file was deleted.

Loading