diff --git a/backend-node/src/services/dataService.ts b/backend-node/src/services/dataService.ts
index d9b13475..fd85248d 100644
--- a/backend-node/src/services/dataService.ts
+++ b/backend-node/src/services/dataService.ts
@@ -1227,18 +1227,24 @@ class DataService {
 
       // 새 레코드 처리 (INSERT or UPDATE)
       for (const newRecord of records) {
+        console.log(`🔍 처리할 새 레코드:`, newRecord);
+        
         // 날짜 필드 정규화
         const normalizedRecord: Record<string, any> = {};
         for (const [key, value] of Object.entries(newRecord)) {
           normalizedRecord[key] = normalizeDateValue(value);
         }
         
+        console.log(`🔄 정규화된 레코드:`, normalizedRecord);
+        
         // 전체 레코드 데이터 (parentKeys + normalizedRecord)
         const fullRecord = { ...parentKeys, ...normalizedRecord };
 
         // 고유 키: parentKeys 제외한 나머지 필드들
         const uniqueFields = Object.keys(normalizedRecord);
         
+        console.log(`🔑 고유 필드들:`, uniqueFields);
+        
         // 기존 레코드에서 일치하는 것 찾기
         const existingRecord = existingRecords.rows.find((existing) => {
           return uniqueFields.every((field) => {
diff --git a/backend-node/src/services/entityJoinService.ts b/backend-node/src/services/entityJoinService.ts
index 3283ea09..a8f6c482 100644
--- a/backend-node/src/services/entityJoinService.ts
+++ b/backend-node/src/services/entityJoinService.ts
@@ -134,23 +134,32 @@ export class EntityJoinService {
             `🔧 기존 display_column 사용: ${column.column_name} → ${displayColumn}`
           );
         } else {
-          // display_column이 "none"이거나 없는 경우 기본 표시 컬럼 설정
-          let defaultDisplayColumn = referenceColumn;
-          if (referenceTable === "dept_info") {
-            defaultDisplayColumn = "dept_name";
-          } else if (referenceTable === "company_info") {
-            defaultDisplayColumn = "company_name";
-          } else if (referenceTable === "user_info") {
-            defaultDisplayColumn = "user_name";
-          } else if (referenceTable === "category_values") {
-            defaultDisplayColumn = "category_name";
-          }
+          // display_column이 "none"이거나 없는 경우 참조 테이블의 모든 컬럼 가져오기
+          logger.info(`🔍 ${referenceTable}의 모든 컬럼 조회 중...`);
 
-          displayColumns = [defaultDisplayColumn];
-          logger.info(
-            `🔧 Entity 조인 기본 표시 컬럼 설정: ${column.column_name} → ${defaultDisplayColumn} (${referenceTable})`
+          // 참조 테이블의 모든 컬럼 이름 가져오기
+          const tableColumnsResult = await query<{ column_name: string }>(
+            `SELECT column_name 
+             FROM information_schema.columns 
+             WHERE table_name = $1 
+             AND table_schema = 'public'
+             ORDER BY ordinal_position`,
+            [referenceTable]
           );
-          logger.info(`🔍 생성된 displayColumns 배열:`, displayColumns);
+
+          if (tableColumnsResult.length > 0) {
+            displayColumns = tableColumnsResult.map((col) => col.column_name);
+            logger.info(
+              `✅ ${referenceTable}의 모든 컬럼 자동 포함 (${displayColumns.length}개):`,
+              displayColumns.join(", ")
+            );
+          } else {
+            // 테이블 컬럼을 못 찾으면 기본값 사용
+            displayColumns = [referenceColumn];
+            logger.warn(
+              `⚠️ ${referenceTable}의 컬럼 조회 실패, 기본값 사용: ${referenceColumn}`
+            );
+          }
         }
 
         // 별칭 컬럼명 생성 (writer -> writer_name)
@@ -346,25 +355,26 @@ export class EntityJoinService {
               );
             }
           } else {
-            // 여러 컬럼인 경우 CONCAT으로 연결
-            // 기본 테이블과 조인 테이블의 컬럼을 구분해서 처리
-            const concatParts = displayColumns
-              .map((col) => {
-                // ✅ 개선: referenceTable이 설정되어 있으면 조인 테이블에서 가져옴
-                const isJoinTableColumn =
-                  config.referenceTable && config.referenceTable !== tableName;
+            // 🆕 여러 컬럼인 경우 각 컬럼을 개별 alias로 반환 (합치지 않음)
+            // 예: item_info.standard_price → sourceColumn_standard_price (item_id_standard_price)
+            displayColumns.forEach((col) => {
+              const isJoinTableColumn =
+                config.referenceTable && config.referenceTable !== tableName;
 
-                if (isJoinTableColumn) {
-                  // 조인 테이블 컬럼은 조인 별칭 사용
-                  return `COALESCE(${alias}.${col}::TEXT, '')`;
-                } else {
-                  // 기본 테이블 컬럼은 main 별칭 사용
-                  return `COALESCE(main.${col}::TEXT, '')`;
-                }
-              })
-              .join(` || '${separator}' || `);
+              const individualAlias = `${config.sourceColumn}_${col}`;
 
-            resultColumns.push(`(${concatParts}) AS ${config.aliasColumn}`);
+              if (isJoinTableColumn) {
+                // 조인 테이블 컬럼은 조인 별칭 사용
+                resultColumns.push(
+                  `COALESCE(${alias}.${col}::TEXT, '') AS ${individualAlias}`
+                );
+              } else {
+                // 기본 테이블 컬럼은 main 별칭 사용
+                resultColumns.push(
+                  `COALESCE(main.${col}::TEXT, '') AS ${individualAlias}`
+                );
+              }
+            });
 
             // 🆕 referenceColumn (PK)도 함께 SELECT (parentDataMapping용)
             const isJoinTableColumn =
diff --git a/frontend/components/common/ScreenModal.tsx b/frontend/components/common/ScreenModal.tsx
index cf0a5edb..f44e2227 100644
--- a/frontend/components/common/ScreenModal.tsx
+++ b/frontend/components/common/ScreenModal.tsx
@@ -31,7 +31,7 @@ interface ScreenModalProps {
 }
 
 export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
-  const { userId } = useAuth();
+  const { userId, userName, user } = useAuth();
 
   const [modalState, setModalState] = useState<ScreenModalState>({
     isOpen: false,
@@ -262,7 +262,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
             // 🆕 apiClient를 named import로 가져오기
             const { apiClient } = await import("@/lib/api/client");
             const params: any = {
-              enableEntityJoin: true,
+              enableEntityJoin: true, // 엔티티 조인 활성화 (모든 엔티티 컬럼 자동 포함)
             };
             if (groupByColumns.length > 0) {
               params.groupByColumns = JSON.stringify(groupByColumns);
@@ -325,7 +325,14 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
               console.log("📥 [ScreenModal] API 응답 원본:", JSON.stringify(response.data, null, 2));
               const normalizedData = normalizeDates(response.data);
               console.log("📥 [ScreenModal] 정규화 후:", JSON.stringify(normalizedData, null, 2));
-              setFormData(normalizedData);
+              
+              // 🔧 배열 데이터는 formData로 설정하지 않음 (SelectedItemsDetailInput만 사용)
+              if (Array.isArray(normalizedData)) {
+                console.log("⚠️ [ScreenModal] 그룹 레코드(배열)는 formData로 설정하지 않음. SelectedItemsDetailInput만 사용합니다.");
+                setFormData(normalizedData); // SelectedItemsDetailInput이 직접 사용
+              } else {
+                setFormData(normalizedData);
+              }
 
               // setFormData 직후 확인
               console.log("🔄 setFormData 호출 완료 (날짜 정규화됨)");
@@ -580,6 +587,9 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
                         id: modalState.screenId!,
                         tableName: screenData.screenInfo?.tableName,
                       }}
+                      userId={userId}
+                      userName={userName}
+                      companyCode={user?.companyCode}
                     />
                   );
                 })}
diff --git a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
index ba27c94e..df134685 100644
--- a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
+++ b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
@@ -42,6 +42,10 @@ interface InteractiveScreenViewerProps {
   onSave?: () => Promise<void>;
   onRefresh?: () => void;
   onFlowRefresh?: () => void;
+  // 🆕 외부에서 전달받는 사용자 정보 (ScreenModal 등에서 사용)
+  userId?: string;
+  userName?: string;
+  companyCode?: string;
 }
 
 export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerProps> = ({
@@ -54,9 +58,24 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
   onSave,
   onRefresh,
   onFlowRefresh,
+  userId: externalUserId,
+  userName: externalUserName,
+  companyCode: externalCompanyCode,
 }) => {
   const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
-  const { userName, user } = useAuth();
+  const { userName: authUserName, user: authUser } = useAuth();
+
+  // 외부에서 전달받은 사용자 정보가 있으면 우선 사용 (ScreenModal 등에서)
+  const userName = externalUserName || authUserName;
+  const user =
+    externalUserId && externalUserId !== authUser?.userId
+      ? {
+          userId: externalUserId,
+          userName: externalUserName || authUserName || "",
+          companyCode: externalCompanyCode || authUser?.companyCode || "",
+          isAdmin: authUser?.isAdmin || false,
+        }
+      : authUser;
   const [localFormData, setLocalFormData] = useState<Record<string, any>>({});
   const [dateValues, setDateValues] = useState<Record<string, Date | undefined>>({});
 
@@ -130,59 +149,55 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
     const handleEnterKey = (e: KeyboardEvent) => {
       if (e.key === "Enter" && !e.shiftKey) {
         const target = e.target as HTMLElement;
-        
+
         // 한글 조합 중이면 무시 (한글 입력 문제 방지)
         if ((e as any).isComposing || e.keyCode === 229) {
           return;
         }
-        
+
         // textarea는 제외 (여러 줄 입력)
         if (target.tagName === "TEXTAREA") {
           return;
         }
-        
+
         // input, select 등의 폼 요소에서만 작동
-        if (
-          target.tagName === "INPUT" ||
-          target.tagName === "SELECT" ||
-          target.getAttribute("role") === "combobox"
-        ) {
+        if (target.tagName === "INPUT" || target.tagName === "SELECT" || target.getAttribute("role") === "combobox") {
           e.preventDefault();
-          
+
           // 모든 포커스 가능한 요소 찾기
           const focusableElements = document.querySelectorAll<HTMLElement>(
-            'input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [role="combobox"]:not([disabled])'
+            'input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [role="combobox"]:not([disabled])',
           );
-          
+
           // 화면에 보이는 순서(Y 좌표 → X 좌표)대로 정렬
           const focusableArray = Array.from(focusableElements).sort((a, b) => {
             const rectA = a.getBoundingClientRect();
             const rectB = b.getBoundingClientRect();
-            
+
             // Y 좌표 차이가 10px 이상이면 Y 좌표로 정렬 (위에서 아래로)
             if (Math.abs(rectA.top - rectB.top) > 10) {
               return rectA.top - rectB.top;
             }
-            
+
             // 같은 줄이면 X 좌표로 정렬 (왼쪽에서 오른쪽으로)
             return rectA.left - rectB.left;
           });
-          
+
           const currentIndex = focusableArray.indexOf(target);
-          
+
           if (currentIndex !== -1 && currentIndex < focusableArray.length - 1) {
             // 다음 요소로 포커스 이동
             const nextElement = focusableArray[currentIndex + 1];
             nextElement.focus();
-            
+
             // select() 제거: 한글 입력 시 이전 필드의 마지막 글자가 복사되는 버그 방지
           }
         }
       }
     };
-    
+
     document.addEventListener("keydown", handleEnterKey);
-    
+
     return () => {
       document.removeEventListener("keydown", handleEnterKey);
     };
@@ -193,31 +208,26 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
     const initAutoInputFields = async () => {
       for (const comp of allComponents) {
         // type: "component" 또는 type: "widget" 모두 처리
-        if (comp.type === 'widget' || comp.type === 'component') {
+        if (comp.type === "widget" || comp.type === "component") {
           const widget = comp as any;
           const fieldName = widget.columnName || widget.id;
-          
+
           // autoFill 처리 (테이블 조회 기반 자동 입력)
           if (widget.autoFill?.enabled || (comp as any).autoFill?.enabled) {
             const autoFillConfig = widget.autoFill || (comp as any).autoFill;
             const currentValue = formData[fieldName];
-            
-            if (currentValue === undefined || currentValue === '') {
+
+            if (currentValue === undefined || currentValue === "") {
               const { sourceTable, filterColumn, userField, displayColumn } = autoFillConfig;
-              
+
               // 사용자 정보에서 필터 값 가져오기
               const userValue = user?.[userField];
-              
+
               if (userValue && sourceTable && filterColumn && displayColumn) {
                 try {
                   const { tableTypeApi } = await import("@/lib/api/screen");
-                  const result = await tableTypeApi.getTableRecord(
-                    sourceTable,
-                    filterColumn,
-                    userValue,
-                    displayColumn
-                  );
-                  
+                  const result = await tableTypeApi.getTableRecord(sourceTable, filterColumn, userValue, displayColumn);
+
                   updateFormData(fieldName, result.value);
                 } catch (error) {
                   console.error(`autoFill 조회 실패: ${fieldName}`, error);
@@ -329,10 +339,13 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
             setFlowSelectedData(selectedData);
             setFlowSelectedStepId(stepId);
           }}
-          onRefresh={onRefresh || (() => {
-            // 부모로부터 전달받은 onRefresh 또는 기본 동작
-            console.log("🔄 InteractiveScreenViewerDynamic onRefresh 호출");
-          })}
+          onRefresh={
+            onRefresh ||
+            (() => {
+              // 부모로부터 전달받은 onRefresh 또는 기본 동작
+              console.log("🔄 InteractiveScreenViewerDynamic onRefresh 호출");
+            })
+          }
           onFlowRefresh={onFlowRefresh}
           onClose={() => {
             // buttonActions.ts가 이미 처리함
@@ -357,7 +370,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
       return React.cloneElement(element, {
         style: {
           ...element.props.style,
-          ...styleWithoutSize,  // width/height 제외한 스타일만 적용
+          ...styleWithoutSize, // width/height 제외한 스타일만 적용
           width: "100%",
           height: "100%",
           minHeight: "100%",
@@ -563,8 +576,8 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
           backgroundColor: config?.backgroundColor || comp.style?.backgroundColor,
           color: config?.textColor || comp.style?.color,
           // 부모 컨테이너 크기에 맞춤
-          width: '100%',
-          height: '100%',
+          width: "100%",
+          height: "100%",
         }}
       >
         {label || "버튼"}
@@ -689,18 +702,18 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
 
   // ✅ 격자 시스템 잔재 제거: style.width, style.height 무시
   const { width: styleWidth, height: styleHeight, ...styleWithoutSize } = style;
-  
+
   // TableSearchWidget의 경우 높이를 자동으로 설정
   const isTableSearchWidget = (component as any).componentId === "table-search-widget";
-  
+
   const componentStyle = {
     position: "absolute" as const,
     left: position?.x || 0,
     top: position?.y || 0,
     zIndex: position?.z || 1,
-    ...styleWithoutSize,  // width/height 제외한 스타일만 먼저 적용
-    width: size?.width || 200,  // size의 픽셀 값이 최종 우선순위
-    height: isTableSearchWidget ? "auto" : (size?.height || 10),
+    ...styleWithoutSize, // width/height 제외한 스타일만 먼저 적용
+    width: size?.width || 200, // size의 픽셀 값이 최종 우선순위
+    height: isTableSearchWidget ? "auto" : size?.height || 10,
     minHeight: isTableSearchWidget ? "48px" : undefined,
   };
 
diff --git a/frontend/components/screen/ScreenList.tsx b/frontend/components/screen/ScreenList.tsx
index 116fa0df..51a09164 100644
--- a/frontend/components/screen/ScreenList.tsx
+++ b/frontend/components/screen/ScreenList.tsx
@@ -125,7 +125,10 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
     screenName: "",
     description: "",
     isActive: "Y",
+    tableName: "",
   });
+  const [tables, setTables] = useState<string[]>([]);
+  const [loadingTables, setLoadingTables] = useState(false);
 
   // 미리보기 관련 상태
   const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
@@ -260,14 +263,31 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
     onScreenSelect(screen);
   };
 
-  const handleEdit = (screen: ScreenDefinition) => {
+  const handleEdit = async (screen: ScreenDefinition) => {
     setScreenToEdit(screen);
     setEditFormData({
       screenName: screen.screenName,
       description: screen.description || "",
       isActive: screen.isActive,
+      tableName: screen.tableName || "",
     });
     setEditDialogOpen(true);
+
+    // 테이블 목록 로드
+    try {
+      setLoadingTables(true);
+      const { tableManagementApi } = await import("@/lib/api/tableManagement");
+      const response = await tableManagementApi.getTableList();
+      if (response.success && response.data) {
+        // tableName만 추출 (camelCase)
+        const tableNames = response.data.map((table: any) => table.tableName);
+        setTables(tableNames);
+      }
+    } catch (error) {
+      console.error("테이블 목록 조회 실패:", error);
+    } finally {
+      setLoadingTables(false);
+    }
   };
 
   const handleEditSave = async () => {
@@ -1180,6 +1200,25 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
                 placeholder="화면명을 입력하세요"
               />
             </div>
+            <div className="space-y-2">
+              <Label htmlFor="edit-tableName">테이블 *</Label>
+              <Select
+                value={editFormData.tableName}
+                onValueChange={(value) => setEditFormData({ ...editFormData, tableName: value })}
+                disabled={loadingTables}
+              >
+                <SelectTrigger id="edit-tableName">
+                  <SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블을 선택하세요"} />
+                </SelectTrigger>
+                <SelectContent>
+                  {tables.map((tableName) => (
+                    <SelectItem key={tableName} value={tableName}>
+                      {tableName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
             <div className="space-y-2">
               <Label htmlFor="edit-description">설명</Label>
               <Textarea
@@ -1210,7 +1249,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
             <Button variant="outline" onClick={() => setEditDialogOpen(false)}>
               취소
             </Button>
-            <Button onClick={handleEditSave} disabled={!editFormData.screenName.trim()}>
+            <Button onClick={handleEditSave} disabled={!editFormData.screenName.trim() || !editFormData.tableName.trim()}>
               저장
             </Button>
           </DialogFooter>
diff --git a/frontend/lib/registry/components/conditional-container/ConditionalSectionViewer.tsx b/frontend/lib/registry/components/conditional-container/ConditionalSectionViewer.tsx
index db5de1e9..c660a0a8 100644
--- a/frontend/lib/registry/components/conditional-container/ConditionalSectionViewer.tsx
+++ b/frontend/lib/registry/components/conditional-container/ConditionalSectionViewer.tsx
@@ -7,6 +7,7 @@ import { cn } from "@/lib/utils";
 import { Loader2 } from "lucide-react";
 import { screenApi } from "@/lib/api/screen";
 import { ComponentData } from "@/types/screen";
+import { useAuth } from "@/hooks/useAuth";
 
 /**
  * 조건부 섹션 뷰어 컴포넌트
@@ -24,6 +25,7 @@ export function ConditionalSectionViewer({
   formData,
   onFormDataChange,
 }: ConditionalSectionViewerProps) {
+  const { userId, userName, user } = useAuth();
   const [isLoading, setIsLoading] = useState(false);
   const [components, setComponents] = useState<ComponentData[]>([]);
   const [screenInfo, setScreenInfo] = useState<{ id: number; tableName?: string } | null>(null);
@@ -142,6 +144,9 @@ export function ConditionalSectionViewer({
                     onClick={() => {}}
                     screenId={screenInfo?.id}
                     tableName={screenInfo?.tableName}
+                    userId={userId}
+                    userName={userName}
+                    companyCode={user?.companyCode}
                     formData={formData}
                     onFormDataChange={onFormDataChange}
                   />
diff --git a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx
index ddb35db6..925ca174 100644
--- a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx
+++ b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx
@@ -45,35 +45,36 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
   // 🆕 URL 파라미터에서 dataSourceId 읽기
   const searchParams = useSearchParams();
   const urlDataSourceId = searchParams?.get("dataSourceId") || undefined;
-  
+
   // 컴포넌트 설정
-  const componentConfig = useMemo(() => ({
-    dataSourceId: component.id || "default",
-    displayColumns: [],
-    additionalFields: [],
-    layout: "grid",
-    inputMode: "inline", // 🆕 기본값
-    showIndex: true,
-    allowRemove: false,
-    emptyMessage: "전달받은 데이터가 없습니다.",
-    targetTable: "",
-    ...config,
-    ...component.config,
-  } as SelectedItemsDetailInputConfig), [config, component.config, component.id]);
+  const componentConfig = useMemo(
+    () =>
+      ({
+        dataSourceId: component.id || "default",
+        displayColumns: [],
+        additionalFields: [],
+        layout: "grid",
+        inputMode: "inline", // 🆕 기본값
+        showIndex: true,
+        allowRemove: false,
+        emptyMessage: "전달받은 데이터가 없습니다.",
+        targetTable: "",
+        ...config,
+        ...component.config,
+      }) as SelectedItemsDetailInputConfig,
+    [config, component.config, component.id],
+  );
 
   // 🆕 dataSourceId 우선순위: URL 파라미터 > 컴포넌트 설정 > component.id
   const dataSourceId = useMemo(
     () => urlDataSourceId || componentConfig.dataSourceId || component.id || "default",
-    [urlDataSourceId, componentConfig.dataSourceId, component.id]
+    [urlDataSourceId, componentConfig.dataSourceId, component.id],
   );
-  
+
   // 전체 레지스트리를 가져와서 컴포넌트 내부에서 필터링 (캐싱 문제 회피)
   const dataRegistry = useModalDataStore((state) => state.dataRegistry);
-  const modalData = useMemo(
-    () => dataRegistry[dataSourceId] || [],
-    [dataRegistry, dataSourceId]
-  );
-  
+  const modalData = useMemo(() => dataRegistry[dataSourceId] || [], [dataRegistry, dataSourceId]);
+
   // 전체 dataRegistry를 사용 (모든 누적 데이터에 접근 가능)
   console.log("📦 [SelectedItemsDetailInput] 사용 가능한 모든 데이터:", {
     keys: Object.keys(dataRegistry),
@@ -82,21 +83,21 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
       count: data.length,
     })),
   });
-  
+
   const updateItemData = useModalDataStore((state) => state.updateItemData);
 
   // 🆕 새로운 데이터 구조: 품목별로 여러 개의 상세 데이터
   const [items, setItems] = useState<ItemData[]>([]);
-  
+
   // 🆕 입력 모드 상태 (modal 모드일 때 사용)
   const [isEditing, setIsEditing] = useState(false);
   const [editingItemId, setEditingItemId] = useState<string | null>(null); // 현재 편집 중인 품목 ID
   const [editingGroupId, setEditingGroupId] = useState<string | null>(null); // 현재 편집 중인 그룹 ID
   const [editingDetailId, setEditingDetailId] = useState<string | null>(null); // 현재 편집 중인 항목 ID
-  
+
   // 🆕 코드 카테고리별 옵션 캐싱
   const [codeOptions, setCodeOptions] = useState<Record<string, Array<{ label: string; value: string }>>>({});
-  
+
   // 디버깅 로그
   useEffect(() => {
     console.log("📍 [SelectedItemsDetailInput] 설정 확인:", {
@@ -108,8 +109,16 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
       isEditing,
       editingItemId,
     });
-  }, [urlDataSourceId, componentConfig.dataSourceId, component.id, dataSourceId, componentConfig.inputMode, isEditing, editingItemId]);
-  
+  }, [
+    urlDataSourceId,
+    componentConfig.dataSourceId,
+    component.id,
+    dataSourceId,
+    componentConfig.inputMode,
+    isEditing,
+    editingItemId,
+  ]);
+
   // 🆕 필드에 codeCategory가 있으면 자동으로 옵션 로드
   useEffect(() => {
     const loadCodeOptions = async () => {
@@ -120,22 +129,22 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
 
       // 🆕 code/category 타입 필드 + codeCategory가 있는 필드 모두 처리
       const codeFields = componentConfig.additionalFields?.filter(
-        (field) => field.inputType === "code" || field.inputType === "category"
+        (field) => field.inputType === "code" || field.inputType === "category",
       );
-      
+
       console.log("🔍 [loadCodeOptions] code/category 필드:", codeFields);
-      
+
       if (!codeFields || codeFields.length === 0) {
         console.log("⚠️ [loadCodeOptions] code/category 타입 필드가 없습니다");
         return;
       }
-      
+
       const newOptions: Record<string, Array<{ label: string; value: string }>> = { ...codeOptions };
-      
+
       // 🆕 대상 테이블의 컬럼 메타데이터에서 codeCategory 가져오기
       const targetTable = componentConfig.targetTable;
       let targetTableColumns: any[] = [];
-      
+
       if (targetTable) {
         try {
           const { tableTypeApi } = await import("@/lib/api/screen");
@@ -145,24 +154,24 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
           console.error("❌ 대상 테이블 컬럼 조회 실패:", error);
         }
       }
-      
+
       for (const field of codeFields) {
         // 이미 로드된 옵션이면 스킵
         if (newOptions[field.name]) {
           console.log(`⏭️ 이미 로드된 옵션 (${field.name})`);
           continue;
         }
-        
+
         try {
           // 🆕 category 타입이면 table_column_category_values에서 로드
           if (field.inputType === "category" && targetTable) {
             console.log(`🔄 카테고리 옵션 로드 시도 (${targetTable}.${field.name})`);
-            
+
             const { getCategoryValues } = await import("@/lib/api/tableCategoryValue");
             const response = await getCategoryValues(targetTable, field.name, false);
-            
-            console.log(`📥 getCategoryValues 응답:`, response);
-            
+
+            console.log("📥 getCategoryValues 응답:", response);
+
             if (response.success && response.data) {
               newOptions[field.name] = response.data.map((item: any) => ({
                 label: item.value_label || item.valueLabel,
@@ -176,23 +185,23 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
             // code 타입이면 기존대로 code_info에서 로드
             // 이미 codeCategory가 있으면 사용
             let codeCategory = field.codeCategory;
-            
+
             // 🆕 codeCategory가 없으면 대상 테이블 컬럼에서 찾기
             if (!codeCategory && targetTableColumns.length > 0) {
               const columnMeta = targetTableColumns.find(
-                (col: any) => (col.columnName || col.column_name) === field.name
+                (col: any) => (col.columnName || col.column_name) === field.name,
               );
               if (columnMeta) {
                 codeCategory = columnMeta.codeCategory || columnMeta.code_category;
                 console.log(`🔍 필드 "${field.name}"의 codeCategory를 메타데이터에서 찾음:`, codeCategory);
               }
             }
-            
+
             if (!codeCategory) {
               console.warn(`⚠️ 필드 "${field.name}"의 codeCategory를 찾을 수 없습니다`);
               continue;
             }
-            
+
             const response = await commonCodeApi.options.getOptions(codeCategory);
             if (response.success && response.data) {
               newOptions[field.name] = response.data.map((opt) => ({
@@ -206,10 +215,10 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
           console.error(`❌ 옵션 로드 실패 (${field.name}):`, error);
         }
       }
-      
+
       setCodeOptions(newOptions);
     };
-    
+
     loadCodeOptions();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [componentConfig.additionalFields, componentConfig.targetTable]);
@@ -219,45 +228,101 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
     // 🆕 수정 모드: formData에서 데이터 로드 (URL에 mode=edit이 있으면)
     const urlParams = new URLSearchParams(window.location.search);
     const mode = urlParams.get("mode");
-    
+
     if (mode === "edit" && formData) {
       // 배열인지 단일 객체인지 확인
       const isArray = Array.isArray(formData);
       const dataArray = isArray ? formData : [formData];
-      
+
       if (dataArray.length === 0 || (dataArray.length === 1 && Object.keys(dataArray[0]).length === 0)) {
         console.warn("⚠️ [SelectedItemsDetailInput] formData가 비어있음");
         return;
       }
-      
-      console.log(`📝 [SelectedItemsDetailInput] 수정 모드 - ${isArray ? '그룹 레코드' : '단일 레코드'} (${dataArray.length}개)`);
+
+      console.log(
+        `📝 [SelectedItemsDetailInput] 수정 모드 - ${isArray ? "그룹 레코드" : "단일 레코드"} (${dataArray.length}개)`,
+      );
       console.log("📝 [SelectedItemsDetailInput] formData (JSON):", JSON.stringify(dataArray, null, 2));
-      
+
       const groups = componentConfig.fieldGroups || [];
       const additionalFields = componentConfig.additionalFields || [];
-      
+
       // 🆕 첫 번째 레코드의 originalData를 기본 항목으로 설정
       const firstRecord = dataArray[0];
       const mainFieldGroups: Record<string, GroupEntry[]> = {};
-      
+
       // 🔧 각 그룹별로 고유한 엔트리만 수집 (중복 제거)
       groups.forEach((group) => {
         const groupFields = additionalFields.filter((field: any) => field.groupId === group.id);
-        
+
         if (groupFields.length === 0) {
           mainFieldGroups[group.id] = [];
           return;
         }
-        
+
         // 🆕 각 레코드에서 그룹 데이터 추출
         const entriesMap = new Map<string, GroupEntry>();
-        
+
         dataArray.forEach((record) => {
           const entryData: Record<string, any> = {};
-          
+
           groupFields.forEach((field: any) => {
             let fieldValue = record[field.name];
-            
+
+            // 🆕 값이 없으면 autoFillFrom 로직 적용
+            if ((fieldValue === undefined || fieldValue === null) && field.autoFillFrom) {
+              let sourceData: any = null;
+
+              if (field.autoFillFromTable) {
+                // 특정 테이블에서 가져오기
+                const tableData = dataRegistry[field.autoFillFromTable];
+                if (tableData && tableData.length > 0) {
+                  sourceData = tableData[0].originalData || tableData[0];
+                  console.log(
+                    `✅ [수정모드 autoFill] ${field.name} ← ${field.autoFillFrom} (테이블: ${field.autoFillFromTable}):`,
+                    sourceData?.[field.autoFillFrom],
+                  );
+                } else {
+                  // 🆕 dataRegistry에 없으면 record에서 직접 찾기 (Entity Join된 경우)
+                  sourceData = record;
+                  console.log(
+                    `⚠️ [수정모드 autoFill] dataRegistry에 ${field.autoFillFromTable} 없음, record에서 직접 찾기`,
+                  );
+                }
+              } else {
+                // record 자체에서 가져오기
+                sourceData = record;
+                console.log(
+                  `✅ [수정모드 autoFill] ${field.name} ← ${field.autoFillFrom} (레코드):`,
+                  sourceData?.[field.autoFillFrom],
+                );
+              }
+
+              if (sourceData && sourceData[field.autoFillFrom] !== undefined) {
+                fieldValue = sourceData[field.autoFillFrom];
+                console.log(`✅ [수정모드 autoFill] ${field.name} 값 설정:`, fieldValue);
+              } else {
+                // 🆕 Entity Join의 경우 sourceColumn_fieldName 형식으로도 찾기
+                // 예: item_id_standard_price, customer_id_customer_name
+                // autoFillFromTable에서 어떤 sourceColumn인지 추론
+                const possibleKeys = Object.keys(sourceData || {}).filter((key) =>
+                  key.endsWith(`_${field.autoFillFrom}`),
+                );
+
+                if (possibleKeys.length > 0) {
+                  fieldValue = sourceData[possibleKeys[0]];
+                  console.log(
+                    `✅ [수정모드 autoFill] ${field.name} Entity Join 키로 찾음 (${possibleKeys[0]}):`,
+                    fieldValue,
+                  );
+                } else {
+                  console.warn(
+                    `⚠️ [수정모드 autoFill] ${field.name} ← ${field.autoFillFrom} 실패 (시도한 키들: ${field.autoFillFrom}, *_${field.autoFillFrom})`,
+                  );
+                }
+              }
+            }
+
             // 🔧 값이 없으면 기본값 사용 (false, 0, "" 등 falsy 값도 유효한 값으로 처리)
             if (fieldValue === undefined || fieldValue === null) {
               // 기본값이 있으면 사용, 없으면 필드 타입에 따라 기본값 설정
@@ -270,7 +335,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                 return;
               }
             }
-            
+
             // 🔧 날짜 타입이면 YYYY-MM-DD 형식으로 변환 (타임존 제거)
             if (field.type === "date" || field.type === "datetime") {
               const dateStr = String(fieldValue);
@@ -280,13 +345,13 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                 fieldValue = `${year}-${month}-${day}`; // ISO 형식 유지 (시간 제거)
               }
             }
-            
+
             entryData[field.name] = fieldValue;
           });
-          
+
           // 🔑 모든 필드 값을 합쳐서 고유 키 생성 (중복 제거 기준)
           const entryKey = JSON.stringify(entryData);
-          
+
           if (!entriesMap.has(entryKey)) {
             entriesMap.set(entryKey, {
               id: `${group.id}_entry_${entriesMap.size + 1}`,
@@ -294,23 +359,23 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
             });
           }
         });
-        
+
         mainFieldGroups[group.id] = Array.from(entriesMap.values());
       });
-      
+
       // 그룹이 없으면 기본 그룹 생성
       if (groups.length === 0) {
         mainFieldGroups["default"] = [];
       }
-      
+
       const newItem: ItemData = {
         id: String(firstRecord.id || firstRecord.item_id || "edit"),
         originalData: firstRecord, // 첫 번째 레코드를 대표 데이터로 사용
         fieldGroups: mainFieldGroups,
       };
-      
+
       setItems([newItem]);
-      
+
       console.log("✅ [SelectedItemsDetailInput] 수정 모드 데이터 로드 완료:", {
         recordCount: dataArray.length,
         item: newItem,
@@ -319,41 +384,41 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
       });
       return;
     }
-    
+
     // 생성 모드: modalData에서 데이터 로드
     if (modalData && modalData.length > 0) {
       console.log("📦 [SelectedItemsDetailInput] 데이터 수신:", modalData);
-      
+
       // 🆕 각 품목마다 빈 fieldGroups 객체를 가진 ItemData 생성
       const groups = componentConfig.fieldGroups || [];
       const newItems: ItemData[] = modalData.map((item) => {
         const fieldGroups: Record<string, GroupEntry[]> = {};
-        
+
         // 각 그룹에 대해 빈 배열 초기화
         groups.forEach((group) => {
           fieldGroups[group.id] = [];
         });
-        
+
         // 그룹이 없으면 기본 그룹 생성
         if (groups.length === 0) {
           fieldGroups["default"] = [];
         }
-        
+
         // 🔧 modalData의 구조 확인: item.originalData가 있으면 그것을 사용, 없으면 item 자체를 사용
         const actualData = (item as any).originalData || item;
-        
+
         return {
           id: String(item.id),
-          originalData: actualData,  // 🔧 실제 데이터 추출
+          originalData: actualData, // 🔧 실제 데이터 추출
           fieldGroups,
         };
       });
-      
+
       setItems(newItems);
-      
+
       console.log("✅ [SelectedItemsDetailInput] items 설정 완료:", {
         itemsLength: newItems.length,
-        groups: groups.map(g => g.id),
+        groups: groups.map((g) => g.id),
         firstItem: newItems[0],
       });
     }
@@ -361,64 +426,67 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
   }, [modalData, component.id, componentConfig.fieldGroups, formData]); // formData 의존성 추가
 
   // 🆕 Cartesian Product 생성 함수 (items에서 모든 그룹의 조합을 생성)
-  const generateCartesianProduct = useCallback((itemsList: ItemData[]): Record<string, any>[] => {
-    const allRecords: Record<string, any>[] = [];
-    const groups = componentConfig.fieldGroups || [];
-    const additionalFields = componentConfig.additionalFields || [];
+  const generateCartesianProduct = useCallback(
+    (itemsList: ItemData[]): Record<string, any>[] => {
+      const allRecords: Record<string, any>[] = [];
+      const groups = componentConfig.fieldGroups || [];
+      const additionalFields = componentConfig.additionalFields || [];
 
-    itemsList.forEach((item) => {
-      // 각 그룹의 엔트리 배열들을 준비
-      const groupEntriesArrays: GroupEntry[][] = groups.map(group => item.fieldGroups[group.id] || []);
+      itemsList.forEach((item) => {
+        // 각 그룹의 엔트리 배열들을 준비
+        const groupEntriesArrays: GroupEntry[][] = groups.map((group) => item.fieldGroups[group.id] || []);
 
-      // Cartesian Product 재귀 함수
-      const cartesian = (arrays: GroupEntry[][], currentIndex: number, currentCombination: Record<string, any>) => {
-        if (currentIndex === arrays.length) {
-          // 모든 그룹을 순회했으면 조합 완성
-          allRecords.push({ ...currentCombination });
-          return;
-        }
+        // Cartesian Product 재귀 함수
+        const cartesian = (arrays: GroupEntry[][], currentIndex: number, currentCombination: Record<string, any>) => {
+          if (currentIndex === arrays.length) {
+            // 모든 그룹을 순회했으면 조합 완성
+            allRecords.push({ ...currentCombination });
+            return;
+          }
 
-        const currentGroupEntries = arrays[currentIndex];
-        if (currentGroupEntries.length === 0) {
-          // 현재 그룹에 데이터가 없으면 빈 조합으로 다음 그룹 진행
-          cartesian(arrays, currentIndex + 1, currentCombination);
-          return;
-        }
+          const currentGroupEntries = arrays[currentIndex];
+          if (currentGroupEntries.length === 0) {
+            // 현재 그룹에 데이터가 없으면 빈 조합으로 다음 그룹 진행
+            cartesian(arrays, currentIndex + 1, currentCombination);
+            return;
+          }
 
-        // 현재 그룹의 각 엔트리마다 재귀
-        currentGroupEntries.forEach(entry => {
-          const newCombination = { ...currentCombination };
-          
-          // 현재 그룹의 필드들을 조합에 추가
-          const groupFields = additionalFields.filter(f => f.groupId === groups[currentIndex].id);
-          groupFields.forEach(field => {
-            if (entry[field.name] !== undefined) {
-              newCombination[field.name] = entry[field.name];
-            }
+          // 현재 그룹의 각 엔트리마다 재귀
+          currentGroupEntries.forEach((entry) => {
+            const newCombination = { ...currentCombination };
+
+            // 현재 그룹의 필드들을 조합에 추가
+            const groupFields = additionalFields.filter((f) => f.groupId === groups[currentIndex].id);
+            groupFields.forEach((field) => {
+              if (entry[field.name] !== undefined) {
+                newCombination[field.name] = entry[field.name];
+              }
+            });
+
+            cartesian(arrays, currentIndex + 1, newCombination);
           });
-          
-          cartesian(arrays, currentIndex + 1, newCombination);
-        });
-      };
+        };
 
-      // 재귀 시작
-      cartesian(groupEntriesArrays, 0, {});
-    });
+        // 재귀 시작
+        cartesian(groupEntriesArrays, 0, {});
+      });
 
-    console.log("🔀 [generateCartesianProduct] 생성된 레코드:", {
-      count: allRecords.length,
-      records: allRecords,
-    });
+      console.log("🔀 [generateCartesianProduct] 생성된 레코드:", {
+        count: allRecords.length,
+        records: allRecords,
+      });
 
-    return allRecords;
-  }, [componentConfig.fieldGroups, componentConfig.additionalFields]);
+      return allRecords;
+    },
+    [componentConfig.fieldGroups, componentConfig.additionalFields],
+  );
 
   // 🆕 저장 요청 시에만 데이터 전달 (이벤트 리스너 방식)
   useEffect(() => {
     const handleSaveRequest = async (event: Event) => {
       // component.id를 문자열로 안전하게 변환
       const componentKey = String(component.id || "selected_items");
-      
+
       console.log("🔔 [SelectedItemsDetailInput] beforeFormSave 이벤트 수신!", {
         itemsCount: items.length,
         hasOnFormDataChange: !!onFormDataChange,
@@ -426,7 +494,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
         componentIdType: typeof component.id,
         componentKey,
       });
-      
+
       if (items.length === 0) {
         console.warn("⚠️ [SelectedItemsDetailInput] 저장할 데이터 없음");
         return;
@@ -452,7 +520,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
 
           // 부모 키 추출 (parentDataMapping에서)
           const parentKeys: Record<string, any> = {};
-          
+
           // formData 또는 items[0].originalData에서 부모 데이터 가져오기
           // formData가 배열이면 첫 번째 항목 사용
           let sourceData: any = formData;
@@ -461,22 +529,29 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
           } else if (!formData) {
             sourceData = items[0]?.originalData || {};
           }
-          
+
           console.log("📦 [SelectedItemsDetailInput] 부모 데이터 소스:", {
             formDataType: Array.isArray(formData) ? "배열" : typeof formData,
             sourceData,
             sourceDataKeys: Object.keys(sourceData),
             parentDataMapping: componentConfig.parentDataMapping,
           });
-          
-          console.log("🔍 [SelectedItemsDetailInput] sourceData 전체 내용 (JSON):", JSON.stringify(sourceData, null, 2));
-          
+
+          console.log(
+            "🔍 [SelectedItemsDetailInput] sourceData 전체 내용 (JSON):",
+            JSON.stringify(sourceData, null, 2),
+          );
+
           componentConfig.parentDataMapping.forEach((mapping) => {
-            const value = sourceData[mapping.sourceField];
+            // 🆕 Entity Join 필드도 처리 (예: customer_code -> customer_id_customer_code)
+            const value = getFieldValue(sourceData, mapping.sourceField);
             if (value !== undefined && value !== null) {
               parentKeys[mapping.targetField] = value;
+              console.log(`✅ [parentKeys] ${mapping.sourceField} → ${mapping.targetField}:`, value);
             } else {
-              console.warn(`⚠️ [SelectedItemsDetailInput] 부모 키 누락: ${mapping.sourceField} → ${mapping.targetField}`);
+              console.warn(
+                `⚠️ [SelectedItemsDetailInput] 부모 키 누락: ${mapping.sourceField} → ${mapping.targetField}`,
+              );
             }
           });
 
@@ -484,7 +559,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
 
           // items를 Cartesian Product로 변환
           const records = generateCartesianProduct(items);
-          
+
           console.log("📦 [SelectedItemsDetailInput] UPSERT 레코드:", {
             parentKeys,
             recordCount: records.length,
@@ -494,12 +569,32 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
           // targetTable 검증
           if (!componentConfig.targetTable) {
             console.error("❌ [SelectedItemsDetailInput] targetTable이 설정되지 않았습니다!");
-            window.dispatchEvent(new CustomEvent("formSaveError", {
-              detail: { message: "대상 테이블이 설정되지 않았습니다." },
-            }));
+            window.dispatchEvent(
+              new CustomEvent("formSaveError", {
+                detail: { message: "대상 테이블이 설정되지 않았습니다." },
+              }),
+            );
+
+            // 🆕 기본 저장 건너뛰기
+            if (event instanceof CustomEvent && event.detail) {
+              event.detail.skipDefaultSave = true;
+            }
             return;
           }
 
+          // 🆕 먼저 기본 저장 로직 건너뛰기 설정 (UPSERT 전에!)
+          if (event instanceof CustomEvent) {
+            if (!event.detail) {
+              console.warn("⚠️ [SelectedItemsDetailInput] event.detail이 없습니다! 새로 생성합니다.");
+              // @ts-ignore - detail 재정의
+              event.detail = {};
+            }
+            event.detail.skipDefaultSave = true;
+            console.log("🚫 [SelectedItemsDetailInput] skipDefaultSave = true (UPSERT 전)", event.detail);
+          } else {
+            console.error("❌ [SelectedItemsDetailInput] event가 CustomEvent가 아닙니다!", event);
+          }
+
           console.log("🎯 [SelectedItemsDetailInput] targetTable:", componentConfig.targetTable);
           console.log("📡 [SelectedItemsDetailInput] UPSERT API 호출 직전:", {
             tableName: componentConfig.targetTable,
@@ -511,11 +606,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
 
           // UPSERT API 호출
           const { dataApi } = await import("@/lib/api/data");
-          const result = await dataApi.upsertGroupedRecords(
-            componentConfig.targetTable,
-            parentKeys,
-            records
-          );
+          const result = await dataApi.upsertGroupedRecords(componentConfig.targetTable, parentKeys, records);
 
           if (result.success) {
             console.log("✅ [SelectedItemsDetailInput] UPSERT 성공:", {
@@ -525,44 +616,49 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
             });
 
             // 저장 성공 이벤트 발생
-            window.dispatchEvent(new CustomEvent("formSaveSuccess", {
-              detail: { message: "데이터가 저장되었습니다." },
-            }));
+            window.dispatchEvent(
+              new CustomEvent("formSaveSuccess", {
+                detail: { message: "데이터가 저장되었습니다." },
+              }),
+            );
           } else {
             console.error("❌ [SelectedItemsDetailInput] UPSERT 실패:", result.error);
-            window.dispatchEvent(new CustomEvent("formSaveError", {
-              detail: { message: result.error || "데이터 저장 실패" },
-            }));
+            window.dispatchEvent(
+              new CustomEvent("formSaveError", {
+                detail: { message: result.error || "데이터 저장 실패" },
+              }),
+            );
           }
-
-          // event.preventDefault() 역할
-          if (event instanceof CustomEvent && event.detail) {
-            event.detail.skipDefaultSave = true; // 기본 저장 로직 건너뛰기
-          }
-
         } catch (error) {
           console.error("❌ [SelectedItemsDetailInput] UPSERT 오류:", error);
-          window.dispatchEvent(new CustomEvent("formSaveError", {
-            detail: { message: "데이터 저장 중 오류가 발생했습니다." },
-          }));
+          window.dispatchEvent(
+            new CustomEvent("formSaveError", {
+              detail: { message: "데이터 저장 중 오류가 발생했습니다." },
+            }),
+          );
+
+          // 🆕 오류 발생 시에도 기본 저장 건너뛰기 (중복 저장 방지)
+          if (event instanceof CustomEvent && event.detail) {
+            event.detail.skipDefaultSave = true;
+          }
         }
       } else {
         // 📝 생성 모드: 기존 로직 (Cartesian Product 생성 후 formData에 추가)
         console.log("📝 [SelectedItemsDetailInput] 생성 모드: 기존 저장 로직 사용");
-        
+
         console.log("📝 [SelectedItemsDetailInput] 저장 데이터 준비:", {
           key: componentKey,
           itemsCount: items.length,
           firstItem: items[0],
         });
-        
+
         // ✅ CustomEvent의 detail에 데이터 첨부
         if (event instanceof CustomEvent && event.detail) {
           // context.formData에 직접 추가
           event.detail.formData[componentKey] = items;
           console.log("✅ [SelectedItemsDetailInput] context.formData에 데이터 직접 추가 완료");
         }
-        
+
         // 기존 onFormDataChange도 호출 (호환성)
         if (onFormDataChange) {
           onFormDataChange(componentKey, items);
@@ -572,7 +668,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
 
     // 저장 버튼 클릭 시 데이터 수집
     window.addEventListener("beforeFormSave", handleSaveRequest as EventListener);
-    
+
     return () => {
       window.removeEventListener("beforeFormSave", handleSaveRequest as EventListener);
     };
@@ -601,123 +697,129 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
   };
 
   // 🆕 실시간 단가 계산 함수 (설정 기반 + 카테고리 매핑)
-  const calculatePrice = useCallback((entry: GroupEntry): number => {
-    // 자동 계산 설정이 없으면 계산하지 않음
-    if (!componentConfig.autoCalculation) return 0;
-    
-    const { inputFields, valueMapping } = componentConfig.autoCalculation;
-    
-    // 기본 단가
-    const basePrice = parseFloat(entry[inputFields.basePrice] || "0");
-    if (basePrice === 0) return 0;
-    
-    let price = basePrice;
-    
-    // 1단계: 할인 적용
-    const discountTypeValue = entry[inputFields.discountType];
-    const discountValue = parseFloat(entry[inputFields.discountValue] || "0");
-    
-    // 매핑을 통해 실제 연산 타입 결정
-    const discountOperation = valueMapping?.discountType?.[discountTypeValue] || "none";
-    
-    if (discountOperation === "rate") {
-      price = price * (1 - discountValue / 100);
-    } else if (discountOperation === "amount") {
-      price = price - discountValue;
-    }
-    
-    // 2단계: 반올림 적용
-    const roundingTypeValue = entry[inputFields.roundingType];
-    const roundingUnitValue = entry[inputFields.roundingUnit];
-    
-    // 매핑을 통해 실제 연산 타입 결정
-    const roundingOperation = valueMapping?.roundingType?.[roundingTypeValue] || "none";
-    const unit = valueMapping?.roundingUnit?.[roundingUnitValue] || parseFloat(roundingUnitValue) || 1;
-    
-    if (roundingOperation === "round") {
-      price = Math.round(price / unit) * unit;
-    } else if (roundingOperation === "floor") {
-      price = Math.floor(price / unit) * unit;
-    } else if (roundingOperation === "ceil") {
-      price = Math.ceil(price / unit) * unit;
-    }
-    
-    return price;
-  }, [componentConfig.autoCalculation]);
+  const calculatePrice = useCallback(
+    (entry: GroupEntry): number => {
+      // 자동 계산 설정이 없으면 계산하지 않음
+      if (!componentConfig.autoCalculation) return 0;
+
+      const { inputFields, valueMapping } = componentConfig.autoCalculation;
+
+      // 기본 단가
+      const basePrice = parseFloat(entry[inputFields.basePrice] || "0");
+      if (basePrice === 0) return 0;
+
+      let price = basePrice;
+
+      // 1단계: 할인 적용
+      const discountTypeValue = entry[inputFields.discountType];
+      const discountValue = parseFloat(entry[inputFields.discountValue] || "0");
+
+      // 매핑을 통해 실제 연산 타입 결정
+      const discountOperation = valueMapping?.discountType?.[discountTypeValue] || "none";
+
+      if (discountOperation === "rate") {
+        price = price * (1 - discountValue / 100);
+      } else if (discountOperation === "amount") {
+        price = price - discountValue;
+      }
+
+      // 2단계: 반올림 적용
+      const roundingTypeValue = entry[inputFields.roundingType];
+      const roundingUnitValue = entry[inputFields.roundingUnit];
+
+      // 매핑을 통해 실제 연산 타입 결정
+      const roundingOperation = valueMapping?.roundingType?.[roundingTypeValue] || "none";
+      const unit = valueMapping?.roundingUnit?.[roundingUnitValue] || parseFloat(roundingUnitValue) || 1;
+
+      if (roundingOperation === "round") {
+        price = Math.round(price / unit) * unit;
+      } else if (roundingOperation === "floor") {
+        price = Math.floor(price / unit) * unit;
+      } else if (roundingOperation === "ceil") {
+        price = Math.ceil(price / unit) * unit;
+      }
+
+      return price;
+    },
+    [componentConfig.autoCalculation],
+  );
 
   // 🆕 그룹별 필드 변경 핸들러: itemId + groupId + entryId + fieldName
-  const handleFieldChange = useCallback((itemId: string, groupId: string, entryId: string, fieldName: string, value: any) => {
-    console.log("📝 [handleFieldChange] 필드 값 변경:", {
-      itemId,
-      groupId,
-      entryId,
-      fieldName,
-      value,
-    });
-    
-    setItems((prevItems) => {
-      return prevItems.map((item) => {
-        if (item.id !== itemId) return item;
-        
-        const groupEntries = item.fieldGroups[groupId] || [];
-        const existingEntryIndex = groupEntries.findIndex((e) => e.id === entryId);
-        
-        if (existingEntryIndex >= 0) {
-          // 기존 entry 업데이트 (항상 이 경로로만 진입)
-          const updatedEntries = [...groupEntries];
-          const updatedEntry = {
-            ...updatedEntries[existingEntryIndex],
-            [fieldName]: value,
-          };
-          
-          console.log("✅ [handleFieldChange] Entry 업데이트:", {
-            beforeKeys: Object.keys(updatedEntries[existingEntryIndex]),
-            afterKeys: Object.keys(updatedEntry),
-            updatedEntry,
-          });
-          
-          // 🆕 가격 관련 필드가 변경되면 자동 계산
-          if (componentConfig.autoCalculation) {
-            const { inputFields, targetField } = componentConfig.autoCalculation;
-            const priceRelatedFields = [
-              inputFields.basePrice,
-              inputFields.discountType,
-              inputFields.discountValue,
-              inputFields.roundingType,
-              inputFields.roundingUnit,
-            ];
-            
-            if (priceRelatedFields.includes(fieldName)) {
-              const calculatedPrice = calculatePrice(updatedEntry);
-              updatedEntry[targetField] = calculatedPrice;
-              console.log("💰 [자동 계산]", {
-                basePrice: updatedEntry[inputFields.basePrice],
-                discountType: updatedEntry[inputFields.discountType],
-                discountValue: updatedEntry[inputFields.discountValue],
-                roundingType: updatedEntry[inputFields.roundingType],
-                roundingUnit: updatedEntry[inputFields.roundingUnit],
-                calculatedPrice,
-                targetField,
-              });
-            }
-          }
-          
-          updatedEntries[existingEntryIndex] = updatedEntry;
-          return {
-            ...item,
-            fieldGroups: {
-              ...item.fieldGroups,
-              [groupId]: updatedEntries,
-            },
-          };
-        } else {
-          // 이 경로는 발생하면 안 됨 (handleAddGroupEntry에서 미리 추가함)
-          console.warn("⚠️ entry가 없는데 handleFieldChange 호출됨:", { itemId, groupId, entryId });
-          return item;
-        }
+  const handleFieldChange = useCallback(
+    (itemId: string, groupId: string, entryId: string, fieldName: string, value: any) => {
+      console.log("📝 [handleFieldChange] 필드 값 변경:", {
+        itemId,
+        groupId,
+        entryId,
+        fieldName,
+        value,
       });
-    });
-  }, [calculatePrice]);
+
+      setItems((prevItems) => {
+        return prevItems.map((item) => {
+          if (item.id !== itemId) return item;
+
+          const groupEntries = item.fieldGroups[groupId] || [];
+          const existingEntryIndex = groupEntries.findIndex((e) => e.id === entryId);
+
+          if (existingEntryIndex >= 0) {
+            // 기존 entry 업데이트 (항상 이 경로로만 진입)
+            const updatedEntries = [...groupEntries];
+            const updatedEntry = {
+              ...updatedEntries[existingEntryIndex],
+              [fieldName]: value,
+            };
+
+            console.log("✅ [handleFieldChange] Entry 업데이트:", {
+              beforeKeys: Object.keys(updatedEntries[existingEntryIndex]),
+              afterKeys: Object.keys(updatedEntry),
+              updatedEntry,
+            });
+
+            // 🆕 가격 관련 필드가 변경되면 자동 계산
+            if (componentConfig.autoCalculation) {
+              const { inputFields, targetField } = componentConfig.autoCalculation;
+              const priceRelatedFields = [
+                inputFields.basePrice,
+                inputFields.discountType,
+                inputFields.discountValue,
+                inputFields.roundingType,
+                inputFields.roundingUnit,
+              ];
+
+              if (priceRelatedFields.includes(fieldName)) {
+                const calculatedPrice = calculatePrice(updatedEntry);
+                updatedEntry[targetField] = calculatedPrice;
+                console.log("💰 [자동 계산]", {
+                  basePrice: updatedEntry[inputFields.basePrice],
+                  discountType: updatedEntry[inputFields.discountType],
+                  discountValue: updatedEntry[inputFields.discountValue],
+                  roundingType: updatedEntry[inputFields.roundingType],
+                  roundingUnit: updatedEntry[inputFields.roundingUnit],
+                  calculatedPrice,
+                  targetField,
+                });
+              }
+            }
+
+            updatedEntries[existingEntryIndex] = updatedEntry;
+            return {
+              ...item,
+              fieldGroups: {
+                ...item.fieldGroups,
+                [groupId]: updatedEntries,
+              },
+            };
+          } else {
+            // 이 경로는 발생하면 안 됨 (handleAddGroupEntry에서 미리 추가함)
+            console.warn("⚠️ entry가 없는데 handleFieldChange 호출됨:", { itemId, groupId, entryId });
+            return item;
+          }
+        });
+      });
+    },
+    [calculatePrice],
+  );
 
   // 🆕 품목 제거 핸들러
   const handleRemoveItem = (itemId: string) => {
@@ -727,45 +829,60 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
   // 🆕 그룹 항목 추가 핸들러 (특정 그룹에 새 항목 추가)
   const handleAddGroupEntry = (itemId: string, groupId: string) => {
     const newEntryId = `entry-${Date.now()}`;
-    
+
     // 🔧 미리 빈 entry를 추가하여 리렌더링 방지 (autoFillFrom 처리)
     setItems((prevItems) => {
       return prevItems.map((item) => {
         if (item.id !== itemId) return item;
-        
+
         const groupEntries = item.fieldGroups[groupId] || [];
         const newEntry: GroupEntry = { id: newEntryId };
-        
+
         // 🆕 autoFillFrom 필드 자동 채우기 (tableName으로 직접 접근)
-        const groupFields = (componentConfig.additionalFields || []).filter(
-          (f) => f.groupId === groupId
-        );
-        
+        const groupFields = (componentConfig.additionalFields || []).filter((f) => f.groupId === groupId);
+
         groupFields.forEach((field) => {
           if (!field.autoFillFrom) return;
-          
+
           // 데이터 소스 결정
           let sourceData: any = null;
-          
+
           if (field.autoFillFromTable) {
             // 특정 테이블에서 가져오기
             const tableData = dataRegistry[field.autoFillFromTable];
             if (tableData && tableData.length > 0) {
               // 첫 번째 항목 사용 (또는 매칭 로직 추가 가능)
               sourceData = tableData[0].originalData || tableData[0];
-              console.log(`✅ [autoFill] ${field.name} ← ${field.autoFillFrom} (테이블: ${field.autoFillFromTable}):`, sourceData[field.autoFillFrom]);
+              console.log(
+                `✅ [autoFill 추가] ${field.name} ← ${field.autoFillFrom} (테이블: ${field.autoFillFromTable}):`,
+                sourceData?.[field.autoFillFrom],
+              );
+            } else {
+              // 🆕 dataRegistry에 없으면 item.originalData에서 찾기 (수정 모드)
+              sourceData = item.originalData;
+              console.log(`⚠️ [autoFill 추가] dataRegistry에 ${field.autoFillFromTable} 없음, originalData에서 찾기`);
             }
           } else {
             // 주 데이터 소스 (item.originalData) 사용
             sourceData = item.originalData;
-            console.log(`✅ [autoFill] ${field.name} ← ${field.autoFillFrom} (주 소스):`, sourceData[field.autoFillFrom]);
+            console.log(
+              `✅ [autoFill 추가] ${field.name} ← ${field.autoFillFrom} (주 소스):`,
+              sourceData?.[field.autoFillFrom],
+            );
           }
-          
-          if (sourceData && sourceData[field.autoFillFrom] !== undefined) {
-            newEntry[field.name] = sourceData[field.autoFillFrom];
+
+          // 🆕 getFieldValue 사용하여 Entity Join 필드도 찾기
+          if (sourceData) {
+            const fieldValue = getFieldValue(sourceData, field.autoFillFrom);
+            if (fieldValue !== undefined && fieldValue !== null) {
+              newEntry[field.name] = fieldValue;
+              console.log(`✅ [autoFill 추가] ${field.name} 값 설정:`, fieldValue);
+            } else {
+              console.warn(`⚠️ [autoFill 추가] ${field.name} ← ${field.autoFillFrom} 실패`);
+            }
           }
         });
-        
+
         return {
           ...item,
           fieldGroups: {
@@ -775,7 +892,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
         };
       });
     });
-    
+
     setIsEditing(true);
     setEditingItemId(itemId);
     setEditingDetailId(newEntryId);
@@ -794,7 +911,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
             [groupId]: (item.fieldGroups[groupId] || []).filter((e) => e.id !== entryId),
           },
         };
-      })
+      }),
     );
   };
 
@@ -829,7 +946,13 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
   };
 
   // 🆕 개별 필드 렌더링 (itemId, groupId, entryId, entry 데이터 전달)
-  const renderField = (field: AdditionalFieldDefinition, itemId: string, groupId: string, entryId: string, entry: GroupEntry) => {
+  const renderField = (
+    field: AdditionalFieldDefinition,
+    itemId: string,
+    groupId: string,
+    entryId: string,
+    entry: GroupEntry,
+  ) => {
     const value = entry[field.name] || field.defaultValue || "";
 
     // 🆕 계산된 필드는 읽기 전용 (자동 계산 설정 기반)
@@ -871,7 +994,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
         if (isCalculatedField) {
           const numericValue = parseFloat(value) || 0;
           const formattedValue = new Intl.NumberFormat("ko-KR").format(numericValue);
-          
+
           return (
             <div className="relative">
               <Input
@@ -880,17 +1003,15 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                 disabled
                 className={cn(
                   "h-10 text-sm",
-                  "bg-primary/10 border-primary/30 font-semibold text-primary",
-                  "cursor-not-allowed"
+                  "bg-primary/10 border-primary/30 text-primary font-semibold",
+                  "cursor-not-allowed",
                 )}
               />
-              <div className="absolute right-2 top-1/2 -translate-y-1/2 text-[10px] text-primary/70">
-                자동 계산
-              </div>
+              <div className="text-primary/70 absolute top-1/2 right-2 -translate-y-1/2 text-[10px]">자동 계산</div>
             </div>
           );
         }
-        
+
         return (
           <Input
             {...commonProps}
@@ -917,7 +1038,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                 target.showPicker();
               }
             }}
-            className="h-10 text-sm cursor-pointer"
+            className="h-10 cursor-pointer text-sm"
           />
         );
 
@@ -947,16 +1068,16 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
       case "category":
         // 🆕 옵션을 field.name 또는 field.codeCategory 키로 찾기
         let categoryOptions = field.options; // 기본값
-        
+
         // 1순위: 필드 이름으로 직접 찾기 (category 타입에서 사용)
         if (codeOptions[field.name]) {
           categoryOptions = codeOptions[field.name];
-        } 
+        }
         // 2순위: codeCategory로 찾기 (code 타입에서 사용)
         else if (field.codeCategory && codeOptions[field.codeCategory]) {
           categoryOptions = codeOptions[field.codeCategory];
         }
-        
+
         return (
           <Select
             value={value || ""}
@@ -976,9 +1097,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                     </SelectItem>
                   ))
               ) : (
-                <div className="py-6 text-center text-xs text-muted-foreground">
-                  옵션 로딩 중...
-                </div>
+                <div className="text-muted-foreground py-6 text-center text-xs">옵션 로딩 중...</div>
               )}
             </SelectContent>
           </Select>
@@ -1006,11 +1125,13 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
               <SelectValue placeholder={field.placeholder || "선택하세요"} />
             </SelectTrigger>
             <SelectContent>
-              {field.options?.filter((option) => option.value !== "").map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
+              {field.options
+                ?.filter((option) => option.value !== "")
+                .map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
             </SelectContent>
           </Select>
         );
@@ -1029,215 +1150,242 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
     }
   };
 
-  // 🆕 displayItems를 렌더링하는 헬퍼 함수 (그룹별)
-  const renderDisplayItems = useCallback((entry: GroupEntry, item: ItemData, groupId: string) => {
-    // 🆕 해당 그룹의 displayItems 가져오기
-    const group = (componentConfig.fieldGroups || []).find(g => g.id === groupId);
-    const displayItems = group?.displayItems || [];
-    
-    if (displayItems.length === 0) {
-      // displayItems가 없으면 기본 방식 (해당 그룹의 필드만 나열)
-      const fields = (componentConfig.additionalFields || []).filter(f => 
-        componentConfig.fieldGroups && componentConfig.fieldGroups.length > 0 
-          ? f.groupId === groupId 
-          : true
-      );
-      return fields.map((f) => {
-        const value = entry[f.name];
-        if (!value) return "-";
-        
-        const strValue = String(value);
-        
-        // 🔧 ISO 날짜 형식 자동 감지 및 포맷팅 (필드 타입 무관)
-        // ISO 8601 형식: YYYY-MM-DDTHH:mm:ss.sssZ 또는 YYYY-MM-DD
-        const isoDateMatch = strValue.match(/^(\d{4})-(\d{2})-(\d{2})(T|\s|$)/);
-        if (isoDateMatch) {
-          const [, year, month, day] = isoDateMatch;
-          return `${year}.${month}.${day}`;
-        }
-        
-        return strValue;
-      }).join(" / ");
+  // 🆕 Entity Join된 필드명도 찾는 헬퍼 함수
+  const getFieldValue = useCallback((data: Record<string, any>, fieldName: string) => {
+    // 1. Entity Join 형식으로 먼저 찾기 (*_fieldName) - 우선순위!
+    //    예: item_id_item_name (품목의 품명) vs customer_item_name (거래처 품명)
+    const possibleKeys = Object.keys(data).filter(
+      (key) => key.endsWith(`_${fieldName}`) && key !== fieldName, // 자기 자신은 제외
+    );
+
+    if (possibleKeys.length > 0) {
+      // 🆕 여러 개 있으면 가장 긴 키 선택 (더 구체적인 것)
+      // 예: item_id_item_name (18자) vs customer_item_name (18자) 중 정렬 순서로 선택
+      // 실제로는 item_id로 시작하는 것을 우선
+      const entityJoinKey = possibleKeys.find((key) => key.includes("_id_")) || possibleKeys[0];
+      console.log(`🔍 [getFieldValue] "${fieldName}" → "${entityJoinKey}" =`, data[entityJoinKey]);
+      return data[entityJoinKey];
     }
 
-    // displayItems 설정대로 렌더링
-    return (
-      <>
-        {displayItems.map((displayItem) => {
-          const styleClasses = cn(
-            displayItem.bold && "font-bold",
-            displayItem.underline && "underline",
-            displayItem.italic && "italic"
-          );
-          
-          const inlineStyle: React.CSSProperties = {
-            color: displayItem.color,
-            backgroundColor: displayItem.backgroundColor,
-          };
+    // 2. 직접 필드명으로 찾기 (Entity Join이 없을 때만)
+    if (data[fieldName] !== undefined) {
+      console.log(`🔍 [getFieldValue] "${fieldName}" → 직접 =`, data[fieldName]);
+      return data[fieldName];
+    }
 
-          switch (displayItem.type) {
-            case "icon": {
-              if (!displayItem.icon) return null;
-              const IconComponent = (LucideIcons as any)[displayItem.icon];
-              if (!IconComponent) return null;
-              return (
-                <IconComponent 
-                  key={displayItem.id} 
-                  className="h-3 w-3 inline-block mr-1" 
-                  style={inlineStyle}
-                />
-              );
+    console.warn(`⚠️ [getFieldValue] "${fieldName}" 못 찾음`);
+    return null;
+  }, []);
+
+  // 🆕 displayItems를 렌더링하는 헬퍼 함수 (그룹별)
+  const renderDisplayItems = useCallback(
+    (entry: GroupEntry, item: ItemData, groupId: string) => {
+      // 🆕 해당 그룹의 displayItems 가져오기
+      const group = (componentConfig.fieldGroups || []).find((g) => g.id === groupId);
+      const displayItems = group?.displayItems || [];
+
+      if (displayItems.length === 0) {
+        // displayItems가 없으면 기본 방식 (해당 그룹의 필드만 나열)
+        const fields = (componentConfig.additionalFields || []).filter((f) =>
+          componentConfig.fieldGroups && componentConfig.fieldGroups.length > 0 ? f.groupId === groupId : true,
+        );
+        return fields
+          .map((f) => {
+            const value = entry[f.name];
+            if (!value) return "-";
+
+            const strValue = String(value);
+
+            // 🔧 ISO 날짜 형식 자동 감지 및 포맷팅 (필드 타입 무관)
+            // ISO 8601 형식: YYYY-MM-DDTHH:mm:ss.sssZ 또는 YYYY-MM-DD
+            const isoDateMatch = strValue.match(/^(\d{4})-(\d{2})-(\d{2})(T|\s|$)/);
+            if (isoDateMatch) {
+              const [, year, month, day] = isoDateMatch;
+              return `${year}.${month}.${day}`;
             }
 
-            case "text":
-              return (
-                <span 
-                  key={displayItem.id} 
-                  className={styleClasses}
-                  style={inlineStyle}
-                >
-                  {displayItem.value}
-                </span>
-              );
+            return strValue;
+          })
+          .join(" / ");
+      }
 
-            case "field": {
-              const fieldValue = entry[displayItem.fieldName || ""];
-              const isEmpty = fieldValue === null || fieldValue === undefined || fieldValue === "";
-              
-              // 🆕 빈 값 처리
-              if (isEmpty) {
-                switch (displayItem.emptyBehavior) {
-                  case "hide":
-                    return null; // 항목 숨김
-                  case "default":
-                    // 기본값 표시
-                    const defaultValue = displayItem.defaultValue || "-";
-                    return (
-                      <span 
-                        key={displayItem.id} 
-                        className={cn(styleClasses, "text-muted-foreground")}
-                        style={inlineStyle}
-                      >
-                        {displayItem.label}{defaultValue}
-                      </span>
-                    );
-                  case "blank":
-                  default:
-                    // 빈 칸으로 표시
-                    return (
-                      <span key={displayItem.id} className={styleClasses} style={inlineStyle}>
-                        {displayItem.label}
-                      </span>
-                    );
+      // displayItems 설정대로 렌더링
+      return (
+        <>
+          {displayItems.map((displayItem) => {
+            const styleClasses = cn(
+              displayItem.bold && "font-bold",
+              displayItem.underline && "underline",
+              displayItem.italic && "italic",
+            );
+
+            const inlineStyle: React.CSSProperties = {
+              color: displayItem.color,
+              backgroundColor: displayItem.backgroundColor,
+            };
+
+            switch (displayItem.type) {
+              case "icon": {
+                if (!displayItem.icon) return null;
+                const IconComponent = (LucideIcons as any)[displayItem.icon];
+                if (!IconComponent) return null;
+                return <IconComponent key={displayItem.id} className="mr-1 inline-block h-3 w-3" style={inlineStyle} />;
+              }
+
+              case "text":
+                return (
+                  <span key={displayItem.id} className={styleClasses} style={inlineStyle}>
+                    {displayItem.value}
+                  </span>
+                );
+
+              case "field": {
+                const fieldValue = entry[displayItem.fieldName || ""];
+                const isEmpty = fieldValue === null || fieldValue === undefined || fieldValue === "";
+
+                // 🆕 빈 값 처리
+                if (isEmpty) {
+                  switch (displayItem.emptyBehavior) {
+                    case "hide":
+                      return null; // 항목 숨김
+                    case "default":
+                      // 기본값 표시
+                      const defaultValue = displayItem.defaultValue || "-";
+                      return (
+                        <span
+                          key={displayItem.id}
+                          className={cn(styleClasses, "text-muted-foreground")}
+                          style={inlineStyle}
+                        >
+                          {displayItem.label}
+                          {defaultValue}
+                        </span>
+                      );
+                    case "blank":
+                    default:
+                      // 빈 칸으로 표시
+                      return (
+                        <span key={displayItem.id} className={styleClasses} style={inlineStyle}>
+                          {displayItem.label}
+                        </span>
+                      );
+                  }
                 }
-              }
 
-              // 값이 있는 경우, 형식에 맞게 표시
-              let formattedValue = fieldValue;
-              
-              // 🔧 자동 날짜 감지 (format 설정 없어도 ISO 날짜 자동 변환)
-              const strValue = String(fieldValue);
-              const isoDateMatch = strValue.match(/^(\d{4})-(\d{2})-(\d{2})(T|\s|$)/);
-              if (isoDateMatch && !displayItem.format) {
-                const [, year, month, day] = isoDateMatch;
-                formattedValue = `${year}.${month}.${day}`;
-              }
-              
-              switch (displayItem.format) {
-                case "currency":
-                  // 천 단위 구분
-                  formattedValue = new Intl.NumberFormat("ko-KR").format(Number(fieldValue) || 0);
-                  break;
-                case "number":
-                  formattedValue = new Intl.NumberFormat("ko-KR").format(Number(fieldValue) || 0);
-                  break;
-                case "date":
-                  // YYYY.MM.DD 형식
-                  if (fieldValue) {
-                    // 날짜 문자열을 직접 파싱 (타임존 문제 방지)
-                    const dateStr = String(fieldValue);
-                    const match = dateStr.match(/^(\d{4})-(\d{2})-(\d{2})/);
-                    if (match) {
-                      const [, year, month, day] = match;
-                      formattedValue = `${year}.${month}.${day}`;
-                    } else {
-                      // Date 객체로 변환 시도 (fallback)
-                      const date = new Date(fieldValue);
-                      if (!isNaN(date.getTime())) {
-                        formattedValue = date.toLocaleDateString("ko-KR", {
-                          year: "numeric",
-                          month: "2-digit",
-                          day: "2-digit",
-                        }).replace(/\. /g, ".").replace(/\.$/, "");
+                // 값이 있는 경우, 형식에 맞게 표시
+                let formattedValue = fieldValue;
+
+                // 🔧 자동 날짜 감지 (format 설정 없어도 ISO 날짜 자동 변환)
+                const strValue = String(fieldValue);
+                const isoDateMatch = strValue.match(/^(\d{4})-(\d{2})-(\d{2})(T|\s|$)/);
+                if (isoDateMatch && !displayItem.format) {
+                  const [, year, month, day] = isoDateMatch;
+                  formattedValue = `${year}.${month}.${day}`;
+                }
+
+                switch (displayItem.format) {
+                  case "currency":
+                    // 천 단위 구분
+                    formattedValue = new Intl.NumberFormat("ko-KR").format(Number(fieldValue) || 0);
+                    break;
+                  case "number":
+                    formattedValue = new Intl.NumberFormat("ko-KR").format(Number(fieldValue) || 0);
+                    break;
+                  case "date":
+                    // YYYY.MM.DD 형식
+                    if (fieldValue) {
+                      // 날짜 문자열을 직접 파싱 (타임존 문제 방지)
+                      const dateStr = String(fieldValue);
+                      const match = dateStr.match(/^(\d{4})-(\d{2})-(\d{2})/);
+                      if (match) {
+                        const [, year, month, day] = match;
+                        formattedValue = `${year}.${month}.${day}`;
+                      } else {
+                        // Date 객체로 변환 시도 (fallback)
+                        const date = new Date(fieldValue);
+                        if (!isNaN(date.getTime())) {
+                          formattedValue = date
+                            .toLocaleDateString("ko-KR", {
+                              year: "numeric",
+                              month: "2-digit",
+                              day: "2-digit",
+                            })
+                            .replace(/\. /g, ".")
+                            .replace(/\.$/, "");
+                        }
                       }
                     }
-                  }
-                  break;
-                case "badge":
-                  // 배지로 표시
-                  return (
-                    <Badge 
-                      key={displayItem.id} 
-                      variant={displayItem.badgeVariant || "default"}
-                      className={styleClasses}
-                      style={inlineStyle}
-                    >
-                      {displayItem.label}{formattedValue}
-                    </Badge>
-                  );
-                case "text":
-                default:
-                  // 일반 텍스트
-                  break;
-              }
-
-              // 🔧 마지막 안전장치: formattedValue가 여전히 ISO 형식이면 한번 더 변환
-              let finalValue = formattedValue;
-              if (typeof formattedValue === 'string') {
-                const isoCheck = formattedValue.match(/^(\d{4})-(\d{2})-(\d{2})(T|\s|$)/);
-                if (isoCheck) {
-                  const [, year, month, day] = isoCheck;
-                  finalValue = `${year}.${month}.${day}`;
+                    break;
+                  case "badge":
+                    // 배지로 표시
+                    return (
+                      <Badge
+                        key={displayItem.id}
+                        variant={displayItem.badgeVariant || "default"}
+                        className={styleClasses}
+                        style={inlineStyle}
+                      >
+                        {displayItem.label}
+                        {formattedValue}
+                      </Badge>
+                    );
+                  case "text":
+                  default:
+                    // 일반 텍스트
+                    break;
                 }
+
+                // 🔧 마지막 안전장치: formattedValue가 여전히 ISO 형식이면 한번 더 변환
+                let finalValue = formattedValue;
+                if (typeof formattedValue === "string") {
+                  const isoCheck = formattedValue.match(/^(\d{4})-(\d{2})-(\d{2})(T|\s|$)/);
+                  if (isoCheck) {
+                    const [, year, month, day] = isoCheck;
+                    finalValue = `${year}.${month}.${day}`;
+                  }
+                }
+
+                return (
+                  <span key={displayItem.id} className={styleClasses} style={inlineStyle}>
+                    {displayItem.label}
+                    {finalValue}
+                  </span>
+                );
               }
-              
-              return (
-                <span key={displayItem.id} className={styleClasses} style={inlineStyle}>
-                  {displayItem.label}{finalValue}
-                </span>
-              );
-            }
 
-            case "badge": {
-              const fieldValue = displayItem.fieldName ? entry[displayItem.fieldName] : displayItem.value;
-              return (
-                <Badge 
-                  key={displayItem.id} 
-                  variant={displayItem.badgeVariant || "default"}
-                  className={styleClasses}
-                  style={inlineStyle}
-                >
-                  {displayItem.label}{fieldValue}
-                </Badge>
-              );
-            }
+              case "badge": {
+                const fieldValue = displayItem.fieldName ? entry[displayItem.fieldName] : displayItem.value;
+                return (
+                  <Badge
+                    key={displayItem.id}
+                    variant={displayItem.badgeVariant || "default"}
+                    className={styleClasses}
+                    style={inlineStyle}
+                  >
+                    {displayItem.label}
+                    {fieldValue}
+                  </Badge>
+                );
+              }
 
-            default:
-              return null;
-          }
-        })}
-      </>
-    );
-  }, [componentConfig.fieldGroups, componentConfig.additionalFields]);
+              default:
+                return null;
+            }
+          })}
+        </>
+      );
+    },
+    [componentConfig.fieldGroups, componentConfig.additionalFields],
+  );
 
   // 빈 상태 렌더링
   if (items.length === 0) {
     return (
       <div style={componentStyle} className={className} onClick={handleClick}>
-        <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-border bg-muted/30 p-8 text-center">
-          <p className="text-sm text-muted-foreground">{componentConfig.emptyMessage}</p>
+        <div className="border-border bg-muted/30 flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-8 text-center">
+          <p className="text-muted-foreground text-sm">{componentConfig.emptyMessage}</p>
           {isDesignMode && (
-            <p className="mt-2 text-xs text-muted-foreground">
+            <p className="text-muted-foreground mt-2 text-xs">
               💡 이전 모달에서 "다음" 버튼으로 데이터를 전달하면 여기에 표시됩니다.
             </p>
           )}
@@ -1252,19 +1400,15 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
     const groups = componentConfig.fieldGroups || [];
 
     // 그룹이 정의되지 않은 경우, 기본 그룹 사용
-    const effectiveGroups = groups.length > 0 
-      ? groups 
-      : [{ id: "default", title: "입력 정보", order: 0 }];
+    const effectiveGroups = groups.length > 0 ? groups : [{ id: "default", title: "입력 정보", order: 0 }];
 
     const sortedGroups = [...effectiveGroups].sort((a, b) => (a.order || 0) - (b.order || 0));
 
     return (
       <div className="grid grid-cols-2 gap-3">
         {sortedGroups.map((group) => {
-          const groupFields = fields.filter((f) => 
-            groups.length === 0 ? true : f.groupId === group.id
-          );
-          
+          const groupFields = fields.filter((f) => (groups.length === 0 ? true : f.groupId === group.id));
+
           if (groupFields.length === 0) return null;
 
           const groupEntries = item.fieldGroups[group.id] || [];
@@ -1273,7 +1417,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
           return (
             <Card key={group.id} className="border-2 shadow-sm">
               <CardHeader className="pb-3">
-                <CardTitle className="text-sm font-semibold flex items-center justify-between">
+                <CardTitle className="flex items-center justify-between text-sm font-semibold">
                   <span>{group.title}</span>
                   <Button
                     type="button"
@@ -1285,9 +1429,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                     + 추가
                   </Button>
                 </CardTitle>
-                {group.description && (
-                  <p className="text-xs text-muted-foreground">{group.description}</p>
-                )}
+                {group.description && <p className="text-muted-foreground text-xs">{group.description}</p>}
               </CardHeader>
               <CardContent className="space-y-3">
                 {/* 이미 입력된 항목들 */}
@@ -1299,9 +1441,9 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                       if (isEditingThisEntry) {
                         // 편집 모드: 입력 필드 표시 (가로 배치)
                         return (
-                          <Card key={entry.id} className="border-dashed border-primary">
+                          <Card key={entry.id} className="border-primary border-dashed">
                             <CardContent className="p-3">
-                              <div className="flex items-center justify-between mb-3">
+                              <div className="mb-3 flex items-center justify-between">
                                 <span className="text-xs font-medium">수정 중</span>
                                 <Button
                                   type="button"
@@ -1319,12 +1461,12 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                                 </Button>
                               </div>
                               {/* 🆕 가로 Grid 배치 (2~3열) */}
-                              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+                              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
                                 {groupFields.map((field) => (
                                   <div key={field.name} className="space-y-1">
                                     <label className="text-xs font-medium">
                                       {field.label}
-                                      {field.required && <span className="ml-1 text-destructive">*</span>}
+                                      {field.required && <span className="text-destructive ml-1">*</span>}
                                     </label>
                                     {renderField(field, item.id, group.id, entry.id, entry)}
                                   </div>
@@ -1338,7 +1480,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                         return (
                           <div
                             key={entry.id}
-                            className="flex items-center justify-between border rounded p-2 text-xs bg-muted/30 cursor-pointer hover:bg-muted/50"
+                            className="bg-muted/30 hover:bg-muted/50 flex cursor-pointer items-center justify-between rounded border p-2 text-xs"
                             onClick={() => handleEditGroupEntry(item.id, group.id, entry.id)}
                           >
                             <span className="flex items-center gap-1">
@@ -1362,16 +1504,14 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                     })}
                   </div>
                 ) : (
-                  <p className="text-xs text-muted-foreground italic">
-                    아직 입력된 항목이 없습니다.
-                  </p>
+                  <p className="text-muted-foreground text-xs italic">아직 입력된 항목이 없습니다.</p>
                 )}
 
                 {/* 새 항목 입력 중 */}
-                {isEditingThisGroup && editingDetailId && !groupEntries.find(e => e.id === editingDetailId) && (
-                  <Card className="border-dashed border-primary">
-                    <CardContent className="p-3 space-y-2">
-                      <div className="flex items-center justify-between mb-2">
+                {isEditingThisGroup && editingDetailId && !groupEntries.find((e) => e.id === editingDetailId) && (
+                  <Card className="border-primary border-dashed">
+                    <CardContent className="space-y-2 p-3">
+                      <div className="mb-2 flex items-center justify-between">
                         <span className="text-xs font-medium">새 항목</span>
                         <Button
                           type="button"
@@ -1392,7 +1532,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                         <div key={field.name} className="space-y-1">
                           <label className="text-xs font-medium">
                             {field.label}
-                            {field.required && <span className="ml-1 text-destructive">*</span>}
+                            {field.required && <span className="text-destructive ml-1">*</span>}
                           </label>
                           {renderField(field, item.id, group.id, editingDetailId, {})}
                         </div>
@@ -1417,16 +1557,16 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
     });
 
     return (
-      <div className="space-y-4 bg-card p-4">
+      <div className="bg-card space-y-4 p-4">
         {items.map((item, index) => {
           // 제목용 첫 번째 컬럼 값
-          const titleValue = componentConfig.displayColumns?.[0]?.name 
-            ? item.originalData[componentConfig.displayColumns[0].name]
+          const titleValue = componentConfig.displayColumns?.[0]?.name
+            ? getFieldValue(item.originalData, componentConfig.displayColumns[0].name)
             : null;
-          
+
           // 요약용 모든 컬럼 값들
           const summaryValues = componentConfig.displayColumns
-            ?.map((col) => item.originalData[col.name])
+            ?.map((col) => getFieldValue(item.originalData, col.name))
             .filter(Boolean);
 
           console.log("🔍 [renderGridLayout] 항목 렌더링:", {
@@ -1442,8 +1582,10 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
           return (
             <Card key={item.id} className="border shadow-sm">
               <CardHeader className="pb-3">
-                <CardTitle className="text-base font-semibold flex items-center justify-between">
-                  <span>{index + 1}. {titleValue || "항목"}</span>
+                <CardTitle className="flex items-center justify-between text-base font-semibold">
+                  <span>
+                    {index + 1}. {titleValue || "항목"}
+                  </span>
                   <Button
                     type="button"
                     variant="ghost"
@@ -1456,9 +1598,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                 </CardTitle>
                 {/* 원본 데이터 요약 */}
                 {summaryValues && summaryValues.length > 0 && (
-                  <div className="text-xs text-muted-foreground">
-                    {summaryValues.join(" | ")}
-                  </div>
+                  <div className="text-muted-foreground text-xs">{summaryValues.join(" | ")}</div>
                 )}
               </CardHeader>
               <CardContent>
@@ -1475,116 +1615,125 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
   // 🔧 기존 renderGridLayout (백업 - 사용 안 함)
   const renderGridLayout_OLD = () => {
     return (
-      <div className="space-y-4 bg-card p-4">
+      <div className="bg-card space-y-4 p-4">
         {/* Modal 모드: 추가 버튼 */}
         {isModalMode && !isEditing && items.length === 0 && (
-          <div className="text-center py-8">
-            <p className="text-sm text-muted-foreground mb-4">항목을 추가하려면 추가 버튼을 클릭하세요</p>
-            <Button
-              type="button"
-              onClick={() => setIsEditing(true)}
-              size="sm"
-              className="text-xs sm:text-sm"
-            >
+          <div className="py-8 text-center">
+            <p className="text-muted-foreground mb-4 text-sm">항목을 추가하려면 추가 버튼을 클릭하세요</p>
+            <Button type="button" onClick={() => setIsEditing(true)} size="sm" className="text-xs sm:text-sm">
               + 추가
             </Button>
           </div>
         )}
 
         {/* Modal 모드: 편집 중인 항목 (입력창 표시) */}
-        {isModalMode && isEditing && editingItemId && (() => {
-          const editingItem = items.find(item => item.id === editingItemId);
-          console.log("🔍 [Modal Mode] 편집 항목 찾기:", {
-            editingItemId,
-            itemsLength: items.length,
-            itemIds: items.map(i => i.id),
-            editingItem: editingItem ? "찾음" : "못 찾음",
-            editingDetailId,
-          });
-          if (!editingItem) {
-            console.warn("⚠️ [Modal Mode] 편집할 항목을 찾을 수 없습니다!");
-            return null;
-          }
+        {isModalMode &&
+          isEditing &&
+          editingItemId &&
+          (() => {
+            const editingItem = items.find((item) => item.id === editingItemId);
+            console.log("🔍 [Modal Mode] 편집 항목 찾기:", {
+              editingItemId,
+              itemsLength: items.length,
+              itemIds: items.map((i) => i.id),
+              editingItem: editingItem ? "찾음" : "못 찾음",
+              editingDetailId,
+            });
+            if (!editingItem) {
+              console.warn("⚠️ [Modal Mode] 편집할 항목을 찾을 수 없습니다!");
+              return null;
+            }
 
-          return (
-            <Card className="border-2 border-primary shadow-sm">
-              <CardHeader className="pb-3">
-                <CardTitle className="text-sm font-semibold flex items-center justify-between">
-                  <span>품목: {editingItem.originalData[componentConfig.displayColumns?.[0]?.name] || "항목"}</span>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => {
-                      setIsEditing(false);
-                      setEditingItemId(null);
-                      setEditingDetailId(null);
-                    }}
-                    className="h-7 text-xs"
-                  >
-                    취소
-                  </Button>
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-3">
-                {/* 원본 데이터 요약 */}
-                <div className="text-xs text-muted-foreground bg-muted p-2 rounded">
-                  {componentConfig.displayColumns?.map((col) => editingItem.originalData[col.name]).filter(Boolean).join(" | ")}
-                </div>
-
-                {/* 🆕 이미 입력된 상세 항목들 표시 */}
-                {editingItem.details.length > 0 && (
-                  <div className="space-y-2">
-                    <div className="text-xs font-medium">입력된 항목 ({editingItem.details.length}개)</div>
-                    {editingItem.details.map((detail, idx) => (
-                      <div key={detail.id} className="flex items-center justify-between border rounded p-2 text-xs bg-muted/30">
-                        <span>{idx + 1}. {detail[componentConfig.additionalFields?.[0]?.name] || "입력됨"}</span>
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => handleRemoveDetail(editingItem.id, detail.id)}
-                          className="h-6 w-6 p-0"
-                        >
-                          X
-                        </Button>
-                      </div>
-                    ))}
+            return (
+              <Card className="border-primary border-2 shadow-sm">
+                <CardHeader className="pb-3">
+                  <CardTitle className="flex items-center justify-between text-sm font-semibold">
+                    <span>
+                      품목:{" "}
+                      {getFieldValue(editingItem.originalData, componentConfig.displayColumns?.[0]?.name || "") ||
+                        "항목"}
+                    </span>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => {
+                        setIsEditing(false);
+                        setEditingItemId(null);
+                        setEditingDetailId(null);
+                      }}
+                      className="h-7 text-xs"
+                    >
+                      취소
+                    </Button>
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                  {/* 원본 데이터 요약 */}
+                  <div className="text-muted-foreground bg-muted rounded p-2 text-xs">
+                    {componentConfig.displayColumns
+                      ?.map((col) => editingItem.originalData[col.name])
+                      .filter(Boolean)
+                      .join(" | ")}
                   </div>
-                )}
 
-                {/* 추가 입력 필드 */}
-                {componentConfig.additionalFields && componentConfig.additionalFields.length > 0 && editingDetailId && (() => {
-                  // 현재 편집 중인 detail 찾기 (없으면 빈 객체)
-                  const currentDetail = editingItem.details.find(d => d.id === editingDetailId) || { id: editingDetailId };
-                  return renderFieldsByGroup(editingItem.id, editingDetailId, currentDetail);
-                })()}
+                  {/* 🆕 이미 입력된 상세 항목들 표시 */}
+                  {editingItem.details.length > 0 && (
+                    <div className="space-y-2">
+                      <div className="text-xs font-medium">입력된 항목 ({editingItem.details.length}개)</div>
+                      {editingItem.details.map((detail, idx) => (
+                        <div
+                          key={detail.id}
+                          className="bg-muted/30 flex items-center justify-between rounded border p-2 text-xs"
+                        >
+                          <span>
+                            {idx + 1}. {detail[componentConfig.additionalFields?.[0]?.name] || "입력됨"}
+                          </span>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => handleRemoveDetail(editingItem.id, detail.id)}
+                            className="h-6 w-6 p-0"
+                          >
+                            X
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
 
-                {/* 액션 버튼들 */}
-                <div className="flex justify-end gap-2 pt-2">
-                  <Button
-                    type="button"
-                    onClick={() => handleAddDetail(editingItem.id)}
-                    size="sm"
-                    variant="outline"
-                    className="text-xs"
-                  >
-                    + 이 품목에 추가 입력
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="default"
-                    onClick={handleNextItem}
-                    size="sm"
-                    className="text-xs"
-                  >
-                    다음 품목
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
-          );
-        })()}
+                  {/* 추가 입력 필드 */}
+                  {componentConfig.additionalFields &&
+                    componentConfig.additionalFields.length > 0 &&
+                    editingDetailId &&
+                    (() => {
+                      // 현재 편집 중인 detail 찾기 (없으면 빈 객체)
+                      const currentDetail = editingItem.details.find((d) => d.id === editingDetailId) || {
+                        id: editingDetailId,
+                      };
+                      return renderFieldsByGroup(editingItem.id, editingDetailId, currentDetail);
+                    })()}
+
+                  {/* 액션 버튼들 */}
+                  <div className="flex justify-end gap-2 pt-2">
+                    <Button
+                      type="button"
+                      onClick={() => handleAddDetail(editingItem.id)}
+                      size="sm"
+                      variant="outline"
+                      className="text-xs"
+                    >
+                      + 이 품목에 추가 입력
+                    </Button>
+                    <Button type="button" variant="default" onClick={handleNextItem} size="sm" className="text-xs">
+                      다음 품목
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            );
+          })()}
 
         {/* 저장된 항목들 (inline 모드 또는 modal 모드에서 편집 완료된 항목) */}
         {items.map((item, index) => {
@@ -1596,15 +1745,19 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
           // Modal 모드: 작은 요약 카드
           if (isModalMode) {
             return (
-              <Card key={item.id} className="border shadow-sm bg-muted/50">
+              <Card key={item.id} className="bg-muted/50 border shadow-sm">
                 <CardContent className="p-3">
-                  <div className="flex items-center justify-between mb-2">
+                  <div className="mb-2 flex items-center justify-between">
                     <div className="flex-1">
-                      <div className="text-sm font-semibold mb-1">
-                        {index + 1}. {item.originalData[componentConfig.displayColumns?.[0]?.name] || "항목"}
+                      <div className="mb-1 text-sm font-semibold">
+                        {index + 1}.{" "}
+                        {getFieldValue(item.originalData, componentConfig.displayColumns?.[0]?.name || "") || "항목"}
                       </div>
-                      <div className="text-xs text-muted-foreground">
-                        {componentConfig.displayColumns?.map((col) => item.originalData[col.name]).filter(Boolean).join(" | ")}
+                      <div className="text-muted-foreground text-xs">
+                        {componentConfig.displayColumns
+                          ?.map((col) => getFieldValue(item.originalData, col.name))
+                          .filter(Boolean)
+                          .join(" | ")}
                       </div>
                     </div>
                     <div className="flex items-center gap-2">
@@ -1637,9 +1790,9 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                   </div>
                   {/* 🆕 입력된 상세 항목들 표시 */}
                   {item.details && item.details.length > 0 && (
-                    <div className="mt-2 space-y-1 pl-4 border-l-2 border-primary">
+                    <div className="border-primary mt-2 space-y-1 border-l-2 pl-4">
                       {item.details.map((detail, detailIdx) => (
-                        <div key={detail.id} className="text-xs text-primary">
+                        <div key={detail.id} className="text-primary text-xs">
                           {detailIdx + 1}. {detail[componentConfig.additionalFields?.[0]?.name] || "입력됨"}
                         </div>
                       ))}
@@ -1657,7 +1810,8 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                 {/* 제목 (품명) */}
                 <div className="flex items-center justify-between">
                   <div className="text-base font-semibold">
-                    {index + 1}. {item.originalData[componentConfig.displayColumns?.[0]?.name] || "항목"}
+                    {index + 1}.{" "}
+                    {getFieldValue(item.originalData, componentConfig.displayColumns?.[0]?.name || "") || "항목"}
                   </div>
                   <Button
                     type="button"
@@ -1672,18 +1826,21 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                     + 상세 입력 추가
                   </Button>
                 </div>
-                
+
                 {/* 원본 데이터 요약 (작은 텍스트, | 구분자) */}
-                <div className="text-xs text-muted-foreground">
-                  {componentConfig.displayColumns?.map((col) => item.originalData[col.name]).filter(Boolean).join(" | ")}
+                <div className="text-muted-foreground text-xs">
+                  {componentConfig.displayColumns
+                    ?.map((col) => getFieldValue(item.originalData, col.name))
+                    .filter(Boolean)
+                    .join(" | ")}
                 </div>
 
                 {/* 🆕 각 상세 항목 표시 */}
                 {item.details && item.details.length > 0 ? (
-                  <div className="space-y-3 pl-4 border-l-2 border-primary">
+                  <div className="border-primary space-y-3 border-l-2 pl-4">
                     {item.details.map((detail, detailIdx) => (
                       <Card key={detail.id} className="border-dashed">
-                        <CardContent className="p-3 space-y-2">
+                        <CardContent className="space-y-2 p-3">
                           <div className="flex items-center justify-between">
                             <div className="text-xs font-medium">상세 항목 {detailIdx + 1}</div>
                             <Button
@@ -1703,9 +1860,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                     ))}
                   </div>
                 ) : (
-                  <div className="text-xs text-muted-foreground italic pl-4">
-                    아직 입력된 상세 항목이 없습니다.
-                  </div>
+                  <div className="text-muted-foreground pl-4 text-xs italic">아직 입력된 상세 항목이 없습니다.</div>
                 )}
               </CardContent>
             </Card>
@@ -1723,7 +1878,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
             }}
             variant="outline"
             size="sm"
-            className="w-full text-xs sm:text-sm border-dashed"
+            className="w-full border-dashed text-xs sm:text-sm"
           >
             + 추가
           </Button>
@@ -1735,29 +1890,29 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
   // 기존 테이블 레이아웃 (사용 안 함, 삭제 예정)
   const renderOldGridLayout = () => {
     return (
-      <div className="overflow-auto bg-card">
+      <div className="bg-card overflow-auto">
         <Table>
           <TableHeader>
             <TableRow className="bg-background">
               {componentConfig.showIndex && (
                 <TableHead className="h-12 w-12 px-4 py-3 text-center text-xs font-semibold sm:text-sm">#</TableHead>
               )}
-              
+
               {/* 원본 데이터 컬럼 */}
               {componentConfig.displayColumns?.map((col) => (
                 <TableHead key={col.name} className="h-12 px-4 py-3 text-xs font-semibold sm:text-sm">
                   {col.label || col.name}
                 </TableHead>
               ))}
-              
+
               {/* 추가 입력 필드 컬럼 */}
               {componentConfig.additionalFields?.map((field) => (
                 <TableHead key={field.name} className="h-12 px-4 py-3 text-xs font-semibold sm:text-sm">
                   {field.label}
-                  {field.required && <span className="ml-1 text-destructive">*</span>}
+                  {field.required && <span className="text-destructive ml-1">*</span>}
                 </TableHead>
               ))}
-              
+
               {componentConfig.allowRemove && (
                 <TableHead className="h-12 w-20 px-4 py-3 text-center text-xs font-semibold sm:text-sm">작업</TableHead>
               )}
@@ -1765,28 +1920,28 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
           </TableHeader>
           <TableBody>
             {items.map((item, index) => (
-              <TableRow key={item.id} className="bg-background transition-colors hover:bg-muted/50">
+              <TableRow key={item.id} className="bg-background hover:bg-muted/50 transition-colors">
                 {/* 인덱스 번호 */}
                 {componentConfig.showIndex && (
                   <TableCell className="h-14 px-4 py-3 text-center text-xs font-medium sm:text-sm">
                     {index + 1}
                   </TableCell>
                 )}
-                
+
                 {/* 원본 데이터 표시 */}
                 {componentConfig.displayColumns?.map((col) => (
                   <TableCell key={col.name} className="h-14 px-4 py-3 text-xs sm:text-sm">
-                    {item.originalData[col.name] || "-"}
+                    {getFieldValue(item.originalData, col.name) || "-"}
                   </TableCell>
                 ))}
-                
+
                 {/* 추가 입력 필드 */}
                 {componentConfig.additionalFields?.map((field) => (
                   <TableCell key={field.name} className="h-14 px-4 py-3">
                     {renderField(field, item)}
                   </TableCell>
                 ))}
-                
+
                 {/* 삭제 버튼 */}
                 {componentConfig.allowRemove && (
                   <TableCell className="h-14 px-4 py-3 text-center">
@@ -1796,7 +1951,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                         variant="ghost"
                         size="icon"
                         onClick={() => handleRemoveItem(item.id)}
-                        className="h-7 w-7 text-destructive hover:bg-destructive/10 hover:text-destructive sm:h-8 sm:w-8"
+                        className="text-destructive hover:bg-destructive/10 hover:text-destructive h-7 w-7 sm:h-8 sm:w-8"
                         title="항목 제거"
                       >
                         <X className="h-3 w-3 sm:h-4 sm:w-4" />
@@ -1829,116 +1984,125 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
     });
 
     return (
-      <div className="space-y-3 bg-card p-4">
+      <div className="bg-card space-y-3 p-4">
         {/* Modal 모드: 추가 버튼 */}
         {isModalMode && !isEditing && items.length === 0 && (
-          <div className="text-center py-8">
-            <p className="text-sm text-muted-foreground mb-4">항목을 추가하려면 추가 버튼을 클릭하세요</p>
-            <Button
-              type="button"
-              onClick={() => setIsEditing(true)}
-              size="sm"
-              className="text-xs sm:text-sm"
-            >
+          <div className="py-8 text-center">
+            <p className="text-muted-foreground mb-4 text-sm">항목을 추가하려면 추가 버튼을 클릭하세요</p>
+            <Button type="button" onClick={() => setIsEditing(true)} size="sm" className="text-xs sm:text-sm">
               + 추가
             </Button>
           </div>
         )}
 
         {/* Modal 모드: 편집 중인 항목 (입력창 표시) */}
-        {isModalMode && isEditing && editingItemId && (() => {
-          const editingItem = items.find(item => item.id === editingItemId);
-          console.log("🔍 [Modal Mode - Card] 편집 항목 찾기:", {
-            editingItemId,
-            itemsLength: items.length,
-            itemIds: items.map(i => i.id),
-            editingItem: editingItem ? "찾음" : "못 찾음",
-            editingDetailId,
-          });
-          if (!editingItem) {
-            console.warn("⚠️ [Modal Mode - Card] 편집할 항목을 찾을 수 없습니다!");
-            return null;
-          }
+        {isModalMode &&
+          isEditing &&
+          editingItemId &&
+          (() => {
+            const editingItem = items.find((item) => item.id === editingItemId);
+            console.log("🔍 [Modal Mode - Card] 편집 항목 찾기:", {
+              editingItemId,
+              itemsLength: items.length,
+              itemIds: items.map((i) => i.id),
+              editingItem: editingItem ? "찾음" : "못 찾음",
+              editingDetailId,
+            });
+            if (!editingItem) {
+              console.warn("⚠️ [Modal Mode - Card] 편집할 항목을 찾을 수 없습니다!");
+              return null;
+            }
 
-          return (
-            <Card className="border-2 border-primary shadow-sm">
-              <CardHeader className="pb-3">
-                <CardTitle className="text-sm font-semibold flex items-center justify-between">
-                  <span>품목: {editingItem.originalData[componentConfig.displayColumns?.[0]?.name] || "항목"}</span>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => {
-                      setIsEditing(false);
-                      setEditingItemId(null);
-                      setEditingDetailId(null);
-                    }}
-                    className="h-7 text-xs"
-                  >
-                    취소
-                  </Button>
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-3">
-                {/* 원본 데이터 요약 */}
-                <div className="text-xs text-muted-foreground bg-muted p-2 rounded">
-                  {componentConfig.displayColumns?.map((col) => editingItem.originalData[col.name]).filter(Boolean).join(" | ")}
-                </div>
-
-                {/* 🆕 이미 입력된 상세 항목들 표시 */}
-                {editingItem.details.length > 0 && (
-                  <div className="space-y-2">
-                    <div className="text-xs font-medium">입력된 항목 ({editingItem.details.length}개)</div>
-                    {editingItem.details.map((detail, idx) => (
-                      <div key={detail.id} className="flex items-center justify-between border rounded p-2 text-xs bg-muted/30">
-                        <span>{idx + 1}. {detail[componentConfig.additionalFields?.[0]?.name] || "입력됨"}</span>
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => handleRemoveDetail(editingItem.id, detail.id)}
-                          className="h-6 w-6 p-0"
-                        >
-                          X
-                        </Button>
-                      </div>
-                    ))}
+            return (
+              <Card className="border-primary border-2 shadow-sm">
+                <CardHeader className="pb-3">
+                  <CardTitle className="flex items-center justify-between text-sm font-semibold">
+                    <span>
+                      품목:{" "}
+                      {getFieldValue(editingItem.originalData, componentConfig.displayColumns?.[0]?.name || "") ||
+                        "항목"}
+                    </span>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => {
+                        setIsEditing(false);
+                        setEditingItemId(null);
+                        setEditingDetailId(null);
+                      }}
+                      className="h-7 text-xs"
+                    >
+                      취소
+                    </Button>
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                  {/* 원본 데이터 요약 */}
+                  <div className="text-muted-foreground bg-muted rounded p-2 text-xs">
+                    {componentConfig.displayColumns
+                      ?.map((col) => editingItem.originalData[col.name])
+                      .filter(Boolean)
+                      .join(" | ")}
                   </div>
-                )}
 
-                {/* 추가 입력 필드 */}
-                {componentConfig.additionalFields && componentConfig.additionalFields.length > 0 && editingDetailId && (() => {
-                  // 현재 편집 중인 detail 찾기 (없으면 빈 객체)
-                  const currentDetail = editingItem.details.find(d => d.id === editingDetailId) || { id: editingDetailId };
-                  return renderFieldsByGroup(editingItem.id, editingDetailId, currentDetail);
-                })()}
+                  {/* 🆕 이미 입력된 상세 항목들 표시 */}
+                  {editingItem.details.length > 0 && (
+                    <div className="space-y-2">
+                      <div className="text-xs font-medium">입력된 항목 ({editingItem.details.length}개)</div>
+                      {editingItem.details.map((detail, idx) => (
+                        <div
+                          key={detail.id}
+                          className="bg-muted/30 flex items-center justify-between rounded border p-2 text-xs"
+                        >
+                          <span>
+                            {idx + 1}. {detail[componentConfig.additionalFields?.[0]?.name] || "입력됨"}
+                          </span>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => handleRemoveDetail(editingItem.id, detail.id)}
+                            className="h-6 w-6 p-0"
+                          >
+                            X
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
 
-                {/* 액션 버튼들 */}
-                <div className="flex justify-end gap-2 pt-2">
-                  <Button
-                    type="button"
-                    onClick={() => handleAddDetail(editingItem.id)}
-                    size="sm"
-                    variant="outline"
-                    className="text-xs"
-                  >
-                    + 이 품목에 추가 입력
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="default"
-                    onClick={handleNextItem}
-                    size="sm"
-                    className="text-xs"
-                  >
-                    다음 품목
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
-          );
-        })()}
+                  {/* 추가 입력 필드 */}
+                  {componentConfig.additionalFields &&
+                    componentConfig.additionalFields.length > 0 &&
+                    editingDetailId &&
+                    (() => {
+                      // 현재 편집 중인 detail 찾기 (없으면 빈 객체)
+                      const currentDetail = editingItem.details.find((d) => d.id === editingDetailId) || {
+                        id: editingDetailId,
+                      };
+                      return renderFieldsByGroup(editingItem.id, editingDetailId, currentDetail);
+                    })()}
+
+                  {/* 액션 버튼들 */}
+                  <div className="flex justify-end gap-2 pt-2">
+                    <Button
+                      type="button"
+                      onClick={() => handleAddDetail(editingItem.id)}
+                      size="sm"
+                      variant="outline"
+                      className="text-xs"
+                    >
+                      + 이 품목에 추가 입력
+                    </Button>
+                    <Button type="button" variant="default" onClick={handleNextItem} size="sm" className="text-xs">
+                      다음 품목
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            );
+          })()}
 
         {/* 저장된 항목들 (inline 모드 또는 modal 모드에서 편집 완료된 항목) */}
         {items.map((item, index) => {
@@ -1950,16 +2114,20 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
           // Modal 모드: 작은 요약 카드
           if (isModalMode) {
             return (
-              <Card key={item.id} className="border shadow-sm bg-muted/50">
-                <CardContent className="p-3 flex items-center justify-between">
+              <Card key={item.id} className="bg-muted/50 border shadow-sm">
+                <CardContent className="flex items-center justify-between p-3">
                   <div className="flex-1">
-                    <div className="text-sm font-semibold mb-1">
-                      {index + 1}. {item.originalData[componentConfig.displayColumns?.[0]?.name] || "항목"}
+                    <div className="mb-1 text-sm font-semibold">
+                      {index + 1}.{" "}
+                      {getFieldValue(item.originalData, componentConfig.displayColumns?.[0]?.name || "") || "항목"}
+                    </div>
+                    <div className="text-muted-foreground text-xs">
+                      {componentConfig.displayColumns
+                        ?.map((col) => getFieldValue(item.originalData, col.name))
+                        .filter(Boolean)
+                        .join(" | ")}
                     </div>
-                    <div className="text-xs text-muted-foreground">
-                    {componentConfig.displayColumns?.map((col) => item.originalData[col.name]).filter(Boolean).join(" | ")}
                   </div>
-                </div>
                   <div className="flex items-center gap-2">
                     <Button
                       type="button"
@@ -1979,7 +2147,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                         variant="ghost"
                         size="sm"
                         onClick={() => handleRemoveItem(item.id)}
-                        className="h-7 text-xs text-destructive"
+                        className="text-destructive h-7 text-xs"
                       >
                         X
                       </Button>
@@ -1997,7 +2165,8 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                 {/* 제목 (품명) */}
                 <div className="flex items-center justify-between">
                   <div className="text-base font-semibold">
-                    {index + 1}. {item.originalData[componentConfig.displayColumns?.[0]?.name] || "항목"}
+                    {index + 1}.{" "}
+                    {getFieldValue(item.originalData, componentConfig.displayColumns?.[0]?.name || "") || "항목"}
                   </div>
                   <Button
                     type="button"
@@ -2012,18 +2181,21 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                     + 상세 입력 추가
                   </Button>
                 </div>
-                
+
                 {/* 원본 데이터 요약 (작은 텍스트, | 구분자) */}
-                <div className="text-xs text-muted-foreground">
-                  {componentConfig.displayColumns?.map((col) => item.originalData[col.name]).filter(Boolean).join(" | ")}
+                <div className="text-muted-foreground text-xs">
+                  {componentConfig.displayColumns
+                    ?.map((col) => getFieldValue(item.originalData, col.name))
+                    .filter(Boolean)
+                    .join(" | ")}
                 </div>
 
                 {/* 🆕 각 상세 항목 표시 */}
                 {item.details && item.details.length > 0 ? (
-                  <div className="space-y-3 pl-4 border-l-2 border-primary">
+                  <div className="border-primary space-y-3 border-l-2 pl-4">
                     {item.details.map((detail, detailIdx) => (
                       <Card key={detail.id} className="border-dashed">
-                        <CardContent className="p-3 space-y-2">
+                        <CardContent className="space-y-2 p-3">
                           <div className="flex items-center justify-between">
                             <div className="text-xs font-medium">상세 항목 {detailIdx + 1}</div>
                             <Button
@@ -2043,9 +2215,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                     ))}
                   </div>
                 ) : (
-                  <div className="text-xs text-muted-foreground italic pl-4">
-                    아직 입력된 상세 항목이 없습니다.
-                  </div>
+                  <div className="text-muted-foreground pl-4 text-xs italic">아직 입력된 상세 항목이 없습니다.</div>
                 )}
               </CardContent>
             </Card>
@@ -2063,7 +2233,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
             }}
             variant="outline"
             size="sm"
-            className="w-full text-xs sm:text-sm border-dashed"
+            className="w-full border-dashed text-xs sm:text-sm"
           >
             + 추가
           </Button>
@@ -2082,9 +2252,9 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
     <div style={componentStyle} className={cn("space-y-4", className)} onClick={handleClick}>
       {/* 레이아웃에 따라 렌더링 */}
       {componentConfig.layout === "grid" ? renderGridLayout() : renderCardLayout()}
-      
+
       {/* 항목 수 표시 */}
-      <div className="flex justify-between text-xs text-muted-foreground">
+      <div className="text-muted-foreground flex justify-between text-xs">
         <span>총 {items.length}개 항목</span>
         {componentConfig.targetTable && <span>저장 대상: {componentConfig.targetTable}</span>}
       </div>
diff --git a/frontend/lib/utils/buttonActions.ts b/frontend/lib/utils/buttonActions.ts
index 66375252..d6ddd96c 100644
--- a/frontend/lib/utils/buttonActions.ts
+++ b/frontend/lib/utils/buttonActions.ts
@@ -225,6 +225,7 @@ export class ButtonActionExecutor {
 
     // 🆕 SelectedItemsDetailInput 배치 저장 처리 (fieldGroups 구조)
     console.log("🔍 [handleSave] formData 구조 확인:", {
+      isFormDataArray: Array.isArray(context.formData),
       keys: Object.keys(context.formData),
       values: Object.entries(context.formData).map(([key, value]) => ({
         key,
@@ -238,6 +239,14 @@ export class ButtonActionExecutor {
       }))
     });
 
+    // 🔧 formData 자체가 배열인 경우 (ScreenModal의 그룹 레코드 수정)
+    if (Array.isArray(context.formData)) {
+      console.log("⚠️ [handleSave] formData가 배열입니다 - SelectedItemsDetailInput이 이미 처리했으므로 일반 저장 건너뜀");
+      console.log("⚠️ [handleSave] formData 배열:", context.formData);
+      // ✅ SelectedItemsDetailInput이 이미 UPSERT를 실행했으므로 일반 저장을 건너뜀
+      return true; // 성공으로 반환
+    }
+
     const selectedItemsKeys = Object.keys(context.formData).filter(key => {
       const value = context.formData[key];
       console.log(`🔍 [handleSave] 필터링 체크 - ${key}:`, {