9주차 미션_이즈, 10주차 미션_이즈

[DADAIZGOOD]

📄 요약

Reducer를 활용하여 모달 기능을 추가
redux-toolkit 사용
zustand 사용

• .

📝 작업 내용

이번 주차 워크북에서 수행한 세부 항목들을 체크리스트로 작성해주세요.
구현 완료한 내용에만 체크표시 해주세요!

• 아래의 Mock-Data를, constants 폴더에 별도로, 관리해서 사용하세요! → 기본 세팅
• 모든 스타일링을 **tailwind-css**를 활용해서 만들어주세요.
• 전역 상태 관리 라이브러리인 redux-toolkit 을 활용해서 만들어주세요.
• redux-toolkit를 사용하기 위해서 Provider를 연결해주세요. (공식문서 참고)
• configureStore를 활용해, 중앙 저장소를 만들어주세요!
• cart에 관한 상태이니 cartSlice를 만들어주고, 중앙 저장소에 연결해주세요!
• 음반수량 증가시 해당하는 음반의 수량이 증가되게 action 함수를 만들어주세요. (increase action 기능 구현)
• 음반수량 감소시 해당하는 음반의 수량이 증가되게 action 함수를 만들어주세요. (decrease action 기능 구현)
• 음반 수량이 1보다 작아질 수 없지 않을까요? 1보다 작아진다면, 장바구니 목록에서 자동으로 제거되게 만들어주세요. (removeItem action 기능 구현)
• 두번째 이미지의 전체 삭제 버튼을 누르면 음반들이 리스트에서 다 제거되도록 위의 영상처럼 화면을 구성해 주세요! (clearCart action 기능 구현)
• 음반 수량 증가/감소 기능을 구현했습니다. 이를 바탕으로, 전체 금액이 얼마인지, 장바구니에 담고 있는 전체 수량이 몇 개인지, 계산해주는 action 함수를 만들어주세요. (calculateTotals action 기능 구현)
• 마지막으로, 전체 기능이 잘 동작하는지 확인해보고, 만약에 되지 않는다면 위의 영상처럼 기능이 정확히 동작하게 수정해보세요. (ex. 분명, 장바구니 수량을 증가시켰는데 전체 금액이나, 쇼핑카트 전체 수량에 반영이 안되는 경우 등.)
• Cart Slice, Modal Slice 별도로 파일을 분리하였는가?
• Modal이 나오고, 아니요 버튼을 누르면 모달 창이 사라지는가?
• Modal이 나오고, 네 버튼을 누르면 모든 쇼핑카트의 목록들이 제거 되고, 모달 창이 사라지는가?
• 이전 미션에서 만든 clearCart Action을 활용했는가?
• Reducer를 활용해서 만들었는가? (useState를 사용하지 않고, reducer를 통해 만들어보세요! 제일 중요합니다!!)
• 미션 1과 미션 2에서 만든 UMC PlayList를 Zustand를 활용하여, 만들어주세요!
• 영화 검색 결과로 나온 영화를 클릭하면 아래와 같이 ‘모달’ 형태로 영화의 상세 정보를 불러오도록 해보록 해보세요!
• 영화 검색 기능을 만들어보세요!
• 영화 검색을 하였을 때 React.memo, useCallback, useMemo 등을 활용하여 영화부분만 리렌더링 되도록 해보세요!

📸 스크린샷

작업한 내용의 스크린샷이나 GIF를 첨부해주세요

🗨️ 리뷰 요구사항 (선택)

특별히 리뷰어가 집중해서 봐줬으면 하는 부분이 있다면 작성해주세요!

[vlmbuyd]

고생하셨습니다!