Merge pull request #110 from Team-inglo/feat/IGW-44/65

[feat/103] zustand persist 적용하기
Team-inglo · Nov 4, 2024 · c3608b2 · c3608b2
2 parents 395f394 + 18ba71d
commit c3608b2
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 49 deletions.
diff --git a/src/components/Employer/ApplicantDetail/EmployerApplicantContactBottomSheet.tsx b/src/components/Employer/ApplicantDetail/EmployerApplicantContactBottomSheet.tsx
@@ -22,7 +22,7 @@ const EmployerApplicantContactBottomSheet = ({
     Number(id),
     !isNaN(Number(id)),
   );
-  const { mutate } = usePatchInterviewFinish(Number(id));
+  const { mutate } = usePatchInterviewFinish();
 
   const onClickComplete = () => {
     if (!isNaN(Number(id))) mutate(Number(id));

diff --git a/src/hooks/api/useApplication.ts b/src/hooks/api/useApplication.ts
@@ -87,12 +87,11 @@ export const usePatchResumeAccepted = () => {
 };
 
 // 6.11 (고용주) 인터뷰 완료하기 훅
-export const usePatchInterviewFinish = (id: number) => {
-  const navigate = useNavigate();
+export const usePatchInterviewFinish = () => {
   return useMutation({
     mutationFn: patchInterviewFinish,
     onSuccess: () => {
-      navigate(`/employer/applicant/${id}`);
+      window.location.reload();
     },
     onError: (error) => {
       console.error('인터뷰 완료하기 실패', error);

diff --git a/src/hooks/api/useAuth.ts b/src/hooks/api/useAuth.ts
@@ -29,8 +29,8 @@ import {
 import { useNavigate } from 'react-router-dom';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { useEmailTryCountStore } from '@/store/signup';
-import { useUserStore } from '@/store/user';
 import { RESTYPE } from '@/types/api/common';
+import { clearAllStore } from '@/utils/clearAllStore';
 
 /**
  * 로그인 프로세스를 처리하는 커스텀 훅
@@ -78,17 +78,15 @@ export const useSignIn = () => {
 // 1.2 사용자 로그아웃 훅
 export const useLogout = () => {
   const navigate = useNavigate();
-  const { updateAccountType, updateName } = useUserStore();
   return useMutation({
     mutationFn: logout,
     onSuccess: (data: RESTYPE<null>) => {
       if (data.success) {
         // 토큰 삭제
         deleteAccessToken();
         deleteRefreshToken();
-        // 유저 타입 전역 변수 초기화
-        updateAccountType(undefined);
-        updateName('');
+        // store 전역 변수 초기화
+        clearAllStore();
         // 스플래시 이동
         navigate('/splash');
       }
@@ -215,17 +213,15 @@ export const useReIssueAuthentication = () => {
 // 2.9 탈퇴하기 훅
 export const useWithdraw = () => {
   const navigate = useNavigate();
-  const { updateAccountType, updateName } = useUserStore();
   return useMutation({
     mutationFn: withdraw,
     onSuccess: (data: RESTYPE<null>) => {
       if (data.success) {
         // 토큰 삭제
         deleteAccessToken();
         deleteRefreshToken();
-        // 유저 타입 전역 변수 초기화
-        updateAccountType(undefined);
-        updateName('');
+        // store 전역 변수 초기화
+        clearAllStore();
         // 스플래시 이동
         navigate('/splash');
       }

diff --git a/src/store/postSearch.ts b/src/store/postSearch.ts
@@ -8,6 +8,7 @@ import {
   PostSortingType,
 } from '@/types/PostSearchFilter/PostSearchFilterItem';
 import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 
 type PostSearchStore = {
   sortType: PostSortingType | POST_SEARCH_MENU;
@@ -18,12 +19,19 @@ type PostSearchStore = {
   updateFilterList: (newFilterList: PostSearchFilterItemType) => void;
 };
 
-export const usePostSearchStore = create<PostSearchStore>()((set) => ({
-  sortType: POST_SORTING.RECENT,
-  searchText: '',
-  filterList: initialFilterList,
-  updateSortType: (type) => set(() => ({ sortType: type })),
-  updateSearchText: (text) => set(() => ({ searchText: text })),
-  updateFilterList: (newFilterList) =>
-    set(() => ({ filterList: newFilterList })),
-}));
+export const usePostSearchStore = create(
+  persist<PostSearchStore>(
+    (set) => ({
+      sortType: POST_SORTING.RECENT,
+      searchText: '',
+      filterList: initialFilterList,
+      updateSortType: (type) => set(() => ({ sortType: type })),
+      updateSearchText: (text) => set(() => ({ searchText: text })),
+      updateFilterList: (newFilterList) =>
+        set(() => ({ filterList: newFilterList })),
+    }),
+    {
+      name: 'postSearchStore',
+    },
+  ),
+);
diff --git a/src/store/signup.ts b/src/store/signup.ts
@@ -1,11 +1,19 @@
 import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 
 type EmailTryCountStore = {
   try_cnt: number;
   updateTryCnt: (cnt: number) => void;
 };
 
-export const useEmailTryCountStore = create<EmailTryCountStore>()((set) => ({
-  try_cnt: 0,
-  updateTryCnt: (try_cnt) => set(() => ({ try_cnt: try_cnt })),
-}));
+export const useEmailTryCountStore = create(
+  persist<EmailTryCountStore>(
+    (set) => ({
+      try_cnt: 0,
+      updateTryCnt: (try_cnt) => set(() => ({ try_cnt: try_cnt })),
+    }),
+    {
+      name: 'emailTryCountStore',
+    },
+  ),
+);
diff --git a/src/store/url.ts b/src/store/url.ts
@@ -1,42 +1,74 @@
 import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 
 type CurrentPostIdStore = {
   currentPostId: number | null;
   updateCurrentPostId: (id: number) => void;
 };
 
-export const useCurrentPostIdStore = create<CurrentPostIdStore>()((set) => ({
-  currentPostId: null,
-  updateCurrentPostId: (newId: number) => set(() => ({ currentPostId: newId })),
-}));
+export const useCurrentPostIdStore = create(
+  persist<CurrentPostIdStore>(
+    (set) => ({
+      currentPostId: null,
+      updateCurrentPostId: (newId: number) =>
+        set(() => ({ currentPostId: newId })),
+    }),
+    {
+      name: 'currentPostIdStore',
+    },
+  ),
+);
 
 type CurrentApplicantIdStore = {
   currentApplicantId: number | null;
   updateCurrentApplicantId: (id: number) => void;
 };
 
-export const useCurrentApplicantIdStore = create<CurrentApplicantIdStore>()((set) => ({
-  currentApplicantId: null,
-  updateCurrentApplicantId: (newId: number) => set(() => ({ currentApplicantId: newId })),
-}));
+export const useCurrentApplicantIdStore = create(
+  persist<CurrentApplicantIdStore>(
+    (set) => ({
+      currentApplicantId: null,
+      updateCurrentApplicantId: (newId: number) =>
+        set(() => ({ currentApplicantId: newId })),
+    }),
+    {
+      name: 'currentApplicantIdStore',
+    },
+  ),
+);
 
 type CurrentDocumentIdStore = {
   currentDocumentId: number | null;
   updateCurrentDocumentId: (id: number) => void;
 };
 
-export const useCurrentDocumentIdStore = create<CurrentDocumentIdStore>()((set) => ({
-  currentDocumentId: null,
-  updateCurrentDocumentId: (newId: number) => set(() => ({ currentDocumentId: newId })),
-}));
-
+export const useCurrentDocumentIdStore = create(
+  persist<CurrentDocumentIdStore>(
+    (set) => ({
+      currentDocumentId: null,
+      updateCurrentDocumentId: (newId: number) =>
+        set(() => ({ currentDocumentId: newId })),
+    }),
+    {
+      name: 'currentDocumentIdStore',
+    },
+  ),
+);
 
 type CurrentPostIdStoreEmployee = {
   currentPostId: number | null;
   updateCurrentPostId: (id: number) => void;
 };
 
-export const useCurrentPostIdEmployeeStore = create<CurrentPostIdStoreEmployee>()((set) => ({
-  currentPostId: null,
-  updateCurrentPostId: (newId: number) => set(() => ({ currentPostId: newId })),
-}));
+export const useCurrentPostIdEmployeeStore = create(
+  persist<CurrentPostIdStoreEmployee>(
+    (set) => ({
+      currentPostId: null,
+      updateCurrentPostId: (newId: number) =>
+        set(() => ({ currentPostId: newId })),
+    }),
+    {
+      name: 'useCurrentPostIdEmployeeStore',
+    },
+  ),
+);
diff --git a/src/store/user.ts b/src/store/user.ts
@@ -1,5 +1,6 @@
 import { UserType } from '@/constants/user';
 import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 
 type UserStore = {
   account_type: UserType | undefined; // 계정 유형(유학생, 고용주)
@@ -8,9 +9,16 @@ type UserStore = {
   updateName: (name: string) => void; // 이름 업데이트 함수
 };
 
-export const useUserStore = create<UserStore>()((set) => ({
-  account_type: undefined,
-  name: '',
-  updateAccountType: (account_type) => set(() => ({ account_type })),
-  updateName: (name) => set(() => ({ name })),
-}));
+export const useUserStore = create(
+  persist<UserStore>(
+    (set) => ({
+      account_type: undefined,
+      name: '',
+      updateAccountType: (account_type) => set(() => ({ account_type })),
+      updateName: (name) => set(() => ({ name })),
+    }),
+    {
+      name: 'userStore',
+    },
+  ),
+);
diff --git a/src/utils/clearAllStore.ts b/src/utils/clearAllStore.ts
@@ -0,0 +1,20 @@
+import { usePostSearchStore } from '@/store/postSearch';
+import { useEmailTryCountStore } from '@/store/signup';
+import {
+  useCurrentApplicantIdStore,
+  useCurrentDocumentIdStore,
+  useCurrentPostIdEmployeeStore,
+  useCurrentPostIdStore,
+} from '@/store/url';
+import { useUserStore } from '@/store/user';
+
+// store 전역 변수 초기화
+export const clearAllStore = () => {
+  useUserStore.persist.clearStorage();
+  usePostSearchStore.persist.clearStorage();
+  useEmailTryCountStore.persist.clearStorage();
+  useCurrentPostIdStore.persist.clearStorage();
+  useCurrentApplicantIdStore.persist.clearStorage();
+  useCurrentDocumentIdStore.persist.clearStorage();
+  useCurrentPostIdEmployeeStore.persist.clearStorage();
+};