From 610d12f4d31b987ce1d339841bc808196f21595b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sun, 22 Mar 2026 17:16:37 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20[=EC=83=9D=EC=82=B0=ED=98=84=ED=99=A9?=
 =?UTF-8?q?=ED=8C=90]=20=EC=A0=88=EA=B3=A1=20=ED=83=AD=20depth=20=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=20=E2=80=94=20=EC=9E=AC=EA=B3=B5=ED=92=88=20=ED=95=98?=
 =?UTF-8?q?=EC=9C=84=20=ED=83=AD=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 절곡 계열 공정을 부모(절곡) + 하위(가이드레일/케이스/하단마감재/기타) 구조로 그룹화
- 상위 탭에서 절곡 선택 시 하위 탭 표시
- TabOption에 children 필드 추가
- 재공품 라벨 간소화: "절곡 (재공품-가이드레일)" → "가이드레일"
---
 .../production/ProductionDashboard/index.tsx  | 93 +++++++++++++++----
 .../production/ProductionDashboard/types.ts   |  1 +
 2 files changed, 74 insertions(+), 20 deletions(-)

diff --git a/src/components/production/ProductionDashboard/index.tsx b/src/components/production/ProductionDashboard/index.tsx
index 6733b04d..9f865cc3 100644
--- a/src/components/production/ProductionDashboard/index.tsx
+++ b/src/components/production/ProductionDashboard/index.tsx
@@ -57,13 +57,34 @@ export default function ProductionDashboard() {
         const result = await getProcessOptions();
         if (result.success) {
           setProcessOptions(result.data);
-          // 동적 탭 옵션 생성: 전체 + 공정 목록
+          // 동적 탭 옵션 생성: 전체 + 공정 목록 (절곡 계열은 하위 탭으로 그룹화)
+          const bendingParent: TabOption[] = [];
+          const bendingChildren: TabOption[] = [];
+          const otherTabs: TabOption[] = [];
+
+          for (const p of result.data) {
+            if (p.name.startsWith('절곡')) {
+              if (p.name === '절곡') {
+                bendingParent.push({ value: p.code, label: p.name });
+              } else {
+                // "절곡 (재공품-가이드레일)" → "가이드레일"
+                const shortLabel = p.name.replace(/^절곡\s*\(재공품-?/, '').replace(/\)$/, '') || p.name;
+                bendingChildren.push({ value: p.code, label: shortLabel });
+              }
+            } else {
+              otherTabs.push({ value: p.code, label: p.name });
+            }
+          }
+
+          // 절곡 부모에 하위 탭 연결
+          const bendingTab: TabOption | null = bendingParent.length > 0
+            ? { ...bendingParent[0], children: bendingChildren.length > 0 ? bendingChildren : undefined }
+            : null;
+
           const dynamicTabs: TabOption[] = [
             { value: 'all', label: '전체' },
-            ...result.data.map((p) => ({
-              value: p.code,
-              label: p.name,
-            })),
+            ...otherTabs,
+            ...(bendingTab ? [bendingTab] : []),
           ];
           setTabOptions(dynamicTabs);
         } else {
@@ -170,21 +191,53 @@ export default function ProductionDashboard() {
           </div>
         </div>
 
-        {/* 공정별 탭 (동적 생성) */}
-        <div className="overflow-x-auto -mx-3 px-3 md:mx-0 md:px-0">
-          <Tabs value={selectedTab} onValueChange={setSelectedTab}>
-            <TabsList className="w-max">
-              {isLoadingProcesses ? (
-                <TabsTrigger value="all" className="px-6">전체</TabsTrigger>
-              ) : (
-                tabOptions.map((tab) => (
-                  <TabsTrigger key={tab.value} value={tab.value} className="px-4 sm:px-6">
-                    {tab.label}
-                  </TabsTrigger>
-                ))
-              )}
-            </TabsList>
-          </Tabs>
+        {/* 공정별 탭 (동적 생성, 절곡은 depth 구조) */}
+        <div className="space-y-1">
+          <div className="overflow-x-auto -mx-3 px-3 md:mx-0 md:px-0">
+            <Tabs value={
+              // 하위 탭 선택 시 부모 탭을 활성화
+              tabOptions.find(t => t.children?.some(c => c.value === selectedTab))?.value || selectedTab
+            } onValueChange={(v) => {
+              // 하위 탭이 있는 부모 선택 시 부모 값으로 설정
+              setSelectedTab(v);
+            }}>
+              <TabsList className="w-max">
+                {isLoadingProcesses ? (
+                  <TabsTrigger value="all" className="px-6">전체</TabsTrigger>
+                ) : (
+                  tabOptions.map((tab) => (
+                    <TabsTrigger key={tab.value} value={tab.value} className="px-4 sm:px-6">
+                      {tab.label}
+                    </TabsTrigger>
+                  ))
+                )}
+              </TabsList>
+            </Tabs>
+          </div>
+
+          {/* 하위 탭 (절곡 재공품 세분화) */}
+          {(() => {
+            const parentTab = tabOptions.find(t => t.children && t.children.length > 0 &&
+              (t.value === selectedTab || t.children.some(c => c.value === selectedTab))
+            );
+            if (!parentTab?.children) return null;
+            return (
+              <div className="overflow-x-auto -mx-3 px-3 md:mx-0 md:px-0">
+                <Tabs value={selectedTab} onValueChange={setSelectedTab}>
+                  <TabsList className="w-max h-8 bg-gray-100">
+                    <TabsTrigger value={parentTab.value} className="px-3 text-xs h-7">
+                      전체
+                    </TabsTrigger>
+                    {parentTab.children.map((sub) => (
+                      <TabsTrigger key={sub.value} value={sub.value} className="px-3 text-xs h-7">
+                        {sub.label}
+                      </TabsTrigger>
+                    ))}
+                  </TabsList>
+                </Tabs>
+              </div>
+            );
+          })()}
         </div>
 
         {/* 로딩 상태 */}
diff --git a/src/components/production/ProductionDashboard/types.ts b/src/components/production/ProductionDashboard/types.ts
index dccfdbc1..267b232c 100644
--- a/src/components/production/ProductionDashboard/types.ts
+++ b/src/components/production/ProductionDashboard/types.ts
@@ -97,6 +97,7 @@ export interface DashboardStats {
 export interface TabOption {
   value: string;  // 'all' 또는 process_code
   label: string;  // '전체' 또는 process_name
+  children?: TabOption[];  // 하위 탭 (절곡 → 재공품 세분화)
 }
 
 // 상태 라벨