토큰만료시-로그아웃되도록-변경

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

@@ -13,10 +13,13 @@ import {
 } from "@mui/material";
 import PostSeeMoreIcon from "@/assets/icons/PostSeeMoreIcon.svg";
 import useLogoutMutation from "@/queries/auth/useLogoutMutation";
+import { useRouter } from "next/navigation";
+import HOME from "@/const/clientPath";
 
 const SettingPage = () => {
   const { data: myInfo } = useMyInfoQuery();
-  const { mutate: logoutHandler } = useLogoutMutation();
+  const { mutateAsync: logoutHandler } = useLogoutMutation();
+  const router = useRouter();
 
   return (
     <>
@@ -67,7 +70,13 @@ const SettingPage = () => {
       </PaddingPaper>
       <PaddingPaper>
         <Typography variant="subtitle2">계정</Typography>
-        <Button color="secondary" onClick={() => logoutHandler()}>
+        <Button
+          color="secondary"
+          onClick={async() => {
+            await logoutHandler();
+            router.push(HOME);
+          }}
+        >
           로그아웃
         </Button>
       </PaddingPaper>

client/src/components/user/signin/SigninForm.tsx

@@ -1,23 +1,26 @@
 "use client";
 import useLoginMutation from "@/queries/auth/useLoginMutation";
 import { Box, Button, TextField, Typography } from "@mui/material";
-
+import { useRouter } from "next/navigation";
 import { useState } from "react";
+import HOME from "@/const/clientPath";
 
 const SigninForm = () => {
   const [id, setId] = useState("");
   const [password, setPassword] = useState("");
-  const { mutate: loginMutation, isError } = useLoginMutation();
+  const { mutateAsync: loginMutation, isError } = useLoginMutation();
+  const router = useRouter();
 
   return (
     <Box
       component="form"
-      onSubmit={(event) => {
+      onSubmit={async (event) => {
         event.preventDefault();
         if (!id || !password) {
           return;
         }
-        loginMutation({ id, password });
+        await loginMutation({ id, password });
+        router.push(HOME)
       }}
       sx={{ mt: 1 }}
     >

client/src/queries/auth/useLoginMutation.tsx

@@ -4,7 +4,6 @@ import { SigninRequirement } from "@/types/auth/signinRequirement";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { MyInfoQueryKeys } from "./useMyInfoQuery";
 import { useRouter } from "next/navigation";
-import HOME from "@/const/clientPath";
 import { useErrorHandler } from "@/utils/errorHandler";
 import { useGlobalLoadingStore } from "@/store/useGlobalLoadingStore";
 
@@ -26,7 +25,7 @@ const useLoginMutation = () => {
     onSuccess: async ({ token }) => {
       localStorage?.setItem("accessToken", token);
       queryClient.invalidateQueries({ queryKey: MyInfoQueryKeys.all });
-      router.push(HOME);
+      router.refresh();
     },
     onError: (error) => errorHandler(error),
     onSettled: () => {

client/src/queries/auth/useLogoutMutation.tsx

@@ -1,23 +1,18 @@
-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("로그아웃이 완료되었습니다");
+      router.refresh();
     },
   });
 };

client/src/queries/auth/useMyInfoQuery.tsx

@@ -4,15 +4,35 @@ import useAxiosPrivate from "@/hooks/useAxiosPrivate";
 import { MyInfoInterface } from "@/types/auth/myInfo";
 import getTokenFromLocalStorage from "@/utils/getTokenFromLocalStorage";
 import { useQuery } from "@tanstack/react-query";
+import { isAxiosError } from "axios";
+import { useRouter } from "next/navigation";
+import useLogoutMutation from "./useLogoutMutation";
 
-export const useMyInfoQuery = () =>
-  useQuery({
+export const useMyInfoQuery = () => {
+  const router = useRouter();
+  const { mutate: logout } = useLogoutMutation();
+
+  return useQuery({
     queryKey: MyInfoQueryKeys.all,
-    queryFn: getMyInfoByLocalStorage,
+    queryFn: async () => {
+      try {
+        return await getMyInfoByLocalStorage();
+      } catch (err) {
+        // FIXME 토큰만료체크시 로그아웃 로직 분리 필요
+        if (isAxiosError(err) && err.response) {
+          if (err.response.status === 401 && getTokenFromLocalStorage()) {
+            logout();
+          }
+        }
+        throw Error();
+      }
+    },
   });
+};
 
 export const getMyInfoByLocalStorage = async () => {
   const accessToken = getTokenFromLocalStorage();
+
   if (!accessToken) {
     return null;
   }