토큰만료시-로그아웃되도록-변경 (#66)

* Refactor : 로그인/아웃 뮤테이션 책임분리

* New : 내 정보 체크실패시 로그아웃되도록 처리

* FIX: 잘못된 파라미터 전달 수정 (#67)

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;
  }

client/src/queries/post/comment/useNewPostCommentMutation.ts

@@ -47,10 +47,10 @@ const useNewPostCommentMutation = (id?: string) => {
  );
  return { querySnapShot };
  },
- onError: (err, queryFnParams, context) => {
+ onError: (err, _queryFnParams, context) => {
  errorHandler(err);
  queryClient.setQueryData(
- commentQueryKey.byId(queryFnParams),
+ commentQueryKey.byId(id),
  context?.querySnapShot
  );
  },