[adv-2.2단계(zustand)] 박찬빈 미션 제출합니다.

Let's go further/02-state-management-tools/2.2- Zustand/README.md

@@ -0,0 +1,49 @@
+# 02-2. 전역상태관리 - Zustand
+
+## 🎯 요구사항
+
+- Context API로 구성한 애플리케이션을 Zustand 기반 전역 상태로 마이그레이션하세요.
+  - (선택): 카테고리 필터의 선택된 카테고리가 새로고침 후에도 유지되도록 구현해보세요.
+- props에 대한 요구사항은 2-1 요구사항과 같습니다.
+- Zustand를 **왜** 사용하는지, Context API와 비교했을때 어떤 점이 달랐는지, 또 trade-off가 있는지 적어주세요.
+  - 기술적인 것도 좋고 개발자의 경험 측면에서도 좋습니다.
+
+### 😗구현 예시
+
+- 컴포넌트의 이름이나 구조는 마음대로 변경해도 좋습니다.
+- 아래 코드는 Zustand 스토어를 설정하는 예시입니다.
+
+```javascript
+import { create } from 'zustand';
+
+// Zustand 스토어 예시
+export const useBear = create((set) => ({
+  // state
+  bears: 0,
+
+  // actions
+  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
+  removeAllBears: () => set({ bears: 0 }),
+  updateBears: (newBears) => set({ bears: newBears }),
+}));
+```
+
+## ✅ 키워드
+
+- props drilling
+- 전역상태관리
+  - Zustand
+  - create
+  - selector pattern
+  - set / get
+  - slice pattern
+  - middleware (persist, createJSONStorage)
+
+## 🧙‍♀️ 진행 가이드
+
+- 진행시간 : 1시간 내에 완료하는 것을 목표로 합니다.
+
+## 🔗 참고 문서
+
+- [Zustand 공식문서](https://recoiljs.org/docs/introduction/installation/)
+- [Middleware: persist 관련 문서](https://zustand.docs.pmnd.rs/integrations/persisting-store-data)

README.md

@@ -1,23 +1,30 @@
 # 🛣️Let's Go Further Together...
 
 ###### **이 Repository는 cho-log : self-paced-react step5까지 마치고 난 후 더 나아가 고도화하기 위해 존재합니다.**
+
 ###### **미션 README 문서는 Let's go further디렉토리에 존재합니다.**
+
 > 🍀Cho-log-study : self-paced-react, React 기초
 >
 > https://github.com/cho-log/self-paced-react
 
 # Why❓
+
 아래의 새로운 기술을 쓸 때는
+
 1.  왜 이 기술을 쓰는지? <br/>
-2. 기존의 것과 어떤 장단점이 있는지? <br/>
-3. 썼을때 어떤 일이 일어났는지? <br/>
-   등의 **"왜?"** 라는 질문에 답할 수 있어야합니다.<br/>
+2.  기존의 것과 어떤 장단점이 있는지? <br/>
+3.  썼을때 어떤 일이 일어났는지? <br/>
+    등의 **"왜?"** 라는 질문에 답할 수 있어야합니다.<br/>
 
 고도화 작업을 할때 항상 **"왜?"** 라는 질문에 답하며 **Deep Dive**합시다.
 
 # 📈Something To Learn More About
+
 ### 1. styled-component 적용
+
 ### 2. 전역상태관리 툴 다루기
+
 1. #### Context API
-2. #### Recoil
+2. #### Zustand
 3. #### Redux

package.json

@@ -14,11 +14,8 @@
     "@reduxjs/toolkit": "^2.8.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-redux": "^9.2.0",
-    "recoil": "^0.7.7",
-    "redux": "^5.0.1",
-
-    "styled-components": "^6.1.18"
+    "styled-components": "^6.1.18",
+    "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

src/App.jsx

@@ -1,20 +1,18 @@
 import { useEffect } from 'react';
-import { useDispatch } from 'react-redux';
-import { fetchRestaurants } from './features/restaurantSlice';
 import Header from './components/header/Header';
 import CategoryFilter from './components/main/CategoryFilter';
 import RestaurantList from './components/main/RestaurantList';
 import RestaurantDetailModal from './components/aside/RestaurantDetailModal';
 import AddRestaurantModal from './components/aside/AddRestaurantModal';
 import StyleProvider from './styles/StyleProvider';
-
+import { useRestaurantActions } from './store/appStore';
 
 const App = () => {
-  const dispatch = useDispatch();
+  const { fetchRestaurants } = useRestaurantActions();
 
   useEffect(() => {
-    dispatch(fetchRestaurants());
-  }, [dispatch]);
+    fetchRestaurants();
+  }, [fetchRestaurants]);
 
   return (
     <StyleProvider>
@@ -28,7 +26,6 @@ const App = () => {
         <AddRestaurantModal />
       </aside>
     </StyleProvider>
-
   );
 };
 

src/components/aside/AddRestaurantModal.jsx

@@ -1,12 +1,13 @@
 import styled from 'styled-components';
 import { selectableCategories } from '../../constant/constant';
 import Modal from './modal/Modal';
-import { useSelector, useDispatch } from 'react-redux';
 import {
-  fetchRestaurants,
-  postNewRestaurant,
-} from '../../features/restaurantSlice';
-import { closeRestaurantAddModal } from '../../features/modalSlice';
+  useIsAddModalOpen,
+  usePostStatus,
+  useRestaurantActions,
+  useModalActions,
+  useAppStore,
+} from '../../store/appStore';
 
 const AddRestaurantForm = styled.form``;
 
@@ -81,13 +82,12 @@ const SubmitButton = styled.button`
 `;
 
 const AddRestaurantModal = () => {
-  const dispatch = useDispatch();
-  const handleCloseRestaurantAddModal = () =>
-    dispatch(closeRestaurantAddModal());
-  const isRestaurantAddModalOpen = useSelector(
-    (state) => state.modal.isRestaurantAddModalOpen
-  );
-  const postStatus = useSelector((state) => state.restaurant.postStatus);
+  const isRestaurantAddModalOpen = useIsAddModalOpen();
+  const postStatus = usePostStatus();
+  const { postNewRestaurant, fetchRestaurants } = useRestaurantActions();
+  const { closeRestaurantAddModal } = useModalActions();
+
+  const handleCloseRestaurantAddModal = () => closeRestaurantAddModal();
 
   const handleFormSubmit = async (e) => {
     e.preventDefault();
@@ -97,14 +97,12 @@ const AddRestaurantModal = () => {
       name: e.target.name.value,
       description: e.target.description.value,
     };
-    const resultAction = await dispatch(postNewRestaurant(newRestaurant));
-
-    if (postNewRestaurant.rejected.match(resultAction)) {
-      alert(`추가 실패 ERROR: ${resultAction.error.message}`);
+    await postNewRestaurant(newRestaurant);
+    if (useAppStore.getState().postStatus === 'failed') {
+      alert('식당 추가에 실패 했습니다.');
       return;
     }
-
-    await dispatch(fetchRestaurants());
+    await fetchRestaurants();
     handleCloseRestaurantAddModal();
     e.target.reset();
   };

src/components/aside/RestaurantDetailModal.jsx

@@ -1,9 +1,11 @@
 import styled from 'styled-components';
 import Modal from './modal/Modal';
-import { useSelector, useDispatch } from 'react-redux';
-import { closeRestaurantDetailModal } from '../../features/modalSlice';
-import { setSelectedRestaurant } from '../../features/restaurantSlice';
-
+import {
+  useIsDetailModalOpen,
+  useSelectedRestaurant,
+  useRestaurantActions,
+  useModalActions,
+} from '../../store/appStore';
 
 const RestaurantInfo = styled.div`
   margin-bottom: 24px;
@@ -35,16 +37,13 @@ const CloseButton = styled.button`
 `;
 
 const RestaurantDetailModal = () => {
-  const dispatch = useDispatch();
-  const isRestaurantDetailModalOpen = useSelector(
-    (state) => state.modal.isRestaurantDetailModalOpen
-  );
-  const selectedRestaurant = useSelector(
-    (state) => state.restaurant.selectedRestaurant
-  );
+  const isRestaurantDetailModalOpen = useIsDetailModalOpen();
+  const selectedRestaurant = useSelectedRestaurant();
+  const { setSelectedRestaurant } = useRestaurantActions();
+  const { closeRestaurantDetailModal } = useModalActions();
   const handleCloseRestaurantDetailModal = () => {
-    dispatch(closeRestaurantDetailModal());
-    dispatch(setSelectedRestaurant(null));
+    closeRestaurantDetailModal();
+    setSelectedRestaurant(null);
   };
   return (
     <Modal
@@ -59,7 +58,6 @@ const RestaurantDetailModal = () => {
       </RestaurantInfo>
       <CloseButtonContainer>
         <CloseButton type="button" onClick={handleCloseRestaurantDetailModal}>
-
           닫기
         </CloseButton>
       </CloseButtonContainer>