feat: API 프록시 추가 및 품목기준관리 기능 개선

- HttpOnly 쿠키 기반 API 프록시 라우트 추가 (/api/proxy/[...path]) - 품목기준관리 컴포넌트 개선 (섹션, 필드, 다이얼로그) - ItemMasterContext API 연동 강화 - mock-data 제거 및 실제 API 연동 - 문서 명명규칙 정리 ([TYPE-DATE] 형식) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-25 21:07:10 +09:00
parent 5b2f8adc87
commit 593644922a
37 changed files with 5897 additions and 3267 deletions
--- a/src/app/api/proxy/[...path]/route.ts
+++ b/src/app/api/proxy/[...path]/route.ts
@@ -0,0 +1,244 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+/**
+ * 🔵 Catch-All API Proxy (HttpOnly Cookie Pattern)
+ *
+ * ⚡ 설계 목적:
+ * - HttpOnly 쿠키 보안 유지: JavaScript 접근 차단
+ * - 모든 백엔드 API를 단일 프록시로 처리
+ * - 서버에서 쿠키 읽어 Authorization 헤더 자동 추가
+ *
+ * 🔄 동작 흐름:
+ * 1. 클라이언트 → Next.js /api/proxy/* (토큰 없이)
+ * 2. Next.js: HttpOnly 쿠키에서 access_token 읽기 (서버에서만 가능)
+ * 3. Next.js → PHP Backend /api/v1/* (Authorization 헤더 포함)
+ * 4. PHP Backend → Next.js (응답)
+ * 5. Next.js → 클라이언트 (응답 전달)
+ *
+ * 🔐 보안 특징:
+ * - HttpOnly 쿠키: JavaScript 접근 불가 (XSS 방지)
+ * - 서버 사이드 토큰 처리: 브라우저에 토큰 노출 안됨
+ * - 자동 인증 헤더 추가: 클라이언트는 신경 쓸 필요 없음
+ *
+ * 📍 사용 예시:
+ * - Frontend: fetch('/api/proxy/item-master/init')
+ * - Backend: GET https://api.codebridge-x.com/api/v1/item-master/init
+ *
+ * ⚠️ 주의:
+ * - 로그아웃 API(/api/auth/logout)와 동일한 패턴
+ * - 모든 HTTP 메서드 지원 (GET, POST, PUT, DELETE)
+ * - 쿼리 파라미터와 요청 바디 모두 전달
+ */
+
+/**
+ * 토큰 갱신 함수 (access_token 만료 시 refresh_token으로 갱신)
+ */
+async function refreshAccessToken(refreshToken: string): Promise<{
+  success: boolean;
+  accessToken?: string;
+  refreshToken?: string;
+  expiresIn?: number;
+}> {
+  try {
+    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/refresh`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+        'X-API-KEY': process.env.NEXT_PUBLIC_API_KEY || '',
+      },
+      body: JSON.stringify({
+        refresh_token: refreshToken,
+      }),
+    });
+
+    if (!response.ok) {
+      console.warn('🔴 [PROXY] Token refresh failed');
+      return { success: false };
+    }
+
+    const data = await response.json();
+    console.log('✅ [PROXY] Token refreshed successfully');
+
+    return {
+      success: true,
+      accessToken: data.access_token,
+      refreshToken: data.refresh_token,
+      expiresIn: data.expires_in,
+    };
+  } catch (error) {
+    console.error('🔴 [PROXY] Token refresh error:', error);
+    return { success: false };
+  }
+}
+
+/**
+ * Catch-all proxy handler for all HTTP methods
+ */
+async function proxyRequest(
+  request: NextRequest,
+  params: { path: string[] },
+  method: string
+) {
+  try {
+    // 1. HttpOnly 쿠키에서 토큰 읽기 (서버에서만 가능!)
+    let token = request.cookies.get('access_token')?.value;
+    const refreshToken = request.cookies.get('refresh_token')?.value;
+
+    // 1-1. access_token이 없고 refresh_token이 있으면 자동 갱신
+    let newTokens: { accessToken?: string; refreshToken?: string; expiresIn?: number } | null = null;
+    if (!token && refreshToken) {
+      console.log('🔄 [PROXY] No access_token, attempting refresh...');
+      const refreshResult = await refreshAccessToken(refreshToken);
+      if (refreshResult.success && refreshResult.accessToken) {
+        token = refreshResult.accessToken;
+        newTokens = refreshResult;
+      }
+    }
+
+    // 2. 백엔드 URL 구성
+    const backendUrl = `${process.env.NEXT_PUBLIC_API_URL}/api/v1/${params.path.join('/')}`;
+
+    // 쿼리 파라미터 추가
+    const url = new URL(backendUrl);
+    request.nextUrl.searchParams.forEach((value, key) => {
+      url.searchParams.append(key, value);
+    });
+
+    // 3. 요청 바디 읽기 (POST, PUT, DELETE)
+    let body: string | undefined;
+    if (['POST', 'PUT', 'DELETE'].includes(method)) {
+      // Content-Type에 따라 바디 처리
+      const contentType = request.headers.get('content-type') || '';
+
+      if (contentType.includes('application/json')) {
+        body = await request.text();
+
+        // 🔍 디버깅: 전송 데이터 로그
+        console.log('🔵 [PROXY DEBUG] Request Details:');
+        console.log('  Method:', method);
+        console.log('  URL:', url.toString());
+        console.log('  Body:', body);
+        console.log('  Token:', token ? `${token.substring(0, 20)}...` : 'null');
+      } else if (contentType.includes('multipart/form-data')) {
+        // FormData는 그대로 전달
+        const formData = await request.formData();
+        // FormData를 백엔드로 전달하기 위해 다시 변환
+        body = await request.text();
+      }
+    }
+
+    // 4. 백엔드로 프록시 요청
+    const backendResponse = await fetch(url.toString(), {
+      method,
+      headers: {
+        'Content-Type': request.headers.get('content-type') || 'application/json',
+        'Accept': 'application/json',
+        'X-API-KEY': process.env.NEXT_PUBLIC_API_KEY || '',
+        'Authorization': token ? `Bearer ${token}` : '',
+      },
+      body,
+    });
+
+    // 5. 응답 데이터 읽기
+    const responseData = await backendResponse.text();
+
+    // 🔍 디버깅: 백엔드 응답 로그
+    console.log('🔵 [PROXY DEBUG] Backend Response:');
+    console.log('  Status:', backendResponse.status);
+    console.log('  Response:', responseData.substring(0, 500)); // 처음 500자만
+
+    // 6. 클라이언트로 응답 전달
+    const clientResponse = new NextResponse(responseData, {
+      status: backendResponse.status,
+      headers: {
+        'Content-Type': backendResponse.headers.get('content-type') || 'application/json',
+      },
+    });
+
+    // 6-1. 토큰이 갱신되었으면 새 쿠키 설정
+    if (newTokens && newTokens.accessToken) {
+      const accessTokenCookie = [
+        `access_token=${newTokens.accessToken}`,
+        'HttpOnly',
+        'Secure',
+        'SameSite=Strict',
+        'Path=/',
+        `Max-Age=${newTokens.expiresIn || 7200}`,
+      ].join('; ');
+
+      clientResponse.headers.append('Set-Cookie', accessTokenCookie);
+
+      if (newTokens.refreshToken) {
+        const refreshTokenCookie = [
+          `refresh_token=${newTokens.refreshToken}`,
+          'HttpOnly',
+          'Secure',
+          'SameSite=Strict',
+          'Path=/',
+          'Max-Age=604800', // 7 days
+        ].join('; ');
+        clientResponse.headers.append('Set-Cookie', refreshTokenCookie);
+      }
+
+      console.log('🍪 [PROXY] New tokens set in cookies');
+    }
+
+    return clientResponse;
+
+  } catch (error) {
+    console.error('Proxy request error:', error);
+    return NextResponse.json(
+      { error: 'Proxy server error' },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * GET 요청 프록시
+ * Next.js 15: params는 Promise이므로 await 필요
+ */
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> }
+) {
+  const resolvedParams = await params;
+  return proxyRequest(request, resolvedParams, 'GET');
+}
+
+/**
+ * POST 요청 프록시
+ * Next.js 15: params는 Promise이므로 await 필요
+ */
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> }
+) {
+  const resolvedParams = await params;
+  return proxyRequest(request, resolvedParams, 'POST');
+}
+
+/**
+ * PUT 요청 프록시
+ * Next.js 15: params는 Promise이므로 await 필요
+ */
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> }
+) {
+  const resolvedParams = await params;
+  return proxyRequest(request, resolvedParams, 'PUT');
+}
+
+/**
+ * DELETE 요청 프록시
+ * Next.js 15: params는 Promise이므로 await 필요
+ */
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> }
+) {
+  const resolvedParams = await params;
+  return proxyRequest(request, resolvedParams, 'DELETE');
+}