From 61c1f104957d3c218a869a94b19ae05165d53bb4 Mon Sep 17 00:00:00 2001
From: SeongHyun Kim <kksh7842@gmail.com>
Date: Mon, 8 Dec 2025 15:34:19 +0900
Subject: [PATCH] =?UTF-8?q?feat(ModalRepeaterTable):=20=ED=95=AD=EB=AA=A9?=
 =?UTF-8?q?=20=EA=B2=80=EC=83=89=20=EB=AA=A8=EB=8B=AC=20=EC=BB=AC=EB=9F=BC?=
 =?UTF-8?q?=20=EB=9D=BC=EB=B2=A8=20=EC=84=A4=EC=A0=95=20=EA=B8=B0=EB=8A=A5?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- sourceColumnLabels 타입 정의 (Record<string, string>)

- ConfigPanel에 소스 컬럼별 표시 라벨 입력 UI 추가

- columnLabels 생성 시 sourceColumnLabels 우선 적용

- 컬럼 삭제 시 해당 라벨도 함께 삭제

- 빈 상태 안내 메시지 추가
---
 .../ModalRepeaterTableComponent.tsx           | 10 ++-
 .../ModalRepeaterTableConfigPanel.tsx         | 82 ++++++++++++++-----
 .../components/modal-repeater-table/types.ts  |  1 +
 3 files changed, 68 insertions(+), 25 deletions(-)

diff --git a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx
index 3a5b43dd..6e0432d1 100644
--- a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx
+++ b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx
@@ -185,6 +185,9 @@ export function ModalRepeaterTableComponent({
   const rawSourceColumns = componentConfig?.sourceColumns || propSourceColumns || [];
   const sourceColumns = rawSourceColumns.filter((col: string) => col && col.trim() !== "");
   
+  // 모달 컬럼 라벨 (컬럼명 -> 표시 라벨)
+  const sourceColumnLabels = componentConfig?.sourceColumnLabels || {};
+  
   const sourceSearchFields = componentConfig?.sourceSearchFields || propSourceSearchFields || [];
   const modalTitle = componentConfig?.modalTitle || propModalTitle || "항목 검색";
   const modalButtonText = componentConfig?.modalButtonText || propModalButtonText || "품목 검색";
@@ -546,11 +549,12 @@ export function ModalRepeaterTableComponent({
     handleChange(newData);
   };
 
-  // 컬럼명 -> 라벨명 매핑 생성
+  // 컬럼명 -> 라벨명 매핑 생성 (sourceColumnLabels 우선, 없으면 columns에서 가져옴)
   const columnLabels = columns.reduce((acc, col) => {
-    acc[col.field] = col.label;
+    // sourceColumnLabels에 정의된 라벨 우선 사용
+    acc[col.field] = sourceColumnLabels[col.field] || col.label;
     return acc;
-  }, {} as Record<string, string>);
+  }, { ...sourceColumnLabels } as Record<string, string>);
 
   return (
     <div className={cn("space-y-4", className)}>
diff --git a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel.tsx b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel.tsx
index 348ae045..507ab54d 100644
--- a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel.tsx
+++ b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel.tsx
@@ -520,7 +520,7 @@ export function ModalRepeaterTableConfigPanel({
         {/* 소스 컬럼 */}
         <div className="space-y-2">
           <div className="flex items-center justify-between">
-            <Label className="text-xs sm:text-sm">소스 컬럼</Label>
+            <Label className="text-xs sm:text-sm">소스 컬럼 (항목 검색 모달)</Label>
             <Button
               size="sm"
               variant="outline"
@@ -533,37 +533,75 @@ export function ModalRepeaterTableConfigPanel({
             </Button>
           </div>
           <p className="text-xs text-muted-foreground">
-            모달 테이블에 표시할 컬럼들
+            모달 테이블에 표시할 컬럼과 헤더 라벨을 설정합니다
           </p>
-          <div className="space-y-2">
+          <div className="space-y-3">
             {(localConfig.sourceColumns || []).map((column, index) => (
-              <div key={index} className="flex items-center gap-2">
-                <Select
-                  value={column}
-                  onValueChange={(value) => updateSourceColumn(index, value)}
-                  disabled={!localConfig.sourceTable || isLoadingColumns}
-                >
-                  <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm flex-1">
-                    <SelectValue placeholder="컬럼 선택" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {tableColumns.map((col) => (
-                      <SelectItem key={col.columnName} value={col.columnName}>
-                        {col.displayName || col.columnName}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+              <div key={index} className="flex items-start gap-2 p-3 border rounded-md bg-background">
+                <div className="flex-1 space-y-2">
+                  {/* 컬럼 선택 */}
+                  <div className="space-y-1">
+                    <Label className="text-[10px] text-muted-foreground">컬럼</Label>
+                    <Select
+                      value={column}
+                      onValueChange={(value) => updateSourceColumn(index, value)}
+                      disabled={!localConfig.sourceTable || isLoadingColumns}
+                    >
+                      <SelectTrigger className="h-8 text-xs">
+                        <SelectValue placeholder="컬럼 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {tableColumns.map((col) => (
+                          <SelectItem key={col.columnName} value={col.columnName}>
+                            {col.displayName || col.columnName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  {/* 라벨 입력 */}
+                  <div className="space-y-1">
+                    <Label className="text-[10px] text-muted-foreground">표시 라벨</Label>
+                    <Input
+                      value={localConfig.sourceColumnLabels?.[column] || ""}
+                      onChange={(e) => {
+                        const newLabels = { ...(localConfig.sourceColumnLabels || {}) };
+                        if (e.target.value) {
+                          newLabels[column] = e.target.value;
+                        } else {
+                          delete newLabels[column];
+                        }
+                        updateConfig({ sourceColumnLabels: newLabels });
+                      }}
+                      placeholder={tableColumns.find(c => c.columnName === column)?.displayName || column || "라벨 입력"}
+                      className="h-8 text-xs"
+                      disabled={!column}
+                    />
+                  </div>
+                </div>
                 <Button
                   size="sm"
                   variant="ghost"
-                  onClick={() => removeSourceColumn(index)}
-                  className="h-8 w-8 p-0"
+                  onClick={() => {
+                    // 컬럼 삭제 시 해당 라벨도 삭제
+                    const newLabels = { ...(localConfig.sourceColumnLabels || {}) };
+                    delete newLabels[column];
+                    updateConfig({ sourceColumnLabels: newLabels });
+                    removeSourceColumn(index);
+                  }}
+                  className="h-8 w-8 p-0 mt-5"
                 >
                   <X className="h-4 w-4" />
                 </Button>
               </div>
             ))}
+            {(localConfig.sourceColumns || []).length === 0 && (
+              <div className="text-center py-4 border-2 border-dashed rounded-lg">
+                <p className="text-xs text-muted-foreground">
+                  "추가" 버튼을 클릭하여 모달에 표시할 컬럼을 추가하세요
+                </p>
+              </div>
+            )}
           </div>
         </div>
 
diff --git a/frontend/lib/registry/components/modal-repeater-table/types.ts b/frontend/lib/registry/components/modal-repeater-table/types.ts
index 180830ee..c0cac4a9 100644
--- a/frontend/lib/registry/components/modal-repeater-table/types.ts
+++ b/frontend/lib/registry/components/modal-repeater-table/types.ts
@@ -7,6 +7,7 @@ export interface ModalRepeaterTableProps {
   // 소스 데이터 (모달에서 가져올 데이터)
   sourceTable: string; // 검색할 테이블 (예: "item_info")
   sourceColumns: string[]; // 모달에 표시할 컬럼들
+  sourceColumnLabels?: Record<string, string>; // 모달 컬럼 라벨 (컬럼명 -> 표시 라벨)
   sourceSearchFields?: string[]; // 검색 가능한 필드들
 
   // 🆕 저장 대상 테이블 설정