feat:9주차 123미션

[kimdoyeon1234]

📌 작업 내용

Redux Toolkit과 Zustand를 활용한 음반 장바구니(PLAY LIST) 상태 관리 및 전역 모달 UI 기능 구현

✨ 상세 작업 내용

• 기본 프로젝트 세팅 및 Mock Data 분리: verbatimModuleSyntax 타입스크립트 엄격한 모듈 규칙에 맞춰 음반 Mock 데이터 구조와 전용 타입을 안전하게 정의 및 분리하였습니다
• Redux Toolkit 기반 상태 관리 및 Slice 분리: 장바구니 기능과 모달 제어 기능(modalSlice)을 별도 파일로 명확히 분리하고, 중앙 저장소에 각각의 리듀서를 독립적으로 등록하였습니다
• Reducer 중심의 UI 모달 제어: 컴포넌트 내부에서 useState를 사용하지 않고 Redux의 openModal, closeModal 액션을 디스패치하여 모달의 열림/닫힘 상태를 제어하였으며, "네" 클릭 시 장바구니가 비워지는 액션연동을 완료하였습니다
• Zustand 구조 전면 리팩토링: 기존 Redux의 보일러플레이트 코드를 제거하고, 단일 Zustand 스토어를 설계하여 수량 증가/감소/삭제/총액 계산 및 모달 제어 액션을 하나로 통합했습니다
• Tailwind CSS 완성 화면 매칭: 스크린샷 래퍼런스 레이아웃과 100% 매칭되도록 다크 네이비 상단 바, 가로형 음반 카드 구조, 하단 총 가격 표시 영역 및 전체 삭제 버튼 스타일링을 구현하였습니다

📸 스크린샷

기본 화면	모달

✅ 체크리스트

• 기능 정상 작동 확인
• 불필요한 주석 삭제
• 해당 주차 키워드 내용 이해

[yewon20804]

9주차 미션 1,2,3 수고하셨습니다 ! Redux Toolkit과 Zustand 두 가지 방식 모두 구현하셨고, 구조가 깔끔하게 분리되어 있어요 👍 아래 코멘트 확인해주세요 !

---

1. week9/src/store/useCartStore.ts — decrease 로직 경계 조건

// 현재 코드
.filter((item) => item.amount >= 1);

// ✅ 더 명확한 표현
.filter((item) => item.amount > 0);

amount가 0이 되어도 filter로 제거되기 전에 잠깐 0인 상태가 화면에 보일 수 있습니다. 현재 구현은 >= 1로 필터링하므로 실제로는 0인 아이템이 렌더링되기 직전에 제거됩니다. 이 자체는 문제없지만, amount < 1이 아닌 amount === 0으로 작성하면 의도가 더 명확할 것 같아요 !

---

2. week9/src/constants/cartItems.ts — price 타입이 string인데 숫자 연산에 사용됨

// 현재 코드
export interface CartItemType {
  price: string; // 
}

// ✅ 수정
export interface CartItemType {
  price: number;
}

// 데이터도 따옴표 제거
{ price: 25000, ... }  // ✅
{ price: '25000', ... }  // ❌

price가 string으로 선언되어 있는데 calculateTotals에서 Number(item.price)로 변환해서 쓰고 있습니다 ! 처음부터 number로 선언하면 더 명확하고 간단하게 사용 가능합니다 !