9주차_노아_미션3 완료

[seongmin-noh]

✅ Summary

이번 PR에서는 기존 Redux 기반 상태관리 로직을 Zustand 스토어로 전면 교체했습니다.
Redux Toolkit에서 사용하던 cart/playlist/모달 관련 상태 및 액션들을 동일한 동작을 유지하도록 그대로 옮겼습니다.

1. Zustand 스토어 신규 생성 및 초기 상태 이전

새로운 Zustand 스토어 생성 (create() 기반)

기존 Redux cart / playlist 상태값을 그대로 가져와 초기값으로 설정

상태 인터페이스 및 액션 타입을 TypeScript로 명확히 정의해 타입 안정성 강화

2. Redux 액션 및 리듀서 로직을 Zustand 방식으로 변환

증가 / 감소 / 삭제 / 전체 삭제 / 합계 계산 등 Redux Toolkit에서 사용하던 로직을
set((state) => { ... }) 패턴으로 완전히 변환

기존 액션 함수명 및 매개변수를 그대로 유지하여 컴포넌트 수정 최소화

기존 Reducer 로직의 불변성 처리 방식이 Zustand에서도 동일하게 적용되도록 반영

3. 모달(Modal) 상태도 Zustand로 통합

기존 Redux / useState로 관리하던 모달 열림/닫힘 상태를 Zustand 스토어로 이동

openModal, closeModal 등 명확한 액션 함수 생성

모달에서 실행되는 “전체 삭제” 같은 동작이 zustand 액션들과 자연스럽게 연동되도록 구조 개선

4. 컴포넌트 Redux 의존성 제거

useSelector, useDispatch 제거

컴포넌트가 직접 만든 useXxxStore를 통해 상태/액션을 구조 분해 할당으로 가져오는 형태로 변경

예: const { items, increase, decrease } = useCartStore();

Redux Provider 및 store 설정 코드 전체 제거 → 전역 구조 단순화

5. 기존 동작 동일성 검증 완료

개별 아이템 증가/감소/삭제/전체 삭제 모두 이전과 동일하게 정상 동작 확인

합계 계산 UI도 Redux 버전과 동일하게 작동

모달 열림/닫힘 및 “확인/취소” 플로우가 자연스럽게 작동함을 확인