From 47ff9d485d7b9cdb4bf59ef87433b9efe672a8f5 Mon Sep 17 00:00:00 2001 From: nakyong82 Date: Tue, 5 Nov 2024 00:39:23 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=90=9B=20fix:=20zustand=20persist=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=ED=95=98=EA=B8=B0=20#103?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../EmployerApplicantContactBottomSheet.tsx | 2 +- src/hooks/api/useApplication.ts | 5 ++- src/hooks/api/useAuth.ts | 14 +++----- src/store/postSearch.ts | 26 ++++++++++----- src/store/signup.ts | 16 ++++++--- src/store/url.ts | 33 ++++++++++++++----- src/store/user.ts | 20 +++++++---- src/utils/clearAllStore.ts | 13 ++++++++ 8 files changed, 89 insertions(+), 40 deletions(-) create mode 100644 src/utils/clearAllStore.ts diff --git a/src/components/Employer/ApplicantDetail/EmployerApplicantContactBottomSheet.tsx b/src/components/Employer/ApplicantDetail/EmployerApplicantContactBottomSheet.tsx index 274d1bcb..7f7271df 100644 --- 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 index 9978f0a4..91e348b4 100644 --- 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 index 2c9be1a2..606e61e7 100644 --- 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,7 +78,6 @@ export const useSignIn = () => { // 1.2 사용자 로그아웃 훅 export const useLogout = () => { const navigate = useNavigate(); - const { updateAccountType, updateName } = useUserStore(); return useMutation({ mutationFn: logout, onSuccess: (data: RESTYPE) => { @@ -86,9 +85,8 @@ export const useLogout = () => { // 토큰 삭제 deleteAccessToken(); deleteRefreshToken(); - // 유저 타입 전역 변수 초기화 - updateAccountType(undefined); - updateName(''); + // store 전역 변수 초기화 + clearAllStore(); // 스플래시 이동 navigate('/splash'); } @@ -215,7 +213,6 @@ export const useReIssueAuthentication = () => { // 2.9 탈퇴하기 훅 export const useWithdraw = () => { const navigate = useNavigate(); - const { updateAccountType, updateName } = useUserStore(); return useMutation({ mutationFn: withdraw, onSuccess: (data: RESTYPE) => { @@ -223,9 +220,8 @@ export const useWithdraw = () => { // 토큰 삭제 deleteAccessToken(); deleteRefreshToken(); - // 유저 타입 전역 변수 초기화 - updateAccountType(undefined); - updateName(''); + // store 전역 변수 초기화 + clearAllStore(); // 스플래시 이동 navigate('/splash'); } diff --git a/src/store/postSearch.ts b/src/store/postSearch.ts index 24fe3399..e92e3a98 100644 --- 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()((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( + (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 index 835cae97..0e2e7686 100644 --- 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()((set) => ({ - try_cnt: 0, - updateTryCnt: (try_cnt) => set(() => ({ try_cnt: try_cnt })), -})); +export const useEmailTryCountStore = create( + persist( + (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 index faecf2ab..369ccd59 100644 --- a/src/store/url.ts +++ b/src/store/url.ts @@ -1,21 +1,38 @@ import { create } from 'zustand'; +import { persist } from 'zustand/middleware'; type CurrentPostIdStore = { currentPostId: number | null; updateCurrentPostId: (id: number) => void; }; -export const useCurrentPostIdStore = create()((set) => ({ - currentPostId: null, - updateCurrentPostId: (newId: number) => set(() => ({ currentPostId: newId })), -})); +export const useCurrentPostIdStore = create( + persist( + (set) => ({ + currentPostId: null, + updateCurrentPostId: (newId: number) => + set(() => ({ currentPostId: newId })), + }), + { + name: 'currentPostIdStore', + }, + ), +); type CurrentApplicantIdStore = { currentApplicantId: number | null; updateCurrentApplicantId: (id: number) => void; }; -export const useCurrentApplicantIdStore = create()((set) => ({ - currentApplicantId: null, - updateCurrentApplicantId: (newId: number) => set(() => ({ currentApplicantId: newId })), -})); +export const useCurrentApplicantIdStore = create( + persist( + (set) => ({ + currentApplicantId: null, + updateCurrentApplicantId: (newId: number) => + set(() => ({ currentApplicantId: newId })), + }), + { + name: 'currentApplicantIdStore', + }, + ), +); diff --git a/src/store/user.ts b/src/store/user.ts index 162cdf63..6031666c 100644 --- 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()((set) => ({ - account_type: undefined, - name: '', - updateAccountType: (account_type) => set(() => ({ account_type })), - updateName: (name) => set(() => ({ name })), -})); +export const useUserStore = create( + persist( + (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 new file mode 100644 index 00000000..61e45f50 --- /dev/null +++ b/src/utils/clearAllStore.ts @@ -0,0 +1,13 @@ +import { usePostSearchStore } from '@/store/postSearch'; +import { useEmailTryCountStore } from '@/store/signup'; +import { useCurrentApplicantIdStore, 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(); +}; From 18ba71d91a249efe61d44f9a9fc640c993cbb716 Mon Sep 17 00:00:00 2001 From: nakyong82 Date: Tue, 5 Nov 2024 00:52:40 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=EB=90=9C=20url=20storage=EC=97=90=EB=8F=84=20zustand=20persist?= =?UTF-8?q?=20=EC=A0=81=EC=9A=A9=ED=95=98=EA=B8=B0=20#103?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/url.ts | 52 +++++++++++++++++++++++++------------- src/utils/clearAllStore.ts | 9 ++++++- 2 files changed, 42 insertions(+), 19 deletions(-) diff --git a/src/store/url.ts b/src/store/url.ts index a5c9180c..2dd80ed9 100644 --- a/src/store/url.ts +++ b/src/store/url.ts @@ -24,12 +24,17 @@ type CurrentApplicantIdStore = { updateCurrentApplicantId: (id: number) => void; }; -export const useCurrentApplicantIdStore = create()( - (set) => ({ - currentApplicantId: null, - updateCurrentApplicantId: (newId: number) => - set(() => ({ currentApplicantId: newId })), - }), +export const useCurrentApplicantIdStore = create( + persist( + (set) => ({ + currentApplicantId: null, + updateCurrentApplicantId: (newId: number) => + set(() => ({ currentApplicantId: newId })), + }), + { + name: 'currentApplicantIdStore', + }, + ), ); type CurrentDocumentIdStore = { @@ -37,12 +42,17 @@ type CurrentDocumentIdStore = { updateCurrentDocumentId: (id: number) => void; }; -export const useCurrentDocumentIdStore = create()( - (set) => ({ - currentDocumentId: null, - updateCurrentDocumentId: (newId: number) => - set(() => ({ currentDocumentId: newId })), - }), +export const useCurrentDocumentIdStore = create( + persist( + (set) => ({ + currentDocumentId: null, + updateCurrentDocumentId: (newId: number) => + set(() => ({ currentDocumentId: newId })), + }), + { + name: 'currentDocumentIdStore', + }, + ), ); type CurrentPostIdStoreEmployee = { @@ -50,9 +60,15 @@ type CurrentPostIdStoreEmployee = { updateCurrentPostId: (id: number) => void; }; -export const useCurrentPostIdEmployeeStore = - create()((set) => ({ - currentPostId: null, - updateCurrentPostId: (newId: number) => - set(() => ({ currentPostId: newId })), - })); +export const useCurrentPostIdEmployeeStore = create( + persist( + (set) => ({ + currentPostId: null, + updateCurrentPostId: (newId: number) => + set(() => ({ currentPostId: newId })), + }), + { + name: 'useCurrentPostIdEmployeeStore', + }, + ), +); diff --git a/src/utils/clearAllStore.ts b/src/utils/clearAllStore.ts index 61e45f50..54ebe480 100644 --- a/src/utils/clearAllStore.ts +++ b/src/utils/clearAllStore.ts @@ -1,6 +1,11 @@ import { usePostSearchStore } from '@/store/postSearch'; import { useEmailTryCountStore } from '@/store/signup'; -import { useCurrentApplicantIdStore, useCurrentPostIdStore } from '@/store/url'; +import { + useCurrentApplicantIdStore, + useCurrentDocumentIdStore, + useCurrentPostIdEmployeeStore, + useCurrentPostIdStore, +} from '@/store/url'; import { useUserStore } from '@/store/user'; // store 전역 변수 초기화 @@ -10,4 +15,6 @@ export const clearAllStore = () => { useEmailTryCountStore.persist.clearStorage(); useCurrentPostIdStore.persist.clearStorage(); useCurrentApplicantIdStore.persist.clearStorage(); + useCurrentDocumentIdStore.persist.clearStorage(); + useCurrentPostIdEmployeeStore.persist.clearStorage(); };