middleware 수정

src/api/api-config.ts

@@ -92,16 +92,17 @@ axiosInstance.interceptors.response.use(
     config.sent = true;
     const refreshToken = Cookies.get('refreshToken');
 
+    // NOTE: 401 에러인데, refreshToken이 존재하지 않으면 로그아웃
     // NOTE: 토큰 재발급 요청
-    if (
-      config.url !== TOKEN_REFRESH_URL &&
-      response.data.code === 401 &&
-      refreshToken
-    ) {
-      const { data } = await getTokenRefresh();
-      Cookies.set('accessToken', data.accessToken);
-      config.headers['Authorization'] = data.accessToken;
-      return axios(config);
+    if (config.url !== TOKEN_REFRESH_URL && response.data.code === 401) {
+      if (refreshToken) {
+        const { data } = await getTokenRefresh();
+        Cookies.set('accessToken', data.accessToken);
+        config.headers['Authorization'] = data.accessToken;
+        return axios(config);
+      } else {
+        logout();
+      }
     }
 
     // NOTE: 토큰 재발급 요청이 유효하지 않으면, 쿠키의 토큰을 삭제하고 로그아웃 처리. 로그인 페이지로 이동

src/app/mypage/layout.tsx

@@ -11,11 +11,18 @@ interface LayoutProps {
 export default function Layout({ children }: LayoutProps) {
   const router = useRouter();
 
+  const handleClickBackButton = () => {
+    router.push('/');
+  };
+
   const handleClickSettingButton = () => router.push('/settings');
 
   return (
     <main className='bg-[url("/assets/image/mypage/background.png")] bg-cover w-full max-w-[480px] h-[100dvh]'>
-      <Header className=" [&>*>*]:fill-white justify-between">
+      <Header
+        onClick={handleClickBackButton}
+        className=" [&>*>*]:fill-white justify-between"
+      >
         <SettingIcon onClick={handleClickSettingButton} />
       </Header>
       {children}

src/app/review/page.tsx

@@ -106,7 +106,7 @@ export default function Page() {
 
   return (
     <div className="bg-gray-100">
-      <Header className="w-full bg-gray-100">
+      <Header className="w-full bg-gray-100 z-header">
         <p className="body-16-bold">로그 작성</p>
       </Header>
       <div className="h-[100dvh] pt-[56px] pb-[104px] overflow-y-scroll px-[16px]">

src/components/common/Header/index.tsx

@@ -6,15 +6,24 @@ import { HTMLAttributes } from 'react';
 import cn from '@utils/cn';
 import LeftArrow from 'public/assets/icon24/left_arrow_24.svg';
 
+interface HeaderProps extends HTMLAttributes<HTMLButtonElement> {
+  onClick?: () => void;
+}
+
 export default function Header({
   className,
   children,
+  onClick,
   ...restProps
-}: HTMLAttributes<HTMLHeadElement>) {
+}: HeaderProps) {
   const { back } = useRouter();
 
   const handleClickBackButton = () => {
-    back();
+    if (onClick) {
+      onClick();
+    } else {
+      back();
+    }
   };
 
   return (

src/middleware.ts

@@ -7,35 +7,29 @@ export function middleware(request: NextRequest) {
   const isFirstLogin = request.nextUrl.searchParams.get('isFirst') as string;
   const isFromApp = request.nextUrl.searchParams.get('fromApp');
 
+  const url = request.nextUrl.clone();
+
   // NOTE: splash 화면으로 넘어왔을 때 쿠키 내의 토큰 여부에 따른 리다이렉트 로직
   if (isFromApp === 'true') {
-    const url = request.nextUrl.clone();
-
+    console.log(accessToken, refreshToken);
     if (accessToken && refreshToken) {
       url.pathname = '/';
     } else {
       url.pathname = '/login';
     }
-
-    url.search = '';
-
-    const response = NextResponse.redirect(url);
-
-    return response;
-  }
-
-  // 웹
-  const url = request.nextUrl.clone();
-
-  if (isFirstLogin === 'true') {
-    url.pathname = '/terms';
   } else {
-    url.pathname = '/';
+    // 웹
+    if (isFirstLogin === 'True') {
+      url.pathname = '/terms';
+    } else {
+      url.pathname = '/';
+    }
   }
 
   url.search = '';
 
   const response = NextResponse.redirect(url);
+
   if (accessToken && refreshToken) {
     response.cookies.set('accessToken', accessToken, { path: '/' });
     response.cookies.set('refreshToken', refreshToken, { path: '/' });