From 2551e8eaeb764da99304a62a2be97feefb7b8af8 Mon Sep 17 00:00:00 2001
From: Hyelim Choi <HyelimChoi01@gmail.com>
Date: Wed, 4 Dec 2024 20:08:16 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83/?=
 =?UTF-8?q?=ED=83=88=ED=87=B4=20=EC=8B=9C=20=EC=9C=A0=EC=A0=80=20=EC=8A=A4?=
 =?UTF-8?q?=ED=86=A0=EC=96=B4=20=EC=B4=88=EA=B8=B0=ED=99=94=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MyPage/UserFeature.tsx     |  8 +++----
 frontend/src/hooks/query/useDeleteAccount.ts  |  3 +++
 frontend/src/hooks/query/useLogoutQuery.ts    |  3 +++
 frontend/src/store/useUserStore.ts            | 21 ++++++++++++-------
 4 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/MyPage/UserFeature.tsx b/frontend/src/components/MyPage/UserFeature.tsx
index f437d3291..3d3b5c4d8 100644
--- 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
index 877b6793c..863390cbe 100644
--- 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
index 6a2bd61fc..8a235a213 100644
--- 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
index 5e77db64e..8c3f9bec1 100644
--- 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',