Create Week09 Mission01, 02, 03

[librelldd]

📝 미션 번호

Week09 Mission01, 02, 03

📋 구현 사항

스토어 구축:
Zustand(create) 기반의 중앙 집약형 전역 상태 관리 및 TypeScript 타입 안정성 확보
가독성 최적화:
immer 미들웨어를 연동하여 불변성을 유지하는 직관적인 상태 변경 로직 구현
장바구니 기능:
id 기반의 아이템 수량 가감(최소 1개 유지) 및 총 수량·금액 실시간 합계 연동
모달 통합:
Redux에 있던모달 상태(isOpen, open/close)를 Zustand로 합쳐 관리 주체 단일화
로직 연쇄 반응:
모달 "네" 클릭 시 장바구니 비우기(clearCart)와 모달 닫기가 동시에 실행되도록 연동

📎 스크린샷

Week09_mission01.mp4

Week09_mission02.mp4

Week09_mission03.mp4

✅ 체크리스트

• Merge 하려는 브랜치가 올바르게 설정되어 있나요?
• 로컬에서 실행했을 때 에러가 발생하지 않나요?
• 불필요한 주석이 제거되었나요?
• 코드 스타일이 일관적인가요?

🤔 질문 사항

Summary by CodeRabbit

• 새로운 기능

  • LP 마켓플레이스 애플리케이션 구축 (검색, 무한 스크롤, 댓글, 좋아요 기능 포함)
  • 사용자 인증 및 프로필 관리 시스템 추가
  • Redux 기반 장바구니 애플리케이션 구현
  • useReducer 패턴 학습 데모 추가

• 문서

  • React + TypeScript + Vite 프로젝트 설정 및 구성 가이드 제공

• 참고사항

  • 여러 개의 독립적인 프로젝트 초기화 포함

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: bfd93163-640c-43ad-b851-fbf542670c41

📥 Commits

Reviewing files that changed from the base of the PR and between 8f63415 and 908ff45.

⛔ Files ignored due to path filters (20)

• Week08/librelldd/mission01/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
• Week08/librelldd/mission01/public/images/google.png is excluded by !**/*.png
• Week09/librelldd/mission00/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
• Week09/librelldd/mission00/public/favicon.svg is excluded by !**/*.svg
• Week09/librelldd/mission00/public/icons.svg is excluded by !**/*.svg
• Week09/librelldd/mission00/src/assets/hero.png is excluded by !**/*.png
• Week09/librelldd/mission00/src/assets/react.svg is excluded by !**/*.svg
• Week09/librelldd/mission00/src/assets/vite.svg is excluded by !**/*.svg
• Week09/librelldd/mission01/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
• Week09/librelldd/mission01/public/favicon.svg is excluded by !**/*.svg
• Week09/librelldd/mission01/public/icons.svg is excluded by !**/*.svg
• Week09/librelldd/mission01/src/assets/hero.png is excluded by !**/*.png
• Week09/librelldd/mission01/src/assets/react.svg is excluded by !**/*.svg
• Week09/librelldd/mission01/src/assets/vite.svg is excluded by !**/*.svg
• Week09/librelldd/mission02/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
• Week09/librelldd/mission02/public/favicon.svg is excluded by !**/*.svg
• Week09/librelldd/mission02/public/icons.svg is excluded by !**/*.svg
• Week09/librelldd/mission02/src/assets/hero.png is excluded by !**/*.png
• Week09/librelldd/mission02/src/assets/react.svg is excluded by !**/*.svg
• Week09/librelldd/mission02/src/assets/vite.svg is excluded by !**/*.svg

📒 Files selected for processing (122)

• Week08/librelldd/mission01/.gitignore
• Week08/librelldd/mission01/README.md
• Week08/librelldd/mission01/eslint.config.js
• Week08/librelldd/mission01/index.html
• Week08/librelldd/mission01/package.json
• Week08/librelldd/mission01/postcss.config.js
• Week08/librelldd/mission01/src/App.css
• Week08/librelldd/mission01/src/App.tsx
• Week08/librelldd/mission01/src/apis/auth.ts
• Week08/librelldd/mission01/src/apis/axios.ts
• Week08/librelldd/mission01/src/apis/lp.ts
• Week08/librelldd/mission01/src/components/CreateLpModal.tsx
• Week08/librelldd/mission01/src/components/ErrorRetry.tsx
• Week08/librelldd/mission01/src/components/Footer.tsx
• Week08/librelldd/mission01/src/components/LpCard.tsx
• Week08/librelldd/mission01/src/components/LpSkeleton.tsx
• Week08/librelldd/mission01/src/components/Modal.tsx
• Week08/librelldd/mission01/src/components/Navbar.tsx
• Week08/librelldd/mission01/src/components/Sidebar.tsx
• Week08/librelldd/mission01/src/constants/key.ts
• Week08/librelldd/mission01/src/context/AuthContext.tsx
• Week08/librelldd/mission01/src/enums/common.ts
• Week08/librelldd/mission01/src/hooks/queries/useGetInfiniteComments.ts
• Week08/librelldd/mission01/src/hooks/queries/useGetInfiniteLpList.ts
• Week08/librelldd/mission01/src/hooks/queries/useGetLpList.ts
• Week08/librelldd/mission01/src/hooks/useCreateLp.ts
• Week08/librelldd/mission01/src/hooks/useDarkMode.ts
• Week08/librelldd/mission01/src/hooks/useDebounce.ts
• Week08/librelldd/mission01/src/hooks/useForm.ts
• Week08/librelldd/mission01/src/hooks/useLocalStorage.ts
• Week08/librelldd/mission01/src/hooks/useSidebar.ts
• Week08/librelldd/mission01/src/hooks/useThrottle.ts
• Week08/librelldd/mission01/src/hooks/useUpdateProfile.ts
• Week08/librelldd/mission01/src/index.css
• Week08/librelldd/mission01/src/layouts/HomeLayout.tsx
• Week08/librelldd/mission01/src/layouts/ProtectedLayout.tsx
• Week08/librelldd/mission01/src/main.tsx
• Week08/librelldd/mission01/src/pages/GoogleLoginRedirectPage.tsx
• Week08/librelldd/mission01/src/pages/HomePage.tsx
• Week08/librelldd/mission01/src/pages/LoginPage.tsx
• Week08/librelldd/mission01/src/pages/LpDetailPage.tsx
• Week08/librelldd/mission01/src/pages/MyPage.tsx
• Week08/librelldd/mission01/src/pages/NotFoundPage.tsx
• Week08/librelldd/mission01/src/pages/SignupPage.tsx
• Week08/librelldd/mission01/src/pages/ThrottlePage.tsx
• Week08/librelldd/mission01/src/src/components/Navbar.tsx
• Week08/librelldd/mission01/src/types/auth.ts
• Week08/librelldd/mission01/src/types/common.ts
• Week08/librelldd/mission01/src/types/lp.ts
• Week08/librelldd/mission01/src/utils/validate.ts
• Week08/librelldd/mission01/src/vite-env.d.ts
• Week08/librelldd/mission01/tsconfig.app.json
• Week08/librelldd/mission01/tsconfig.json
• Week08/librelldd/mission01/tsconfig.node.json
• Week08/librelldd/mission01/vite
• Week08/librelldd/mission01/vite.config.ts
• Week09/librelldd/mission00/.gitignore
• Week09/librelldd/mission00/README.md
• Week09/librelldd/mission00/eslint.config.js
• Week09/librelldd/mission00/index.html
• Week09/librelldd/mission00/package.json
• Week09/librelldd/mission00/src/App.css
• Week09/librelldd/mission00/src/App.tsx
• Week09/librelldd/mission00/src/UseReducer/UseReducerCompany.tsx
• Week09/librelldd/mission00/src/UseReducer/UseReducerPage.tsx
• Week09/librelldd/mission00/src/index.css
• Week09/librelldd/mission00/src/main.tsx
• Week09/librelldd/mission00/tsconfig.app.json
• Week09/librelldd/mission00/tsconfig.json
• Week09/librelldd/mission00/tsconfig.node.json
• Week09/librelldd/mission00/vite.config.ts
• Week09/librelldd/mission01/.gitignore
• Week09/librelldd/mission01/README.md
• Week09/librelldd/mission01/eslint.config.js
• Week09/librelldd/mission01/index.html
• Week09/librelldd/mission01/package.json
• Week09/librelldd/mission01/src/App.css
• Week09/librelldd/mission01/src/App.tsx
• Week09/librelldd/mission01/src/components/CartItem.tsx
• Week09/librelldd/mission01/src/components/CartList.tsx
• Week09/librelldd/mission01/src/components/Modal.tsx
• Week09/librelldd/mission01/src/components/Navbar.tsx
• Week09/librelldd/mission01/src/components/TotalPrice.tsx
• Week09/librelldd/mission01/src/constants/cartItems.ts
• Week09/librelldd/mission01/src/features/cart/cartSlice.ts
• Week09/librelldd/mission01/src/hooks/useCustomRedux.ts
• Week09/librelldd/mission01/src/index.css
• Week09/librelldd/mission01/src/main.tsx
• Week09/librelldd/mission01/src/modal/modalSlice.ts
• Week09/librelldd/mission01/src/slices/cartSlice.ts
• Week09/librelldd/mission01/src/store/store.ts
• Week09/librelldd/mission01/src/types/cart.ts
• Week09/librelldd/mission01/tsconfig.app.json
• Week09/librelldd/mission01/tsconfig.json
• Week09/librelldd/mission01/tsconfig.node.json
• Week09/librelldd/mission01/vite.config.ts
• Week09/librelldd/mission02/.gitignore
• Week09/librelldd/mission02/README.md
• Week09/librelldd/mission02/eslint.config.js
• Week09/librelldd/mission02/index.html
• Week09/librelldd/mission02/package.json
• Week09/librelldd/mission02/src/App.css
• Week09/librelldd/mission02/src/App.tsx
• Week09/librelldd/mission02/src/components/CartItem.tsx
• Week09/librelldd/mission02/src/components/CartList.tsx
• Week09/librelldd/mission02/src/components/Modal.tsx
• Week09/librelldd/mission02/src/components/Navbar.tsx
• Week09/librelldd/mission02/src/components/TotalPrice.tsx
• Week09/librelldd/mission02/src/constants/cartItems.ts
• Week09/librelldd/mission02/src/features/cart/cartSlice.ts
• Week09/librelldd/mission02/src/hooks/useCartStore.ts
• Week09/librelldd/mission02/src/hooks/useCustomRedux.ts
• Week09/librelldd/mission02/src/index.css
• Week09/librelldd/mission02/src/main.tsx
• Week09/librelldd/mission02/src/modal/modalSlice.ts
• Week09/librelldd/mission02/src/slices/cartSlice.ts
• Week09/librelldd/mission02/src/store/store.ts
• Week09/librelldd/mission02/src/types/cart.ts
• Week09/librelldd/mission02/tsconfig.app.json
• Week09/librelldd/mission02/tsconfig.json
• Week09/librelldd/mission02/tsconfig.node.json
• Week09/librelldd/mission02/vite.config.ts

---

📝 Walkthrough

Walkthrough

Week08에 인증/LP 기능을 갖춘 React 앱을 신규 추가했고, Week09에 Vite 템플릿과 Redux/Zustand 장바구니 예제 앱들을 각각 생성했습니다. Axios 인터셉터, Auth 컨텍스트, 쿼리 훅, UI 컴포넌트, Redux/Zustand 스토어와 TS/Vite 설정이 포함됩니다.

Changes

Week08 librelldd/mission01 — 인증·LP 앱

Layer / File(s)	Summary
앱 쉘, 라우팅, Axios/LP/Auth 클라이언트 src/App.tsx, src/apis/*, index.html, package.json, postcss.config.js, .gitignore, vite.config.ts	앱 엔트리와 라우터/Query 클라이언트, 인증·LP API, Axios 인터셉터(401 리프레시/큐 재시도) 추가.
작성 모달·스켈레톤·Navbar/Sidebar/Modal 컴포넌트 src/components/*	LP 작성 모달, 스켈레톤, 공용 모달, Navbar, LpCard 등 UI 추가.
Auth 컨텍스트·사이드바/키 상수 src/context/AuthContext.tsx, src/components/Sidebar.tsx, src/constants/key.ts	Auth 컨텍스트/훅과 Sidebar(탈퇴 모달 포함), 로컬스토리지/쿼리 키 정의.
쿼리 훅·유틸 훅·프로필 업데이트·스타일 src/hooks/**/*, src/index.css	무한 스크롤/목록·댓글 쿼리 훅, 디바운스/스로틀/다크모드/폼/로컬스토리지, 프로필 업데이트 훅 및 전역 스타일.
레이아웃·페이지(홈/상세/로그인/회원가입 등)·타입 src/layouts/*, src/pages/*, src/types/*	Home/Detail/Login/Signup/My/Redirect/Throttle/NotFound 페이지와 레이아웃, DTO·공통·LP 타입 추가.

Week09 librelldd/mission00 — Vite 템플릿 + useReducer 예제

Layer / File(s)	Summary
프로젝트 스캐폴드/문서/ESLint/Vite README.md, eslint.config.js, index.html, package.json	기본 템플릿과 ESLint/Vite 설정 추가.
전역/페이지 스타일 src/App.css, src/index.css	전역 테마와 레이아웃 스타일 추가.
useReducer 예제 컴포넌트 src/UseReducer/*, src/App.tsx	회사/카운터 useReducer 예제 추가 및 App 연결.
부트스트랩/TS 설정 src/main.tsx, tsconfig*.json, vite.config.ts	엔트리 부트스트랩과 TS 프로젝트 레퍼런스 설정.

Week09 librelldd/mission01 — Redux 장바구니

Layer / File(s)	Summary
스캐폴드/문서/엔트리 README.md, eslint.config.js, index.html, package.json, src/index.css	프로젝트 구성과 엔트리/스타일 추가.
App 및 UI 컴포넌트 src/App.tsx, src/components/*	Provider 래핑과 CartItem/List/Navbar/TotalPrice/Modal 구현.
Cart/Modal 슬라이스·스토어/타입/TS 설정 src/features/*, src/slices/*, src/modal/*, src/store/store.ts, src/types/*, tsconfig*.json, vite.config.ts	장바구니/모달 슬라이스, 커스텀 훅, 스토어/타입 및 설정 추가.

Week09 librelldd/mission02 — Redux+Zustand 장바구니

Layer / File(s)	Summary
스캐폴드/문서/엔트리 README.md, eslint.config.js, index.html, package.json	프로젝트 스캐폴드와 기본 설정.
App 및 UI 컴포넌트 src/App.tsx, src/components/*, src/constants/cartItems.ts	Redux Provider 구성, 장바구니 UI 및 상수 추가.
Redux/Zustand 슬라이스·스토어/타입/TS 설정 src/features/*, src/slices/*, src/modal/*, src/store/*, src/hooks/useCartStore.ts, src/types/*, tsconfig*.json, vite.config.ts	Redux 슬라이스와 병행해 Zustand 스토어/액션·셀렉터 훅을 도입, 설정 정리.

Sequence Diagram(s)

sequenceDiagram
  participant Client as 클라이언트 UI
  participant Store as Redux/Zustand 스토어
  participant Modal as Modal 컴포넌트
  Client->>Store: add/remove/increase/decrease 디스패치
  Store-->>Client: state 변경(amount/total/cartItems)
  Client->>Modal: 전체 비우기 클릭(openModal)
  Modal->>Store: clearCart 후 closeModal
  Store-->>Client: cartItems=[], isOpen=false 반영

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~75 minutes

Possibly related PRs

• HSU-Makeus-Challenge-10th/Web#67 — 동일한 Auth/LP/React Query 구조를 추가한 Week07/08 계열 PR과 코드 경로가 겹칩니다.
• HSU-Makeus-Challenge-10th/Web#48 — Axios 인터셉터/리프레시, Auth 컨텍스트/가드 라우팅 흐름이 본 PR과 일치합니다.
• HSU-Makeus-Challenge-10th/Web#56 — 401 리프레시 및 큐 재시도 로직을 포함한 axiosInstance 구현이 직접적으로 유사합니다.

Suggested reviewers

• wantkdd

Poem

밤하늘 빌드에 별이 반짝, vite가 빛을 내고
토큰은 새로고침, 요청은 다시 달려가고
카트에 쌓인 LP들, 총합은 리덕스가 알고
주스탄드는 살짝 거들며, 모달은 살포시 닫고
깡총, 토글하는 토끼의 PR 축하 박수! 🐇✨

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch Week09

[wantkdd]

Week09 미션의 Redux 장바구니, 모달, Zustand 전환 흐름은 전체적으로 구현되어 있는데, Mission3에서도 Redux Provider, store, useSelector/useDispatch, modalSlice가 일부 남아 있어 장바구니는 Zustand가 맡고 모달은 Redux가 맡는 구조가 되었습니다. Zustand 리팩토링 미션에서는 Redux 흔적을 걷어내고 모달 상태까지 Zustand 액션으로 일원화하면 상태 관리 책임이 더 명확해지고, selector 기반 부분 구독도 더 자연스럽게 적용할 수 있을 것 같습니다. 장바구니 기능 흐름 자체는 잘 잡혀 있으니 다음 정리 때 상태 관리 책임만 더 깔끔하게 분리해보면 좋겠습니다, 수고하셨습니다!