feat(WEB): UniversalListPage 전체 마이그레이션 및 코드 정리

- UniversalListPage/IntegratedListTemplateV2 컴포넌트 기능 개선 - 회계, HR, 건설, 고객센터, 결재, 설정 등 전체 리스트 컴포넌트 마이그레이션 - 테스트 페이지 및 미사용 API 라우트 정리 (board-test, order-management-test 등) - 미들웨어 토큰 갱신 로직 개선 - AuthenticatedLayout 구조 개선 - claudedocs 문서 업데이트 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-16 15:19:09 +09:00
parent 8639eee5df
commit ad493bcea6
90 changed files with 19864 additions and 20305 deletions
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -21,6 +21,28 @@ import { locales, defaultLocale } from '@/i18n/config';
 // Auth configuration
 import { AUTH_CONFIG } from '@/lib/api/auth/auth-config';

+/**
+ * 🔄 미들웨어 전용 토큰 갱신 캐시 (Edge Runtime)
+ *
+ * 목적: 페이지 렌더링 전에 토큰을 미리 갱신하여 race condition 방지
+ * - auth/check와 serverFetch가 동시에 refresh_token을 사용하는 문제 해결
+ * - 미들웨어에서 먼저 갱신하면 이후 요청들은 새 access_token 사용
+ *
+ * 주의: Edge Runtime에서는 모듈 레벨 변수가 요청 간 공유되지 않을 수 있음
+ * 따라서 5초 캐시로 같은 요청 내 중복 갱신만 방지
+ */
+let middlewareRefreshCache: {
+  promise: Promise<{ success: boolean; accessToken?: string; refreshToken?: string; expiresIn?: number }> | null;
+  timestamp: number;
+  result: { success: boolean; accessToken?: string; refreshToken?: string; expiresIn?: number } | null;
+} = {
+  promise: null,
+  timestamp: 0,
+  result: null,
+};
+
+const MIDDLEWARE_REFRESH_CACHE_TTL = 5000; // 5초
+
 // Create i18n middleware
 const intlMiddleware = createMiddleware({
  locales,
@@ -133,38 +155,59 @@ function getPathnameWithoutLocale(pathname: string): string {
 /**
 * 인증 체크 함수
 * 3가지 인증 방식 지원: Bearer Token/Sanctum/API-Key
+ *
+ * 🔄 추가: needsRefresh - access_token이 없고 refresh_token만 있는 경우
+ * 이 경우 미들웨어에서 사전 갱신하여 페이지 로드 시 race condition 방지
 */
 function checkAuthentication(request: NextRequest): {
  isAuthenticated: boolean;
  authMode: 'sanctum' | 'bearer' | 'api-key' | null;
+  needsRefresh: boolean;
+  refreshToken: string | null;
 } {
  // 1. Bearer Token 확인 (쿠키에서)
-  // access_token 또는 refresh_token이 있으면 인증된 것으로 간주
  const accessToken = request.cookies.get('access_token');
  const refreshToken = request.cookies.get('refresh_token');
-  if ((accessToken && accessToken.value) || (refreshToken && refreshToken.value)) {
-    return { isAuthenticated: true, authMode: 'bearer' };
+
+  // 🔄 access_token이 없고 refresh_token만 있으면 사전 갱신 필요
+  if (!accessToken?.value && refreshToken?.value) {
+    return {
+      isAuthenticated: true,
+      authMode: 'bearer',
+      needsRefresh: true,
+      refreshToken: refreshToken.value,
+    };
+  }
+
+  // access_token이 있으면 갱신 불필요
+  if (accessToken?.value) {
+    return {
+      isAuthenticated: true,
+      authMode: 'bearer',
+      needsRefresh: false,
+      refreshToken: refreshToken?.value || null,
+    };
  }

  // 2. Bearer Token 확인 (Authorization 헤더)
  const authHeader = request.headers.get('authorization');
  if (authHeader?.startsWith('Bearer ')) {
-    return { isAuthenticated: true, authMode: 'bearer' };
+    return { isAuthenticated: true, authMode: 'bearer', needsRefresh: false, refreshToken: null };
  }

  // 3. Sanctum 세션 쿠키 확인 (레거시 지원)
  const sessionCookie = request.cookies.get('laravel_session');
  if (sessionCookie) {
-    return { isAuthenticated: true, authMode: 'sanctum' };
+    return { isAuthenticated: true, authMode: 'sanctum', needsRefresh: false, refreshToken: null };
  }

  // 4. API Key 확인
  const apiKey = request.headers.get('x-api-key');
  if (apiKey) {
-    return { isAuthenticated: true, authMode: 'api-key' };
+    return { isAuthenticated: true, authMode: 'api-key', needsRefresh: false, refreshToken: null };
  }

-  return { isAuthenticated: false, authMode: null };
+  return { isAuthenticated: false, authMode: null, needsRefresh: false, refreshToken: null };
 }

 /**
@@ -187,7 +230,81 @@ function isPublicRoute(pathname: string): boolean {
  });
 }

-export function middleware(request: NextRequest) {
+/**
+ * 🔄 미들웨어에서 토큰 갱신 (페이지 렌더링 전)
+ *
+ * 목적: Race Condition 방지
+ * - 문제: auth/check와 serverFetch가 동시에 refresh_token 사용
+ * - 해결: 미들웨어에서 먼저 갱신하여 페이지 로드 전에 새 토큰 준비
+ *
+ * 5초 캐싱으로 중복 요청 방지
+ */
+async function refreshTokenInMiddleware(
+  refreshToken: string
+): Promise<{ success: boolean; accessToken?: string; refreshToken?: string; expiresIn?: number }> {
+  const now = Date.now();
+
+  // 1. 캐시된 성공 결과가 유효하면 즉시 반환
+  if (middlewareRefreshCache.result && middlewareRefreshCache.result.success && now - middlewareRefreshCache.timestamp < MIDDLEWARE_REFRESH_CACHE_TTL) {
+    console.log(`🔵 [Middleware] Using cached refresh result (age: ${now - middlewareRefreshCache.timestamp}ms)`);
+    return middlewareRefreshCache.result;
+  }
+
+  // 2. 진행 중인 refresh가 있으면 기다림
+  if (middlewareRefreshCache.promise && !middlewareRefreshCache.result && now - middlewareRefreshCache.timestamp < MIDDLEWARE_REFRESH_CACHE_TTL) {
+    console.log(`🔵 [Middleware] Waiting for ongoing refresh...`);
+    return middlewareRefreshCache.promise;
+  }
+
+  // 3. 이전 refresh가 실패했으면 캐시 초기화
+  if (middlewareRefreshCache.result && !middlewareRefreshCache.result.success) {
+    middlewareRefreshCache.promise = null;
+    middlewareRefreshCache.result = null;
+  }
+
+  // 4. 새 refresh 시작
+  console.log(`🔄 [Middleware] Starting pre-refresh before page render...`);
+  middlewareRefreshCache.timestamp = now;
+  middlewareRefreshCache.result = null;
+
+  middlewareRefreshCache.promise = (async () => {
+    try {
+      const refreshUrl = `${process.env.NEXT_PUBLIC_API_URL}/api/v1/refresh`;
+      const response = await fetch(refreshUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json',
+          'X-API-KEY': process.env.API_KEY || '',
+        },
+        body: JSON.stringify({ refresh_token: refreshToken }),
+      });
+
+      if (!response.ok) {
+        console.warn('🔴 [Middleware] Pre-refresh failed:', response.status);
+        return { success: false };
+      }
+
+      const data = await response.json();
+      console.log('✅ [Middleware] Pre-refresh successful');
+
+      return {
+        success: true,
+        accessToken: data.access_token,
+        refreshToken: data.refresh_token,
+        expiresIn: data.expires_in,
+      };
+    } catch (error) {
+      console.error('🔴 [Middleware] Pre-refresh error:', error);
+      return { success: false };
+    }
+  })();
+
+  middlewareRefreshCache.result = await middlewareRefreshCache.promise;
+  return middlewareRefreshCache.result;
+}
+
+export async function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;
  const userAgent = request.headers.get('user-agent') || '';

@@ -245,7 +362,7 @@ export function middleware(request: NextRequest) {
  }

  // 4️⃣ 인증 체크
-  const { isAuthenticated, authMode } = checkAuthentication(request);
+  const { isAuthenticated, authMode, needsRefresh, refreshToken } = checkAuthentication(request);

  // 4.5️⃣ MVP: /signup 접근 차단 → /login 리다이렉트 (2025-12-04)
  // 회원가입 기능은 운영 페이지로 이동 예정
@@ -255,13 +372,96 @@ export function middleware(request: NextRequest) {
  }

  // 5️⃣ 게스트 전용 라우트 (로그인/회원가입)
+  // 대전제: "게스트 전용" = 로그인 안 한 사람만 접근 가능
+  // 이미 로그인한 사람이 오면 → /dashboard로 보냄
  if (isGuestOnlyRoute(pathnameWithoutLocale)) {
-    // 이미 로그인한 경우 대시보드로
+    // 🔄 needsRefresh인 경우: 먼저 refresh 시도해서 "진짜 로그인 상태"인지 확인
+    // refresh_token만 있는 상태 = "로그인 가능성 있음" (확정 아님)
+    if (needsRefresh && refreshToken) {
+      console.log(`🔄 [Middleware] Verifying auth status on guest route: ${pathname}`);
+
+      const refreshResult = await refreshTokenInMiddleware(refreshToken);
+
+      if (refreshResult.success && refreshResult.accessToken) {
+        // ✅ refresh 성공 = 진짜 로그인됨 → /dashboard로 (게스트 전용이니까)
+        console.log(`✅ [Middleware] Authenticated, redirecting to dashboard from guest route`);
+
+        const isProduction = process.env.NODE_ENV === 'production';
+        const response = NextResponse.redirect(new URL(AUTH_CONFIG.redirects.afterLogin, request.url));
+
+        // 새 쿠키 설정
+        response.headers.append('Set-Cookie', [
+          `access_token=${refreshResult.accessToken}`,
+          'HttpOnly',
+          ...(isProduction ? ['Secure'] : []),
+          'SameSite=Lax',
+          'Path=/',
+          `Max-Age=${refreshResult.expiresIn || 7200}`,
+        ].join('; '));
+
+        response.headers.append('Set-Cookie', [
+          `refresh_token=${refreshResult.refreshToken}`,
+          'HttpOnly',
+          ...(isProduction ? ['Secure'] : []),
+          'SameSite=Lax',
+          'Path=/',
+          'Max-Age=604800',
+        ].join('; '));
+
+        response.headers.append('Set-Cookie', [
+          'is_authenticated=true',
+          ...(isProduction ? ['Secure'] : []),
+          'SameSite=Lax',
+          'Path=/',
+          `Max-Age=${refreshResult.expiresIn || 7200}`,
+        ].join('; '));
+
+        return response;
+      } else {
+        // ❌ refresh 실패 = 로그인 안 됨 → 쿠키 삭제 후 로그인 페이지 표시 (왕복 없이!)
+        console.log(`🔴 [Middleware] Not authenticated, showing guest page directly`);
+
+        const isProduction = process.env.NODE_ENV === 'production';
+        const intlResponse = intlMiddleware(request);
+
+        // 만료된 쿠키 삭제
+        intlResponse.headers.append('Set-Cookie', [
+          'access_token=',
+          'HttpOnly',
+          ...(isProduction ? ['Secure'] : []),
+          'SameSite=Lax',
+          'Path=/',
+          'Max-Age=0',
+        ].join('; '));
+
+        intlResponse.headers.append('Set-Cookie', [
+          'refresh_token=',
+          'HttpOnly',
+          ...(isProduction ? ['Secure'] : []),
+          'SameSite=Lax',
+          'Path=/',
+          'Max-Age=0',
+        ].join('; '));
+
+        intlResponse.headers.append('Set-Cookie', [
+          'is_authenticated=',
+          ...(isProduction ? ['Secure'] : []),
+          'SameSite=Lax',
+          'Path=/',
+          'Max-Age=0',
+        ].join('; '));
+
+        return intlResponse;
+      }
+    }
+
+    // access_token 있음 = 확실히 로그인됨 → /dashboard로
    if (isAuthenticated) {
      console.log(`[Already Authenticated] Redirecting to /dashboard from ${pathname}`);
      return NextResponse.redirect(new URL(AUTH_CONFIG.redirects.afterLogin, request.url));
    }
-    // 비로그인 상태면 접근 허용
+
+    // 쿠키 아예 없음 = 비로그인 → 로그인 페이지 표시
    return intlMiddleware(request);
  }

@@ -280,6 +480,120 @@ export function middleware(request: NextRequest) {
    return NextResponse.redirect(url);
  }

+  // 7️⃣.5️⃣ 🔄 토큰 사전 갱신 (Race Condition 방지)
+  // access_token이 없고 refresh_token만 있는 경우, 페이지 렌더링 전에 미리 갱신
+  // 이렇게 하면 auth/check와 serverFetch가 동시에 refresh_token을 사용하는 문제 방지
+  if (needsRefresh && refreshToken) {
+    console.log(`🔄 [Middleware] Pre-refreshing token before page render: ${pathname}`);
+
+    const refreshResult = await refreshTokenInMiddleware(refreshToken);
+
+    if (refreshResult.success && refreshResult.accessToken) {
+      // 새 토큰을 쿠키에 설정하여 응답과 함께 전송
+      const isProduction = process.env.NODE_ENV === 'production';
+      const intlResponse = intlMiddleware(request);
+
+      // 새 access_token 쿠키 설정
+      const accessTokenCookie = [
+        `access_token=${refreshResult.accessToken}`,
+        'HttpOnly',
+        ...(isProduction ? ['Secure'] : []),
+        'SameSite=Lax',
+        'Path=/',
+        `Max-Age=${refreshResult.expiresIn || 7200}`,
+      ].join('; ');
+
+      // 새 refresh_token 쿠키 설정
+      const refreshTokenCookie = [
+        `refresh_token=${refreshResult.refreshToken}`,
+        'HttpOnly',
+        ...(isProduction ? ['Secure'] : []),
+        'SameSite=Lax',
+        'Path=/',
+        'Max-Age=604800', // 7 days (하드코딩 유지)
+      ].join('; ');
+
+      // 토큰 갱신 신호 쿠키 (클라이언트에서 감지용)
+      const tokenRefreshedCookie = [
+        `token_refreshed_at=${Date.now()}`,
+        ...(isProduction ? ['Secure'] : []),
+        'SameSite=Lax',
+        'Path=/',
+        'Max-Age=60',
+      ].join('; ');
+
+      // 인증 상태 쿠키
+      const isAuthenticatedCookie = [
+        'is_authenticated=true',
+        ...(isProduction ? ['Secure'] : []),
+        'SameSite=Lax',
+        'Path=/',
+        `Max-Age=${refreshResult.expiresIn || 7200}`,
+      ].join('; ');
+
+      intlResponse.headers.append('Set-Cookie', accessTokenCookie);
+      intlResponse.headers.append('Set-Cookie', refreshTokenCookie);
+      intlResponse.headers.append('Set-Cookie', tokenRefreshedCookie);
+      intlResponse.headers.append('Set-Cookie', isAuthenticatedCookie);
+
+      // 보안 헤더 추가
+      intlResponse.headers.set('X-Robots-Tag', 'noindex, nofollow, noarchive, nosnippet');
+      intlResponse.headers.set('X-Content-Type-Options', 'nosniff');
+      intlResponse.headers.set('X-Frame-Options', 'DENY');
+      intlResponse.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
+
+      console.log(`✅ [Middleware] Pre-refresh complete, new tokens set in cookies`);
+      return intlResponse;
+    } else {
+      // 갱신 실패 시 쿠키 삭제 후 로그인 페이지로
+      // 🔴 CRITICAL: 쿠키를 삭제하지 않으면 무한 리다이렉트 루프 발생
+      // - /login 접근 시 refresh_token 있으면 isAuthenticated=true 판정
+      // - "Already Authenticated" → /dashboard로 리다이렉트
+      // - 다시 needsRefresh=true → pre-refresh 시도 → 401 실패 → /login
+      // - 무한 루프!
+      console.warn(`🔴 [Middleware] Pre-refresh failed, clearing cookies and redirecting to login`);
+
+      const isProduction = process.env.NODE_ENV === 'production';
+      const url = new URL('/login', request.url);
+      url.searchParams.set('redirect', pathname);
+
+      const response = NextResponse.redirect(url);
+
+      // 쿠키 삭제 (Max-Age=0으로 만료 처리)
+      const clearAccessToken = [
+        'access_token=',
+        'HttpOnly',
+        ...(isProduction ? ['Secure'] : []),
+        'SameSite=Lax',
+        'Path=/',
+        'Max-Age=0',
+      ].join('; ');
+
+      const clearRefreshToken = [
+        'refresh_token=',
+        'HttpOnly',
+        ...(isProduction ? ['Secure'] : []),
+        'SameSite=Lax',
+        'Path=/',
+        'Max-Age=0',
+      ].join('; ');
+
+      const clearIsAuthenticated = [
+        'is_authenticated=',
+        ...(isProduction ? ['Secure'] : []),
+        'SameSite=Lax',
+        'Path=/',
+        'Max-Age=0',
+      ].join('; ');
+
+      response.headers.append('Set-Cookie', clearAccessToken);
+      response.headers.append('Set-Cookie', clearRefreshToken);
+      response.headers.append('Set-Cookie', clearIsAuthenticated);
+
+      return response;
+    }
+  }
+
  // 8️⃣ 인증 모드 로깅 (디버깅용)
  if (isAuthenticated) {
    console.log(`[Authenticated] Mode: ${authMode}, Path: ${pathname}`);