From 98a96be657134d118bf183aba1a30b06a0e5d937 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B6=8C=ED=98=81=EC=84=B1?= <shine1324@gmail.com>
Date: Thu, 22 Jan 2026 16:06:03 +0900
Subject: [PATCH] =?UTF-8?q?feat(WEB):=20DevToolbar=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=9D=B4=EB=8F=99=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20locale=20=EC=B2=98=EB=A6=AC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 비활성화 버튼 클릭 시 해당 페이지로 이동 기능 추가
- 활성화 버튼 클릭 시 폼 자동 채우기 (기존 동작 유지)
- locale 추출 로직 수정: 유효한 locale(ko, en)만 인식
- 잘못된 경로 생성 문제 해결 (/production/sales/... → /sales/...)
---
 src/components/dev/DevToolbar.tsx | 68 +++++++++++++++++++++++--------
 1 file changed, 52 insertions(+), 16 deletions(-)

diff --git a/src/components/dev/DevToolbar.tsx b/src/components/dev/DevToolbar.tsx
index fb30d581..825f3ec1 100644
--- a/src/components/dev/DevToolbar.tsx
+++ b/src/components/dev/DevToolbar.tsx
@@ -6,12 +6,16 @@
  * 화면 하단에 플로팅으로 표시되며,
  * 각 단계(견적→수주→작업지시→완료→출하)의 폼을 자동으로 채울 수 있습니다.
  *
+ * 기능:
+ * - 현재 페이지에서 활성화: 버튼 클릭 시 폼 자동 채우기
+ * - 다른 페이지에서 비활성화: 버튼 클릭 시 해당 페이지로 이동
+ *
  * 환경변수로 활성화/비활성화:
  * NEXT_PUBLIC_DEV_TOOLBAR_ENABLED=true
  */
 
 import { useState } from 'react';
-import { usePathname } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import {
   FileText,      // 견적
   ClipboardList, // 수주
@@ -53,6 +57,7 @@ const FLOW_STEPS: { type: DevFillPageType; label: string; icon: typeof FileText;
 
 export function DevToolbar() {
   const pathname = usePathname();
+  const router = useRouter();
   const {
     isEnabled,
     isVisible,
@@ -67,6 +72,11 @@ export function DevToolbar() {
   const [isExpanded, setIsExpanded] = useState(true);
   const [isLoading, setIsLoading] = useState<DevFillPageType | null>(null);
 
+  // 현재 locale 추출 (유효한 locale만 인식)
+  const VALID_LOCALES = ['ko', 'en'];
+  const firstSegment = pathname.split('/')[1];
+  const locale = VALID_LOCALES.includes(firstSegment) ? firstSegment : '';
+
   // 비활성화 시 렌더링하지 않음
   if (!isEnabled) return null;
 
@@ -108,6 +118,13 @@ export function DevToolbar() {
     }
   };
 
+  // 페이지 이동
+  const handleNavigate = (path: string) => {
+    if (path) {
+      router.push(locale ? `/${locale}${path}` : path);
+    }
+  };
+
   // 플로우 데이터 표시
   const hasFlowData = flowData.quoteId || flowData.orderId || flowData.workOrderId || flowData.lotNo;
 
@@ -172,8 +189,9 @@ export function DevToolbar() {
               const isActive = activePage === step.type;
               const isRegistered = hasRegisteredForm(step.type);
               const isCurrentLoading = isLoading === step.type;
+              const hasPath = !!step.path;
 
-              // 완료 버튼은 상세 페이지에서만 활성화
+              // 완료 버튼은 상세 페이지에서만 활성화 (이동 경로 없음)
               if (step.type === 'workOrderComplete' && !isActive) {
                 return (
                   <div key={step.type} className="flex items-center">
@@ -183,6 +201,7 @@ export function DevToolbar() {
                       variant="outline"
                       disabled
                       className="opacity-50"
+                      title="작업지시 상세 페이지에서 사용 가능"
                     >
                       <Icon className="w-4 h-4 mr-1" />
                       {step.label}
@@ -191,27 +210,44 @@ export function DevToolbar() {
                 );
               }
 
+              // 활성화된 페이지: 폼 채우기
+              if (isActive) {
+                return (
+                  <div key={step.type} className="flex items-center">
+                    {index > 0 && <span className="text-yellow-400 mx-1">→</span>}
+                    <Button
+                      size="sm"
+                      variant="default"
+                      disabled={!isRegistered || isCurrentLoading}
+                      className="bg-yellow-500 hover:bg-yellow-600 text-white border-yellow-600"
+                      onClick={() => handleFillForm(step.type)}
+                      title="폼 자동 채우기"
+                    >
+                      {isCurrentLoading ? (
+                        <Loader2 className="w-4 h-4 mr-1 animate-spin" />
+                      ) : (
+                        <Icon className="w-4 h-4 mr-1" />
+                      )}
+                      {step.label} 채우기
+                    </Button>
+                  </div>
+                );
+              }
+
+              // 비활성화된 페이지: 해당 페이지로 이동
               return (
                 <div key={step.type} className="flex items-center">
                   {index > 0 && <span className="text-yellow-400 mx-1">→</span>}
                   <Button
                     size="sm"
-                    variant={isActive ? 'default' : 'outline'}
-                    disabled={!isActive || !isRegistered || isCurrentLoading}
-                    className={
-                      isActive
-                        ? 'bg-yellow-500 hover:bg-yellow-600 text-white border-yellow-600'
-                        : 'border-yellow-300 text-yellow-700 hover:bg-yellow-100'
-                    }
-                    onClick={() => handleFillForm(step.type)}
+                    variant="outline"
+                    disabled={!hasPath}
+                    className="border-yellow-300 text-yellow-700 hover:bg-yellow-100 hover:border-yellow-500"
+                    onClick={() => handleNavigate(step.path)}
+                    title={hasPath ? `${step.label} 페이지로 이동` : '이동 경로 없음'}
                   >
-                    {isCurrentLoading ? (
-                      <Loader2 className="w-4 h-4 mr-1 animate-spin" />
-                    ) : (
-                      <Icon className="w-4 h-4 mr-1" />
-                    )}
+                    <Icon className="w-4 h-4 mr-1" />
                     {step.label}
-                    {isActive && ' 채우기'}
                   </Button>
                 </div>
               );