From b844953fe0cd41e07fd12c58da08bfd03ed1f9de Mon Sep 17 00:00:00 2001
From: SeongHyun Kim <kksh7842@gmail.com>
Date: Tue, 18 Nov 2025 16:19:56 +0900
Subject: [PATCH 1/5] =?UTF-8?q?fix:=20ItemSelectionModal=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=EB=A1=9C=EC=A7=81=20=EB=B0=8F=20=EB=94=94=EB=B2=84?=
 =?UTF-8?q?=EA=B9=85=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- uniqueField 값이 undefined일 때 객체 참조 비교로 폴백
- 멀티셀렉트 모드에서 선택/해제 로직 안정화
- 체크박스 클릭 이벤트 전파 개선
- 유효한 컬럼만 렌더링하도록 필터링 추가
- 디버깅을 위한 콘솔 로그 추가
- 선택된 항목의 uniqueField 값 표시
---
 .../ItemSelectionModal.tsx                    | 154 ++++++++++++++----
 1 file changed, 126 insertions(+), 28 deletions(-)

diff --git a/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx b/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx
index d8c8c8d9..6463f1b1 100644
--- a/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx
+++ b/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx
@@ -42,6 +42,7 @@ export function ItemSelectionModal({
   // 모달 열릴 때 초기 검색
   useEffect(() => {
     if (open) {
+      console.log("🚪 모달 열림 - uniqueField:", uniqueField, "multiSelect:", multiSelect);
       search("", 1); // 빈 검색어로 전체 목록 조회
       setSelectedItems([]);
     } else {
@@ -56,26 +57,67 @@ export function ItemSelectionModal({
   };
 
   const handleToggleItem = (item: any) => {
+    const itemValue = uniqueField ? item[uniqueField] : undefined;
+    
+    console.log("🖱️ 행 클릭:", {
+      item,
+      uniqueField,
+      itemValue,
+      currentSelected: selectedItems.length,
+      selectedValues: uniqueField ? selectedItems.map(s => s[uniqueField]) : []
+    });
+    
     if (!multiSelect) {
       setSelectedItems([item]);
       return;
     }
 
-    const isSelected = selectedItems.some((selected) =>
-      uniqueField
-        ? selected[uniqueField] === item[uniqueField]
-        : selected === item
-    );
+    // uniqueField 값이 undefined인 경우 객체 참조로 비교
+    if (uniqueField && (itemValue === undefined || itemValue === null)) {
+      console.warn(`⚠️ uniqueField "${uniqueField}"의 값이 undefined입니다. 객체 참조로 비교합니다.`);
+      const itemIsSelected = selectedItems.includes(item);
+      
+      console.log("📊 선택 상태 (객체 참조):", itemIsSelected);
+      
+      if (itemIsSelected) {
+        const newSelected = selectedItems.filter((selected) => selected !== item);
+        console.log("➖ 제거 후:", newSelected.length);
+        setSelectedItems(newSelected);
+      } else {
+        console.log("➕ 추가");
+        setSelectedItems([...selectedItems, item]);
+      }
+      return;
+    }
 
-    if (isSelected) {
-      setSelectedItems(
-        selectedItems.filter((selected) =>
-          uniqueField
-            ? selected[uniqueField] !== item[uniqueField]
-            : selected !== item
-        )
-      );
+    const itemIsSelected = selectedItems.some((selected) => {
+      if (!uniqueField) {
+        return selected === item;
+      }
+      const selectedValue = selected[uniqueField];
+      if (selectedValue === undefined || selectedValue === null) {
+        return false;
+      }
+      return selectedValue === itemValue;
+    });
+
+    console.log("📊 선택 상태:", itemIsSelected);
+
+    if (itemIsSelected) {
+      const newSelected = selectedItems.filter((selected) => {
+        if (!uniqueField) {
+          return selected !== item;
+        }
+        const selectedValue = selected[uniqueField];
+        if (selectedValue === undefined || selectedValue === null) {
+          return true;
+        }
+        return selectedValue !== itemValue;
+      });
+      console.log("➖ 제거 후:", newSelected.length);
+      setSelectedItems(newSelected);
     } else {
+      console.log("➕ 추가");
       setSelectedItems([...selectedItems, item]);
     }
   };
@@ -98,13 +140,46 @@ export function ItemSelectionModal({
 
   // 선택된 항목인지 확인
   const isSelected = (item: any): boolean => {
-    return selectedItems.some((selected) =>
-      uniqueField
-        ? selected[uniqueField] === item[uniqueField]
-        : selected === item
-    );
+    if (!uniqueField) {
+      return selectedItems.includes(item);
+    }
+    
+    const itemValue = item[uniqueField];
+    
+    // uniqueField 값이 undefined인 경우 객체 참조로 비교
+    if (itemValue === undefined || itemValue === null) {
+      console.warn(`⚠️ uniqueField "${uniqueField}"의 값이 undefined입니다. 객체 참조로 비교합니다.`);
+      return selectedItems.includes(item);
+    }
+    
+    const result = selectedItems.some((selected) => {
+      const selectedValue = selected[uniqueField];
+      
+      // selectedValue도 undefined면 안전하게 처리
+      if (selectedValue === undefined || selectedValue === null) {
+        return false;
+      }
+      
+      const isMatch = selectedValue === itemValue;
+      
+      if (isMatch) {
+        console.log("✅ 매칭 발견:", { 
+          selectedValue, 
+          itemValue,
+          uniqueField 
+        });
+      }
+      
+      return isMatch;
+    });
+    
+    return result;
   };
 
+  // 유효한 컬럼만 필터링
+  const validColumns = sourceColumns.filter(col => col != null && col !== "");
+  const totalColumns = validColumns.length + (multiSelect ? 1 : 0);
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-[95vw] sm:max-w-[900px] max-h-[90vh] overflow-y-auto">
@@ -147,6 +222,11 @@ export function ItemSelectionModal({
         {selectedItems.length > 0 && (
           <div className="text-sm text-primary">
             {selectedItems.length}개 항목 선택됨
+            {uniqueField && (
+              <span className="ml-2 text-xs text-muted-foreground">
+                ({selectedItems.map(item => item[uniqueField]).join(", ")})
+              </span>
+            )}
           </div>
         )}
 
@@ -168,7 +248,7 @@ export function ItemSelectionModal({
                       선택
                     </th>
                   )}
-                  {sourceColumns.map((col) => (
+                  {validColumns.map((col) => (
                     <th
                       key={col}
                       className="px-4 py-2 text-left font-medium text-muted-foreground"
@@ -182,7 +262,7 @@ export function ItemSelectionModal({
                 {loading && filteredResults.length === 0 ? (
                   <tr>
                     <td
-                      colSpan={sourceColumns.length + (multiSelect ? 1 : 0)}
+                      colSpan={totalColumns}
                       className="px-4 py-8 text-center"
                     >
                       <Loader2 className="h-6 w-6 animate-spin mx-auto" />
@@ -192,7 +272,7 @@ export function ItemSelectionModal({
                 ) : filteredResults.length === 0 ? (
                   <tr>
                     <td
-                      colSpan={sourceColumns.length + (multiSelect ? 1 : 0)}
+                      colSpan={totalColumns}
                       className="px-4 py-8 text-center text-muted-foreground"
                     >
                       {results.length > 0
@@ -203,10 +283,22 @@ export function ItemSelectionModal({
                 ) : (
                   filteredResults.map((item, index) => {
                     const selected = isSelected(item);
+                    const uniqueFieldValue = uniqueField ? item[uniqueField] : undefined;
+                    const itemKey = (uniqueFieldValue !== undefined && uniqueFieldValue !== null) 
+                      ? uniqueFieldValue 
+                      : `item-${index}`;
+                    
+                    console.log("🔍 행 렌더링:", {
+                      index,
+                      itemKey,
+                      selected,
+                      uniqueFieldValue,
+                      selectedCount: selectedItems.length
+                    });
 
                     return (
                       <tr
-                        key={index}
+                        key={itemKey}
                         className={`border-t transition-colors ${
                           selected
                             ? "bg-primary/10"
@@ -215,14 +307,20 @@ export function ItemSelectionModal({
                         onClick={() => handleToggleItem(item)}
                       >
                         {multiSelect && (
-                          <td className="px-4 py-2">
-                            <Checkbox
-                              checked={selected}
-                              onCheckedChange={() => handleToggleItem(item)}
-                            />
+                          <td 
+                            className="px-4 py-2"
+                            onClick={(e) => {
+                              // 체크박스 영역 클릭을 행 클릭으로 전파
+                              e.stopPropagation();
+                              handleToggleItem(item);
+                            }}
+                          >
+                            <div className="pointer-events-none">
+                              <Checkbox checked={selected} readOnly />
+                            </div>
                           </td>
                         )}
-                        {sourceColumns.map((col) => (
+                        {validColumns.map((col) => (
                           <td key={col} className="px-4 py-2">
                             {item[col] || "-"}
                           </td>

From 0bedd8bc0b97a0ecc704597b48f9560d2a5f0c95 Mon Sep 17 00:00:00 2001
From: SeongHyun Kim <kksh7842@gmail.com>
Date: Tue, 18 Nov 2025 18:40:25 +0900
Subject: [PATCH 2/5] =?UTF-8?q?fix:=20Dialog=20=EB=AA=A8=EB=8B=AC=20?=
 =?UTF-8?q?=EB=82=B4=EB=B6=80=20input=20=ED=95=84=EB=93=9C=20=ED=85=8D?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=9E=85=EB=A0=A5=20=EB=B6=88=EA=B0=80=20?=
 =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ResizableDialog 콘텐츠 영역에 pointer-events 및 z-index 설정 추가
- TextInputComponent를 제어 컴포넌트에서 비제어 컴포넌트로 변경 (value → defaultValue)
- ItemSelectionModal 및 TextInputComponent 디버그 로그 제거

수정 파일:
- frontend/components/ui/resizable-dialog.tsx
- frontend/lib/registry/components/text-input/TextInputComponent.tsx
- frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx
---
 .../order/OrderRegistrationModal.tsx          | 46 +++++++++++--------
 frontend/components/ui/resizable-dialog.tsx   | 12 ++++-
 .../ItemSelectionModal.tsx                    |  9 ----
 .../text-input/TextInputComponent.tsx         |  9 +---
 4 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/frontend/components/order/OrderRegistrationModal.tsx b/frontend/components/order/OrderRegistrationModal.tsx
index adfee1b2..bd780038 100644
--- a/frontend/components/order/OrderRegistrationModal.tsx
+++ b/frontend/components/order/OrderRegistrationModal.tsx
@@ -11,7 +11,6 @@ import {
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
 import {
   Select,
   SelectContent,
@@ -19,7 +18,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Textarea } from "@/components/ui/textarea";
 import { OrderCustomerSearch } from "./OrderCustomerSearch";
 import { OrderItemRepeaterTable } from "./OrderItemRepeaterTable";
 import { toast } from "sonner";
@@ -260,14 +258,15 @@ export function OrderRegistrationModal({
                   <Label htmlFor="contactPerson" className="text-xs sm:text-sm">
                     담당자
                   </Label>
-                  <Input
+                  <input
+                    type="text"
                     id="contactPerson"
                     placeholder="담당자"
                     value={formData.contactPerson}
                     onChange={(e) =>
                       setFormData({ ...formData, contactPerson: e.target.value })
                     }
-                    className="h-8 text-xs sm:h-10 sm:text-sm"
+                    className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
                   />
                 </div>
 
@@ -276,14 +275,15 @@ export function OrderRegistrationModal({
                   <Label htmlFor="deliveryDestination" className="text-xs sm:text-sm">
                     납품처
                   </Label>
-                  <Input
+                  <input
+                    type="text"
                     id="deliveryDestination"
                     placeholder="납품처"
                     value={formData.deliveryDestination}
                     onChange={(e) =>
                       setFormData({ ...formData, deliveryDestination: e.target.value })
                     }
-                    className="h-8 text-xs sm:h-10 sm:text-sm"
+                    className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
                   />
                 </div>
 
@@ -292,14 +292,15 @@ export function OrderRegistrationModal({
                   <Label htmlFor="deliveryAddress" className="text-xs sm:text-sm">
                     납품장소
                   </Label>
-                  <Input
+                  <input
+                    type="text"
                     id="deliveryAddress"
                     placeholder="납품장소"
                     value={formData.deliveryAddress}
                     onChange={(e) =>
                       setFormData({ ...formData, deliveryAddress: e.target.value })
                     }
-                    className="h-8 text-xs sm:h-10 sm:text-sm"
+                    className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
                   />
                 </div>
               </div>
@@ -310,9 +311,10 @@ export function OrderRegistrationModal({
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div className="space-y-2">
                 <Label className="text-xs sm:text-sm">견대 번호 *</Label>
-                <Input
+                <input
+                  type="text"
                   placeholder="견대 번호를 입력하세요"
-                  className="h-8 text-xs sm:h-10 sm:text-sm"
+                  className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
                 />
               </div>
             </div>
@@ -322,9 +324,10 @@ export function OrderRegistrationModal({
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div className="space-y-2">
                 <Label className="text-xs sm:text-sm">단가 방식 설정</Label>
-                <Input
+                <input
+                  type="text"
                   placeholder="단가 정보 입력"
-                  className="h-8 text-xs sm:h-10 sm:text-sm"
+                  className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
                 />
               </div>
             </div>
@@ -436,14 +439,15 @@ export function OrderRegistrationModal({
                   <Label htmlFor="portOfLoading" className="text-xs sm:text-sm">
                     선적항
                   </Label>
-                  <Input
+                  <input
+                    type="text"
                     id="portOfLoading"
                     placeholder="선적항"
                     value={formData.portOfLoading}
                     onChange={(e) =>
                       setFormData({ ...formData, portOfLoading: e.target.value })
                     }
-                    className="h-8 text-xs sm:h-10 sm:text-sm"
+                    className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
                   />
                 </div>
 
@@ -452,14 +456,15 @@ export function OrderRegistrationModal({
                   <Label htmlFor="portOfDischarge" className="text-xs sm:text-sm">
                     도착항
                   </Label>
-                  <Input
+                  <input
+                    type="text"
                     id="portOfDischarge"
                     placeholder="도착항"
                     value={formData.portOfDischarge}
                     onChange={(e) =>
                       setFormData({ ...formData, portOfDischarge: e.target.value })
                     }
-                    className="h-8 text-xs sm:h-10 sm:text-sm"
+                    className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
                   />
                 </div>
 
@@ -468,14 +473,15 @@ export function OrderRegistrationModal({
                   <Label htmlFor="hsCode" className="text-xs sm:text-sm">
                     HS Code
                   </Label>
-                  <Input
+                  <input
+                    type="text"
                     id="hsCode"
                     placeholder="HS Code"
                     value={formData.hsCode}
                     onChange={(e) =>
                       setFormData({ ...formData, hsCode: e.target.value })
                     }
-                    className="h-8 text-xs sm:h-10 sm:text-sm"
+                    className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-2 text-xs ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:h-10 sm:text-sm"
                   />
                 </div>
               </div>
@@ -487,14 +493,14 @@ export function OrderRegistrationModal({
             <Label htmlFor="memo" className="text-xs sm:text-sm">
               메모
             </Label>
-            <Textarea
+            <textarea
               id="memo"
               placeholder="메모를 입력하세요"
               value={formData.memo}
               onChange={(e) =>
                 setFormData({ ...formData, memo: e.target.value })
               }
-              className="text-xs sm:text-sm"
+              className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
               rows={3}
             />
           </div>
diff --git a/frontend/components/ui/resizable-dialog.tsx b/frontend/components/ui/resizable-dialog.tsx
index 9e953784..6efcdf19 100644
--- a/frontend/components/ui/resizable-dialog.tsx
+++ b/frontend/components/ui/resizable-dialog.tsx
@@ -377,8 +377,8 @@ const ResizableDialogContent = React.forwardRef<
         >
           <div 
             ref={contentRef} 
-            className="h-full w-full"
-            style={{ display: 'block', overflow: 'hidden' }}
+            className="h-full w-full relative"
+            style={{ display: 'block', overflow: 'hidden', pointerEvents: 'auto', zIndex: 1 }}
           >
             {children}
           </div>
@@ -387,41 +387,49 @@ const ResizableDialogContent = React.forwardRef<
           {/* 오른쪽 */}
           <div
             className="absolute right-0 top-0 h-full w-2 cursor-ew-resize hover:bg-primary/20 transition-colors"
+            style={{ pointerEvents: 'auto', zIndex: 10 }}
             onMouseDown={startResize("e")}
           />
           {/* 아래 */}
           <div
             className="absolute bottom-0 left-0 w-full h-2 cursor-ns-resize hover:bg-primary/20 transition-colors"
+            style={{ pointerEvents: 'auto', zIndex: 10 }}
             onMouseDown={startResize("s")}
           />
           {/* 오른쪽 아래 */}
           <div
             className="absolute right-0 bottom-0 w-4 h-4 cursor-nwse-resize hover:bg-primary/30 transition-colors"
+            style={{ pointerEvents: 'auto', zIndex: 10 }}
             onMouseDown={startResize("se")}
           />
           {/* 왼쪽 */}
           <div
             className="absolute left-0 top-0 h-full w-2 cursor-ew-resize hover:bg-primary/20 transition-colors"
+            style={{ pointerEvents: 'auto', zIndex: 10 }}
             onMouseDown={startResize("w")}
           />
           {/* 위 */}
           <div
             className="absolute top-0 left-0 w-full h-2 cursor-ns-resize hover:bg-primary/20 transition-colors"
+            style={{ pointerEvents: 'auto', zIndex: 10 }}
             onMouseDown={startResize("n")}
           />
           {/* 왼쪽 아래 */}
           <div
             className="absolute left-0 bottom-0 w-4 h-4 cursor-nesw-resize hover:bg-primary/30 transition-colors"
+            style={{ pointerEvents: 'auto', zIndex: 10 }}
             onMouseDown={startResize("sw")}
           />
           {/* 오른쪽 위 */}
           <div
             className="absolute right-0 top-0 w-4 h-4 cursor-nesw-resize hover:bg-primary/30 transition-colors"
+            style={{ pointerEvents: 'auto', zIndex: 10 }}
             onMouseDown={startResize("ne")}
           />
           {/* 왼쪽 위 */}
           <div
             className="absolute left-0 top-0 w-4 h-4 cursor-nwse-resize hover:bg-primary/30 transition-colors"
+            style={{ pointerEvents: 'auto', zIndex: 10 }}
             onMouseDown={startResize("nw")}
           />
 
diff --git a/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx b/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx
index 6463f1b1..4951aef6 100644
--- a/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx
+++ b/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx
@@ -148,7 +148,6 @@ export function ItemSelectionModal({
     
     // uniqueField 값이 undefined인 경우 객체 참조로 비교
     if (itemValue === undefined || itemValue === null) {
-      console.warn(`⚠️ uniqueField "${uniqueField}"의 값이 undefined입니다. 객체 참조로 비교합니다.`);
       return selectedItems.includes(item);
     }
     
@@ -287,14 +286,6 @@ export function ItemSelectionModal({
                     const itemKey = (uniqueFieldValue !== undefined && uniqueFieldValue !== null) 
                       ? uniqueFieldValue 
                       : `item-${index}`;
-                    
-                    console.log("🔍 행 렌더링:", {
-                      index,
-                      itemKey,
-                      selected,
-                      uniqueFieldValue,
-                      selectedCount: selectedItems.length
-                    });
 
                     return (
                       <tr
diff --git a/frontend/lib/registry/components/text-input/TextInputComponent.tsx b/frontend/lib/registry/components/text-input/TextInputComponent.tsx
index 2eb565e0..ffbd7cac 100644
--- a/frontend/lib/registry/components/text-input/TextInputComponent.tsx
+++ b/frontend/lib/registry/components/text-input/TextInputComponent.tsx
@@ -686,7 +686,7 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
 
       <input
         type={inputType}
-        value={(() => {
+        defaultValue={(() => {
           let displayValue = "";
 
           if (isInteractive && formData && component.columnName) {
@@ -745,13 +745,6 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
           // isInteractive 모드에서는 formData 업데이트
           if (isInteractive && onFormDataChange && component.columnName) {
             onFormDataChange(component.columnName, newValue);
-          } else {
-            console.log("❌ TextInputComponent onFormDataChange 조건 미충족:", {
-              isInteractive,
-              hasOnFormDataChange: !!onFormDataChange,
-              hasColumnName: !!component.columnName,
-              columnName: component.columnName,
-            });
           }
 
           // props.onChange는 DynamicComponentRenderer의 handleChange

From bfc86fbcfa5025ff2570450ffd209a89978b4669 Mon Sep 17 00:00:00 2001
From: SeongHyun Kim <kksh7842@gmail.com>
Date: Wed, 19 Nov 2025 09:12:17 +0900
Subject: [PATCH 3/5] =?UTF-8?q?fix:=20ResizableDialog=20=EB=8B=AB=EA=B8=B0?=
 =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EB=B6=88=EA=B0=80?=
 =?UTF-8?q?=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/ui/resizable-dialog.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/components/ui/resizable-dialog.tsx b/frontend/components/ui/resizable-dialog.tsx
index 6efcdf19..bf50a1a1 100644
--- a/frontend/components/ui/resizable-dialog.tsx
+++ b/frontend/components/ui/resizable-dialog.tsx
@@ -433,7 +433,10 @@ const ResizableDialogContent = React.forwardRef<
             onMouseDown={startResize("nw")}
           />
 
-          <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <DialogPrimitive.Close 
+            className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+            style={{ zIndex: 20 }}
+          >
             <X className="h-4 w-4" />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>

From 8eccdd0b4c4d4e12b322039de9dac955a3a2b4fd Mon Sep 17 00:00:00 2001
From: SeongHyun Kim <kksh7842@gmail.com>
Date: Wed, 19 Nov 2025 11:48:00 +0900
Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=EC=88=98=EC=A3=BC=EB=93=B1=EB=A1=9D?=
 =?UTF-8?q?=20=ED=95=AD=EB=AA=A9=EC=B6=94=EA=B0=80=20=EC=8B=9C=20=EC=A0=95?=
 =?UTF-8?q?=EB=B3=B4=EC=B6=9C=EB=A0=A5=20=EA=B0=80=EB=8A=A5=ED=95=98?=
 =?UTF-8?q?=EA=B2=8C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

문제:
- 조건부 컨테이너 내부의 modal-repeater-table 컴포넌트가 데이터 업데이트 불가
- ConditionalSectionViewer가 RealtimePreview에 formData/onFormDataChange 미전달

해결:
- ConditionalSectionViewer.tsx: RealtimePreview에 formData, onFormDataChange props 추가
- DynamicComponentRenderer.tsx: 디버깅 로그 정리
- ScreenModal.tsx: 디버깅 로그 정리

영향:
- 수주 등록 화면 품목 추가 기능 정상 작동
- 조건부 컨테이너 내부 모든 폼 컴포넌트 데이터 바인딩 정상화

Refs: #수주관리 #modal-repeater-table #ConditionalContainer
---
 frontend/MODAL_REPEATER_TABLE_DEBUG.md        | 185 ++++++++++++++++++
 frontend/components/common/ScreenModal.tsx    |  14 +-
 .../lib/registry/DynamicComponentRenderer.tsx |  18 +-
 .../ConditionalSectionViewer.tsx              |   2 +
 .../ItemSelectionModal.tsx                    |  21 +-
 .../ModalRepeaterTableComponent.tsx           |  83 +++++++-
 .../ModalRepeaterTableRenderer.tsx            |  23 ++-
 .../modal-repeater-table/RepeaterTable.tsx    |   7 +-
 8 files changed, 312 insertions(+), 41 deletions(-)
 create mode 100644 frontend/MODAL_REPEATER_TABLE_DEBUG.md

diff --git a/frontend/MODAL_REPEATER_TABLE_DEBUG.md b/frontend/MODAL_REPEATER_TABLE_DEBUG.md
new file mode 100644
index 00000000..0f0f66ce
--- /dev/null
+++ b/frontend/MODAL_REPEATER_TABLE_DEBUG.md
@@ -0,0 +1,185 @@
+# Modal Repeater Table 디버깅 가이드
+
+## 📊 콘솔 로그 확인 순서
+
+새로고침 후 수주 등록 모달을 열고, 아래 순서대로 콘솔 로그를 확인하세요:
+
+### 1️⃣ 컴포넌트 마운트 (초기 로드)
+
+```
+🎬 ModalRepeaterTableComponent 마운트: {
+  config: {...},
+  propColumns: [...],
+  columns: [...],
+  columnsLength: N,  // ⚠️ 0이면 문제!
+  value: [],
+  valueLength: 0,
+  sourceTable: "item_info",
+  sourceColumns: [...],
+  uniqueField: "item_number"
+}
+```
+
+**✅ 정상:**
+- `columnsLength: 8` (품번, 품명, 규격, 재질, 수량, 단가, 금액, 납기일)
+- `columns` 배열에 각 컬럼의 `field`, `label`, `type` 정보가 있어야 함
+
+**❌ 문제:**
+- `columnsLength: 0` → **이것이 문제의 원인!**
+- 빈 배열이면 테이블에 컬럼이 표시되지 않음
+
+---
+
+### 2️⃣ 항목 검색 모달 열림
+
+```
+🚪 모달 열림 - uniqueField: "item_number", multiSelect: true
+```
+
+---
+
+### 3️⃣ 품목 체크 (선택)
+
+```
+🖱️ 행 클릭: {
+  item: { item_number: "SLI-2025-0003", item_name: "실리콘 고무 시트", ... },
+  uniqueField: "item_number",
+  itemValue: "SLI-2025-0003",
+  currentSelected: 0,
+  selectedValues: []
+}
+
+✅ 매칭 발견: { selectedValue: "SLI-2025-0003", itemValue: "SLI-2025-0003", uniqueField: "item_number" }
+```
+
+---
+
+### 4️⃣ 추가 버튼 클릭
+
+```
+✅ ItemSelectionModal 추가 버튼 클릭: {
+  selectedCount: 1,
+  selectedItems: [{ item_number: "SLI-2025-0003", item_name: "실리콘 고무 시트", ... }],
+  uniqueField: "item_number"
+}
+```
+
+---
+
+### 5️⃣ 데이터 추가 처리
+
+```
+➕ handleAddItems 호출: {
+  selectedItems: [{ item_number: "SLI-2025-0003", ... }],
+  currentValue: [],
+  columns: [...],  // ⚠️ 여기도 확인!
+  calculationRules: [...]
+}
+
+📝 기본값 적용 후: [{ item_number: "SLI-2025-0003", quantity: 1, ... }]
+
+🔢 계산 필드 적용 후: [{ item_number: "SLI-2025-0003", quantity: 1, selling_price: 1000, amount: 1000, ... }]
+
+✅ 최종 데이터 (onChange 호출): [{ item_number: "SLI-2025-0003", quantity: 1, selling_price: 1000, amount: 1000, ... }]
+```
+
+---
+
+### 6️⃣ Renderer 업데이트
+
+```
+🔄 ModalRepeaterTableRenderer onChange 호출: {
+  previousValue: [],
+  newValue: [{ item_number: "SLI-2025-0003", ... }]
+}
+```
+
+---
+
+### 7️⃣ value 변경 감지
+
+```
+📦 ModalRepeaterTableComponent value 변경: {
+  valueLength: 1,
+  value: [{ item_number: "SLI-2025-0003", ... }],
+  columns: [...]  // ⚠️ 여기도 확인!
+}
+```
+
+---
+
+### 8️⃣ 테이블 리렌더링
+
+```
+📊 RepeaterTable 데이터 업데이트: {
+  rowCount: 1,
+  data: [{ item_number: "SLI-2025-0003", ... }],
+  columns: ["item_number", "item_name", "specification", "material", "quantity", "selling_price", "amount", "delivery_date"]
+}
+```
+
+---
+
+## 🔍 문제 진단
+
+### Case 1: columns가 비어있음 (columnsLength: 0)
+
+**원인:**
+- 화면관리 시스템에서 modal-repeater-table 컴포넌트의 `columns` 설정을 하지 않음
+- DB에 컬럼 설정이 저장되지 않음
+
+**해결:**
+1. 화면 관리 페이지로 이동
+2. 해당 화면 편집
+3. modal-repeater-table 컴포넌트 선택
+4. 우측 설정 패널에서 "컬럼 설정" 탭 열기
+5. 다음 컬럼들을 추가:
+   - 품번 (item_number, text, 편집불가)
+   - 품명 (item_name, text, 편집불가)
+   - 규격 (specification, text, 편집불가)
+   - 재질 (material, text, 편집불가)
+   - 수량 (quantity, number, 편집가능, 기본값: 1)
+   - 단가 (selling_price, number, 편집가능)
+   - 금액 (amount, number, 편집불가, 계산필드)
+   - 납기일 (delivery_date, date, 편집가능)
+6. 저장
+
+---
+
+### Case 2: 로그가 8번까지 나오는데 화면에 안 보임
+
+**원인:**
+- React 리렌더링 문제
+- 화면관리 시스템의 상태 동기화 문제
+
+**해결:**
+1. 브라우저 개발자 도구 → Elements 탭
+2. `#component-comp_5jdmuzai .border.rounded-md table tbody` 찾기
+3. 실제 DOM에 `<tr>` 요소가 추가되었는지 확인
+4. 추가되었다면 CSS 문제 (display: none 등)
+5. 추가 안 되었다면 컴포넌트 렌더링 문제
+
+---
+
+### Case 3: 로그가 5번까지만 나오고 멈춤
+
+**원인:**
+- `onChange` 콜백이 제대로 전달되지 않음
+- Renderer의 `updateComponent`가 작동하지 않음
+
+**해결:**
+- 이미 수정한 `ModalRepeaterTableRenderer.tsx` 코드 확인
+- `handleChange` 함수가 호출되는지 확인
+
+---
+
+## 📝 다음 단계
+
+위 로그를 **모두** 복사해서 공유해주세요. 특히:
+
+1. **🎬 마운트 로그의 `columnsLength` 값**
+2. **로그가 어디까지 출력되는지**
+3. **Elements 탭에서 `tbody` 내부 HTML 구조**
+
+이 정보로 정확한 문제를 진단할 수 있습니다!
+
diff --git a/frontend/components/common/ScreenModal.tsx b/frontend/components/common/ScreenModal.tsx
index 087444b7..e8c85c37 100644
--- a/frontend/components/common/ScreenModal.tsx
+++ b/frontend/components/common/ScreenModal.tsx
@@ -436,16 +436,10 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
                       allComponents={screenData.components}
                       formData={formData}
                       onFormDataChange={(fieldName, value) => {
-                        // console.log(`🎯 ScreenModal onFormDataChange 호출: ${fieldName} = "${value}"`);
-                        // console.log("📋 현재 formData:", formData);
-                        setFormData((prev) => {
-                          const newFormData = {
-                            ...prev,
-                            [fieldName]: value,
-                          };
-                          // console.log("📝 ScreenModal 업데이트된 formData:", newFormData);
-                          return newFormData;
-                        });
+                        setFormData((prev) => ({
+                          ...prev,
+                          [fieldName]: value,
+                        }));
                       }}
                       onRefresh={() => {
                         // 부모 화면의 테이블 새로고침 이벤트 발송
diff --git a/frontend/lib/registry/DynamicComponentRenderer.tsx b/frontend/lib/registry/DynamicComponentRenderer.tsx
index 865a361f..4c95ceb8 100644
--- a/frontend/lib/registry/DynamicComponentRenderer.tsx
+++ b/frontend/lib/registry/DynamicComponentRenderer.tsx
@@ -262,7 +262,14 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
 
         // 컴포넌트의 columnName에 해당하는 formData 값 추출
         const fieldName = (component as any).columnName || component.id;
-        const currentValue = formData?.[fieldName] || "";
+        
+        // modal-repeater-table은 배열 데이터를 다루므로 빈 배열로 초기화
+        let currentValue;
+        if (componentType === "modal-repeater-table") {
+          currentValue = formData?.[fieldName] || [];
+        } else {
+          currentValue = formData?.[fieldName] || "";
+        }
 
         // onChange 핸들러 - 컴포넌트 타입에 따라 다르게 처리
         const handleChange = (value: any) => {
@@ -274,13 +281,14 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           }
 
           if (onFormDataChange) {
+            // modal-repeater-table은 배열 데이터를 다룸
+            if (componentType === "modal-repeater-table") {
+              onFormDataChange(fieldName, actualValue);
+            }
             // RepeaterInput 같은 복합 컴포넌트는 전체 데이터를 전달
-            // 단순 input 컴포넌트는 (fieldName, value) 형태로 전달받음
-            if (componentType === "repeater-field-group" || componentType === "repeater") {
-              // fieldName과 함께 전달
+            else if (componentType === "repeater-field-group" || componentType === "repeater") {
               onFormDataChange(fieldName, actualValue);
             } else {
-              // 이미 fieldName이 포함된 경우는 그대로 전달
               onFormDataChange(fieldName, actualValue);
             }
           }
diff --git a/frontend/lib/registry/components/conditional-container/ConditionalSectionViewer.tsx b/frontend/lib/registry/components/conditional-container/ConditionalSectionViewer.tsx
index 229f52f2..db5de1e9 100644
--- a/frontend/lib/registry/components/conditional-container/ConditionalSectionViewer.tsx
+++ b/frontend/lib/registry/components/conditional-container/ConditionalSectionViewer.tsx
@@ -142,6 +142,8 @@ export function ConditionalSectionViewer({
                     onClick={() => {}}
                     screenId={screenInfo?.id}
                     tableName={screenInfo?.tableName}
+                    formData={formData}
+                    onFormDataChange={onFormDataChange}
                   />
                 ))}
               </div>
diff --git a/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx b/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx
index 4951aef6..60da98f8 100644
--- a/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx
+++ b/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx
@@ -42,7 +42,6 @@ export function ItemSelectionModal({
   // 모달 열릴 때 초기 검색
   useEffect(() => {
     if (open) {
-      console.log("🚪 모달 열림 - uniqueField:", uniqueField, "multiSelect:", multiSelect);
       search("", 1); // 빈 검색어로 전체 목록 조회
       setSelectedItems([]);
     } else {
@@ -59,14 +58,6 @@ export function ItemSelectionModal({
   const handleToggleItem = (item: any) => {
     const itemValue = uniqueField ? item[uniqueField] : undefined;
     
-    console.log("🖱️ 행 클릭:", {
-      item,
-      uniqueField,
-      itemValue,
-      currentSelected: selectedItems.length,
-      selectedValues: uniqueField ? selectedItems.map(s => s[uniqueField]) : []
-    });
-    
     if (!multiSelect) {
       setSelectedItems([item]);
       return;
@@ -77,14 +68,10 @@ export function ItemSelectionModal({
       console.warn(`⚠️ uniqueField "${uniqueField}"의 값이 undefined입니다. 객체 참조로 비교합니다.`);
       const itemIsSelected = selectedItems.includes(item);
       
-      console.log("📊 선택 상태 (객체 참조):", itemIsSelected);
-      
       if (itemIsSelected) {
         const newSelected = selectedItems.filter((selected) => selected !== item);
-        console.log("➖ 제거 후:", newSelected.length);
         setSelectedItems(newSelected);
       } else {
-        console.log("➕ 추가");
         setSelectedItems([...selectedItems, item]);
       }
       return;
@@ -101,8 +88,6 @@ export function ItemSelectionModal({
       return selectedValue === itemValue;
     });
 
-    console.log("📊 선택 상태:", itemIsSelected);
-
     if (itemIsSelected) {
       const newSelected = selectedItems.filter((selected) => {
         if (!uniqueField) {
@@ -114,15 +99,15 @@ export function ItemSelectionModal({
         }
         return selectedValue !== itemValue;
       });
-      console.log("➖ 제거 후:", newSelected.length);
       setSelectedItems(newSelected);
     } else {
-      console.log("➕ 추가");
       setSelectedItems([...selectedItems, item]);
     }
   };
 
   const handleConfirm = () => {
+    console.log("✅ ItemSelectionModal 추가:", selectedItems.length, "개 항목");
+
     onSelect(selectedItems);
     onOpenChange(false);
   };
@@ -307,7 +292,7 @@ export function ItemSelectionModal({
                             }}
                           >
                             <div className="pointer-events-none">
-                              <Checkbox checked={selected} readOnly />
+                              <Checkbox checked={selected} />
                             </div>
                           </td>
                         )}
diff --git a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx
index 6f74003a..0796c309 100644
--- a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx
+++ b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
 import { Plus } from "lucide-react";
 import { ItemSelectionModal } from "./ItemSelectionModal";
 import { RepeaterTable } from "./RepeaterTable";
-import { ModalRepeaterTableProps } from "./types";
+import { ModalRepeaterTableProps, RepeaterColumnConfig } from "./types";
 import { useCalculation } from "./useCalculation";
 import { cn } from "@/lib/utils";
 
@@ -32,19 +32,87 @@ export function ModalRepeaterTableComponent({
 }: ModalRepeaterTableComponentProps) {
   // config prop 우선, 없으면 개별 prop 사용
   const sourceTable = config?.sourceTable || propSourceTable || "";
-  const sourceColumns = config?.sourceColumns || propSourceColumns || [];
+  
+  // sourceColumns에서 빈 문자열 필터링
+  const rawSourceColumns = config?.sourceColumns || propSourceColumns || [];
+  const sourceColumns = rawSourceColumns.filter((col) => col && col.trim() !== "");
+  
   const sourceSearchFields = config?.sourceSearchFields || propSourceSearchFields || [];
   const modalTitle = config?.modalTitle || propModalTitle || "항목 검색";
   const modalButtonText = config?.modalButtonText || propModalButtonText || "품목 검색";
   const multiSelect = config?.multiSelect ?? propMultiSelect ?? true;
-  const columns = config?.columns || propColumns || [];
   const calculationRules = config?.calculationRules || propCalculationRules || [];
   const value = config?.value || propValue || [];
   const onChange = config?.onChange || propOnChange || (() => {});
-  const uniqueField = config?.uniqueField || propUniqueField;
+  
+  // uniqueField 자동 보정: order_no는 item_info 테이블에 없으므로 item_number로 변경
+  const rawUniqueField = config?.uniqueField || propUniqueField;
+  const uniqueField = rawUniqueField === "order_no" && sourceTable === "item_info" 
+    ? "item_number" 
+    : rawUniqueField;
+  
   const filterCondition = config?.filterCondition || propFilterCondition || {};
   const companyCode = config?.companyCode || propCompanyCode;
   const [modalOpen, setModalOpen] = useState(false);
+
+  // columns가 비어있으면 sourceColumns로부터 자동 생성
+  const columns = React.useMemo((): RepeaterColumnConfig[] => {
+    const configuredColumns = config?.columns || propColumns || [];
+    
+    if (configuredColumns.length > 0) {
+      console.log("✅ 설정된 columns 사용:", configuredColumns);
+      return configuredColumns;
+    }
+
+    // columns가 비어있으면 sourceColumns로부터 자동 생성
+    if (sourceColumns.length > 0) {
+      console.log("🔄 sourceColumns로부터 자동 생성:", sourceColumns);
+      const autoColumns: RepeaterColumnConfig[] = sourceColumns.map((field) => ({
+        field: field,
+        label: field, // 필드명을 라벨로 사용 (나중에 설정에서 변경 가능)
+        editable: false, // 기본적으로 읽기 전용
+        type: "text" as const,
+        width: "150px",
+      }));
+      console.log("📋 자동 생성된 columns:", autoColumns);
+      return autoColumns;
+    }
+
+    console.warn("⚠️ columns와 sourceColumns 모두 비어있음!");
+    return [];
+  }, [config?.columns, propColumns, sourceColumns]);
+
+  // 초기 props 로깅
+  useEffect(() => {
+    if (rawSourceColumns.length !== sourceColumns.length) {
+      console.warn(`⚠️ sourceColumns 필터링: ${rawSourceColumns.length}개 → ${sourceColumns.length}개 (빈 문자열 제거)`);
+    }
+    
+    if (rawUniqueField !== uniqueField) {
+      console.warn(`⚠️ uniqueField 자동 보정: "${rawUniqueField}" → "${uniqueField}"`);
+    }
+    
+    console.log("🎬 ModalRepeaterTableComponent 마운트:", {
+      columnsLength: columns.length,
+      sourceTable,
+      sourceColumns,
+      uniqueField,
+    });
+    
+    if (columns.length === 0) {
+      console.error("❌ columns가 비어있습니다! sourceColumns:", sourceColumns);
+    } else {
+      console.log("✅ columns 설정 완료:", columns.map(c => c.label || c.field).join(", "));
+    }
+  }, []);
+
+  // value 변경 감지
+  useEffect(() => {
+    console.log("📦 ModalRepeaterTableComponent value 변경:", {
+      valueLength: value.length,
+    });
+  }, [value]);
+
   const { calculateRow, calculateAll } = useCalculation(calculationRules);
 
   // 초기 데이터에 계산 필드 적용
@@ -59,6 +127,8 @@ export function ModalRepeaterTableComponent({
   }, []);
 
   const handleAddItems = (items: any[]) => {
+    console.log("➕ handleAddItems 호출:", items.length, "개 항목");
+
     // 기본값 적용
     const itemsWithDefaults = items.map((item) => {
       const newItem = { ...item };
@@ -74,7 +144,10 @@ export function ModalRepeaterTableComponent({
     const calculatedItems = calculateAll(itemsWithDefaults);
 
     // 기존 데이터에 추가
-    onChange([...value, ...calculatedItems]);
+    const newData = [...value, ...calculatedItems];
+    console.log("✅ 최종 데이터:", newData.length, "개 항목");
+
+    onChange(newData);
   };
 
   const handleRowChange = (index: number, newRow: any) => {
diff --git a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableRenderer.tsx b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableRenderer.tsx
index 8b6d09f3..6362e1ce 100644
--- a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableRenderer.tsx
+++ b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableRenderer.tsx
@@ -13,12 +13,31 @@ export class ModalRepeaterTableRenderer extends AutoRegisteringComponentRenderer
   static componentDefinition = ModalRepeaterTableDefinition;
 
   render(): React.ReactElement {
-    return <ModalRepeaterTableComponent {...this.props} renderer={this} />;
+    // onChange 콜백을 명시적으로 전달
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const handleChange = (newValue: any[]) => {
+      console.log("🔄 ModalRepeaterTableRenderer onChange:", newValue.length, "개 항목");
+
+      // 컴포넌트 업데이트
+      this.updateComponent({ value: newValue });
+
+      // 원본 onChange 콜백도 호출 (있다면)
+      if (this.props.onChange) {
+        this.props.onChange(newValue);
+      }
+    };
+
+    // renderer prop 제거 (불필요)
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { onChange, ...restProps } = this.props;
+
+    return <ModalRepeaterTableComponent {...restProps} onChange={handleChange} />;
   }
 
   /**
-   * 값 변경 처리
+   * 값 변경 처리 (레거시 메서드 - 호환성 유지)
    */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   protected handleValueChange = (value: any) => {
     this.updateComponent({ value });
   };
diff --git a/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx b/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx
index b1c94dda..879cbce5 100644
--- a/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx
+++ b/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Button } from "@/components/ui/button";
@@ -28,6 +28,11 @@ export function RepeaterTable({
     field: string;
   } | null>(null);
 
+  // 데이터 변경 감지 (필요시 활성화)
+  // useEffect(() => {
+  //   console.log("📊 RepeaterTable 데이터 업데이트:", data.length, "개 행");
+  // }, [data]);
+
   const handleCellEdit = (rowIndex: number, field: string, value: any) => {
     const newRow = { ...data[rowIndex], [field]: value };
     onRowChange(rowIndex, newRow);

From d5d267e63a4c188252c81ac56591e98dcecea9f7 Mon Sep 17 00:00:00 2001
From: SeongHyun Kim <kksh7842@gmail.com>
Date: Wed, 19 Nov 2025 17:09:12 +0900
Subject: [PATCH 5/5] =?UTF-8?q?feat(modal-repeater-table):=20=EC=BB=AC?=
 =?UTF-8?q?=EB=9F=BC=20=EB=A7=A4=ED=95=91=20=EB=B0=8F=20=EA=B3=84=EC=82=B0?=
 =?UTF-8?q?=20=EA=B7=9C=EC=B9=99=20UI=20=EB=8C=80=ED=8F=AD=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

새로운 기능
- 컬럼별 독립적인 소스 테이블 선택 기능
- SourceColumnSelector, ReferenceColumnSelector 컴포넌트 추가
- 계산 규칙 자동 동기화 로직 (cleanupInitialConfig)

UI/UX 개선
- 컬럼 설정 UI를 세로 레이아웃으로 재구성 (h-10 통일)
- 매핑 타입별 색상 구분 (파란색/보라색/초록색)
- 계산 규칙 섹션 재디자인 (안내 박스, 번호 배지, 빈 상태)
- 현재 설정 시각화 (코드 스타일 표시)

버그 수정
- 계산 규칙 삭제 시 컬럼이 수정 불가능 상태로 남는 문제 해결
- 결과 필드 변경 시 이전 필드의 calculated 속성 제거
- 초기 로드 시 계산 규칙과 컬럼 속성 동기화

개선 사항
- 모든 입력 필드의 높이와 텍스트 크기 일관성 확보
- 섹션별 명확한 제목과 설명 추가
- 접근성 향상 (ARIA 레이블, 포커스 스타일)
---
 .../ModalRepeaterTableComponent.tsx           |   44 +-
 .../ModalRepeaterTableConfigPanel.tsx         | 1240 ++++++++++++++---
 .../components/modal-repeater-table/types.ts  |   38 +
 .../modal-repeater-table/useCalculation.ts    |   19 +-
 4 files changed, 1119 insertions(+), 222 deletions(-)

diff --git a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx
index 0796c309..e387d50e 100644
--- a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx
+++ b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx
@@ -128,20 +128,56 @@ export function ModalRepeaterTableComponent({
 
   const handleAddItems = (items: any[]) => {
     console.log("➕ handleAddItems 호출:", items.length, "개 항목");
+    console.log("📋 소스 데이터:", items);
+
+    // 매핑 규칙에 따라 데이터 변환
+    const mappedItems = items.map((sourceItem) => {
+      const newItem: any = {};
 
-    // 기본값 적용
-    const itemsWithDefaults = items.map((item) => {
-      const newItem = { ...item };
       columns.forEach((col) => {
+        console.log(`🔄 컬럼 "${col.field}" 매핑 처리:`, col.mapping);
+
+        // 1. 매핑 규칙이 있는 경우
+        if (col.mapping) {
+          if (col.mapping.type === "source") {
+            // 소스 테이블 컬럼에서 복사
+            const sourceField = col.mapping.sourceField;
+            if (sourceField && sourceItem[sourceField] !== undefined) {
+              newItem[col.field] = sourceItem[sourceField];
+              console.log(`  ✅ 소스 복사: ${sourceField} → ${col.field}:`, newItem[col.field]);
+            } else {
+              console.warn(`  ⚠️ 소스 필드 "${sourceField}" 값이 없음`);
+            }
+          } else if (col.mapping.type === "reference") {
+            // 외부 테이블 참조 (TODO: API 호출 필요)
+            console.log(`  ⏳ 참조 조회 필요: ${col.mapping.referenceTable}.${col.mapping.referenceField}`);
+            // 현재는 빈 값으로 설정 (나중에 API 호출로 구현)
+            newItem[col.field] = undefined;
+          } else if (col.mapping.type === "manual") {
+            // 사용자 입력 (빈 값)
+            newItem[col.field] = undefined;
+            console.log(`  ✏️ 수동 입력 필드`);
+          }
+        } 
+        // 2. 매핑 규칙이 없는 경우 - 소스 데이터에서 같은 필드명으로 복사
+        else if (sourceItem[col.field] !== undefined) {
+          newItem[col.field] = sourceItem[col.field];
+          console.log(`  📝 직접 복사: ${col.field}:`, newItem[col.field]);
+        }
+
+        // 3. 기본값 적용
         if (col.defaultValue !== undefined && newItem[col.field] === undefined) {
           newItem[col.field] = col.defaultValue;
+          console.log(`  🎯 기본값 적용: ${col.field}:`, col.defaultValue);
         }
       });
+
+      console.log("📦 변환된 항목:", newItem);
       return newItem;
     });
 
     // 계산 필드 업데이트
-    const calculatedItems = calculateAll(itemsWithDefaults);
+    const calculatedItems = calculateAll(mappedItems);
 
     // 기존 데이터에 추가
     const newData = [...value, ...calculatedItems];
diff --git a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel.tsx b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel.tsx
index 3854c9ee..a952d845 100644
--- a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel.tsx
+++ b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel.tsx
@@ -9,7 +9,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
 import { Plus, X, Check, ChevronsUpDown } from "lucide-react";
-import { ModalRepeaterTableProps } from "./types";
+import { ModalRepeaterTableProps, RepeaterColumnConfig, ColumnMapping, CalculationRule } from "./types";
 import { tableManagementApi } from "@/lib/api/tableManagement";
 import { cn } from "@/lib/utils";
 
@@ -18,18 +18,158 @@ interface ModalRepeaterTableConfigPanelProps {
   onConfigChange: (config: Partial<ModalRepeaterTableProps>) => void;
 }
 
+// 소스 컬럼 선택기 (동적 테이블별 컬럼 로드)
+function SourceColumnSelector({
+  sourceTable,
+  value,
+  onChange,
+}: {
+  sourceTable: string;
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const [columns, setColumns] = useState<{ columnName: string; displayName?: string }[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    const loadColumns = async () => {
+      if (!sourceTable) {
+        setColumns([]);
+        return;
+      }
+
+      setIsLoading(true);
+      try {
+        const response = await tableManagementApi.getColumnList(sourceTable);
+        if (response.success && response.data) {
+          setColumns(response.data.columns);
+        }
+      } catch (error) {
+        console.error("컬럼 로드 실패:", error);
+        setColumns([]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    loadColumns();
+  }, [sourceTable]);
+
+  return (
+    <Select value={value} onValueChange={onChange} disabled={!sourceTable || isLoading}>
+      <SelectTrigger className="h-10 text-sm w-full">
+        <SelectValue placeholder={isLoading ? "로딩 중..." : "컬럼 선택"} />
+      </SelectTrigger>
+      <SelectContent>
+        {columns.map((col) => (
+          <SelectItem key={col.columnName} value={col.columnName}>
+            {col.displayName || col.columnName}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+// 참조 컬럼 선택기 (동적 테이블별 컬럼 로드)
+function ReferenceColumnSelector({
+  referenceTable,
+  value,
+  onChange,
+}: {
+  referenceTable: string;
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const [columns, setColumns] = useState<{ columnName: string; displayName?: string }[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    const loadColumns = async () => {
+      if (!referenceTable) {
+        setColumns([]);
+        return;
+      }
+
+      setIsLoading(true);
+      try {
+        const response = await tableManagementApi.getColumnList(referenceTable);
+        if (response.success && response.data) {
+          setColumns(response.data.columns);
+        }
+      } catch (error) {
+        console.error("참조 컬럼 로드 실패:", error);
+        setColumns([]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    loadColumns();
+  }, [referenceTable]);
+
+  return (
+    <Select value={value} onValueChange={onChange} disabled={!referenceTable || isLoading}>
+      <SelectTrigger className="h-10 text-sm w-full">
+        <SelectValue placeholder={isLoading ? "로딩 중..." : "컬럼 선택"} />
+      </SelectTrigger>
+      <SelectContent>
+        {columns.map((col) => (
+          <SelectItem key={col.columnName} value={col.columnName}>
+            {col.displayName || col.columnName}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
 export function ModalRepeaterTableConfigPanel({
   config,
   onConfigChange,
 }: ModalRepeaterTableConfigPanelProps) {
-  const [localConfig, setLocalConfig] = useState(config);
-  const [allTables, setAllTables] = useState<any[]>([]);
-  const [tableColumns, setTableColumns] = useState<any[]>([]);
+  // 초기 설정 정리: 계산 규칙과 컬럼 설정 동기화
+  const cleanupInitialConfig = (initialConfig: Partial<ModalRepeaterTableProps>): Partial<ModalRepeaterTableProps> => {
+    // 계산 규칙이 없으면 모든 컬럼의 calculated 속성 제거
+    if (!initialConfig.calculationRules || initialConfig.calculationRules.length === 0) {
+      const cleanedColumns = (initialConfig.columns || []).map((col) => {
+        const { calculated: _calc, ...rest } = col;
+        return { ...rest, editable: true };
+      });
+      return { ...initialConfig, columns: cleanedColumns };
+    }
+
+    // 계산 규칙이 있으면 결과 필드만 calculated=true
+    const resultFields = new Set(initialConfig.calculationRules.map((rule) => rule.result));
+    const cleanedColumns = (initialConfig.columns || []).map((col) => {
+      if (resultFields.has(col.field)) {
+        // 계산 결과 필드는 calculated=true, editable=false
+        return { ...col, calculated: true, editable: false };
+      } else {
+        // 나머지 필드는 calculated 제거, editable=true
+        const { calculated: _calc, ...rest } = col;
+        return { ...rest, editable: true };
+      }
+    });
+
+    return { ...initialConfig, columns: cleanedColumns };
+  };
+
+  const [localConfig, setLocalConfig] = useState(cleanupInitialConfig(config));
+  const [allTables, setAllTables] = useState<{ tableName: string; displayName?: string }[]>([]);
+  const [tableColumns, setTableColumns] = useState<{ columnName: string; displayName?: string }[]>([]);
+  const [targetTableColumns, setTargetTableColumns] = useState<{ columnName: string; displayName?: string }[]>([]);
   const [isLoadingTables, setIsLoadingTables] = useState(false);
   const [isLoadingColumns, setIsLoadingColumns] = useState(false);
+  const [isLoadingTargetColumns, setIsLoadingTargetColumns] = useState(false);
   const [openTableCombo, setOpenTableCombo] = useState(false);
+  const [openTargetTableCombo, setOpenTargetTableCombo] = useState(false);
   const [openUniqueFieldCombo, setOpenUniqueFieldCombo] = useState(false);
 
+  // config 변경 시 localConfig 동기화 (cleanupInitialConfig 적용)
+  useEffect(() => {
+    const cleanedConfig = cleanupInitialConfig(config);
+    setLocalConfig(cleanedConfig);
+  }, [config]);
+
   // 전체 테이블 목록 로드
   useEffect(() => {
     const loadTables = async () => {
@@ -48,7 +188,7 @@ export function ModalRepeaterTableConfigPanel({
     loadTables();
   }, []);
 
-  // 선택된 테이블의 컬럼 목록 로드
+  // 소스 테이블의 컬럼 목록 로드
   useEffect(() => {
     const loadColumns = async () => {
       if (!localConfig.sourceTable) {
@@ -72,9 +212,29 @@ export function ModalRepeaterTableConfigPanel({
     loadColumns();
   }, [localConfig.sourceTable]);
 
+  // 저장 테이블의 컬럼 목록 로드
   useEffect(() => {
-    setLocalConfig(config);
-  }, [config]);
+    const loadTargetColumns = async () => {
+      if (!localConfig.targetTable) {
+        setTargetTableColumns([]);
+        return;
+      }
+
+      setIsLoadingTargetColumns(true);
+      try {
+        const response = await tableManagementApi.getColumnList(localConfig.targetTable);
+        if (response.success && response.data) {
+          setTargetTableColumns(response.data.columns);
+        }
+      } catch (error) {
+        console.error("저장 테이블 컬럼 로드 실패:", error);
+        setTargetTableColumns([]);
+      } finally {
+        setIsLoadingTargetColumns(false);
+      }
+    };
+    loadTargetColumns();
+  }, [localConfig.targetTable]);
 
   const updateConfig = (updates: Partial<ModalRepeaterTableProps>) => {
     const newConfig = { ...localConfig, ...updates };
@@ -116,235 +276,887 @@ export function ModalRepeaterTableConfigPanel({
     updateConfig({ sourceSearchFields: fields });
   };
 
+  // 🆕 저장 테이블 컬럼에서 반복 테이블 컬럼 추가
+  const addRepeaterColumnFromTarget = (columnName: string) => {
+    const columns = localConfig.columns || [];
+    
+    // 이미 존재하는 컬럼인지 확인
+    if (columns.some(col => col.field === columnName)) {
+      alert("이미 추가된 컬럼입니다.");
+      return;
+    }
+
+    const targetCol = targetTableColumns.find(c => c.columnName === columnName);
+    
+    const newColumn: RepeaterColumnConfig = {
+      field: columnName,
+      label: targetCol?.displayName || columnName,
+      type: "text",
+      width: "150px",
+      editable: true,
+      mapping: {
+        type: "manual",
+        referenceTable: localConfig.targetTable,
+        referenceField: columnName,
+      },
+    };
+
+    updateConfig({ columns: [...columns, newColumn] });
+  };
+
+  // 🆕 반복 테이블 컬럼 삭제
+  const removeRepeaterColumn = (index: number) => {
+    const columns = [...(localConfig.columns || [])];
+    columns.splice(index, 1);
+    updateConfig({ columns });
+  };
+
+  // 🆕 반복 테이블 컬럼 개별 수정
+  const updateRepeaterColumn = (index: number, updates: Partial<RepeaterColumnConfig>) => {
+    const columns = [...(localConfig.columns || [])];
+    columns[index] = { ...columns[index], ...updates };
+    updateConfig({ columns });
+  };
+
+  // 🆕 계산 규칙 관리
+  const addCalculationRule = () => {
+    const rules = localConfig.calculationRules || [];
+    const newRule: CalculationRule = {
+      result: "",
+      formula: "",
+      dependencies: [],
+    };
+    updateConfig({ calculationRules: [...rules, newRule] });
+  };
+
+  const updateCalculationRule = (index: number, updates: Partial<CalculationRule>) => {
+    const rules = [...(localConfig.calculationRules || [])];
+    const oldRule = rules[index];
+    const newRule = { ...oldRule, ...updates };
+    
+    // 결과 필드가 변경된 경우
+    if (updates.result !== undefined && oldRule.result !== updates.result) {
+      const columns = [...(localConfig.columns || [])];
+      
+      // 이전 결과 필드의 calculated 속성 제거
+      if (oldRule.result) {
+        const oldResultIndex = columns.findIndex(c => c.field === oldRule.result);
+        if (oldResultIndex !== -1) {
+          const { calculated: _calc, ...rest } = columns[oldResultIndex];
+          columns[oldResultIndex] = { ...rest, editable: true };
+        }
+      }
+      
+      // 새 결과 필드를 calculated=true, editable=false로 설정
+      if (updates.result) {
+        const newResultIndex = columns.findIndex(c => c.field === updates.result);
+        if (newResultIndex !== -1) {
+          columns[newResultIndex] = {
+            ...columns[newResultIndex],
+            calculated: true,
+            editable: false,
+          };
+        }
+      }
+      
+      rules[index] = newRule;
+      updateConfig({ calculationRules: rules, columns });
+      return;
+    }
+    
+    rules[index] = newRule;
+    updateConfig({ calculationRules: rules });
+  };
+
+  const removeCalculationRule = (index: number) => {
+    const rules = [...(localConfig.calculationRules || [])];
+    const removedRule = rules[index];
+    
+    // 결과 필드의 calculated 속성 제거
+    if (removedRule.result) {
+      const columns = [...(localConfig.columns || [])];
+      const resultIndex = columns.findIndex(c => c.field === removedRule.result);
+      if (resultIndex !== -1) {
+        const { calculated: _calc, ...rest } = columns[resultIndex];
+        columns[resultIndex] = { ...rest, editable: true };
+      }
+      rules.splice(index, 1);
+      updateConfig({ calculationRules: rules, columns });
+      return;
+    }
+    
+    rules.splice(index, 1);
+    updateConfig({ calculationRules: rules });
+  };
+
   return (
-    <div className="space-y-4 p-4">
-      <div className="space-y-2">
-        <Label className="text-xs sm:text-sm">소스 테이블 *</Label>
-        <Popover open={openTableCombo} onOpenChange={setOpenTableCombo}>
-          <PopoverTrigger asChild>
+    <div className="space-y-6 p-4">
+      {/* 소스/저장 테이블 설정 */}
+      <div className="space-y-4 border rounded-lg p-4 bg-card">
+        <div>
+          <h3 className="text-sm font-semibold mb-1">1. 소스 테이블 (데이터 검색)</h3>
+          <p className="text-xs text-muted-foreground">
+            항목 검색 모달에서 어떤 테이블의 어떤 컬럼 정보를 보여줄 건지 설정
+          </p>
+        </div>
+
+        {/* 소스 테이블 */}
+        <div className="space-y-2">
+          <Label className="text-xs sm:text-sm">소스 테이블 *</Label>
+          <Popover open={openTableCombo} onOpenChange={setOpenTableCombo}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                aria-expanded={openTableCombo}
+                className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+                disabled={isLoadingTables}
+              >
+                {localConfig.sourceTable
+                  ? allTables.find((t) => t.tableName === localConfig.sourceTable)?.displayName || localConfig.sourceTable
+                  : isLoadingTables ? "로딩 중..." : "테이블 선택"}
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+              <Command>
+                <CommandInput placeholder="테이블 검색..." className="text-xs sm:text-sm" />
+                <CommandList>
+                  <CommandEmpty className="text-xs sm:text-sm">테이블을 찾을 수 없습니다.</CommandEmpty>
+                  <CommandGroup>
+                    {allTables.map((table) => (
+                      <CommandItem
+                        key={table.tableName}
+                        value={table.tableName}
+                        onSelect={() => {
+                          updateConfig({ sourceTable: table.tableName });
+                          setOpenTableCombo(false);
+                        }}
+                        className="text-xs sm:text-sm"
+                      >
+                        <Check className={cn("mr-2 h-4 w-4", localConfig.sourceTable === table.tableName ? "opacity-100" : "opacity-0")} />
+                        <div className="flex flex-col">
+                          <span className="font-medium">{table.displayName || table.tableName}</span>
+                          {table.displayName && <span className="text-[10px] text-gray-500">{table.tableName}</span>}
+                        </div>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+          <p className="text-xs text-muted-foreground">
+            모달에서 검색할 데이터 테이블
+          </p>
+        </div>
+
+        <div className="border-t pt-4 mt-4">
+          <h3 className="text-sm font-semibold mb-1">2. 저장 테이블 (데이터 저장)</h3>
+          <p className="text-xs text-muted-foreground mb-2">
+            반복 테이블에 입력된 정보를 어떤 테이블에 저장할 건지 선택
+          </p>
+        </div>
+
+        {/* 저장 테이블 */}
+        <div className="space-y-2">
+          <Label className="text-xs sm:text-sm">저장 테이블 *</Label>
+          <Popover open={openTargetTableCombo} onOpenChange={setOpenTargetTableCombo}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                aria-expanded={openTargetTableCombo}
+                className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+                disabled={isLoadingTables}
+              >
+                {localConfig.targetTable
+                  ? allTables.find((t) => t.tableName === localConfig.targetTable)?.displayName || localConfig.targetTable
+                  : isLoadingTables ? "로딩 중..." : "저장할 테이블 선택"}
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+              <Command>
+                <CommandInput placeholder="테이블 검색..." className="text-xs sm:text-sm" />
+                <CommandList>
+                  <CommandEmpty className="text-xs sm:text-sm">테이블을 찾을 수 없습니다.</CommandEmpty>
+                  <CommandGroup>
+                    {allTables.map((table) => (
+                      <CommandItem
+                        key={table.tableName}
+                        value={table.tableName}
+                        onSelect={() => {
+                          updateConfig({ targetTable: table.tableName });
+                          setOpenTargetTableCombo(false);
+                        }}
+                        className="text-xs sm:text-sm"
+                      >
+                        <Check className={cn("mr-2 h-4 w-4", localConfig.targetTable === table.tableName ? "opacity-100" : "opacity-0")} />
+                        <div className="flex flex-col">
+                          <span className="font-medium">{table.displayName || table.tableName}</span>
+                          {table.displayName && <span className="text-[10px] text-gray-500">{table.tableName}</span>}
+                        </div>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+          <p className="text-xs text-muted-foreground">
+            반복 테이블 데이터를 저장할 대상 테이블
+          </p>
+        </div>
+
+        {/* 소스 컬럼 */}
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label className="text-xs sm:text-sm">소스 컬럼</Label>
             <Button
+              size="sm"
               variant="outline"
-              role="combobox"
-              aria-expanded={openTableCombo}
-              className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
-              disabled={isLoadingTables}
-            >
-              {localConfig.sourceTable
-                ? allTables.find((t) => t.tableName === localConfig.sourceTable)?.displayName || localConfig.sourceTable
-                : isLoadingTables ? "로딩 중..." : "테이블 선택"}
-              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
-            <Command>
-              <CommandInput placeholder="테이블 검색..." className="text-xs sm:text-sm" />
-              <CommandList>
-                <CommandEmpty className="text-xs sm:text-sm">테이블을 찾을 수 없습니다.</CommandEmpty>
-                <CommandGroup>
-                  {allTables.map((table) => (
-                    <CommandItem
-                      key={table.tableName}
-                      value={table.tableName}
-                      onSelect={() => {
-                        updateConfig({ sourceTable: table.tableName });
-                        setOpenTableCombo(false);
-                      }}
-                      className="text-xs sm:text-sm"
-                    >
-                      <Check className={cn("mr-2 h-4 w-4", localConfig.sourceTable === table.tableName ? "opacity-100" : "opacity-0")} />
-                      <div className="flex flex-col">
-                        <span className="font-medium">{table.displayName || table.tableName}</span>
-                        {table.displayName && <span className="text-[10px] text-gray-500">{table.tableName}</span>}
-                      </div>
-                    </CommandItem>
-                  ))}
-                </CommandGroup>
-              </CommandList>
-            </Command>
-          </PopoverContent>
-        </Popover>
-      </div>
-
-      <div className="space-y-2">
-        <Label className="text-xs sm:text-sm">모달 제목</Label>
-        <Input
-          value={localConfig.modalTitle || ""}
-          onChange={(e) => updateConfig({ modalTitle: e.target.value })}
-          placeholder="항목 검색 및 선택"
-          className="h-8 text-xs sm:h-10 sm:text-sm"
-        />
-      </div>
-
-      <div className="space-y-2">
-        <Label className="text-xs sm:text-sm">모달 버튼 텍스트</Label>
-        <Input
-          value={localConfig.modalButtonText || ""}
-          onChange={(e) => updateConfig({ modalButtonText: e.target.value })}
-          placeholder="항목 검색"
-          className="h-8 text-xs sm:h-10 sm:text-sm"
-        />
-      </div>
-
-      <div className="space-y-2">
-        <Label className="text-xs sm:text-sm">중복 체크 필드</Label>
-        <Popover open={openUniqueFieldCombo} onOpenChange={setOpenUniqueFieldCombo}>
-          <PopoverTrigger asChild>
-            <Button
-              variant="outline"
-              role="combobox"
-              aria-expanded={openUniqueFieldCombo}
-              className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+              onClick={addSourceColumn}
+              className="h-7 text-xs"
               disabled={!localConfig.sourceTable || isLoadingColumns}
             >
-              {localConfig.uniqueField
-                ? tableColumns.find((c) => c.columnName === localConfig.uniqueField)?.displayName || localConfig.uniqueField
-                : isLoadingColumns ? "로딩 중..." : "필드 선택"}
-              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              <Plus className="h-3 w-3 mr-1" />
+              추가
             </Button>
-          </PopoverTrigger>
-          <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
-            <Command>
-              <CommandInput placeholder="필드 검색..." className="text-xs sm:text-sm" />
-              <CommandList>
-                <CommandEmpty className="text-xs sm:text-sm">필드를 찾을 수 없습니다.</CommandEmpty>
-                <CommandGroup>
-                  {tableColumns.map((column) => (
-                    <CommandItem
-                      key={column.columnName}
-                      value={column.columnName}
-                      onSelect={() => {
-                        updateConfig({ uniqueField: column.columnName });
-                        setOpenUniqueFieldCombo(false);
-                      }}
-                      className="text-xs sm:text-sm"
-                    >
-                      <Check className={cn("mr-2 h-4 w-4", localConfig.uniqueField === column.columnName ? "opacity-100" : "opacity-0")} />
-                      <div className="flex flex-col">
-                        <span className="font-medium">{column.displayName || column.columnName}</span>
-                        {column.displayName && <span className="text-[10px] text-gray-500">{column.columnName}</span>}
-                      </div>
-                    </CommandItem>
-                  ))}
-                </CommandGroup>
-              </CommandList>
-            </Command>
-          </PopoverContent>
-        </Popover>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            모달 테이블에 표시할 컬럼들
+          </p>
+          <div className="space-y-2">
+            {(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>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => removeSourceColumn(index)}
+                  className="h-8 w-8 p-0"
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* 검색 필드 */}
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label className="text-xs sm:text-sm">검색 필드</Label>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={addSearchField}
+              className="h-7 text-xs"
+              disabled={!localConfig.sourceTable || isLoadingColumns}
+            >
+              <Plus className="h-3 w-3 mr-1" />
+              추가
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            모달에서 검색 가능한 필드들
+          </p>
+          <div className="space-y-2">
+            {(localConfig.sourceSearchFields || []).map((field, index) => (
+              <div key={index} className="flex items-center gap-2">
+                <Select
+                  value={field}
+                  onValueChange={(value) => updateSearchField(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>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => removeSearchField(index)}
+                  className="h-8 w-8 p-0"
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* 중복 체크 필드 */}
+        <div className="space-y-2">
+          <Label className="text-xs sm:text-sm">중복 체크 필드</Label>
+          <Popover open={openUniqueFieldCombo} onOpenChange={setOpenUniqueFieldCombo}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                aria-expanded={openUniqueFieldCombo}
+                className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+                disabled={!localConfig.sourceTable || isLoadingColumns}
+              >
+                {localConfig.uniqueField
+                  ? tableColumns.find((c) => c.columnName === localConfig.uniqueField)?.displayName || localConfig.uniqueField
+                  : isLoadingColumns ? "로딩 중..." : "필드 선택"}
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+              <Command>
+                <CommandInput placeholder="필드 검색..." className="text-xs sm:text-sm" />
+                <CommandList>
+                  <CommandEmpty className="text-xs sm:text-sm">필드를 찾을 수 없습니다.</CommandEmpty>
+                  <CommandGroup>
+                    {tableColumns.map((column) => (
+                      <CommandItem
+                        key={column.columnName}
+                        value={column.columnName}
+                        onSelect={() => {
+                          updateConfig({ uniqueField: column.columnName });
+                          setOpenUniqueFieldCombo(false);
+                        }}
+                        className="text-xs sm:text-sm"
+                      >
+                        <Check className={cn("mr-2 h-4 w-4", localConfig.uniqueField === column.columnName ? "opacity-100" : "opacity-0")} />
+                        <div className="flex flex-col">
+                          <span className="font-medium">{column.displayName || column.columnName}</span>
+                          {column.displayName && <span className="text-[10px] text-gray-500">{column.columnName}</span>}
+                        </div>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+          <p className="text-xs text-muted-foreground">
+            중복 추가를 방지할 고유 필드 (예: 품목 코드)
+          </p>
+        </div>
       </div>
 
-      <div className="space-y-2">
-        <div className="flex items-center justify-between">
-          <Label className="text-xs sm:text-sm">다중 선택</Label>
-          <Switch
-            checked={localConfig.multiSelect ?? true}
-            onCheckedChange={(checked) =>
-              updateConfig({ multiSelect: checked })
-            }
+      {/* 모달 설정 */}
+      <div className="space-y-4 border rounded-lg p-4">
+        <h3 className="text-sm font-semibold">모달 설정</h3>
+
+        <div className="space-y-2">
+          <Label className="text-xs sm:text-sm">모달 제목</Label>
+          <Input
+            value={localConfig.modalTitle || ""}
+            onChange={(e) => updateConfig({ modalTitle: e.target.value })}
+            placeholder="항목 검색 및 선택"
+            className="h-8 text-xs sm:h-10 sm:text-sm"
           />
         </div>
+
+        <div className="space-y-2">
+          <Label className="text-xs sm:text-sm">모달 버튼 텍스트</Label>
+          <Input
+            value={localConfig.modalButtonText || ""}
+            onChange={(e) => updateConfig({ modalButtonText: e.target.value })}
+            placeholder="항목 검색"
+            className="h-8 text-xs sm:h-10 sm:text-sm"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label className="text-xs sm:text-sm">다중 선택</Label>
+            <Switch
+              checked={localConfig.multiSelect ?? true}
+              onCheckedChange={(checked) =>
+                updateConfig({ multiSelect: checked })
+              }
+            />
+          </div>
+        </div>
       </div>
 
-      <div className="space-y-2">
-        <div className="flex items-center justify-between">
-          <Label className="text-xs sm:text-sm">소스 컬럼</Label>
+      {/* 반복 테이블 컬럼 관리 */}
+      <div className="space-y-4 border rounded-lg p-4 bg-card">
+        <div>
+          <h3 className="text-sm font-semibold mb-1">3. 반복 테이블 컬럼 (헤더 구성)</h3>
+          <p className="text-xs text-muted-foreground">
+            반복 테이블 헤더에 표시할 컬럼 옵션 - 어떤 컬럼을 화면에 보여줄지 선택
+          </p>
+        </div>
+
+        {/* 저장 테이블 컬럼 선택 */}
+        {localConfig.targetTable && targetTableColumns.length > 0 && (
+          <div className="space-y-2">
+            <Label className="text-xs sm:text-sm">저장 테이블 컬럼 선택</Label>
+            <div className="flex flex-wrap gap-2">
+              {targetTableColumns.map((col) => (
+                <Button
+                  key={col.columnName}
+                  size="sm"
+                  variant="outline"
+                  onClick={() => addRepeaterColumnFromTarget(col.columnName)}
+                  className="h-7 text-xs"
+                  disabled={isLoadingTargetColumns}
+                >
+                  <Plus className="h-3 w-3 mr-1" />
+                  {col.displayName || col.columnName}
+                </Button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* 추가된 컬럼 목록 */}
+        {localConfig.columns && localConfig.columns.length > 0 && (
+          <div className="space-y-3">
+            <Label className="text-xs sm:text-sm">추가된 컬럼</Label>
+            <div className="flex flex-wrap gap-2">
+              {localConfig.columns.map((col, index) => (
+                <div
+                  key={index}
+                  className="inline-flex items-center gap-2 px-3 py-1.5 bg-primary/10 text-primary rounded-md text-xs"
+                >
+                  <span className="font-medium">{col.label}</span>
+                  <span className="text-[10px] opacity-70">
+                    ({col.mapping?.type === "source" ? "소스" : col.mapping?.type === "reference" ? "참조" : "수동입력"})
+                  </span>
+                  <button
+                    onClick={() => removeRepeaterColumn(index)}
+                    className="ml-1 hover:bg-primary/20 rounded p-0.5"
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                </div>
+              ))}
+            </div>
+
+            {/* 개별 컬럼 설정 - 세로 레이아웃 */}
+            <div className="space-y-4">
+              {localConfig.columns.map((col, index) => (
+                <div key={index} className="border rounded-lg p-4 space-y-4">
+                  <div className="flex items-center justify-between">
+                    <h4 className="text-sm font-semibold">{col.label}</h4>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => removeRepeaterColumn(index)}
+                      className="h-7 w-7 p-0"
+                    >
+                      <X className="h-4 w-4" />
+                    </Button>
+                  </div>
+
+                  {/* 세로 레이아웃: 모든 항목 동일한 너비/높이 */}
+                  <div className="grid grid-cols-1 gap-4">
+                    {/* 1. 품목명 */}
+                    <div className="space-y-2">
+                      <Label className="text-xs font-medium text-muted-foreground">
+                        품목명
+                      </Label>
+                      <Input
+                        value={col.label}
+                        onChange={(e) => updateRepeaterColumn(index, { label: e.target.value })}
+                        placeholder="화면에 표시될 이름"
+                        className="h-10 text-sm w-full"
+                      />
+                      <p className="text-[10px] text-muted-foreground">
+                        반복 테이블 헤더에 표시될 이름
+                      </p>
+                    </div>
+
+                    {/* 2. 컬럼명 */}
+                    <div className="space-y-2">
+                      <Label className="text-xs font-medium text-muted-foreground">
+                        컬럼명
+                      </Label>
+                      <Input
+                        value={col.field}
+                        onChange={(e) => updateRepeaterColumn(index, { field: e.target.value })}
+                        placeholder="데이터베이스 필드명"
+                        className="h-10 text-sm w-full"
+                      />
+                      <p className="text-[10px] text-muted-foreground">
+                        저장 테이블의 실제 컬럼명
+                      </p>
+                    </div>
+
+                    {/* 3. 컬럼 타입 */}
+                    <div className="space-y-2">
+                      <Label className="text-xs font-medium text-muted-foreground">
+                        컬럼 타입
+                      </Label>
+                      <Select
+                        value={col.type || "text"}
+                        onValueChange={(value) => updateRepeaterColumn(index, { type: value as "text" | "number" | "date" | "select" })}
+                      >
+                        <SelectTrigger className="h-10 text-sm w-full">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="text">텍스트</SelectItem>
+                          <SelectItem value="number">숫자</SelectItem>
+                          <SelectItem value="date">날짜</SelectItem>
+                          <SelectItem value="select">선택</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <p className="text-[10px] text-muted-foreground">
+                        입력 필드 타입
+                      </p>
+                    </div>
+
+                    {/* 4. 매핑 설정 */}
+                    <div className="space-y-2">
+                      <Label className="text-xs font-medium text-muted-foreground">
+                        매핑 설정
+                      </Label>
+                      <Select
+                        value={col.mapping?.type || "manual"}
+                        onValueChange={(value) => updateRepeaterColumn(index, {
+                          mapping: {
+                            ...col.mapping,
+                            type: value as "source" | "reference" | "manual"
+                          }
+                        })}
+                      >
+                        <SelectTrigger className="h-10 text-sm w-full">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="source">소스 테이블에서 복사</SelectItem>
+                          <SelectItem value="reference">외부 테이블 참조</SelectItem>
+                          <SelectItem value="manual">화면에서 입력 (수동)</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <p className="text-[10px] text-muted-foreground">
+                        {col.mapping?.type === "source" && "모달에서 선택한 항목의 값을 가져옴"}
+                        {col.mapping?.type === "reference" && "다른 테이블의 값을 참조"}
+                        {col.mapping?.type === "manual" && "사용자가 직접 입력"}
+                      </p>
+                    </div>
+
+                    {/* 5. 소스 정보 */}
+                    <div className="space-y-2">
+                      <Label className="text-xs font-medium text-muted-foreground">
+                        소스 정보
+                      </Label>
+                      
+                      {col.mapping?.type === "source" && (
+                        <div className="space-y-3">
+                          <div className="p-3 bg-blue-50 dark:bg-blue-950 rounded-md border border-blue-200 dark:border-blue-800">
+                            <p className="text-xs font-medium mb-2">소스 테이블에서 복사</p>
+                            <p className="text-[10px] text-muted-foreground">
+                              모달 검색에서 선택한 항목(소스 테이블)의 컬럼 값을 가져옴
+                            </p>
+                          </div>
+
+                          {/* 소스 테이블 선택 */}
+                          <div className="space-y-1.5">
+                            <Label className="text-[11px]">소스 테이블 선택 *</Label>
+                            <Select
+                              value={col.mapping?.referenceTable || localConfig.sourceTable || ""}
+                              onValueChange={(value) => updateRepeaterColumn(index, {
+                                mapping: {
+                                  ...col.mapping,
+                                  type: "source",
+                                  referenceTable: value,
+                                }
+                              })}
+                            >
+                              <SelectTrigger className="h-10 text-sm w-full">
+                                <SelectValue placeholder="테이블 선택" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {allTables.map((table) => (
+                                  <SelectItem key={table.tableName} value={table.tableName}>
+                                    {table.displayName || table.tableName}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                            <p className="text-[10px] text-muted-foreground">
+                              값을 가져올 소스 테이블
+                            </p>
+                          </div>
+
+                          {/* 소스 컬럼 선택 */}
+                          <div className="space-y-1.5">
+                            <Label className="text-[11px]">소스 컬럼 선택 *</Label>
+                            <SourceColumnSelector
+                              sourceTable={col.mapping?.referenceTable || localConfig.sourceTable || ""}
+                              value={col.mapping?.sourceField || ""}
+                              onChange={(value) => updateRepeaterColumn(index, {
+                                mapping: {
+                                  ...col.mapping,
+                                  type: "source",
+                                  sourceField: value
+                                } as ColumnMapping
+                              })}
+                            />
+                            <p className="text-[10px] text-muted-foreground">
+                              가져올 컬럼명
+                            </p>
+                          </div>
+                        </div>
+                      )}
+
+                      {col.mapping?.type === "reference" && (
+                        <div className="space-y-3">
+                          <div className="p-3 bg-purple-50 dark:bg-purple-950 rounded-md border border-purple-200 dark:border-purple-800">
+                            <p className="text-xs font-medium mb-2">외부 테이블 참조</p>
+                            <p className="text-[10px] text-muted-foreground">
+                              다른 테이블의 컬럼 값을 조인하여 가져옴 (조인 조건 필요)
+                            </p>
+                          </div>
+
+                          {/* 참조 테이블 선택 */}
+                          <div className="space-y-1.5">
+                            <Label className="text-[11px]">참조 테이블 선택 *</Label>
+                            <Select
+                              value={col.mapping?.referenceTable || ""}
+                              onValueChange={(value) => updateRepeaterColumn(index, {
+                                mapping: {
+                                  ...col.mapping,
+                                  type: "reference",
+                                  referenceTable: value,
+                                }
+                              })}
+                            >
+                              <SelectTrigger className="h-10 text-sm w-full">
+                                <SelectValue placeholder="테이블 선택" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {allTables.map((table) => (
+                                  <SelectItem key={table.tableName} value={table.tableName}>
+                                    {table.displayName || table.tableName}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                            <p className="text-[10px] text-muted-foreground">
+                              참조할 외부 테이블
+                            </p>
+                          </div>
+
+                          {/* 참조 컬럼 선택 */}
+                          <div className="space-y-1.5">
+                            <Label className="text-[11px]">참조 컬럼 선택 *</Label>
+                            <ReferenceColumnSelector
+                              referenceTable={col.mapping?.referenceTable || ""}
+                              value={col.mapping?.referenceField || ""}
+                              onChange={(value) => updateRepeaterColumn(index, {
+                                mapping: {
+                                  ...col.mapping,
+                                  type: "reference",
+                                  referenceField: value
+                                } as ColumnMapping
+                              })}
+                            />
+                            <p className="text-[10px] text-muted-foreground">
+                              가져올 컬럼명
+                            </p>
+                          </div>
+                        </div>
+                      )}
+
+                      {col.mapping?.type === "manual" && (
+                        <div className="p-3 bg-green-50 dark:bg-green-950 rounded-md border border-green-200 dark:border-green-800">
+                          <p className="text-xs font-medium mb-2">화면에서 입력 (수동)</p>
+                          <p className="text-[10px] text-muted-foreground">
+                            사용자가 반복 테이블에서 직접 입력
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 계산 규칙 (자동 계산) */}
+      <div className="space-y-4 border rounded-lg p-4 bg-card">
+        <div>
+          <h3 className="text-sm font-semibold mb-1">4. 계산 규칙 (자동 계산)</h3>
+          <p className="text-xs text-muted-foreground">
+            반복 테이블 컬럼들을 조합하여 자동 계산 (예: 수량 x 단가 = 금액)
+          </p>
+        </div>
+
+        <div className="p-3 bg-amber-50 dark:bg-amber-950 rounded-md border border-amber-200 dark:border-amber-800">
+          <p className="text-xs font-medium mb-1">중요 안내</p>
+          <ul className="text-[10px] text-muted-foreground space-y-1">
+            <li>• <strong className="text-primary">결과 필드는 수정 불가</strong> (자동 계산됨)</li>
+            <li>• 계산 공식에 사용된 컬럼은 수정 가능</li>
+            <li>• 예시: order_qty * unit_price = total_amount</li>
+          </ul>
+        </div>
+
+        {localConfig.calculationRules && localConfig.calculationRules.length > 0 ? (
+          <div className="space-y-4">
+            {localConfig.calculationRules.map((rule, index) => (
+              <div key={index} className="border rounded-lg p-4 space-y-4 bg-gradient-to-br from-card to-muted/20">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <div className="w-6 h-6 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-xs font-bold">
+                      {index + 1}
+                    </div>
+                    <h4 className="text-sm font-semibold">계산 규칙 {index + 1}</h4>
+                  </div>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => removeCalculationRule(index)}
+                    className="h-7 w-7 p-0 hover:bg-destructive/10 hover:text-destructive"
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+
+                <div className="grid grid-cols-1 gap-4">
+                  {/* 결과 필드 */}
+                  <div className="space-y-2">
+                    <Label className="text-xs font-medium text-muted-foreground">
+                      결과 필드 (계산된 값이 저장될 컬럼) *
+                    </Label>
+                    <Select
+                      value={rule.result || ""}
+                      onValueChange={(value) => updateCalculationRule(index, { result: value })}
+                    >
+                      <SelectTrigger className="h-10 text-sm w-full">
+                        <SelectValue placeholder="결과 컬럼 선택">
+                          {rule.result
+                            ? localConfig.columns?.find((c) => c.field === rule.result)?.label || rule.result
+                            : "결과 컬럼 선택"}
+                        </SelectValue>
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(localConfig.columns || []).map((col) => (
+                          <SelectItem key={col.field} value={col.field}>
+                            {col.label} ({col.field})
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <p className="text-[10px] text-muted-foreground">
+                      이 컬럼은 자동 계산되어 수정 불가능합니다
+                    </p>
+                  </div>
+
+                  {/* 계산 공식 */}
+                  <div className="space-y-2">
+                    <Label className="text-xs font-medium text-muted-foreground">
+                      계산 공식 (JavaScript 표현식) *
+                    </Label>
+                    <Input
+                      value={rule.formula || ""}
+                      onChange={(e) => updateCalculationRule(index, { formula: e.target.value })}
+                      placeholder="예: order_qty * unit_price"
+                      className="h-10 text-sm w-full font-mono"
+                    />
+                    <p className="text-[10px] text-muted-foreground">
+                      사용 가능한 연산자: +, -, *, /, (), 필드명 사용
+                    </p>
+                  </div>
+
+                  {/* 현재 설정 표시 */}
+                  {rule.result && rule.formula && (
+                    <div className="p-3 bg-primary/5 border border-primary/20 rounded-md">
+                      <div className="flex items-center gap-2 mb-2">
+                        <div className="w-1 h-4 bg-primary rounded-full"></div>
+                        <p className="text-xs font-semibold text-primary">현재 설정</p>
+                      </div>
+                      <div className="flex items-center gap-2 text-sm">
+                        <span className="font-bold text-primary">
+                          {localConfig.columns?.find((c) => c.field === rule.result)?.label || rule.result}
+                        </span>
+                        <span className="text-muted-foreground">=</span>
+                        <code className="px-2 py-1 bg-muted rounded text-xs font-mono">
+                          {rule.formula}
+                        </code>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-8 border-2 border-dashed rounded-lg">
+            <div className="w-12 h-12 mx-auto mb-3 rounded-full bg-muted flex items-center justify-center">
+              <Plus className="h-6 w-6 text-muted-foreground" />
+            </div>
+            <p className="text-sm font-medium mb-1">계산 규칙이 없습니다</p>
+            <p className="text-xs text-muted-foreground mb-4">
+              자동 계산이 필요한 컬럼이 있다면 규칙을 추가하세요
+            </p>
+            <Button size="sm" variant="outline" onClick={addCalculationRule}>
+              <Plus className="h-3 w-3 mr-1" />
+              첫 번째 규칙 추가
+            </Button>
+          </div>
+        )}
+
+        {localConfig.calculationRules && localConfig.calculationRules.length > 0 && (
           <Button
             size="sm"
             variant="outline"
-            onClick={addSourceColumn}
-            className="h-7 text-xs"
-            disabled={!localConfig.sourceTable || isLoadingColumns}
+            onClick={addCalculationRule}
+            className="w-full"
           >
             <Plus className="h-3 w-3 mr-1" />
-            추가
+            계산 규칙 추가
           </Button>
-        </div>
-        <div className="space-y-2">
-          {(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>
-              <Button
-                size="sm"
-                variant="ghost"
-                onClick={() => removeSourceColumn(index)}
-                className="h-8 w-8 p-0"
-              >
-                <X className="h-4 w-4" />
-              </Button>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="space-y-2">
-        <div className="flex items-center justify-between">
-          <Label className="text-xs sm:text-sm">검색 필드</Label>
-          <Button
-            size="sm"
-            variant="outline"
-            onClick={addSearchField}
-            className="h-7 text-xs"
-            disabled={!localConfig.sourceTable || isLoadingColumns}
-          >
-            <Plus className="h-3 w-3 mr-1" />
-            추가
-          </Button>
-        </div>
-        <div className="space-y-2">
-          {(localConfig.sourceSearchFields || []).map((field, index) => (
-            <div key={index} className="flex items-center gap-2">
-              <Select
-                value={field}
-                onValueChange={(value) => updateSearchField(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>
-              <Button
-                size="sm"
-                variant="ghost"
-                onClick={() => removeSearchField(index)}
-                className="h-8 w-8 p-0"
-              >
-                <X className="h-4 w-4" />
-              </Button>
-            </div>
-          ))}
-        </div>
+        )}
       </div>
 
+      {/* 설정 순서 안내 */}
       <div className="p-4 bg-muted rounded-md text-xs text-muted-foreground">
-        <p className="font-medium mb-2">💡 참고사항:</p>
-        <ul className="space-y-1 list-disc list-inside">
-          <li>컬럼 설정은 별도 설정 패널에서 관리</li>
-          <li>계산 규칙도 별도 설정 패널에서 관리</li>
-          <li>여기서는 기본 설정만 구성</li>
-        </ul>
+        <p className="font-medium mb-2">설정 순서:</p>
+        <ol className="space-y-1 list-decimal list-inside">
+          <li><strong>소스 테이블</strong> (검색용): 모달에서 검색할 데이터 테이블</li>
+          <li><strong>저장 테이블</strong> (저장용): 선택한 항목을 저장할 테이블</li>
+          <li><strong>반복 테이블 컬럼</strong>: 저장 테이블의 컬럼 선택 → 화면에 표시</li>
+          <li><strong>컬럼 매핑 설정</strong>: 각 컬럼의 초기값을 어디서 가져올지 설정</li>
+          <li><strong>계산 규칙</strong>: 자동 계산이 필요한 컬럼 설정 (선택사항)</li>
+        </ol>
+
+        <div className="mt-4 pt-4 border-t border-border">
+          <p className="font-medium mb-2">실제 사용 예시:</p>
+          <ul className="space-y-1.5 text-[10px]">
+            <li><strong>수주 등록 화면</strong></li>
+            <li className="ml-4">- 소스 테이블: <code className="bg-background px-1 py-0.5 rounded">item_info</code> (품목 검색)</li>
+            <li className="ml-4">- 저장 테이블: <code className="bg-background px-1 py-0.5 rounded">sales_order_mng</code> (수주 저장)</li>
+            <li className="ml-4">- 컬럼: part_name, quantity, unit_price, amount...</li>
+            <li className="ml-4">- 매핑: item_name → part_name (소스에서 복사)</li>
+            <li className="ml-4">- 계산: <code className="bg-background px-1 py-0.5 rounded">amount = quantity * unit_price</code></li>
+          </ul>
+        </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 3cb310b5..047dddc8 100644
--- a/frontend/lib/registry/components/modal-repeater-table/types.ts
+++ b/frontend/lib/registry/components/modal-repeater-table/types.ts
@@ -9,6 +9,9 @@ export interface ModalRepeaterTableProps {
   sourceColumns: string[]; // 모달에 표시할 컬럼들
   sourceSearchFields?: string[]; // 검색 가능한 필드들
 
+  // 🆕 저장 대상 테이블 설정
+  targetTable?: string; // 저장할 테이블 (예: "sales_order_mng")
+
   // 모달 설정
   modalTitle: string; // 모달 제목 (예: "품목 검색 및 선택")
   modalButtonText?: string; // 모달 열기 버튼 텍스트 (기본: "품목 검색")
@@ -45,6 +48,41 @@ export interface RepeaterColumnConfig {
   required?: boolean; // 필수 입력 여부
   defaultValue?: any; // 기본값
   selectOptions?: { value: string; label: string }[]; // select일 때 옵션
+  
+  // 🆕 컬럼 매핑 설정
+  mapping?: ColumnMapping; // 이 컬럼의 데이터를 어디서 가져올지 설정
+}
+
+/**
+ * 컬럼 매핑 설정
+ * 반복 테이블 컬럼이 어느 테이블의 어느 컬럼에서 값을 가져올지 정의
+ */
+export interface ColumnMapping {
+  /** 매핑 타입 */
+  type: "source" | "reference" | "manual";
+  
+  /** 매핑 타입별 설정 */
+  // type: "source" - 소스 테이블 (모달에서 선택한 항목)의 컬럼에서 가져오기
+  sourceField?: string; // 소스 테이블의 컬럼명 (예: "item_name")
+  
+  // type: "reference" - 외부 테이블 참조 (조인)
+  referenceTable?: string; // 참조 테이블명 (예: "customer_item_mapping")
+  referenceField?: string; // 참조 테이블에서 가져올 컬럼 (예: "basic_price")
+  joinCondition?: JoinCondition[]; // 조인 조건
+  
+  // type: "manual" - 사용자가 직접 입력
+}
+
+/**
+ * 조인 조건 정의
+ */
+export interface JoinCondition {
+  /** 현재 테이블의 컬럼 (소스 테이블 또는 반복 테이블) */
+  sourceField: string;
+  /** 참조 테이블의 컬럼 */
+  targetField: string;
+  /** 비교 연산자 */
+  operator?: "=" | "!=" | ">" | "<" | ">=" | "<=";
 }
 
 export interface CalculationRule {
diff --git a/frontend/lib/registry/components/modal-repeater-table/useCalculation.ts b/frontend/lib/registry/components/modal-repeater-table/useCalculation.ts
index 127d986e..1f6f69f2 100644
--- a/frontend/lib/registry/components/modal-repeater-table/useCalculation.ts
+++ b/frontend/lib/registry/components/modal-repeater-table/useCalculation.ts
@@ -16,15 +16,26 @@ export function useCalculation(calculationRules: CalculationRule[] = []) {
 
       for (const rule of calculationRules) {
         try {
-          // formula에서 필드명 추출 및 값으로 대체
+          // formula에서 필드명 자동 추출 (영문자, 숫자, 언더스코어로 구성된 단어)
           let formula = rule.formula;
+          const fieldMatches = formula.match(/[a-zA-Z_][a-zA-Z0-9_]*/g) || [];
+          
+          // 추출된 필드명들을 사용 (dependencies가 없으면 자동 추출 사용)
+          const dependencies = rule.dependencies && rule.dependencies.length > 0 
+            ? rule.dependencies 
+            : fieldMatches;
 
-          for (const dep of rule.dependencies) {
+          // 필드명을 실제 값으로 대체
+          for (const dep of dependencies) {
+            // 결과 필드는 제외
+            if (dep === rule.result) continue;
+            
             const value = parseFloat(row[dep]) || 0;
-            formula = formula.replace(new RegExp(dep, "g"), value.toString());
+            // 정확한 필드명만 대체 (단어 경계 사용)
+            formula = formula.replace(new RegExp(`\\b${dep}\\b`, "g"), value.toString());
           }
 
-          // 계산 실행 (eval 대신 Function 사용)
+          // 계산 실행 (Function 사용)
           const result = new Function(`return ${formula}`)();
           updatedRow[rule.result] = result;
         } catch (error) {