Conversation
hyesngy
left a comment
hyesngy
left a comment
There was a problem hiding this comment.
정말 고생 많으셨습니다! 👏🏻👏🏻👏🏻
이번 주 워크북을 통해 Redux Toolkit과 Zustand 두 가지 상태관리 라이브러리를 모두 다뤄보았습니다. 앞으로 프로젝트 복잡도나 규모에 따라 적절한 상태관리 도구를 선택할 수 있는 안목을 갖추게 되셨으면 좋겠습니다! 👍🏻👍🏻👍🏻
| increment: (state, action: PayloadAction<string>) => { | ||
| const item = state.items.find((i) => i.id === action.payload); | ||
| if (item) { | ||
| item.amount += 1; | ||
| } | ||
| }, | ||
| decrement: (state, action: PayloadAction<string>) => { | ||
| const item = state.items.find((i) => i.id === action.payload); | ||
| if (item) { | ||
| item.amount -= 1; | ||
| if (item.amount < 1) { | ||
| // 1보다 작으면 제거 | ||
| state.items = state.items.filter((i) => i.id !== action.payload); | ||
| } | ||
| } | ||
| }, | ||
| removeItem: (state, action: PayloadAction<string>) => { | ||
| state.items = state.items.filter((i) => i.id !== action.payload); | ||
| }, | ||
| clearCart: (state) => { | ||
| state.items = []; | ||
| } |
There was a problem hiding this comment.
현재 cartSlice에서 increment, decrement, removeItem, clearCart 액션들이 구현되어 있는데, 요구사항의 calculateTotals 액션이 누락되어 있습니다. 요구사항대로 총합 계산 로직을 별도 액션으로 분리하면 상태 관리가 더 명확해질 것 같습니다!
| export const store = configureStore({ | ||
| reducer: { | ||
| cart: cartReducer, | ||
| modal: modalRedcer | ||
| }, | ||
| }) |
There was a problem hiding this comment.
현재 장바구니 데이터가 새로고침 시 초기화되고 있는데, Redux Toolkit의 redux-persist나 Zustand의 persist 미들웨어를 적용하여, 새로고침 후에도 장바구니 상태가 유지되도록 🚀Challenge 미션에 도전해 보시면 좋겠습니다!
|
|
||
|
|
||
| return ( | ||
| <nav className="fix top-0 bg-blue-900 text-white flex items-center justify-between w-full h-[50px]"> |
There was a problem hiding this comment.
현재 Navbar에서 fix 클래스가 fixed 의 오타로 보입니다! 네비게이션 고정을 의도한 것 같은데, 현재는 네비게이션이 고정되지 않고 있습니다. 이를 수정하면 스크롤 시에도 장바구니 정보가 항상 보이도록 할 수 있어 사용성이 개선될 것 같아요!
| <nav className="fix top-0 bg-blue-900 text-white flex items-center justify-between w-full h-[50px]"> | |
| <nav className="fixed top-0 bg-blue-900 text-white flex items-center justify-between w-full h-[50px]"> |
|
|
||
|
|
||
| return ( | ||
| <nav className="fix top-0 bg-blue-900 text-white flex items-center justify-between w-full h-[50px]"> |
There was a problem hiding this comment.
현재 Navbar에서 fix 클래스가 fixed 의 오타로 보입니다! 네비게이션 고정을 의도한 것 같은데, 현재는 네비게이션이 고정되지 않고 있습니다. 이를 수정하면 스크롤 시에도 장바구니 정보가 항상 보이도록 할 수 있어 사용성이 개선될 것 같아요!
| <nav className="fix top-0 bg-blue-900 text-white flex items-center justify-between w-full h-[50px]"> | |
| <nav className="fixed top-0 bg-blue-900 text-white flex items-center justify-between w-full h-[50px]"> |
| const container = document.getElementById('root') | ||
|
|
||
| if (container) { | ||
| const root = createRoot(container) | ||
|
|
||
| root.render( | ||
| <Provider store={store}> | ||
| <App /> | ||
| </Provider>, | ||
| ) | ||
| }else { | ||
| throw new Error( | ||
| "Root element with ID 'root' was not found in the document. Ensure there is a corresponding HTML element with the ID 'root' in your HTML file.", | ||
| ) | ||
| } |
There was a problem hiding this comment.
현재 미션 3의 main.tsx 에서 Redux의 Provider로 감싸고 있는데, 미션 3에서는 Zustand로 상태 관리를 전환했기 때문에 이 부분은 제거해야 합니다. 또한, store 및 slice 등 Redux 관련 파일들도 여전히 남아있는데, 프로젝트 구조를 명확하게 하기 위해 해당 파일들도 제거하는 것을 권장합니다!
2 participants
📝 미션 번호
9주차 Misson 1,2,3
📋 구현 사항
📎 스크린샷
2025-05-26.174014.mp4
✅ 체크리스트
🤔 질문 사항