fix: 품목기준관리 실시간 동기화 수정

- BOM 항목 추가/수정/삭제 시 섹션탭 즉시 반영
- 섹션 복제 시 UI 즉시 업데이트 (null vs undefined 이슈 해결)
- 항목 수정 기능 추가 (useTemplateManagement)
- 실시간 동기화 문서 추가

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/app/api/proxy/[...path]/route.ts

@@ -72,8 +72,77 @@ async function refreshAccessToken(refreshToken: string): Promise<{
   }
 }
 
+/**
+ * 백엔드 API 요청 실행 함수
+ */
+async function executeBackendRequest(
+  url: URL,
+  method: string,
+  token: string | undefined,
+  body: string | undefined,
+  contentType: string
+): Promise<Response> {
+  return fetch(url.toString(), {
+    method,
+    headers: {
+      'Content-Type': contentType,
+      'Accept': 'application/json',
+      'X-API-KEY': process.env.NEXT_PUBLIC_API_KEY || '',
+      'Authorization': token ? `Bearer ${token}` : '',
+    },
+    body,
+  });
+}
+
+/**
+ * 쿠키 생성 헬퍼 함수
+ */
+function createTokenCookies(tokens: { accessToken?: string; refreshToken?: string; expiresIn?: number }) {
+  const cookies: string[] = [];
+
+  if (tokens.accessToken) {
+    cookies.push([
+      `access_token=${tokens.accessToken}`,
+      'HttpOnly',
+      'Secure',
+      'SameSite=Strict',
+      'Path=/',
+      `Max-Age=${tokens.expiresIn || 7200}`,
+    ].join('; '));
+  }
+
+  if (tokens.refreshToken) {
+    cookies.push([
+      `refresh_token=${tokens.refreshToken}`,
+      'HttpOnly',
+      'Secure',
+      'SameSite=Strict',
+      'Path=/',
+      'Max-Age=604800', // 7 days
+    ].join('; '));
+  }
+
+  return cookies;
+}
+
+/**
+ * 쿠키 삭제 헬퍼 함수 (토큰 만료 시)
+ */
+function createClearTokenCookies(): string[] {
+  return [
+    'access_token=; HttpOnly; Secure; SameSite=Strict; Path=/; Max-Age=0',
+    'refresh_token=; HttpOnly; Secure; SameSite=Strict; Path=/; Max-Age=0',
+  ];
+}
+
 /**
  * Catch-all proxy handler for all HTTP methods
+ *
+ * 🔄 토큰 갱신 로직:
+ * 1. 현재 access_token으로 백엔드 요청
+ * 2. 401 응답 시 → refresh_token으로 새 토큰 발급
+ * 3. 새 토큰으로 원래 요청 재시도
+ * 4. 재시도도 실패하면 → 쿠키 삭제 후 401 반환
  */
 async function proxyRequest(
   request: NextRequest,
@@ -85,21 +154,8 @@ async function proxyRequest(
     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);
@@ -107,48 +163,63 @@ async function proxyRequest(
 
     // 3. 요청 바디 읽기 (POST, PUT, DELETE)
     let body: string | undefined;
-    if (['POST', 'PUT', 'DELETE'].includes(method)) {
-      // Content-Type에 따라 바디 처리
-      const contentType = request.headers.get('content-type') || '';
+    const contentType = request.headers.get('content-type') || 'application/json';
 
+    if (['POST', 'PUT', 'DELETE'].includes(method)) {
       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');
+        console.log('🔵 [PROXY] Request:', method, url.toString());
+        console.log('🔵 [PROXY] Request Body:', body); // 디버깅용
       } else if (contentType.includes('multipart/form-data')) {
-        // FormData는 그대로 전달
-        const formData = await request.formData();
-        // FormData를 백엔드로 전달하기 위해 다시 변환
+        // multipart는 formData로 처리해야 하지만, 현재는 지원하지 않음
+        console.warn('🟡 [PROXY] multipart/form-data is not fully supported');
         body = await request.text();
       }
+    } else {
+      console.log('🔵 [PROXY] Request:', method, url.toString());
     }
 
     // 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,
-    });
+    let backendResponse = await executeBackendRequest(url, method, token, body, contentType);
+    let newTokens: { accessToken?: string; refreshToken?: string; expiresIn?: number } | null = null;
 
-    // 5. 응답 데이터 읽기
+    // 5. 🔄 401 응답 시 토큰 갱신 후 재시도
+    if (backendResponse.status === 401 && refreshToken) {
+      console.log('🔄 [PROXY] Got 401, attempting token refresh...');
+
+      const refreshResult = await refreshAccessToken(refreshToken);
+
+      if (refreshResult.success && refreshResult.accessToken) {
+        console.log('✅ [PROXY] Token refreshed, retrying original request...');
+
+        // 새 토큰으로 원래 요청 재시도
+        token = refreshResult.accessToken;
+        newTokens = refreshResult;
+        backendResponse = await executeBackendRequest(url, method, token, body, contentType);
+
+        console.log('🔵 [PROXY] Retry response status:', backendResponse.status);
+      } else {
+        // 리프레시 실패 → 쿠키 삭제하고 401 반환
+        console.warn('🔴 [PROXY] Token refresh failed, clearing cookies...');
+
+        const clearResponse = NextResponse.json(
+          { error: 'Authentication failed', needsReauth: true },
+          { status: 401 }
+        );
+
+        createClearTokenCookies().forEach(cookie => {
+          clearResponse.headers.append('Set-Cookie', cookie);
+        });
+
+        return clearResponse;
+      }
+    }
+
+    // 6. 응답 데이터 읽기
     const responseData = await backendResponse.text();
+    console.log('🔵 [PROXY] Response status:', backendResponse.status);
 
-    // 🔍 디버깅: 백엔드 응답 로그
-    console.log('🔵 [PROXY DEBUG] Backend Response:');
-    console.log('  Status:', backendResponse.status);
-    console.log('  Response:', responseData.substring(0, 500)); // 처음 500자만
-
-    // 6. 클라이언트로 응답 전달
+    // 7. 클라이언트로 응답 전달
     const clientResponse = new NextResponse(responseData, {
       status: backendResponse.status,
       headers: {
@@ -156,31 +227,11 @@ async function proxyRequest(
       },
     });
 
-    // 6-1. 토큰이 갱신되었으면 새 쿠키 설정
+    // 8. 토큰이 갱신되었으면 새 쿠키 설정
     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);
-      }
-
+      createTokenCookies(newTokens).forEach(cookie => {
+        clientResponse.headers.append('Set-Cookie', cookie);
+      });
       console.log('🍪 [PROXY] New tokens set in cookies');
     }