feat: 로그아웃/탈퇴 시 유저 스토어 초기화 로직 추가

woowacourse-teams · Dec 4, 2024 · 2551e8e · 2551e8e
1 parent f64d34d
commit 2551e8e
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 11 deletions.
diff --git a/frontend/src/components/MyPage/UserFeature.tsx b/frontend/src/components/MyPage/UserFeature.tsx
@@ -8,12 +8,12 @@ import LogoutModal from '@/components/MyPage/LogoutModal';
 import { QUERY_KEYS } from '@/constants/queryKeys';
 import { ROUTE_PATH } from '@/constants/routePath';
 import { VOC_URL } from '@/constants/VoC';
+import useUserQuery from '@/hooks/query/useUserQuery';
 import useModal from '@/hooks/useModal';
-import useUserStore from '@/store/useUserStore';
 import { boxShadowSpread, flexColumn, flexRow, flexSpaceBetween, title4 } from '@/styles/common';
 
 const UserFeature = () => {
-  const { user } = useUserStore();
+  const { data: user } = useUserQuery();
 
   const navigate = useNavigate();
 
@@ -42,7 +42,7 @@ const UserFeature = () => {
           </>
         </S.LabelContainer>
 
-        {user.userType !== 'ADMIN' && (
+        {user?.userType !== 'ADMIN' && (
           <S.Section>
             <S.LabelContainer>방끗이 도움되었나요? 한마디 남겨주세요!</S.LabelContainer>
             <S.Button tabIndex={1} onClick={handleMoveVoc}>
@@ -52,7 +52,7 @@ const UserFeature = () => {
           </S.Section>
         )}
 
-        {user.userType === 'ADMIN' && (
+        {user?.userType === 'ADMIN' && (
           <S.Section>
             <S.Button tabIndex={1} onClick={() => navigate(ROUTE_PATH.admin)}>
               어드민 페이지 바로가기

diff --git a/frontend/src/hooks/query/useDeleteAccount.ts b/frontend/src/hooks/query/useDeleteAccount.ts
@@ -3,15 +3,18 @@ import { useNavigate } from 'react-router-dom';
 
 import { deleteAccount } from '@/apis/user';
 import { ROUTE_PATH } from '@/constants/routePath';
+import useUserStore from '@/store/useUserStore';
 
 const useDeleteAccount = () => {
   const queryClient = useQueryClient();
+  const { reset } = useUserStore();
   const navigate = useNavigate();
 
   return useMutation({
     mutationFn: deleteAccount,
     onSuccess: () => {
       queryClient.clear();
+      reset();
       navigate(ROUTE_PATH.root);
     },
   });

diff --git a/frontend/src/hooks/query/useLogoutQuery.ts b/frontend/src/hooks/query/useLogoutQuery.ts
@@ -4,16 +4,19 @@ import { useNavigate } from 'react-router-dom';
 import { postLogout } from '@/apis/user';
 import { QUERY_KEYS } from '@/constants/queryKeys';
 import { ROUTE_PATH } from '@/constants/routePath';
+import useUserStore from '@/store/useUserStore';
 
 const useLogoutQuery = () => {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
+  const { reset } = useUserStore();
 
   return useMutation({
     mutationFn: postLogout,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.AUTH] });
       queryClient.clear();
+      reset();
       navigate(ROUTE_PATH.root);
     },
   });

diff --git a/frontend/src/store/useUserStore.ts b/frontend/src/store/useUserStore.ts
@@ -6,22 +6,29 @@ import { User } from '@/types/user';
 interface UserState {
   user: User;
   setUser: (user: User) => void;
+  reset: () => void;
 }
 
+const initialUser: User = {
+  userId: 0,
+  userName: '',
+  userEmail: '',
+  createdAt: '',
+  userType: 'GUEST',
+};
+
 const useUserStore = create<UserState>()(
   persist(
     set => ({
-      user: {
-        userId: 0,
-        userName: '',
-        userEmail: '',
-        createdAt: '',
-        userType: 'GUEST',
-      },
+      user: { ...initialUser },
 
       setUser: (newUser: User) => {
         set(() => ({ user: { ...newUser } }));
       },
+
+      reset: () => {
+        set(() => ({ user: { ...initialUser } }));
+      },
     }),
     {
       name: 'user-info',