Refactor : 로그아웃 핸들러 분리

client/src/app/(protectedRoute)/user/setting/page.tsx

@@ -12,11 +12,11 @@ import {
   styled,
 } from "@mui/material";
 import PostSeeMoreIcon from "@/assets/icons/PostSeeMoreIcon.svg";
-import { axiosBff } from "@/libs/axios";
-import { LOGOUT_BFF } from "@/const/serverPath";
+import useLogoutMutation from "@/queries/auth/useLogoutMutation";
 
 const SettingPage = () => {
   const { data: myInfo } = useMyInfoQuery();
+  const { mutate: logoutHandler } = useLogoutMutation();
 
   return (
     <>
@@ -67,16 +67,7 @@ const SettingPage = () => {
       </PaddingPaper>
       <PaddingPaper>
         <Typography variant="subtitle2">계정</Typography>
-        <Button
-          color="secondary"
-          onClick={() => {
-            // FIXME 추후 수정해야하는 로그아웃로직
-            localStorage.removeItem("accessToken");
-            axiosBff.post(LOGOUT_BFF).then((res) => {
-              location.reload()
-            });
-          }}
-        >
+        <Button color="secondary" onClick={() => logoutHandler()}>
           로그아웃
         </Button>
       </PaddingPaper>

client/src/queries/auth/useLogoutMutation.tsx

@@ -0,0 +1,26 @@
+import HOME from "@/const/clientPath";
+import { LOGOUT_BFF } from "@/const/serverPath";
+import { axiosBff } from "@/libs/axios";
+import { useGlobalSnackbarStore } from "@/store/useGlobalSnackbarStore";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+
+const useLogoutMutation = () => {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  const fireToast = useGlobalSnackbarStore((state) => state.fireToast);
+
+  return useMutation({
+    mutationFn: logoutFn,
+    onSuccess: () => {
+      localStorage.removeItem("accessToken");
+      queryClient.removeQueries();
+      router.push(HOME);
+      fireToast("로그아웃이 완료되었습니다");
+    },
+  });
+};
+const logoutFn = () => axiosBff.post(LOGOUT_BFF);
+
+export default useLogoutMutation;