[BUGFIX] 로그인 이후에도 미들웨어에 의해 페이지 접근이 막히는 이슈 해결

package.json

@@ -21,6 +21,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "dayjs": "^1.11.10",
+    "cookies-next": "^4.1.1",
     "framer-motion": "^10.18.0",
     "github-label-sync": "^2.3.1",
     "lodash.compact": "^3.0.1",

src/app/login/page.tsx

@@ -19,7 +19,7 @@ const LoginPage = ({ searchParams }: Props) => {
   return (
     <div className="relative flex h-dvh w-full flex-col items-center bg-mainGradient pb-10">
       <Header>
-        <Header.Previous />
+        <Header.IconLink icon="chevronLeft" href="/" iconColor="gray-1000" />
       </Header>
 
       <main className="flex size-full flex-col items-center px-4">

src/app/mypage/settings/_components/DeleteAccountButton.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { useAuth } from '@/hooks/api/auth';
+
+const DeleteAccountButton = () => {
+  const { deleteUser } = useAuth();
+
+  return (
+    <button className="w-full py-3xs text-start" onClick={() => deleteUser()}>
+      회원 탈퇴
+    </button>
+  );
+};
+
+export default DeleteAccountButton;

src/app/mypage/settings/_components/LogoutButton.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { useAuth } from '@/hooks/api/auth';
+
+const LogoutButton = () => {
+  const { logout } = useAuth();
+
+  return (
+    <button className="w-full py-3xs text-start" onClick={() => logout()}>
+      로그아웃
+    </button>
+  );
+};
+
+export default LogoutButton;

src/app/mypage/settings/_components/index.ts

@@ -0,0 +1,2 @@
+export { default as DeleteAccountButton } from './DeleteAccountButton';
+export { default as LogoutButton } from './LogoutButton';

src/app/mypage/settings/page.tsx

@@ -4,6 +4,8 @@ import { Divider } from '@/components/common/divider';
 import { Header } from '@/components/layout/header';
 import { Typography } from '@/foundations/typography';
 
+import { DeleteAccountButton, LogoutButton } from './_components';
+
 const page = () => {
   return (
     <>
@@ -30,9 +32,9 @@ const page = () => {
         <div className="flex flex-col">
           <Typography type="title3">계정 설정</Typography>
 
-          <button className="w-full py-3xs text-start">로그아웃</button>
+          <LogoutButton />
           <Divider />
-          <button className="w-full py-3xs text-start">회원 탈퇴</button>
+          <DeleteAccountButton />
           <Divider />
         </div>
       </main>

src/constants/auth.ts

@@ -7,6 +7,7 @@ export const TOKEN = {
   REFRESH_TOKEN: 'Refresh-Token',
 };
 
+export const IS_LOGIN = 'isLogin';
 export const CALLBACK_URL = 'callbackUrl';
 
 export const LOGIN_MESSAGE = {

src/hooks/auth/useAuth/types.ts

@@ -6,6 +6,7 @@ export type KakaoLoginFnVariables = {
 export type KakaoLoginResponseData = {
   accessToken: string;
   refreshToken: string;
+  nickname: string;
 };
 
 export type UpdateNicknameFnVariables = {

src/hooks/auth/useAuth/useAuth.tsx

@@ -1,9 +1,11 @@
 import { useMutation } from '@tanstack/react-query';
+import { deleteCookie, setCookie } from 'cookies-next';
 import { useRouter } from 'next/navigation';
 
+import { IS_LOGIN } from '@/constants/auth';
 import { useToast } from '@/hooks';
 import { del, get, post } from '@/lib/axios';
-import { FailResponse, SuccessResponse } from '@/types/response';
+import { SuccessResponse } from '@/types/response';
 
 import {
   KakaoLoginFnVariables,
@@ -22,31 +24,33 @@ const useAuth = () => {
         `/login/oauth2/code/kakao?code=${authorizeCode}`,
         { baseURL: 'https://donworry.online' },
       );
+      setCookie(IS_LOGIN, true, {
+        maxAge: 60 * 60 * 24 * 14, // TODO 리프레시 이후 처리
+      });
       toast({ message: 'LOGIN_SUCCESS' });
-      router.push(decodeURIComponent(callbackUrl));
+      router.replace(decodeURIComponent(callbackUrl));
     } catch (error) {
       toast({ message: 'LOGIN_FAIL' });
-      router.push(`/login?callbackUrl=${encodeURIComponent(callbackUrl)}`);
+      router.replace(`/login?callbackUrl=${encodeURIComponent(callbackUrl)}`);
     }
   };
 
   const { mutate: logout } = useMutation({
     mutationFn: () => post('/user/logout'),
     onSuccess: () => {
+      deleteCookie(IS_LOGIN);
       toast({ message: 'LOGOUT_SUCCESS' });
-      router.push('/');
+      router.replace('/');
+      router.refresh();
     },
     onError: () => {
       toast({ message: 'LOGOUT_FAIL' });
     },
   });
 
-  const { mutate: updateNickname } = useMutation<
-    SuccessResponse<UpdateNicknameResponseData>,
-    FailResponse,
-    UpdateNicknameFnVariables
-  >({
-    mutationFn: ({ nickname }) => post('/user', { nickname }),
+  const { mutate: updateNickname } = useMutation({
+    mutationFn: ({ nickname }: UpdateNicknameFnVariables) =>
+      post<SuccessResponse<UpdateNicknameResponseData>>('/user', { nickname }),
     onSuccess: () => {
       toast({ message: 'CHANGE_NICKNAME_SUCCESS' });
       router.push('/mypage');
@@ -59,8 +63,10 @@ const useAuth = () => {
   const { mutate: deleteUser } = useMutation({
     mutationFn: () => del('/user'),
     onSuccess: () => {
+      deleteCookie(IS_LOGIN);
       toast({ message: 'DELETE_USER_SUCCESS' });
-      router.push('/');
+      router.replace('/');
+      router.refresh();
     },
     onError: () => {
       toast({ message: 'DELETE_USER_FAIL' });

src/middleware.ts

@@ -1,11 +1,9 @@
 import { NextRequest, NextResponse } from 'next/server';
 
-import { CALLBACK_URL, TOKEN } from '@/constants/auth';
+import { CALLBACK_URL, IS_LOGIN } from '@/constants/auth';
 
 const middleware = async (request: NextRequest) => {
-  const refreshToken = request.cookies.get(TOKEN.REFRESH_TOKEN);
-
-  if (!refreshToken) {
+  if (!request.cookies.has(IS_LOGIN)) {
     return NextResponse.redirect(
       new URL(`/login?${CALLBACK_URL}=${encodeURIComponent(request.url)}`, request.url),
     );

yarn.lock

@@ -4999,6 +4999,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/cookie@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "@types/cookie@npm:0.6.0"
+  checksum: 5b326bd0188120fb32c0be086b141b1481fec9941b76ad537f9110e10d61ee2636beac145463319c71e4be67a17e85b81ca9e13ceb6e3bb63b93d16824d6c149
+  languageName: node
+  linkType: hard
+
 "@types/cross-spawn@npm:^6.0.2":
   version: 6.0.6
   resolution: "@types/cross-spawn@npm:6.0.6"
@@ -5261,6 +5268,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^16.10.2":
+  version: 16.18.82
+  resolution: "@types/node@npm:16.18.82"
+  checksum: 2a46c91897892d9bd916d6dbd15a1b0814cd504f7be1daa0843f5d9b8adcb0ae2d0b67126e6564403be1f31bf4fccdf15573d8ecea352fb75c8bfe70ff744a83
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:^18.0.0":
   version: 18.19.8
   resolution: "@types/node@npm:18.19.8"
@@ -7717,6 +7731,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cookie@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "cookie@npm:0.6.0"
+  checksum: f2318b31af7a31b4ddb4a678d024514df5e705f9be5909a192d7f116cfb6d45cbacf96a473fa733faa95050e7cff26e7832bb3ef94751592f1387b71c8956686
+  languageName: node
+  linkType: hard
+
+"cookies-next@npm:^4.1.1":
+  version: 4.1.1
+  resolution: "cookies-next@npm:4.1.1"
+  dependencies:
+    "@types/cookie": "npm:^0.6.0"
+    "@types/node": "npm:^16.10.2"
+    cookie: "npm:^0.6.0"
+  checksum: 6848fdbe2f29ee94194d323a0c7e8d71dddd0628bf2d26da2382854e43f05cae47acea8795cc12f3fbe7e4e679d30c362c6276e3ea0dcf2bf906ebc6f68bbb3b
+  languageName: node
+  linkType: hard
+
 "core-js-compat@npm:^3.31.0, core-js-compat@npm:^3.33.1":
   version: 3.35.0
   resolution: "core-js-compat@npm:3.35.0"
@@ -8436,6 +8468,7 @@ __metadata:
     chromatic: "npm:^10.3.1"
     class-variance-authority: "npm:^0.7.0"
     clsx: "npm:^2.1.0"
+    cookies-next: "npm:^4.1.1"
     cypress: "npm:^13.6.3"
     dayjs: "npm:^1.11.10"
     eslint: "npm:^8"