Feat: 토큰 인증 시스템의 엣지 케이스 해결 및 레거시 코드 정리

apps/web/src/app/(auth)/components/StartButton.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { Button } from '@/components/buttons/Button';
+import { useAuth } from '@/hooks/useAuth';
+
+interface StartButtonProps {
+  className?: string;
+  children: React.ReactNode;
+}
+export default function StartButton({
+  className,
+  children,
+}: StartButtonProps) {
+  const router = useRouter();
+  const { isAuth, isLoading } = useAuth();
+
+  const handleStart = () => {
+    router.replace(isAuth ? '/main' : '/login');
+  };
+  return (
+    <Button
+      className={className}
+      onClick={handleStart}
+      disabled={isLoading}
+      size="lg"
+    >
+      {children}
+    </Button>
+  );
+}

apps/web/src/app/(auth)/signup/[type]/complete/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react';
 import { Button } from '@/components/buttons/Button';
 import CompleteImg from './components/CompleteImg';
-import { useAuthStore } from '@/stores/authStore';
+import { useAuth } from '@/hooks/useAuth';
 import { useRouter } from 'next/navigation';
 import {
   useSaveNickname,
@@ -12,10 +12,11 @@ import {
 import { useSignupFlow } from '@/hooks/useSignupFlow';
 import { MotionSlotMachineText } from '@/components/MotionSlotMachineText';
 import { SignupCompleteResponse } from '@/generated/api/models';
+import { User } from '@/types/user.types';
 
 export default function SignUpCompletePage() {
-  const login = useAuthStore((state) => state.login);
   const router = useRouter();
+  const { login } = useAuth();
   const { userType } = useSignupFlow();
   const userTypeLabel =
     userType === 'FOUNDER' ? '예비 창업자' : '주민';
@@ -30,14 +31,8 @@ export default function SignUpCompletePage() {
   ];
 
   // 회원가입 완료 후 로그인 및 리다이렉트 처리
-  const handleSuccess = ({
-    user,
-    accessToken,
-  }: SignupCompleteResponse) => {
-    login({
-      user,
-      accessToken,
-    });
+  const handleSuccess = (user: User) => {
+    login(user);
     console.log('회원가입 및 로그인 완료:', { nickname });
     router.replace('/main');
   };
@@ -48,10 +43,7 @@ export default function SignUpCompletePage() {
       mutation: {
         onSuccess: (data: SignupCompleteResponse) => {
           if (data) {
-            handleSuccess({
-              user: data.user,
-              accessToken: data.accessToken,
-            });
+            handleSuccess(data.user);
           } else {
             console.error('닉네임 또는 토큰 정보가 없습니다.');
           }

apps/web/src/app/(auth)/signup/layout.tsx

@@ -1,4 +1,3 @@
-import RedirectIfAuthed from './components/RedirectIfAuthed';
 /**
  * 회원가입 레이아웃
  */
@@ -14,9 +13,7 @@ export default function SignUpLayout({
 }: SignUpLayoutProps) {
   return (
     <div className="flex flex-col items-center h-full w-full">
-      <RedirectIfAuthed className="w-full flex-1 h-full">
-        {children}
-      </RedirectIfAuthed>
+      {children}
     </div>
   );
 }

apps/web/src/app/main/profile/page.tsx

@@ -1,13 +1,12 @@
 'use client';
+
 import { useRouter } from 'next/navigation';
 import { Button } from '@/components/buttons/Button';
-import { useAuthStore } from '@/stores/authStore';
+import { useAuth } from '@/hooks/useAuth';
 export default function ProfilePage() {
   const router = useRouter();
-  const logout = useAuthStore((state) => state.logout);
+  const { logout } = useAuth();
   const handleLogout = () => {
-    // 로그아웃 로직을 여기에 추가하세요.
-    console.log('로그아웃 버튼 클릭');
     logout();
     router.push('/');
   };

apps/web/src/app/page.tsx

@@ -1,41 +1,22 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { useAuth } from '@/hooks/useAuth';
 import LogoImage from '@/assets/images/LogoImage';
-import Button from '@/components/buttons/Button';
+import StartButton from '@/app/(auth)/components/StartButton';
 
 export default function HomePage() {
-  const router = useRouter();
-  const { isAuth, isLoading } = useAuth();
-
-  const handleStart = () => {
-    router.replace(isAuth ? '/main' : '/login');
-  };
-
   return (
     <div className="h-full w-full flex flex-col items-center justify-between pt-40">
       <h1 className="text-2xl font-semibold animate-fadeIn text-neutral-900 dark:text-neutral-100">
         소소에 오신 것을 환영합니다
       </h1>
       <div className="w-full h-full p-layout flex animate-fadeIn flex-col items-center justify-between space-y-4">
-        <div className="my-20 flex-1 flex items-center justify-center">
+        <div className="flex-1 flex items-center justify-center">
           <LogoImage />
         </div>
 
-        <div className="w-full space-y-4 flex flex-col items-center">
+        <div className="w-full gap-4 flex flex-col items-center">
           <p className="text-neutral-600 animate-pulse dark:text-neutral-400 text-sm">
             일상의 소소한 순간들을 기록해보세요
           </p>
-
-          <Button
-            onClick={handleStart}
-            variant="filled"
-            className="w-full"
-            isLoading={isLoading}
-          >
-            소소 시작하기
-          </Button>
+          <StartButton className="w-full">소소 시작하기</StartButton>
         </div>
       </div>
     </div>

apps/web/src/components/buttons/Button.tsx

@@ -95,7 +95,7 @@ export const Button = React.forwardRef<
     const isDisabled = disabled;
 
     const classes = cn(
-      'relative inline-flex items-center justify-center rounded-lg font-medium select-none overflow-hidden',
+      'relative flex items-center justify-center rounded-lg font-medium select-none overflow-hidden',
       'transition-transform duration-150 ease-out',
       // 기본 variant 스타일
       variantMap[variant],
@@ -111,7 +111,7 @@ export const Button = React.forwardRef<
     );
 
     return (
-      <Pressable>
+      <Pressable className={cn('flex', className)}>
         <button
           ref={ref}
           type="button"

apps/web/src/middleware.ts

@@ -12,6 +12,14 @@ const PUBLIC_ROUTES = ['/login', '/signup'];
 
 const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL;
 
+/**
+ * Set-Cookie 헤더를 현재 환경에 맞게 수정
+ * - Domain 속성 제거 (현재 도메인으로 자동 설정)
+ */
+function modifySetCookie(cookie: string): string {
+  return cookie.replace(/Domain=[^;]+;?\s*/gi, '');
+}
+
 /**
  * 로그인 페이지로 리다이렉트 (returnUrl 포함)
  */
@@ -42,13 +50,6 @@ export async function middleware(request: NextRequest) {
     return NextResponse.next();
   }
 
-  // 모든 쿠키 확인
-  const allCookies = request.cookies.getAll();
-  console.log(
-    `[Middleware] 📦 전체 쿠키 개수: ${allCookies.length}`,
-    allCookies.map((c) => c.name),
-  );
-
   // 쿠키에서 액세스 토큰과 리프레시 토큰 확인
   const accessToken = request.cookies.get('accessToken')?.value;
   const refreshToken = request.cookies.get('refreshToken')?.value;
@@ -62,19 +63,23 @@ export async function middleware(request: NextRequest) {
   // 액세스 토큰이 없고 리프레시 토큰만 있는 경우 토큰 갱신 시도
   if (!accessToken && refreshToken) {
     try {
-      // 프록시를 통해 토큰 갱신 (쿠키 자동 포함)
+      // 백엔드 직접 호출하여 토큰 갱신
       const refreshResponse = await fetch(
-        'http://localhost:3000/api/auth/refresh',
+        `${API_BASE_URL}/auth/refresh`,
         {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
+            Cookie: `refreshToken=${refreshToken}`,
           },
         },
       );
 
       if (refreshResponse.ok) {
-        console.log('[Middleware] 토큰 갱신 성공');
+        console.log(
+          '[Middleware] 토큰 갱신 성공 - 상태:',
+          refreshResponse.status,
+        );
 
         // Set-Cookie 헤더를 클라이언트로 전달
         const setCookieHeaders = refreshResponse.headers.getSetCookie
@@ -93,26 +98,10 @@ export async function middleware(request: NextRequest) {
           });
         }
 
-        // 토큰 갱신 성공 후 루트 경로면 리다이렉트
-        if (pathname === '/') {
-          const targetUrl = hasAuth ? '/main' : '/login';
-          console.log(
-            `[Middleware] 토큰 갱신 후 루트 접근 → ${targetUrl}로 리다이렉트`,
-          );
-          const redirectResponse = NextResponse.redirect(
-            new URL(targetUrl, request.url),
-          );
-          // Set-Cookie 헤더 유지
-          setCookieHeaders.forEach((cookie) => {
-            redirectResponse.headers.append('Set-Cookie', cookie);
-          });
-          return redirectResponse;
-        }
-
-        // 다른 경로는 계속 진행
         const newResponse = NextResponse.next();
         setCookieHeaders.forEach((cookie) => {
-          newResponse.headers.append('Set-Cookie', cookie);
+          const modifiedCookie = modifySetCookie(cookie);
+          newResponse.headers.append('Set-Cookie', modifiedCookie);
         });
         return newResponse;
       } else {

apps/web/src/providers/AuthHydrationProvider.tsx

@@ -35,14 +35,21 @@ export async function AuthHydrationProvider({
       await queryClient.prefetchQuery({
         queryKey: getGetCurrentUserQueryKey(),
         queryFn: () => getServerCurrentUser(),
-        staleTime: 13 * 60 * 1000, // 13분
+        staleTime: (query) => {
+          if (
+            query.state.status === 'error' ||
+            query.state.data === null
+          ) {
+            return 0;
+          }
+          return 13 * 60 * 1000; // 13분
+        },
       });
     } else {
       // 토큰이 없으면 비로그인 상태로 초기화
       queryClient.setQueryData(getGetCurrentUserQueryKey(), null);
     }
   }
-  // HTTP 모드에서는 아무것도 하지 않음 (CSR이 알아서 처리)
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>