Merge pull request 'feature/screen-management' (#230) from feature/screen-management into main

Reviewed-on: http://39.117.244.52:3000/kjs/ERP-node/pulls/230

backend-node/src/controllers/dynamicFormController.ts

@@ -203,7 +203,7 @@ export const updateFormDataPartial = async (
     };
 
     const result = await dynamicFormService.updateFormDataPartial(
-      parseInt(id),
+      id, // 🔧 parseInt 제거 - UUID 문자열도 지원
       tableName,
       originalData,
       newDataWithMeta

backend-node/src/services/dynamicFormService.ts

@@ -746,7 +746,7 @@ export class DynamicFormService {
    * 폼 데이터 부분 업데이트 (변경된 필드만 업데이트)
    */
   async updateFormDataPartial(
-    id: number,
+    id: string | number, // 🔧 UUID 문자열도 지원
     tableName: string,
     originalData: Record<string, any>,
     newData: Record<string, any>

backend-node/src/services/tableManagementService.ts

@@ -1165,12 +1165,26 @@ export class TableManagementService {
     paramCount: number;
   } | null> {
     try {
-      // 🔧 날짜 범위 문자열 "YYYY-MM-DD|YYYY-MM-DD" 체크 (최우선!)
+      // 🔧 파이프로 구분된 문자열 처리 (다중선택 또는 날짜 범위)
       if (typeof value === "string" && value.includes("|")) {
         const columnInfo = await this.getColumnWebTypeInfo(tableName, columnName);
+        
+        // 날짜 타입이면 날짜 범위로 처리
         if (columnInfo && (columnInfo.webType === "date" || columnInfo.webType === "datetime")) {
           return this.buildDateRangeCondition(columnName, value, paramIndex);
         }
+        
+        // 그 외 타입이면 다중선택(IN 조건)으로 처리
+        const multiValues = value.split("|").filter((v: string) => v.trim() !== "");
+        if (multiValues.length > 0) {
+          const placeholders = multiValues.map((_: string, idx: number) => `$${paramIndex + idx}`).join(", ");
+          logger.info(`🔍 다중선택 필터 적용: ${columnName} IN (${multiValues.join(", ")})`);
+          return {
+            whereClause: `${columnName}::text IN (${placeholders})`,
+            values: multiValues,
+            paramCount: multiValues.length,
+          };
+        }
       }
 
       // 🔧 날짜 범위 객체 {from, to} 체크

frontend/components/common/ScreenModal.tsx

@@ -57,6 +57,9 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
   // 폼 데이터 상태 추가
   const [formData, setFormData] = useState<Record<string, any>>({});
 
+  // 🆕 원본 데이터 상태 (수정 모드에서 UPDATE 판단용)
+  const [originalData, setOriginalData] = useState<Record<string, any> | null>(null);
+
   // 연속 등록 모드 상태 (state로 변경 - 체크박스 UI 업데이트를 위해)
   const [continuousMode, setContinuousMode] = useState(false);
 
@@ -143,10 +146,13 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
         console.log("✅ URL 파라미터 추가:", urlParams);
       }
 
-      // 🆕 editData가 있으면 formData로 설정 (수정 모드)
+      // 🆕 editData가 있으면 formData와 originalData로 설정 (수정 모드)
       if (editData) {
         console.log("📝 [ScreenModal] 수정 데이터 설정:", editData);
         setFormData(editData);
+        setOriginalData(editData); // 🆕 원본 데이터 저장 (UPDATE 판단용)
+      } else {
+        setOriginalData(null); // 신규 등록 모드
       }
 
       setModalState({
@@ -177,7 +183,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
       });
       setScreenData(null);
       setFormData({});
-      setSelectedData([]); // 🆕 선택된 데이터 초기화
+      setOriginalData(null); // 🆕 원본 데이터 초기화
       setContinuousMode(false);
       localStorage.setItem("screenModal_continuousMode", "false"); // localStorage에 저장
       console.log("🔄 연속 모드 초기화: false");
@@ -365,12 +371,15 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
                   "⚠️ [ScreenModal] 그룹 레코드(배열)는 formData로 설정하지 않음. SelectedItemsDetailInput만 사용합니다.",
                 );
                 setFormData(normalizedData); // SelectedItemsDetailInput이 직접 사용
+                setOriginalData(normalizedData[0] || null); // 🆕 첫 번째 레코드를 원본으로 저장
               } else {
                 setFormData(normalizedData);
+                setOriginalData(normalizedData); // 🆕 원본 데이터 저장 (UPDATE 판단용)
               }
 
               // setFormData 직후 확인
               console.log("🔄 setFormData 호출 완료 (날짜 정규화됨)");
+              console.log("🔄 setOriginalData 호출 완료 (UPDATE 판단용)");
             } else {
               console.error("❌ 수정 데이터 로드 실패:", response.error);
               toast.error("데이터를 불러올 수 없습니다.");
@@ -619,11 +628,17 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
                       component={adjustedComponent}
                       allComponents={screenData.components}
                       formData={formData}
+                      originalData={originalData} // 🆕 원본 데이터 전달 (UPDATE 판단용)
                       onFormDataChange={(fieldName, value) => {
-                        setFormData((prev) => ({
+                        console.log("🔧 [ScreenModal] onFormDataChange 호출:", { fieldName, value });
+                        setFormData((prev) => {
+                          const newFormData = {
                             ...prev,
                             [fieldName]: value,
-                        }));
+                          };
+                          console.log("🔧 [ScreenModal] formData 업데이트:", { prev, newFormData });
+                          return newFormData;
+                        });
                       }}
                       onRefresh={() => {
                         // 부모 화면의 테이블 새로고침 이벤트 발송
@@ -637,8 +652,6 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
                       userId={userId}
                       userName={userName}
                       companyCode={user?.companyCode}
-                      // 🆕 선택된 데이터 전달 (RepeatScreenModal 등에서 사용)
-                      groupedData={selectedData.length > 0 ? selectedData : undefined}
                     />
                   );
                 })}

frontend/components/screen/InteractiveScreenViewerDynamic.tsx

@@ -53,6 +53,8 @@ interface InteractiveScreenViewerProps {
   disabledFields?: string[];
   // 🆕 EditModal 내부인지 여부 (button-primary가 EditModal의 handleSave 사용하도록)
   isInModal?: boolean;
+  // 🆕 원본 데이터 (수정 모드에서 UPDATE 판단용)
+  originalData?: Record<string, any> | null;
 }
 
 export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerProps> = ({
@@ -72,6 +74,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
   groupedData,
   disabledFields = [],
   isInModal = false,
+  originalData, // 🆕 원본 데이터 (수정 모드에서 UPDATE 판단용)
 }) => {
   const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
   const { userName: authUserName, user: authUser } = useAuth();
@@ -331,6 +334,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
           component={comp}
           isInteractive={true}
           formData={formData}
+          originalData={originalData || undefined} // 🆕 원본 데이터 전달 (UPDATE 판단용)
           onFormDataChange={handleFormDataChange}
           screenId={screenInfo?.id}
           tableName={screenInfo?.tableName}

frontend/components/screen/panels/UnifiedPropertiesPanel.tsx

@@ -360,6 +360,7 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
               <ConfigPanelComponent
                 config={config}
                 onChange={handlePanelConfigChange}
+                onConfigChange={handlePanelConfigChange} // 🔧 autocomplete-search-input 등 일부 컴포넌트용
                 tables={tables} // 테이블 정보 전달
                 allTables={allTables} // 🆕 전체 테이블 목록 전달 (selected-items-detail-input 등에서 사용)
                 screenTableName={selectedComponent.tableName || currentTable?.tableName || currentTableName} // 🔧 화면 테이블명 전달

frontend/contexts/SplitPanelContext.tsx

@@ -48,6 +48,12 @@ interface SplitPanelContextValue {
   
   // screenId로 위치 찾기
   getPositionByScreenId: (screenId: number) => SplitPanelPosition | null;
+  
+  // 🆕 우측에 추가된 항목 ID 관리 (좌측 테이블에서 필터링용)
+  addedItemIds: Set<string>;
+  addItemIds: (ids: string[]) => void;
+  removeItemIds: (ids: string[]) => void;
+  clearItemIds: () => void;
 }
 
 const SplitPanelContext = createContext<SplitPanelContextValue | null>(null);
@@ -75,6 +81,9 @@ export function SplitPanelProvider({
   // 강제 리렌더링용 상태
   const [, forceUpdate] = useState(0);
   
+  // 🆕 우측에 추가된 항목 ID 상태
+  const [addedItemIds, setAddedItemIds] = useState<Set<string>>(new Set());
+
   /**
    * 데이터 수신자 등록
    */
@@ -191,6 +200,38 @@ export function SplitPanelProvider({
     [leftScreenId, rightScreenId]
   );
 
+  /**
+   * 🆕 추가된 항목 ID 등록
+   */
+  const addItemIds = useCallback((ids: string[]) => {
+    setAddedItemIds((prev) => {
+      const newSet = new Set(prev);
+      ids.forEach((id) => newSet.add(id));
+      logger.debug(`[SplitPanelContext] 항목 ID 추가: ${ids.length}개`, { ids });
+      return newSet;
+    });
+  }, []);
+
+  /**
+   * 🆕 추가된 항목 ID 제거
+   */
+  const removeItemIds = useCallback((ids: string[]) => {
+    setAddedItemIds((prev) => {
+      const newSet = new Set(prev);
+      ids.forEach((id) => newSet.delete(id));
+      logger.debug(`[SplitPanelContext] 항목 ID 제거: ${ids.length}개`, { ids });
+      return newSet;
+    });
+  }, []);
+
+  /**
+   * 🆕 모든 항목 ID 초기화
+   */
+  const clearItemIds = useCallback(() => {
+    setAddedItemIds(new Set());
+    logger.debug(`[SplitPanelContext] 항목 ID 초기화`);
+  }, []);
+
   // 🆕 useMemo로 value 객체 메모이제이션 (무한 루프 방지)
   const value = React.useMemo<SplitPanelContextValue>(() => ({
     splitPanelId,
@@ -202,6 +243,10 @@ export function SplitPanelProvider({
     getOtherSideReceivers,
     isInSplitPanel: true,
     getPositionByScreenId,
+    addedItemIds,
+    addItemIds,
+    removeItemIds,
+    clearItemIds,
   }), [
     splitPanelId,
     leftScreenId,
@@ -211,6 +256,10 @@ export function SplitPanelProvider({
     transferToOtherSide,
     getOtherSideReceivers,
     getPositionByScreenId,
+    addedItemIds,
+    addItemIds,
+    removeItemIds,
+    clearItemIds,
   ]);
 
   return (

frontend/lib/api/dynamicForm.ts

@@ -124,7 +124,7 @@ export class DynamicFormApi {
    * @returns 업데이트 결과
    */
   static async updateFormDataPartial(
-    id: number,
+    id: string | number, // 🔧 UUID 문자열도 지원
     originalData: Record<string, any>,
     newData: Record<string, any>,
     tableName: string,

frontend/lib/registry/DynamicComponentRenderer.tsx

@@ -337,6 +337,11 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
 
         // onChange 핸들러 - 컴포넌트 타입에 따라 다르게 처리
         const handleChange = (value: any) => {
+          // autocomplete-search-input, entity-search-input은 자체적으로 onFormDataChange를 호출하므로 중복 저장 방지
+          if (componentType === "autocomplete-search-input" || componentType === "entity-search-input") {
+            return;
+          }
+
           // React 이벤트 객체인 경우 값 추출
           let actualValue = value;
           if (value && typeof value === "object" && value.nativeEvent && value.target) {

frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputComponent.tsx

@@ -57,20 +57,42 @@ export function AutocompleteSearchInputComponent({
     filterCondition,
   });
 
+  // 선택된 데이터를 ref로도 유지 (리렌더링 시 초기화 방지)
+  const selectedDataRef = useRef<EntitySearchResult | null>(null);
+  const inputValueRef = useRef<string>("");
+
   // formData에서 현재 값 가져오기 (isInteractive 모드)
   const currentValue = isInteractive && formData && component?.columnName 
     ? formData[component.columnName] 
     : value;
 
-  // value가 변경되면 표시값 업데이트
+  // selectedData 변경 시 ref도 업데이트
   useEffect(() => {
-    if (currentValue && selectedData) {
+    if (selectedData) {
-      setInputValue(selectedData[displayField] || "");
+      selectedDataRef.current = selectedData;
-    } else if (!currentValue) {
+      inputValueRef.current = inputValue;
-      setInputValue("");
-      setSelectedData(null);
     }
-  }, [currentValue, displayField, selectedData]);
+  }, [selectedData, inputValue]);
+
+  // 리렌더링 시 ref에서 값 복원
+  useEffect(() => {
+    if (!selectedData && selectedDataRef.current) {
+      setSelectedData(selectedDataRef.current);
+      setInputValue(inputValueRef.current);
+    }
+  }, []);
+
+  // value가 변경되면 표시값 업데이트 - 단, selectedData가 있으면 유지
+  useEffect(() => {
+    // selectedData가 있으면 표시값 유지 (사용자가 방금 선택한 경우)
+    if (selectedData || selectedDataRef.current) {
+      return;
+    }
+    
+    if (!currentValue) {
+      setInputValue("");
+    }
+  }, [currentValue, selectedData]);
 
   // 외부 클릭 감지
   useEffect(() => {

frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputConfigPanel.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -21,7 +21,9 @@ export function AutocompleteSearchInputConfigPanel({
   config,
   onConfigChange,
 }: AutocompleteSearchInputConfigPanelProps) {
-  const [localConfig, setLocalConfig] = useState(config);
+  // 초기화 여부 추적 (첫 마운트 시에만 config로 초기화)
+  const isInitialized = useRef(false);
+  const [localConfig, setLocalConfig] = useState<AutocompleteSearchInputConfig>(config);
   const [allTables, setAllTables] = useState<any[]>([]);
   const [sourceTableColumns, setSourceTableColumns] = useState<any[]>([]);
   const [targetTableColumns, setTargetTableColumns] = useState<any[]>([]);
@@ -32,12 +34,21 @@ export function AutocompleteSearchInputConfigPanel({
   const [openTargetTableCombo, setOpenTargetTableCombo] = useState(false);
   const [openDisplayFieldCombo, setOpenDisplayFieldCombo] = useState(false);
 
+  // 첫 마운트 시에만 config로 초기화 (이후에는 localConfig 유지)
   useEffect(() => {
+    if (!isInitialized.current && config) {
       setLocalConfig(config);
+      isInitialized.current = true;
+    }
   }, [config]);
 
   const updateConfig = (updates: Partial<AutocompleteSearchInputConfig>) => {
     const newConfig = { ...localConfig, ...updates };
+    console.log("🔧 [AutocompleteConfigPanel] updateConfig:", {
+      updates,
+      localConfig,
+      newConfig,
+    });
     setLocalConfig(newConfig);
     onConfigChange(newConfig);
   };
@@ -325,10 +336,11 @@ export function AutocompleteSearchInputConfigPanel({
               <div className="space-y-1.5">
                 <Label className="text-xs">외부 테이블 컬럼 *</Label>
                 <Select
-                  value={mapping.sourceField}
+                  value={mapping.sourceField || undefined}
-                  onValueChange={(value) =>
+                  onValueChange={(value) => {
-                    updateFieldMapping(index, { sourceField: value })
+                    console.log("🔧 [Select] sourceField 변경:", value);
-                  }
+                    updateFieldMapping(index, { sourceField: value });
+                  }}
                   disabled={!localConfig.tableName || isLoadingSourceColumns}
                 >
                   <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
@@ -347,10 +359,11 @@ export function AutocompleteSearchInputConfigPanel({
               <div className="space-y-1.5">
                 <Label className="text-xs">저장 테이블 컬럼 *</Label>
                 <Select
-                  value={mapping.targetField}
+                  value={mapping.targetField || undefined}
-                  onValueChange={(value) =>
+                  onValueChange={(value) => {
-                    updateFieldMapping(index, { targetField: value })
+                    console.log("🔧 [Select] targetField 변경:", value);
-                  }
+                    updateFieldMapping(index, { targetField: value });
+                  }}
                   disabled={!localConfig.targetTable || isLoadingTargetColumns}
                 >
                   <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">

frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx

@@ -694,7 +694,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
 
       const context: ButtonActionContext = {
         formData: formData || {},
-        originalData: originalData || {}, // 부분 업데이트용 원본 데이터 추가
+        originalData: originalData, // 🔧 빈 객체 대신 undefined 유지 (UPDATE 판단에 사용)
         screenId: effectiveScreenId, // 🆕 ScreenContext에서 가져온 값 사용
         tableName: effectiveTableName, // 🆕 ScreenContext에서 가져온 값 사용
         userId, // 🆕 사용자 ID

frontend/lib/registry/components/repeater-field-group/RepeaterFieldGroupRenderer.tsx

@@ -120,10 +120,15 @@ const RepeaterFieldGroupComponent: React.FC<ComponentRendererProps> = (props) =>
           setGroupedData(items);
           
           // 🆕 원본 데이터 ID 목록 저장 (삭제 추적용)
-          const itemIds = items.map((item: any) => item.id).filter(Boolean);
+          const itemIds = items.map((item: any) => String(item.id || item.po_item_id || item.item_id)).filter(Boolean);
           setOriginalItemIds(itemIds);
           console.log("📋 [RepeaterFieldGroup] 원본 데이터 ID 목록 저장:", itemIds);
           
+          // 🆕 SplitPanelContext에 기존 항목 ID 등록 (좌측 테이블 필터링용)
+          if (splitPanelContext?.addItemIds && itemIds.length > 0) {
+            splitPanelContext.addItemIds(itemIds);
+          }
+          
           // onChange 호출하여 부모에게 알림
           if (onChange && items.length > 0) {
             const dataWithMeta = items.map((item: any) => ({
@@ -244,11 +249,54 @@ const RepeaterFieldGroupComponent: React.FC<ComponentRendererProps> = (props) =>
     const currentValue = parsedValueRef.current;
     
     // mode가 "replace"인 경우 기존 데이터 대체, 그 외에는 추가
-    // 🆕 필터링된 데이터 사용
     const mode = typeof mappingRulesOrMode === "string" ? mappingRulesOrMode : "append";
-    const newItems = mode === "replace" ? filteredData : [...currentValue, ...filteredData];
     
-    console.log("📥 [RepeaterFieldGroup] 최종 데이터:", { currentValue, newItems, mode });
+    let newItems: any[];
+    let addedCount = 0;
+    let duplicateCount = 0;
+    
+    if (mode === "replace") {
+      newItems = filteredData;
+      addedCount = filteredData.length;
+    } else {
+      // 🆕 중복 체크: id 또는 고유 식별자를 기준으로 이미 존재하는 항목 제외
+      const existingIds = new Set(
+        currentValue
+          .map((item: any) => item.id || item.po_item_id || item.item_id)
+          .filter(Boolean)
+      );
+      
+      const uniqueNewItems = filteredData.filter((item: any) => {
+        const itemId = item.id || item.po_item_id || item.item_id;
+        if (itemId && existingIds.has(itemId)) {
+          duplicateCount++;
+          return false; // 중복 항목 제외
+        }
+        return true;
+      });
+      
+      newItems = [...currentValue, ...uniqueNewItems];
+      addedCount = uniqueNewItems.length;
+    }
+
+    console.log("📥 [RepeaterFieldGroup] 최종 데이터:", { 
+      currentValue, 
+      newItems, 
+      mode,
+      addedCount,
+      duplicateCount,
+    });
+
+    // 🆕 groupedData 상태도 직접 업데이트 (UI 즉시 반영)
+    setGroupedData(newItems);
+
+    // 🆕 SplitPanelContext에 추가된 항목 ID 등록 (좌측 테이블 필터링용)
+    if (splitPanelContext?.addItemIds && addedCount > 0) {
+      const newItemIds = newItems
+        .map((item: any) => String(item.id || item.po_item_id || item.item_id))
+        .filter(Boolean);
+      splitPanelContext.addItemIds(newItemIds);
+    }
 
     // JSON 문자열로 변환하여 저장
     const jsonValue = JSON.stringify(newItems);
@@ -268,7 +316,16 @@ const RepeaterFieldGroupComponent: React.FC<ComponentRendererProps> = (props) =>
       onChangeRef.current(jsonValue);
     }
 
-    toast.success(`${filteredData.length}개 항목이 추가되었습니다`);
+    // 결과 메시지 표시
+    if (addedCount > 0) {
+      if (duplicateCount > 0) {
+        toast.success(`${addedCount}개 항목이 추가되었습니다 (${duplicateCount}개 중복 제외)`);
+      } else {
+        toast.success(`${addedCount}개 항목이 추가되었습니다`);
+      }
+    } else if (duplicateCount > 0) {
+      toast.warning(`${duplicateCount}개 항목이 이미 추가되어 있습니다`);
+    }
   }, []);
 
   // DataReceivable 인터페이스 구현
@@ -311,14 +368,69 @@ const RepeaterFieldGroupComponent: React.FC<ComponentRendererProps> = (props) =>
     }
   }, [splitPanelContext, screenContext?.splitPanelPosition, component.id, dataReceiver]);
 
-  return (
+  // 🆕 전역 이벤트 리스너 (splitPanelDataTransfer)
-    <RepeaterInput
+  useEffect(() => {
-      value={parsedValue}
+    const handleSplitPanelDataTransfer = (event: CustomEvent) => {
-      onChange={(newValue) => {
+      const { data, mode, mappingRules } = event.detail;
+      
+      console.log("📥 [RepeaterFieldGroup] splitPanelDataTransfer 이벤트 수신:", {
+        dataCount: data?.length,
+        mode,
+        componentId: component.id,
+      });
+      
+      // 우측 패널의 리피터 필드 그룹만 데이터를 수신
+      const splitPanelPosition = screenContext?.splitPanelPosition;
+      if (splitPanelPosition === "right" && data && data.length > 0) {
+        handleReceiveData(data, mappingRules || mode || "append");
+      }
+    };
+
+    window.addEventListener("splitPanelDataTransfer", handleSplitPanelDataTransfer as EventListener);
+    
+    return () => {
+      window.removeEventListener("splitPanelDataTransfer", handleSplitPanelDataTransfer as EventListener);
+    };
+  }, [screenContext?.splitPanelPosition, handleReceiveData, component.id]);
+
+  // 🆕 RepeaterInput에서 항목 변경 시 SplitPanelContext의 addedItemIds 동기화
+  const handleRepeaterChange = useCallback((newValue: any[]) => {
     // 배열을 JSON 문자열로 변환하여 저장
     const jsonValue = JSON.stringify(newValue);
     onChange?.(jsonValue);
-      }}
+    
+    // 🆕 groupedData 상태도 업데이트
+    setGroupedData(newValue);
+    
+    // 🆕 SplitPanelContext의 addedItemIds 동기화
+    if (splitPanelContext?.isInSplitPanel && screenContext?.splitPanelPosition === "right") {
+      // 현재 항목들의 ID 목록
+      const currentIds = newValue
+        .map((item: any) => String(item.id || item.po_item_id || item.item_id))
+        .filter(Boolean);
+      
+      // 기존 addedItemIds와 비교하여 삭제된 ID 찾기
+      const addedIds = splitPanelContext.addedItemIds;
+      const removedIds = Array.from(addedIds).filter(id => !currentIds.includes(id));
+      
+      if (removedIds.length > 0) {
+        console.log("🗑️ [RepeaterFieldGroup] 삭제된 항목 ID 제거:", removedIds);
+        splitPanelContext.removeItemIds(removedIds);
+      }
+      
+      // 새로 추가된 ID가 있으면 등록
+      const newIds = currentIds.filter((id: string) => !addedIds.has(id));
+      if (newIds.length > 0) {
+        console.log("➕ [RepeaterFieldGroup] 새 항목 ID 추가:", newIds);
+        splitPanelContext.addItemIds(newIds);
+      }
+    }
+  }, [onChange, splitPanelContext, screenContext?.splitPanelPosition]);
+
+  return (
+    <RepeaterInput
+      value={parsedValue}
+      onChange={handleRepeaterChange}
       config={config}
       disabled={disabled}
       readonly={readonly}

frontend/lib/registry/components/table-list/TableListComponent.tsx

@@ -330,6 +330,25 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   const [data, setData] = useState<Record<string, any>[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  
+  // 🆕 분할 패널에서 우측에 이미 추가된 항목 필터링 (좌측 테이블에만 적용)
+  const filteredData = useMemo(() => {
+    // 분할 패널 좌측에 있고, 우측에 추가된 항목이 있는 경우에만 필터링
+    if (splitPanelPosition === "left" && splitPanelContext?.addedItemIds && splitPanelContext.addedItemIds.size > 0) {
+      const addedIds = splitPanelContext.addedItemIds;
+      const filtered = data.filter((row) => {
+        const rowId = String(row.id || row.po_item_id || row.item_id || "");
+        return !addedIds.has(rowId);
+      });
+      console.log("🔍 [TableList] 우측 추가 항목 필터링:", {
+        originalCount: data.length,
+        filteredCount: filtered.length,
+        addedIdsCount: addedIds.size,
+      });
+      return filtered;
+    }
+    return data;
+  }, [data, splitPanelPosition, splitPanelContext?.addedItemIds]);
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(0);
   const [totalItems, setTotalItems] = useState(0);
@@ -438,8 +457,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     componentType: "table-list",
     
     getSelectedData: () => {
-      // 선택된 행의 실제 데이터 반환
+      // 🆕 필터링된 데이터에서 선택된 행만 반환 (우측에 추가된 항목 제외)
-      const selectedData = data.filter((row) => {
+      const selectedData = filteredData.filter((row) => {
         const rowId = String(row.id || row[tableConfig.selectedTable + "_id"] || "");
         return selectedRows.has(rowId);
       });
@@ -447,7 +466,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     },
     
     getAllData: () => {
-      return data;
+      // 🆕 필터링된 데이터 반환
+      return filteredData;
     },
     
     clearSelection: () => {
@@ -1375,31 +1395,31 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       });
     }
 
-    const allRowsSelected = data.every((row, index) => newSelectedRows.has(getRowKey(row, index)));
+    const allRowsSelected = filteredData.every((row, index) => newSelectedRows.has(getRowKey(row, index)));
-    setIsAllSelected(allRowsSelected && data.length > 0);
+    setIsAllSelected(allRowsSelected && filteredData.length > 0);
   };
 
   const handleSelectAll = (checked: boolean) => {
     if (checked) {
-      const allKeys = data.map((row, index) => getRowKey(row, index));
+      const allKeys = filteredData.map((row, index) => getRowKey(row, index));
       const newSelectedRows = new Set(allKeys);
       setSelectedRows(newSelectedRows);
       setIsAllSelected(true);
 
       if (onSelectedRowsChange) {
-        onSelectedRowsChange(Array.from(newSelectedRows), data, sortColumn || undefined, sortDirection);
+        onSelectedRowsChange(Array.from(newSelectedRows), filteredData, sortColumn || undefined, sortDirection);
       }
       if (onFormDataChange) {
         onFormDataChange({
           selectedRows: Array.from(newSelectedRows),
-          selectedRowsData: data,
+          selectedRowsData: filteredData,
         });
       }
 
       // 🆕 modalDataStore에 전체 데이터 저장
-      if (tableConfig.selectedTable && data.length > 0) {
+      if (tableConfig.selectedTable && filteredData.length > 0) {
         import("@/stores/modalDataStore").then(({ useModalDataStore }) => {
-          const modalItems = data.map((row, idx) => ({
+          const modalItems = filteredData.map((row, idx) => ({
             id: getRowKey(row, idx),
             originalData: row,
             additionalData: {},
@@ -2003,11 +2023,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
   // 데이터 그룹화
   const groupedData = useMemo((): GroupedData[] => {
-    if (groupByColumns.length === 0 || data.length === 0) return [];
+    if (groupByColumns.length === 0 || filteredData.length === 0) return [];
 
     const grouped = new Map<string, any[]>();
 
-    data.forEach((item) => {
+    filteredData.forEach((item) => {
       // 그룹 키 생성: "통화:KRW > 단위:EA"
       const keyParts = groupByColumns.map((col) => {
         // 카테고리/엔티티 타입인 경우 _name 필드 사용
@@ -2334,7 +2354,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           </div>
         )}
 
-        <div style={{ marginTop: `${tableConfig.filter?.bottomSpacing ?? 8}px`, flex: 1, overflow: "hidden" }}>
+        <div style={{ flex: 1, overflow: "hidden" }}>
           <SingleTableWithSticky
             data={data}
             columns={visibleColumns}
@@ -2401,7 +2421,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         <div
           className="flex flex-1 flex-col"
           style={{ 
-            marginTop: `${tableConfig.filter?.bottomSpacing ?? 8}px`,
             width: "100%",
             height: "100%",
             overflow: "hidden",
@@ -2431,7 +2450,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                 className="sticky z-50"
                 style={{
                   position: "sticky",
-                  top: "-2px",
+                  top: 0,
                   zIndex: 50,
                   backgroundColor: "hsl(var(--background))",
                 }}
@@ -2706,7 +2725,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   })
                 ) : (
                   // 일반 렌더링 (그룹 없음)
-                  data.map((row, index) => (
+                  filteredData.map((row, index) => (
                     <tr
                       key={index}
                       className={cn(

frontend/lib/registry/components/table-search-widget/TableSearchWidget.tsx

@@ -3,7 +3,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Settings, Filter, Layers, X } from "lucide-react";
+import { Settings, Filter, Layers, X, Check, ChevronsUpDown } from "lucide-react";
 import { useTableOptions } from "@/contexts/TableOptionsContext";
 import { useTableSearchWidgetHeight } from "@/contexts/TableSearchWidgetHeightContext";
 import { ColumnVisibilityPanel } from "@/components/screen/table-options/ColumnVisibilityPanel";
@@ -13,6 +13,9 @@ import { TableFilter } from "@/types/table-options";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { ModernDatePicker } from "@/components/screen/filters/ModernDatePicker";
 import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Checkbox } from "@/components/ui/checkbox";
+import { cn } from "@/lib/utils";
 
 interface PresetFilter {
   id: string;
@@ -20,6 +23,7 @@ interface PresetFilter {
   columnLabel: string;
   filterType: "text" | "number" | "date" | "select";
   width?: number;
+  multiSelect?: boolean; // 다중선택 여부 (select 타입에서만 사용)
 }
 
 interface TableSearchWidgetProps {
@@ -280,6 +284,11 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
           }
         }
         
+        // 다중선택 배열을 처리 (파이프로 연결된 문자열로 변환)
+        if (filter.filterType === "select" && Array.isArray(filterValue)) {
+          filterValue = filterValue.join("|");
+        }
+        
         return {
           ...filter,
           value: filterValue || "",
@@ -289,6 +298,7 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
         // 빈 값 체크
         if (!f.value) return false;
         if (typeof f.value === "string" && f.value === "") return false;
+        if (Array.isArray(f.value) && f.value.length === 0) return false;
         return true;
       });
 
@@ -343,12 +353,6 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
       case "select": {
         let options = selectOptions[filter.columnName] || [];
 
-        // 현재 선택된 값이 옵션 목록에 없으면 추가 (데이터 없을 때도 선택값 유지)
-        if (value && !options.find((opt) => opt.value === value)) {
-          const savedLabel = selectedLabels[filter.columnName] || value;
-          options = [{ value, label: savedLabel }, ...options];
-        }
-
         // 중복 제거 (value 기준)
         const uniqueOptions = options.reduce(
           (acc, option) => {
@@ -360,39 +364,86 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
           [] as Array<{ value: string; label: string }>,
         );
 
-        return (
+        // 항상 다중선택 모드
-          <Select
+        const selectedValues: string[] = Array.isArray(value) ? value : (value ? [value] : []);
-            value={value}
+        
-            onValueChange={(val) => {
+        // 선택된 값들의 라벨 표시
-              // 선택한 값의 라벨 저장
+        const getDisplayText = () => {
-              const selectedOption = uniqueOptions.find((opt) => opt.value === val);
+          if (selectedValues.length === 0) return column?.columnLabel || "선택";
-              if (selectedOption) {
+          if (selectedValues.length === 1) {
-                setSelectedLabels((prev) => ({
+            const opt = uniqueOptions.find(o => o.value === selectedValues[0]);
-                  ...prev,
+            return opt?.label || selectedValues[0];
-                  [filter.columnName]: selectedOption.label,
-                }));
           }
-              handleFilterChange(filter.columnName, val);
+          return `${selectedValues.length}개 선택됨`;
-            }}
+        };
-          >
+
-            <SelectTrigger
+        const handleMultiSelectChange = (optionValue: string, checked: boolean) => {
-              className="h-9 min-h-9 text-xs focus:ring-0 focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none sm:text-sm"
+          let newValues: string[];
+          if (checked) {
+            newValues = [...selectedValues, optionValue];
+          } else {
+            newValues = selectedValues.filter(v => v !== optionValue);
+          }
+          handleFilterChange(filter.columnName, newValues.length > 0 ? newValues : "");
+        };
+
+        return (
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                className={cn(
+                  "h-9 min-h-9 justify-between text-xs font-normal focus:ring-0 focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 sm:text-sm",
+                  selectedValues.length === 0 && "text-muted-foreground"
+                )}
                 style={{ width: `${width}px`, height: "36px", minHeight: "36px", outline: "none", boxShadow: "none" }}
               >
-              <SelectValue placeholder={column?.columnLabel || "선택"} />
+                <span className="truncate">{getDisplayText()}</span>
-            </SelectTrigger>
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-            <SelectContent>
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent 
+              className="p-0" 
+              style={{ width: `${width}px` }}
+              align="start"
+            >
+              <div className="max-h-60 overflow-auto">
                 {uniqueOptions.length === 0 ? (
-                <div className="text-muted-foreground px-2 py-1.5 text-xs">옵션 없음</div>
+                  <div className="text-muted-foreground px-3 py-2 text-xs">옵션 없음</div>
                 ) : (
-                uniqueOptions.map((option, index) => (
+                  <div className="p-1">
-                  <SelectItem key={`${filter.columnName}-${option.value}-${index}`} value={option.value}>
+                    {uniqueOptions.map((option, index) => (
-                    {option.label}
+                      <div
-                  </SelectItem>
+                        key={`${filter.columnName}-multi-${option.value}-${index}`}
-                ))
+                        className="flex items-center space-x-2 rounded-sm px-2 py-1.5 hover:bg-accent cursor-pointer"
+                        onClick={() => handleMultiSelectChange(option.value, !selectedValues.includes(option.value))}
+                      >
+                        <Checkbox
+                          checked={selectedValues.includes(option.value)}
+                          onCheckedChange={(checked) => handleMultiSelectChange(option.value, checked as boolean)}
+                          onClick={(e) => e.stopPropagation()}
+                        />
+                        <span className="text-xs sm:text-sm">{option.label}</span>
+                      </div>
+                    ))}
+                  </div>
                 )}
-            </SelectContent>
+              </div>
-          </Select>
+              {selectedValues.length > 0 && (
+                <div className="border-t p-1">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="w-full h-7 text-xs"
+                    onClick={() => handleFilterChange(filter.columnName, "")}
+                  >
+                    선택 초기화
+                  </Button>
+                </div>
+              )}
+            </PopoverContent>
+          </Popover>
         );
       }
 

frontend/lib/registry/components/table-search-widget/TableSearchWidgetConfigPanel.tsx

@@ -29,6 +29,7 @@ interface PresetFilter {
   columnLabel: string;
   filterType: "text" | "number" | "date" | "select";
   width?: number;
+  multiSelect?: boolean; // 다중선택 여부 (select 타입에서만 사용)
 }
 
 export function TableSearchWidgetConfigPanel({

frontend/lib/utils/buttonActions.ts

@@ -268,6 +268,9 @@ export class ButtonActionExecutor {
         case "code_merge":
           return await this.handleCodeMerge(config, context);
 
+        case "transferData":
+          return await this.handleTransferData(config, context);
+
         case "geolocation":
           return await this.handleGeolocation(config, context);
 
@@ -309,14 +312,16 @@ export class ButtonActionExecutor {
 
     // 🆕 저장 전 이벤트 발생 (SelectedItemsDetailInput 등에서 최신 데이터 수집)
     // context.formData를 이벤트 detail에 포함하여 직접 수정 가능하게 함
-    window.dispatchEvent(new CustomEvent("beforeFormSave", {
+    window.dispatchEvent(
+      new CustomEvent("beforeFormSave", {
         detail: {
-        formData: context.formData
+          formData: context.formData,
-      }
+        },
-    }));
+      }),
+    );
 
     // 약간의 대기 시간을 주어 이벤트 핸들러가 formData를 업데이트할 수 있도록 함
-    await new Promise(resolve => setTimeout(resolve, 100));
+    await new Promise((resolve) => setTimeout(resolve, 100));
 
     console.log("📦 [handleSave] beforeFormSave 이벤트 후 formData:", context.formData);
 
@@ -328,33 +333,41 @@ export class ButtonActionExecutor {
         key,
         isArray: Array.isArray(value),
         length: Array.isArray(value) ? value.length : 0,
-        firstItem: Array.isArray(value) && value.length > 0 ? {
+        firstItem:
+          Array.isArray(value) && value.length > 0
+            ? {
                 hasOriginalData: !!value[0]?.originalData,
                 hasFieldGroups: !!value[0]?.fieldGroups,
-          keys: Object.keys(value[0] || {})
+                keys: Object.keys(value[0] || {}),
-        } : null
+              }
-      }))
+            : null,
+      })),
     });
 
     // 🔧 formData 자체가 배열인 경우 (ScreenModal의 그룹 레코드 수정)
     if (Array.isArray(context.formData)) {
-      console.log("⚠️ [handleSave] formData가 배열입니다 - SelectedItemsDetailInput이 이미 처리했으므로 일반 저장 건너뜀");
+      console.log(
+        "⚠️ [handleSave] formData가 배열입니다 - SelectedItemsDetailInput이 이미 처리했으므로 일반 저장 건너뜀",
+      );
       console.log("⚠️ [handleSave] formData 배열:", context.formData);
       // ✅ SelectedItemsDetailInput이 이미 UPSERT를 실행했으므로 일반 저장을 건너뜀
       return true; // 성공으로 반환
     }
 
-    const selectedItemsKeys = Object.keys(context.formData).filter(key => {
+    const selectedItemsKeys = Object.keys(context.formData).filter((key) => {
       const value = context.formData[key];
       console.log(`🔍 [handleSave] 필터링 체크 - ${key}:`, {
         isArray: Array.isArray(value),
         length: Array.isArray(value) ? value.length : 0,
-        firstItem: Array.isArray(value) && value.length > 0 ? {
+        firstItem:
+          Array.isArray(value) && value.length > 0
+            ? {
                 keys: Object.keys(value[0] || {}),
                 hasOriginalData: !!value[0]?.originalData,
                 hasFieldGroups: !!value[0]?.fieldGroups,
                 actualValue: value[0],
-        } : null
+              }
+            : null,
       });
       return Array.isArray(value) && value.length > 0 && value[0]?.originalData && value[0]?.fieldGroups;
     });
@@ -401,9 +414,20 @@ export class ButtonActionExecutor {
         const primaryKeys = primaryKeyResult.data || [];
         const primaryKeyValue = this.extractPrimaryKeyValueFromDB(formData, primaryKeys);
 
-        // 단순히 기본키 값 존재 여부로 판단 (임시)
+        // 🔧 수정: originalData가 있고 실제 데이터가 있으면 UPDATE 모드로 처리
-        // TODO: 실제 테이블에서 기본키로 레코드 존재 여부 확인하는 API 필요
+        // originalData는 수정 버튼 클릭 시 editData로 전달되어 context.originalData로 설정됨
-        const isUpdate = false; // 현재는 항상 INSERT로 처리
+        // 빈 객체 {}도 truthy이므로 Object.keys로 실제 데이터 유무 확인
+        const hasRealOriginalData = originalData && Object.keys(originalData).length > 0;
+        const isUpdate = hasRealOriginalData && !!primaryKeyValue;
+
+        console.log("🔍 [handleSave] INSERT/UPDATE 판단:", {
+          hasOriginalData: !!originalData,
+          hasRealOriginalData,
+          originalDataKeys: originalData ? Object.keys(originalData) : [],
+          primaryKeyValue,
+          isUpdate,
+          primaryKeys,
+        });
 
         let saveResult;
 
@@ -667,7 +691,7 @@ export class ButtonActionExecutor {
   private static async handleBatchSave(
     config: ButtonActionConfig,
     context: ButtonActionContext,
-    selectedItemsKeys: string[]
+    selectedItemsKeys: string[],
   ): Promise<boolean> {
     const { formData, tableName, screenId, selectedRowsData, originalData } = context;
 
@@ -695,10 +719,10 @@ export class ButtonActionExecutor {
       // 🆕 modalDataStore에서 누적된 모든 테이블 데이터 가져오기
       // (여러 단계 모달에서 전달된 데이터 접근용)
       let modalDataStoreRegistry: Record<string, any[]> = {};
-      if (typeof window !== 'undefined') {
+      if (typeof window !== "undefined") {
         try {
           // Zustand store에서 데이터 가져오기
-          const { useModalDataStore } = await import('@/stores/modalDataStore');
+          const { useModalDataStore } = await import("@/stores/modalDataStore");
           modalDataStoreRegistry = useModalDataStore.getState().dataRegistry;
         } catch (error) {
           console.warn("⚠️ modalDataStore 로드 실패:", error);
@@ -710,11 +734,10 @@ export class ButtonActionExecutor {
       Object.entries(modalDataStoreRegistry).forEach(([key, items]) => {
         if (Array.isArray(items) && items.length > 0) {
           // ModalDataItem[] → originalData 추출
-          modalDataStore[key] = items.map(item => item.originalData || item);
+          modalDataStore[key] = items.map((item) => item.originalData || item);
         }
       });
 
-
       // 각 SelectedItemsDetailInput 컴포넌트의 데이터 처리
       for (const key of selectedItemsKeys) {
         // 🆕 새로운 데이터 구조: ItemData[] with fieldGroups
@@ -733,26 +756,24 @@ export class ButtonActionExecutor {
           const groupKeys = Object.keys(item.fieldGroups);
 
           // 각 그룹의 항목 배열 가져오기
-          const groupArrays = groupKeys.map(groupKey => ({
+          const groupArrays = groupKeys.map((groupKey) => ({
             groupKey,
-            entries: item.fieldGroups[groupKey] || []
+            entries: item.fieldGroups[groupKey] || [],
           }));
 
           // 카티션 곱 계산 함수
           const cartesianProduct = (arrays: any[][]): any[][] => {
             if (arrays.length === 0) return [[]];
-            if (arrays.length === 1) return arrays[0].map(item => [item]);
+            if (arrays.length === 1) return arrays[0].map((item) => [item]);
 
             const [first, ...rest] = arrays;
             const restProduct = cartesianProduct(rest);
 
-            return first.flatMap(item => 
+            return first.flatMap((item) => restProduct.map((combination) => [item, ...combination]));
-              restProduct.map(combination => [item, ...combination])
-            );
           };
 
           // 모든 그룹의 카티션 곱 생성
-          const entryArrays = groupArrays.map(g => g.entries);
+          const entryArrays = groupArrays.map((g) => g.entries);
           const combinations = cartesianProduct(entryArrays);
 
           // 각 조합을 개별 레코드로 저장
@@ -1141,7 +1162,7 @@ export class ButtonActionExecutor {
     if (!dataSourceId && context.allComponents) {
       // TableList 우선 감지
       const tableListComponent = context.allComponents.find(
-        (comp: any) => comp.componentType === "table-list" && comp.componentConfig?.tableName
+        (comp: any) => comp.componentType === "table-list" && comp.componentConfig?.tableName,
       );
 
       if (tableListComponent) {
@@ -1153,7 +1174,7 @@ export class ButtonActionExecutor {
       } else {
         // TableList가 없으면 SplitPanelLayout의 좌측 패널 감지
         const splitPanelComponent = context.allComponents.find(
-          (comp: any) => comp.componentType === "split-panel-layout" && comp.componentConfig?.leftPanel?.tableName
+          (comp: any) => comp.componentType === "split-panel-layout" && comp.componentConfig?.leftPanel?.tableName,
         );
 
         if (splitPanelComponent) {
@@ -1511,7 +1532,7 @@ export class ButtonActionExecutor {
               comp.type === "screen-split-panel" ||
               comp.componentType === "screen-split-panel" ||
               comp.type === "split-panel-layout" ||
-              comp.componentType === "split-panel-layout"
+              comp.componentType === "split-panel-layout",
           );
         }
         console.log("🔍 [openEditModal] 분할 패널 확인:", {
@@ -1666,7 +1687,8 @@ export class ButtonActionExecutor {
           if (copiedData[field] !== undefined) {
             const originalValue = copiedData[field];
             const ruleIdKey = `${field}_numberingRuleId`;
-            const hasNumberingRule = rowData[ruleIdKey] !== undefined && rowData[ruleIdKey] !== null && rowData[ruleIdKey] !== "";
+            const hasNumberingRule =
+              rowData[ruleIdKey] !== undefined && rowData[ruleIdKey] !== null && rowData[ruleIdKey] !== "";
 
             // 품목코드를 무조건 공백으로 초기화
             copiedData[field] = "";
@@ -2671,7 +2693,7 @@ export class ButtonActionExecutor {
           if (Array.isArray(response)) {
             // 배열로 직접 반환된 경우
             dataToExport = response;
-          } else if (response && 'data' in response) {
+          } else if (response && "data" in response) {
             // EntityJoinResponse 객체인 경우
             dataToExport = response.data;
           } else {
@@ -2738,7 +2760,7 @@ export class ButtonActionExecutor {
           let layoutData = layoutResponse.data.data;
 
           // components가 문자열이면 파싱
-                if (typeof layoutData.components === 'string') {
+          if (typeof layoutData.components === "string") {
             layoutData.components = JSON.parse(layoutData.components);
           }
 
@@ -2748,7 +2770,7 @@ export class ButtonActionExecutor {
 
             for (const comp of components) {
               // componentType이 'table-list'인지 확인
-                    const isTableList = comp.componentType === 'table-list';
+              const isTableList = comp.componentType === "table-list";
 
               // componentConfig 안에서 테이블명 확인
               const matchesTable =
@@ -2772,14 +2794,12 @@ export class ButtonActionExecutor {
             const columns = tableListComponent.componentConfig.columns;
 
             // visible이 true인 컬럼만 추출
-                  visibleColumns = columns
+            visibleColumns = columns.filter((col: any) => col.visible !== false).map((col: any) => col.columnName);
-                    .filter((col: any) => col.visible !== false)
-                    .map((col: any) => col.columnName);
 
             // 🎯 column_labels 테이블에서 실제 라벨 가져오기
             try {
               const columnsResponse = await apiClient.get(`/table-management/tables/${context.tableName}/columns`, {
-                      params: { page: 1, size: 9999 }
+                params: { page: 1, size: 9999 },
               });
 
               if (columnsResponse.data?.success && columnsResponse.data?.data) {
@@ -2821,7 +2841,6 @@ export class ButtonActionExecutor {
         console.error("❌ 화면 레이아웃 조회 실패:", error);
       }
 
-
       // 🎨 카테고리 값들 조회 (한 번만)
       const categoryMap: Record<string, Record<string, string>> = {};
       let categoryColumns: string[] = [];
@@ -2835,9 +2854,9 @@ export class ButtonActionExecutor {
 
           if (categoryColumnsResponse.success && categoryColumnsResponse.data) {
             // 백엔드에서 정의된 카테고리 컬럼들
-            categoryColumns = categoryColumnsResponse.data.map((col: any) => 
+            categoryColumns = categoryColumnsResponse.data
-              col.column_name || col.columnName || col.name
+              .map((col: any) => col.column_name || col.columnName || col.name)
-            ).filter(Boolean); // undefined 제거
+              .filter(Boolean); // undefined 제거
 
             // 각 카테고리 컬럼의 값들 조회
             for (const columnName of categoryColumns) {
@@ -2854,7 +2873,6 @@ export class ButtonActionExecutor {
                       categoryMap[columnName][code] = label;
                     }
                   });
-                  
                 }
               } catch (error) {
                 console.error(`❌ 카테고리 "${columnName}" 조회 실패:`, error);
@@ -2883,15 +2901,15 @@ export class ButtonActionExecutor {
               let value = row[columnName];
 
               // writer → writer_name 사용
-              if (columnName === 'writer' && row['writer_name']) {
+              if (columnName === "writer" && row["writer_name"]) {
-                value = row['writer_name'];
+                value = row["writer_name"];
               }
               // 다른 엔티티 필드들도 _name 우선 사용
               else if (row[`${columnName}_name`]) {
                 value = row[`${columnName}_name`];
               }
               // 카테고리 타입 필드는 라벨로 변환 (백엔드에서 정의된 컬럼만)
-              else if (categoryMap[columnName] && typeof value === 'string' && categoryMap[columnName][value]) {
+              else if (categoryMap[columnName] && typeof value === "string" && categoryMap[columnName][value]) {
                 value = categoryMap[columnName][value];
               }
 
@@ -2901,7 +2919,6 @@ export class ButtonActionExecutor {
 
           return filteredRow;
         });
-
       }
 
       // 최대 행 수 제한
@@ -3181,7 +3198,7 @@ export class ButtonActionExecutor {
               `- 테이블 수: ${preview.preview.length}개\n` +
               `- 총 행 수: ${totalRows}개\n\n` +
               `데이터는 삭제되지 않고, "${columnName}" 컬럼 값만 변경됩니다.\n\n` +
-            `계속하시겠습니까?`
+              `계속하시겠습니까?`,
           );
 
           if (!confirmMerge) {
@@ -3206,8 +3223,7 @@ export class ButtonActionExecutor {
       if (response.data.success) {
         const data = response.data.data;
         toast.success(
-          `코드 병합 완료!\n` +
+          `코드 병합 완료!\n` + `${data.affectedTables.length}개 테이블, ${data.totalRowsUpdated}개 행 업데이트`,
-          `${data.affectedTables.length}개 테이블, ${data.totalRowsUpdated}개 행 업데이트`
         );
 
         // 화면 새로고침
@@ -3227,6 +3243,102 @@ export class ButtonActionExecutor {
     }
   }
 
+  /**
+   * 데이터 전달 액션 처리 (분할 패널에서 좌측 → 우측 데이터 전달)
+   */
+  private static async handleTransferData(config: ButtonActionConfig, context: ButtonActionContext): Promise<boolean> {
+    try {
+      console.log("📤 [handleTransferData] 데이터 전달 시작:", { config, context });
+
+      // 선택된 행 데이터 확인
+      const selectedRows = context.selectedRowsData || context.flowSelectedData || [];
+
+      if (!selectedRows || selectedRows.length === 0) {
+        toast.error("전달할 데이터를 선택해주세요.");
+        return false;
+      }
+
+      console.log("📤 [handleTransferData] 선택된 데이터:", selectedRows);
+
+      // dataTransfer 설정 확인
+      const dataTransfer = config.dataTransfer;
+
+      if (!dataTransfer) {
+        // dataTransfer 설정이 없으면 기본 동작: 전역 이벤트로 데이터 전달
+        console.log("📤 [handleTransferData] dataTransfer 설정 없음 - 전역 이벤트 발생");
+
+        const transferEvent = new CustomEvent("splitPanelDataTransfer", {
+          detail: {
+            data: selectedRows,
+            mode: "append",
+            sourcePosition: "left",
+          },
+        });
+        window.dispatchEvent(transferEvent);
+
+        toast.success(`${selectedRows.length}개 항목이 전달되었습니다.`);
+        return true;
+      }
+
+      // dataTransfer 설정이 있는 경우
+      const { targetType, targetComponentId, targetScreenId, mappingRules, receiveMode } = dataTransfer;
+
+      if (targetType === "component" && targetComponentId) {
+        // 같은 화면 내 컴포넌트로 전달
+        console.log("📤 [handleTransferData] 컴포넌트로 전달:", targetComponentId);
+
+        const transferEvent = new CustomEvent("componentDataTransfer", {
+          detail: {
+            targetComponentId,
+            data: selectedRows,
+            mappingRules,
+            mode: receiveMode || "append",
+          },
+        });
+        window.dispatchEvent(transferEvent);
+
+        toast.success(`${selectedRows.length}개 항목이 전달되었습니다.`);
+        return true;
+      } else if (targetType === "screen" && targetScreenId) {
+        // 다른 화면으로 전달 (분할 패널 등)
+        console.log("📤 [handleTransferData] 화면으로 전달:", targetScreenId);
+
+        const transferEvent = new CustomEvent("screenDataTransfer", {
+          detail: {
+            targetScreenId,
+            data: selectedRows,
+            mappingRules,
+            mode: receiveMode || "append",
+          },
+        });
+        window.dispatchEvent(transferEvent);
+
+        toast.success(`${selectedRows.length}개 항목이 전달되었습니다.`);
+        return true;
+      } else {
+        // 기본: 분할 패널 데이터 전달 이벤트
+        console.log("📤 [handleTransferData] 기본 분할 패널 전달");
+
+        const transferEvent = new CustomEvent("splitPanelDataTransfer", {
+          detail: {
+            data: selectedRows,
+            mappingRules,
+            mode: receiveMode || "append",
+            sourcePosition: "left",
+          },
+        });
+        window.dispatchEvent(transferEvent);
+
+        toast.success(`${selectedRows.length}개 항목이 전달되었습니다.`);
+        return true;
+      }
+    } catch (error: any) {
+      console.error("❌ 데이터 전달 실패:", error);
+      toast.error(error.message || "데이터 전달 중 오류가 발생했습니다.");
+      return false;
+    }
+  }
+
   /**
    * 위치정보 가져오기 액션 처리
    */
@@ -3357,14 +3469,18 @@ export class ButtonActionExecutor {
       }
 
       // 성공 메시지 생성
-      let successMsg = config.successMessage || 
+      let successMsg =
+        config.successMessage ||
         `위치 정보를 가져왔습니다.\n위도: ${latitude.toFixed(6)}, 경도: ${longitude.toFixed(6)}`;
 
       // 추가 필드 변경이 있으면 메시지에 포함
       if (config.geolocationUpdateField && config.geolocationExtraField) {
         if (extraTableUpdated) {
           successMsg += `\n[${config.geolocationExtraTableName}] ${config.geolocationExtraField}: ${config.geolocationExtraValue}`;
-        } else if (!config.geolocationExtraTableName || config.geolocationExtraTableName === (config.geolocationTableName || context.tableName)) {
+        } else if (
+          !config.geolocationExtraTableName ||
+          config.geolocationExtraTableName === (config.geolocationTableName || context.tableName)
+        ) {
           successMsg += `\n${config.geolocationExtraField}: ${config.geolocationExtraValue}`;
         }
       }
@@ -3506,9 +3622,11 @@ export class ButtonActionExecutor {
               toast.success(config.successMessage || "상태가 변경되었습니다.");
 
               // 테이블 새로고침 이벤트 발생
-              window.dispatchEvent(new CustomEvent("refreshTableData", {
+              window.dispatchEvent(
-                detail: { tableName }
+                new CustomEvent("refreshTableData", {
-              }));
+                  detail: { tableName },
+                }),
+              );
 
               return true;
             } else {
@@ -3636,6 +3754,11 @@ export const DEFAULT_BUTTON_ACTIONS: Record<ButtonActionType, Partial<ButtonActi
     successMessage: "코드 병합이 완료되었습니다.",
     errorMessage: "코드 병합 중 오류가 발생했습니다.",
   },
+  transferData: {
+    type: "transferData",
+    successMessage: "데이터가 전달되었습니다.",
+    errorMessage: "데이터 전달 중 오류가 발생했습니다.",
+  },
   geolocation: {
     type: "geolocation",
     geolocationHighAccuracy: true,

화면_임베딩_및_데이터_전달_시스템_구현_계획서.md

@@ -1,6 +1,7 @@
 # 화면 임베딩 및 데이터 전달 시스템 구현 계획서
 
 ## 📋 목차
+
 1. [개요](#개요)
 2. [현재 문제점](#현재-문제점)
 3. [목표](#목표)
@@ -17,9 +18,11 @@
 ## 개요
 
 ### 배경
+
 현재 화면관리 시스템은 단일 화면 단위로만 동작하며, 화면 간 데이터 전달이나 화면 임베딩이 불가능합니다. 실무에서는 "입고 등록"과 같이 **좌측에서 데이터를 선택하고 우측으로 전달하여 처리하는** 복잡한 워크플로우가 필요합니다.
 
 ### 핵심 요구사항
+
 - **화면 임베딩**: 기존 화면을 다른 화면 안에 재사용
 - **데이터 전달**: 한 화면에서 선택한 데이터를 다른 화면의 컴포넌트로 전달
 - **유연한 매핑**: 테이블뿐만 아니라 입력 필드, 셀렉트 박스, 리피터 등 모든 컴포넌트에 데이터 주입 가능
@@ -30,18 +33,22 @@
 ## 현재 문제점
 
 ### 1. 화면 재사용 불가
+
 - 각 화면은 독립적으로만 동작
 - 동일한 기능을 여러 화면에서 중복 구현
 
 ### 2. 화면 간 데이터 전달 불가
+
 - 한 화면에서 선택한 데이터를 다른 화면으로 전달할 수 없음
 - 사용자가 수동으로 복사/붙여넣기 해야 함
 
 ### 3. 복잡한 워크플로우 구현 불가
+
 - "발주 목록 조회 → 품목 선택 → 입고 등록"과 같은 프로세스를 단일 화면에서 처리 불가
 - 여러 화면을 오가며 작업해야 하는 불편함
 
 ### 4. 컴포넌트별 데이터 주입 불가
+
 - 테이블에만 데이터를 추가할 수 있음
 - 입력 필드, 셀렉트 박스 등에 자동으로 값을 설정할 수 없음
 
@@ -50,12 +57,14 @@
 ## 목표
 
 ### 주요 목표
+
 1. **화면 임베딩 시스템 구축**: 기존 화면을 컨테이너로 사용
 2. **범용 데이터 전달 시스템**: 모든 컴포넌트 타입 지원
 3. **시각적 매핑 설정 UI**: 드래그앤드롭으로 매핑 규칙 설정
 4. **실시간 미리보기**: 데이터 전달 결과를 즉시 확인
 
 ### 부가 목표
+
 - 조건부 데이터 전달 (필터링)
 - 데이터 변환 함수 (합계, 평균, 개수 등)
 - 양방향 데이터 동기화
@@ -305,12 +314,7 @@ type EmbeddingMode =
   | "edit"; // 편집 모드
 
 // 임베딩 위치
-type EmbeddingPosition = 
+type EmbeddingPosition = "left" | "right" | "top" | "bottom" | "center";
-  | "left" 
-  | "right" 
-  | "top" 
-  | "bottom" 
-  | "center";
 
 // 화면 임베딩 설정
 interface ScreenEmbedding {
@@ -522,7 +526,10 @@ interface ScreenSplitPanelProps {
   onDataTransferred?: (data: any[]) => void;
 }
 
-export function ScreenSplitPanel({ config, onDataTransferred }: ScreenSplitPanelProps) {
+export function ScreenSplitPanel({
+  config,
+  onDataTransferred,
+}: ScreenSplitPanelProps) {
   const leftScreenRef = useRef<EmbeddedScreenHandle>(null);
   const rightScreenRef = useRef<EmbeddedScreenHandle>(null);
   const [splitRatio, setSplitRatio] = useState(config.layoutConfig.splitRatio);
@@ -541,13 +548,21 @@ export function ScreenSplitPanel({ config, onDataTransferred }: ScreenSplitPanel
     if (config.dataTransfer.buttonConfig.validation) {
       const validation = config.dataTransfer.buttonConfig.validation;
 
-      if (validation.minSelection && selectedRows.length < validation.minSelection) {
+      if (
+        validation.minSelection &&
+        selectedRows.length < validation.minSelection
+      ) {
         toast.error(`최소 ${validation.minSelection}개 이상 선택해야 합니다.`);
         return;
       }
 
-      if (validation.maxSelection && selectedRows.length > validation.maxSelection) {
+      if (
-        toast.error(`최대 ${validation.maxSelection}개까지만 선택할 수 있습니다.`);
+        validation.maxSelection &&
+        selectedRows.length > validation.maxSelection
+      ) {
+        toast.error(
+          `최대 ${validation.maxSelection}개까지만 선택할 수 있습니다.`
+        );
         return;
       }
 
@@ -581,17 +596,12 @@ export function ScreenSplitPanel({ config, onDataTransferred }: ScreenSplitPanel
     <div className="flex h-full">
       {/* 좌측 패널 */}
       <div style={{ width: `${splitRatio}%` }}>
-        <EmbeddedScreen
+        <EmbeddedScreen ref={leftScreenRef} embedding={config.leftEmbedding} />
-          ref={leftScreenRef}
-          embedding={config.leftEmbedding}
-        />
       </div>
 
       {/* 리사이저 */}
       {config.layoutConfig.resizable && (
-        <Resizer
+        <Resizer onResize={(newRatio) => setSplitRatio(newRatio)} />
-          onResize={(newRatio) => setSplitRatio(newRatio)}
-        />
       )}
 
       {/* 전달 버튼 */}
@@ -602,7 +612,10 @@ export function ScreenSplitPanel({ config, onDataTransferred }: ScreenSplitPanel
           size={config.dataTransfer.buttonConfig.size || "default"}
         >
           {config.dataTransfer.buttonConfig.icon && (
-            <Icon name={config.dataTransfer.buttonConfig.icon} className="mr-2" />
+            <Icon
+              name={config.dataTransfer.buttonConfig.icon}
+              className="mr-2"
+            />
           )}
           {config.dataTransfer.buttonConfig.label}
         </Button>
@@ -634,8 +647,10 @@ export interface EmbeddedScreenHandle {
   getData(): any;
 }
 
-export const EmbeddedScreen = forwardRef<EmbeddedScreenHandle, EmbeddedScreenProps>(
+export const EmbeddedScreen = forwardRef<
-  ({ embedding }, ref) => {
+  EmbeddedScreenHandle,
+  EmbeddedScreenProps
+>(({ embedding }, ref) => {
   const [screenData, setScreenData] = useState<any>(null);
   const [selectedRows, setSelectedRows] = useState<any[]>([]);
   const componentRefs = useRef<Map<string, DataReceivable>>(new Map());
@@ -659,7 +674,9 @@ export const EmbeddedScreen = forwardRef<EmbeddedScreenHandle, EmbeddedScreenPro
         const component = componentRefs.current.get(receiver.targetComponentId);
 
         if (!component) {
-            console.warn(`컴포넌트를 찾을 수 없습니다: ${receiver.targetComponentId}`);
+          console.warn(
+            `컴포넌트를 찾을 수 없습니다: ${receiver.targetComponentId}`
+          );
           continue;
         }
 
@@ -670,7 +687,10 @@ export const EmbeddedScreen = forwardRef<EmbeddedScreenHandle, EmbeddedScreenPro
         }
 
         // 매핑 적용
-          const mappedData = applyMappingRules(filteredData, receiver.mappingRules);
+        const mappedData = applyMappingRules(
+          filteredData,
+          receiver.mappingRules
+        );
 
         // 데이터 전달
         await component.receiveData(mappedData, receiver.mode);
@@ -683,7 +703,7 @@ export const EmbeddedScreen = forwardRef<EmbeddedScreenHandle, EmbeddedScreenPro
         allData[id] = component.getData();
       });
       return allData;
-      }
+    },
   }));
 
   // 컴포넌트 등록
@@ -703,8 +723,7 @@ export const EmbeddedScreen = forwardRef<EmbeddedScreenHandle, EmbeddedScreenPro
       )}
     </div>
   );
-  }
+});
-);
 ```
 
 ### 3. DataReceivable 구현 예시
@@ -727,8 +746,8 @@ class TableComponent implements DataReceivable {
         break;
       case "merge":
         // 키 기반 병합 (예: id 필드)
-        const existingIds = new Set(this.rows.map(r => r.id));
+        const existingIds = new Set(this.rows.map((r) => r.id));
-        const newRows = data.filter(r => !existingIds.has(r.id));
+        const newRows = data.filter((r) => !existingIds.has(r.id));
         this.rows = [...this.rows, ...newRows];
         break;
     }
@@ -835,7 +854,7 @@ export async function createScreenEmbedding(
     embedding.position,
     embedding.mode,
     JSON.stringify(embedding.config),
-    companyCode
+    companyCode,
   ]);
 
   return { success: true, data: result.rows[0] };
@@ -923,7 +942,11 @@ export async function getScreenDataTransfer(
       AND company_code = $3
   `;
 
-  const result = await pool.query(query, [sourceScreenId, targetScreenId, companyCode]);
+  const result = await pool.query(query, [
+    sourceScreenId,
+    targetScreenId,
+    companyCode,
+  ]);
 
   if (result.rowCount === 0) {
     return { success: false, message: "데이터 전달 설정을 찾을 수 없습니다." };
@@ -952,7 +975,7 @@ export async function createScreenDataTransfer(
     transfer.sourceComponentType,
     JSON.stringify(transfer.dataReceivers),
     JSON.stringify(transfer.buttonConfig),
-    companyCode
+    companyCode,
   ]);
 
   return { success: true, data: result.rows[0] };
@@ -1042,13 +1065,22 @@ export async function createScreenSplitPanel(
     await client.query("BEGIN");
 
     // 1. 좌측 임베딩 생성
-    const leftEmbedding = await createScreenEmbedding(panel.leftEmbedding, companyCode);
+    const leftEmbedding = await createScreenEmbedding(
+      panel.leftEmbedding,
+      companyCode
+    );
 
     // 2. 우측 임베딩 생성
-    const rightEmbedding = await createScreenEmbedding(panel.rightEmbedding, companyCode);
+    const rightEmbedding = await createScreenEmbedding(
+      panel.rightEmbedding,
+      companyCode
+    );
 
     // 3. 데이터 전달 설정 생성
-    const dataTransfer = await createScreenDataTransfer(panel.dataTransfer, companyCode);
+    const dataTransfer = await createScreenDataTransfer(
+      panel.dataTransfer,
+      companyCode
+    );
 
     // 4. 분할 패널 생성
     const query = `
@@ -1065,7 +1097,7 @@ export async function createScreenSplitPanel(
       rightEmbedding.data!.id,
       dataTransfer.data!.id,
       JSON.stringify(panel.layoutConfig),
-      companyCode
+      companyCode,
     ]);
 
     await client.query("COMMIT");
@@ -1087,6 +1119,7 @@ export async function createScreenSplitPanel(
 ### Phase 1: 기본 인프라 구축 (1-2주)
 
 #### 1.1 데이터베이스 마이그레이션
+
 - [ ] `screen_embedding` 테이블 생성
 - [ ] `screen_data_transfer` 테이블 생성
 - [ ] `screen_split_panel` 테이블 생성
@@ -1094,12 +1127,14 @@ export async function createScreenSplitPanel(
 - [ ] 샘플 데이터 삽입
 
 #### 1.2 타입 정의
+
 - [ ] TypeScript 인터페이스 작성
 - [ ] `types/screen-embedding.ts`
 - [ ] `types/data-transfer.ts`
 - [ ] `types/split-panel.ts`
 
 #### 1.3 백엔드 API
+
 - [ ] 화면 임베딩 CRUD API
 - [ ] 데이터 전달 설정 CRUD API
 - [ ] 분할 패널 CRUD API
@@ -1108,12 +1143,14 @@ export async function createScreenSplitPanel(
 ### Phase 2: 화면 임베딩 기능 (2-3주)
 
 #### 2.1 EmbeddedScreen 컴포넌트
+
 - [ ] 기본 임베딩 기능
 - [ ] 모드별 렌더링 (view, select, form, edit)
 - [ ] 선택 모드 구현 (체크박스)
 - [ ] 이벤트 핸들링
 
 #### 2.2 DataReceivable 인터페이스 구현
+
 - [ ] TableComponent
 - [ ] InputComponent
 - [ ] SelectComponent
@@ -1123,6 +1160,7 @@ export async function createScreenSplitPanel(
 - [ ] HiddenComponent
 
 #### 2.3 컴포넌트 등록 시스템
+
 - [ ] 컴포넌트 마운트 시 자동 등록
 - [ ] 컴포넌트 ID 관리
 - [ ] 컴포넌트 참조 관리
@@ -1130,6 +1168,7 @@ export async function createScreenSplitPanel(
 ### Phase 3: 데이터 전달 시스템 (2-3주)
 
 #### 3.1 매핑 엔진
+
 - [ ] 매핑 규칙 파싱
 - [ ] 필드 매핑 적용
 - [ ] 변환 함수 구현
@@ -1139,11 +1178,13 @@ export async function createScreenSplitPanel(
   - [ ] concat, join
 
 #### 3.2 조건부 전달
+
 - [ ] 조건 파싱
 - [ ] 필터링 로직
 - [ ] 복합 조건 지원
 
 #### 3.3 검증 시스템
+
 - [ ] 필수 필드 검증
 - [ ] 최소/최대 행 수 검증
 - [ ] 커스텀 검증 함수 실행
@@ -1151,18 +1192,21 @@ export async function createScreenSplitPanel(
 ### Phase 4: 분할 패널 UI (2-3주)
 
 #### 4.1 ScreenSplitPanel 컴포넌트
+
 - [ ] 기본 레이아웃
 - [ ] 리사이저 구현
 - [ ] 전달 버튼
 - [ ] 반응형 디자인
 
 #### 4.2 설정 UI
+
 - [ ] 화면 선택 드롭다운
 - [ ] 매핑 규칙 설정 UI
 - [ ] 드래그앤드롭 매핑
 - [ ] 미리보기 기능
 
 #### 4.3 시각적 피드백
+
 - [ ] 데이터 전달 애니메이션
 - [ ] 로딩 상태 표시
 - [ ] 성공/실패 토스트
@@ -1170,14 +1214,17 @@ export async function createScreenSplitPanel(
 ### Phase 5: 고급 기능 (2-3주)
 
 #### 5.1 양방향 동기화
+
 - [ ] 우측 → 좌측 데이터 반영
 - [ ] 실시간 업데이트
 
 #### 5.2 트랜잭션 지원
+
 - [ ] 전체 성공 또는 전체 실패
 - [ ] 롤백 기능
 
 #### 5.3 성능 최적화
+
 - [ ] 대량 데이터 처리
 - [ ] 가상 스크롤링
 - [ ] 메모이제이션
@@ -1185,15 +1232,18 @@ export async function createScreenSplitPanel(
 ### Phase 6: 테스트 및 문서화 (1-2주)
 
 #### 6.1 단위 테스트
+
 - [ ] 매핑 엔진 테스트
 - [ ] 변환 함수 테스트
 - [ ] 검증 로직 테스트
 
 #### 6.2 통합 테스트
+
 - [ ] 전체 워크플로우 테스트
 - [ ] 실제 시나리오 테스트
 
 #### 6.3 문서화
+
 - [ ] 사용자 가이드
 - [ ] 개발자 문서
 - [ ] API 문서
@@ -1205,6 +1255,7 @@ export async function createScreenSplitPanel(
 ### 시나리오 1: 입고 등록
 
 #### 요구사항
+
 - 발주 목록에서 품목을 선택하여 입고 등록
 - 선택된 품목의 정보를 입고 처리 품목 테이블에 추가
 - 공급자 정보를 자동으로 입력 필드에 설정
@@ -1223,16 +1274,16 @@ const 입고등록_설정: ScreenSplitPanel = {
       width: "50%",
       multiSelect: true,
       showSearch: true,
-      showPagination: true
+      showPagination: true,
-    }
+    },
   },
   rightEmbedding: {
     childScreenId: 20, // 입고 등록 폼 화면
     position: "right",
     mode: "form",
     config: {
-      width: "50%"
+      width: "50%",
-    }
+    },
   },
   dataTransfer: {
     sourceScreenId: 10,
@@ -1248,8 +1299,8 @@ const 입고등록_설정: ScreenSplitPanel = {
           { sourceField: "품목코드", targetField: "품목코드" },
           { sourceField: "품목명", targetField: "품목명" },
           { sourceField: "발주수량", targetField: "발주수량" },
-          { sourceField: "미입고수량", targetField: "입고수량" }
+          { sourceField: "미입고수량", targetField: "입고수량" },
-        ]
+        ],
       },
       {
         targetComponentId: "input-공급자",
@@ -1259,9 +1310,9 @@ const 입고등록_설정: ScreenSplitPanel = {
           {
             sourceField: "공급자",
             targetField: "value",
-            transform: "first"
+            transform: "first",
-          }
+          },
-        ]
+        ],
       },
       {
         targetComponentId: "input-품목수",
@@ -1271,10 +1322,10 @@ const 입고등록_설정: ScreenSplitPanel = {
           {
             sourceField: "품목코드",
             targetField: "value",
-            transform: "count"
+            transform: "count",
-          }
+          },
-        ]
+        ],
-      }
+      },
     ],
     buttonConfig: {
       label: "선택 품목 추가",
@@ -1282,23 +1333,24 @@ const 입고등록_설정: ScreenSplitPanel = {
       icon: "ArrowRight",
       validation: {
         requireSelection: true,
-        minSelection: 1
+        minSelection: 1,
-      }
+      },
-    }
+    },
   },
   layoutConfig: {
     splitRatio: 50,
     resizable: true,
     minLeftWidth: 400,
     minRightWidth: 600,
-    orientation: "horizontal"
+    orientation: "horizontal",
-  }
+  },
 };
 ```
 
 ### 시나리오 2: 수주 등록
 
 #### 요구사항
+
 - 견적서 목록에서 품목을 선택하여 수주 등록
 - 고객 정보를 자동으로 폼에 설정
 - 품목별 수량 및 금액 자동 계산
@@ -1315,16 +1367,16 @@ const 수주등록_설정: ScreenSplitPanel = {
     mode: "select",
     config: {
       width: "40%",
-      multiSelect: true
+      multiSelect: true,
-    }
+    },
   },
   rightEmbedding: {
     childScreenId: 40, // 수주 등록 폼 화면
     position: "right",
     mode: "form",
     config: {
-      width: "60%"
+      width: "60%",
-    }
+    },
   },
   dataTransfer: {
     sourceScreenId: 30,
@@ -1344,18 +1396,18 @@ const 수주등록_설정: ScreenSplitPanel = {
             targetField: "금액",
             transform: "custom",
             transformConfig: {
-              formula: "수량 * 단가"
+              formula: "수량 * 단가",
-            }
+            },
-          }
+          },
-        ]
+        ],
       },
       {
         targetComponentId: "input-고객명",
         targetComponentType: "input",
         mode: "replace",
         mappingRules: [
-          { sourceField: "고객명", targetField: "value", transform: "first" }
+          { sourceField: "고객명", targetField: "value", transform: "first" },
-        ]
+        ],
       },
       {
         targetComponentId: "input-총금액",
@@ -1365,28 +1417,29 @@ const 수주등록_설정: ScreenSplitPanel = {
           {
             sourceField: "금액",
             targetField: "value",
-            transform: "sum"
+            transform: "sum",
-          }
+          },
-        ]
+        ],
-      }
+      },
     ],
     buttonConfig: {
       label: "견적서 불러오기",
       position: "center",
-      icon: "Download"
+      icon: "Download",
-    }
+    },
   },
   layoutConfig: {
     splitRatio: 40,
     resizable: true,
-    orientation: "horizontal"
+    orientation: "horizontal",
-  }
+  },
 };
 ```
 
 ### 시나리오 3: 출고 등록
 
 #### 요구사항
+
 - 재고 목록에서 품목을 선택하여 출고 등록
 - 재고 수량 확인 및 경고
 - 출고 가능 수량만 필터링
@@ -1403,16 +1456,16 @@ const 출고등록_설정: ScreenSplitPanel = {
     mode: "select",
     config: {
       width: "45%",
-      multiSelect: true
+      multiSelect: true,
-    }
+    },
   },
   rightEmbedding: {
     childScreenId: 60, // 출고 등록 폼 화면
     position: "right",
     mode: "form",
     config: {
-      width: "55%"
+      width: "55%",
-    }
+    },
   },
   dataTransfer: {
     sourceScreenId: 50,
@@ -1426,13 +1479,13 @@ const 출고등록_설정: ScreenSplitPanel = {
           { sourceField: "품목코드", targetField: "품목코드" },
           { sourceField: "품목명", targetField: "품목명" },
           { sourceField: "재고수량", targetField: "가용수량" },
-          { sourceField: "창고", targetField: "출고창고" }
+          { sourceField: "창고", targetField: "출고창고" },
         ],
         condition: {
           field: "재고수량",
           operator: "greaterThan",
-          value: 0
+          value: 0,
-        }
+        },
       },
       {
         targetComponentId: "input-총출고수량",
@@ -1442,10 +1495,10 @@ const 출고등록_설정: ScreenSplitPanel = {
           {
             sourceField: "재고수량",
             targetField: "value",
-            transform: "sum"
+            transform: "sum",
-          }
+          },
-        ]
+        ],
-      }
+      },
     ],
     buttonConfig: {
       label: "출고 품목 추가",
@@ -1453,15 +1506,15 @@ const 출고등록_설정: ScreenSplitPanel = {
       icon: "ArrowRight",
       validation: {
         requireSelection: true,
-        confirmMessage: "선택한 품목을 출고 처리하시겠습니까?"
+        confirmMessage: "선택한 품목을 출고 처리하시겠습니까?",
-      }
+      },
-    }
+    },
   },
   layoutConfig: {
     splitRatio: 45,
     resizable: true,
-    orientation: "horizontal"
+    orientation: "horizontal",
-  }
+  },
 };
 ```
 
@@ -1472,11 +1525,13 @@ const 출고등록_설정: ScreenSplitPanel = {
 ### 1. 성능 최적화
 
 #### 대량 데이터 처리
+
 - 가상 스크롤링 적용
 - 청크 단위 데이터 전달
 - 백그라운드 처리
 
 #### 메모리 관리
+
 - 컴포넌트 언마운트 시 참조 해제
 - 이벤트 리스너 정리
 - 메모이제이션 활용
@@ -1484,11 +1539,13 @@ const 출고등록_설정: ScreenSplitPanel = {
 ### 2. 보안
 
 #### 권한 검증
+
 - 화면 접근 권한 확인
 - 데이터 전달 권한 확인
 - 멀티테넌시 격리
 
 #### 데이터 검증
+
 - 입력값 검증
 - SQL 인젝션 방지
 - XSS 방지
@@ -1496,22 +1553,26 @@ const 출고등록_설정: ScreenSplitPanel = {
 ### 3. 에러 처리
 
 #### 사용자 친화적 메시지
+
 - 명확한 오류 메시지
 - 복구 방법 안내
 - 로그 기록
 
 #### 트랜잭션 롤백
+
 - 부분 실패 시 전체 롤백
 - 데이터 일관성 유지
 
 ### 4. 확장성
 
 #### 플러그인 시스템
+
 - 커스텀 변환 함수 등록
 - 커스텀 검증 함수 등록
 - 커스텀 컴포넌트 타입 추가
 
 #### 이벤트 시스템
+
 - 데이터 전달 전/후 이벤트
 - 커스텀 이벤트 핸들러
 
@@ -1520,31 +1581,37 @@ const 출고등록_설정: ScreenSplitPanel = {
 ## 마일스톤
 
 ### M1: 기본 인프라 (2주)
+
 - 데이터베이스 스키마 완성
 - 백엔드 API 완성
 - 타입 정의 완성
 
 ### M2: 화면 임베딩 (3주)
+
 - EmbeddedScreen 컴포넌트 완성
 - DataReceivable 인터페이스 구현 완료
 - 선택 모드 동작 확인
 
 ### M3: 데이터 전달 (3주)
+
 - 매핑 엔진 완성
 - 변환 함수 구현 완료
 - 조건부 전달 동작 확인
 
 ### M4: 분할 패널 UI (3주)
+
 - ScreenSplitPanel 컴포넌트 완성
 - 설정 UI 완성
 - 입고 등록 시나리오 완성
 
 ### M5: 고급 기능 및 최적화 (3주)
+
 - 양방향 동기화 완성
 - 성능 최적화 완료
 - 전체 테스트 통과
 
 ### M6: 문서화 및 배포 (1주)
+
 - 사용자 가이드 작성
 - 개발자 문서 작성
 - 프로덕션 배포
@@ -1567,6 +1634,7 @@ const 출고등록_설정: ScreenSplitPanel = {
 ## 성공 지표
 
 ### 기능적 지표
+
 - [ ] 입고 등록 시나리오 완벽 동작
 - [ ] 수주 등록 시나리오 완벽 동작
 - [ ] 출고 등록 시나리오 완벽 동작
@@ -1574,11 +1642,13 @@ const 출고등록_설정: ScreenSplitPanel = {
 - [ ] 모든 변환 함수 정상 동작
 
 ### 성능 지표
+
 - [ ] 1000개 행 데이터 전달 < 1초
 - [ ] 화면 로딩 시간 < 2초
 - [ ] 메모리 사용량 < 100MB
 
 ### 사용성 지표
+
 - [ ] 설정 UI 직관적
 - [ ] 에러 메시지 명확
 - [ ] 문서 완성도 90% 이상
@@ -1588,15 +1658,18 @@ const 출고등록_설정: ScreenSplitPanel = {
 ## 리스크 관리
 
 ### 기술적 리스크
+
 - **복잡도 증가**: 단계별 구현으로 관리
 - **성능 문제**: 초기부터 최적화 고려
 - **호환성 문제**: 기존 시스템과 충돌 방지
 
 ### 일정 리스크
+
 - **예상 기간 초과**: 버퍼 2주 확보
 - **우선순위 변경**: 핵심 기능 먼저 구현
 
 ### 인력 리스크
+
 - **담당자 부재**: 문서화 철저히
 - **지식 공유**: 주간 리뷰 미팅
 
@@ -1605,4 +1678,3 @@ const 출고등록_설정: ScreenSplitPanel = {
 ## 결론
 
 화면 임베딩 및 데이터 전달 시스템은 복잡한 업무 워크플로우를 효율적으로 처리할 수 있는 강력한 기능입니다. 단계별로 체계적으로 구현하면 약 3.5개월 내에 완성할 수 있으며, 이를 통해 사용자 경험을 크게 향상시킬 수 있습니다.
-

화면_임베딩_시스템_Phase1-4_구현_완료.md

@@ -21,12 +21,14 @@
 **생성된 테이블**:
 
 1. **screen_embedding** (화면 임베딩 설정)
+
    - 한 화면을 다른 화면 안에 임베드
    - 위치 (left, right, top, bottom, center)
    - 모드 (view, select, form, edit)
    - 설정 (width, height, multiSelect 등)
 
 2. **screen_data_transfer** (데이터 전달 설정)
+
    - 소스 화면 → 타겟 화면 데이터 전달
    - 데이터 수신자 배열 (JSONB)
    - 매핑 규칙, 조건, 검증
@@ -38,6 +40,7 @@
    - 레이아웃 설정 (splitRatio, resizable 등)
 
 **샘플 데이터**:
+
 - 입고 등록 시나리오 샘플 데이터 포함
 - 발주 목록 → 입고 처리 품목 매핑 예시
 
@@ -46,6 +49,7 @@
 **파일**: `frontend/types/screen-embedding.ts`
 
 **주요 타입**:
+
 ```typescript
 // 화면 임베딩
 - EmbeddingMode: "view" | "select" | "form" | "edit"
@@ -68,12 +72,14 @@
 #### 1.3 백엔드 API
 
 **파일**:
+
 - `backend-node/src/controllers/screenEmbeddingController.ts`
 - `backend-node/src/routes/screenEmbeddingRoutes.ts`
 
 **API 엔드포인트**:
 
 **화면 임베딩**:
+
 - `GET /api/screen-embedding?parentScreenId=1` - 목록 조회
 - `GET /api/screen-embedding/:id` - 상세 조회
 - `POST /api/screen-embedding` - 생성
@@ -81,18 +87,21 @@
 - `DELETE /api/screen-embedding/:id` - 삭제
 
 **데이터 전달**:
+
 - `GET /api/screen-data-transfer?sourceScreenId=1&targetScreenId=2` - 조회
 - `POST /api/screen-data-transfer` - 생성
 - `PUT /api/screen-data-transfer/:id` - 수정
 - `DELETE /api/screen-data-transfer/:id` - 삭제
 
 **분할 패널**:
+
 - `GET /api/screen-split-panel/:screenId` - 조회
 - `POST /api/screen-split-panel` - 생성 (트랜잭션)
 - `PUT /api/screen-split-panel/:id` - 수정
 - `DELETE /api/screen-split-panel/:id` - 삭제 (CASCADE)
 
 **특징**:
+
 - ✅ 멀티테넌시 지원 (company_code 필터링)
 - ✅ 트랜잭션 처리 (분할 패널 생성/삭제)
 - ✅ 외래키 CASCADE 처리
@@ -103,25 +112,24 @@
 **파일**: `frontend/lib/api/screenEmbedding.ts`
 
 **함수**:
+
 ```typescript
 // 화면 임베딩
-- getScreenEmbeddings(parentScreenId)
+-getScreenEmbeddings(parentScreenId) -
-- getScreenEmbeddingById(id)
+  getScreenEmbeddingById(id) -
-- createScreenEmbedding(data)
+  createScreenEmbedding(data) -
-- updateScreenEmbedding(id, data)
+  updateScreenEmbedding(id, data) -
-- deleteScreenEmbedding(id)
+  deleteScreenEmbedding(id) -
-
+  // 데이터 전달
-// 데이터 전달
+  getScreenDataTransfer(sourceScreenId, targetScreenId) -
-- getScreenDataTransfer(sourceScreenId, targetScreenId)
+  createScreenDataTransfer(data) -
-- createScreenDataTransfer(data)
+  updateScreenDataTransfer(id, data) -
-- updateScreenDataTransfer(id, data)
+  deleteScreenDataTransfer(id) -
-- deleteScreenDataTransfer(id)
+  // 분할 패널
-
+  getScreenSplitPanel(screenId) -
-// 분할 패널
+  createScreenSplitPanel(data) -
-- getScreenSplitPanel(screenId)
+  updateScreenSplitPanel(id, layoutConfig) -
-- createScreenSplitPanel(data)
+  deleteScreenSplitPanel(id);
-- updateScreenSplitPanel(id, layoutConfig)
-- deleteScreenSplitPanel(id)
 ```
 
 ---
@@ -133,6 +141,7 @@
 **파일**: `frontend/components/screen-embedding/EmbeddedScreen.tsx`
 
 **주요 기능**:
+
 - ✅ 화면 데이터 로드
 - ✅ 모드별 렌더링 (view, select, form, edit)
 - ✅ 선택 모드 지원 (체크박스)
@@ -141,6 +150,7 @@
 - ✅ 로딩/에러 상태 UI
 
 **외부 인터페이스** (useImperativeHandle):
+
 ```typescript
 - getSelectedRows(): any[]
 - clearSelection(): void
@@ -149,6 +159,7 @@
 ```
 
 **데이터 수신 프로세스**:
+
 1. 조건 필터링 (condition)
 2. 매핑 규칙 적용 (mappingRules)
 3. 검증 (validation)
@@ -165,10 +176,12 @@
 **주요 함수**:
 
 1. **applyMappingRules(data, rules)**
+
    - 일반 매핑: 각 행에 대해 필드 매핑
    - 변환 매핑: 집계 함수 적용
 
 2. **변환 함수 지원**:
+
    - `sum`: 합계
    - `average`: 평균
    - `count`: 개수
@@ -177,15 +190,18 @@
    - `concat`, `join`: 문자열 결합
 
 3. **filterDataByCondition(data, condition)**
+
    - 조건 연산자: equals, notEquals, contains, greaterThan, lessThan, in, notIn
 
 4. **validateMappingResult(data, rules)**
+
    - 필수 필드 검증
 
 5. **previewMapping(sampleData, rules)**
    - 매핑 결과 미리보기
 
 **특징**:
+
 - ✅ 중첩 객체 지원 (`user.address.city`)
 - ✅ 타입 안전성
 - ✅ 에러 처리
@@ -195,6 +211,7 @@
 **파일**: `frontend/lib/utils/logger.ts`
 
 **기능**:
+
 - debug, info, warn, error 레벨
 - 개발 환경에서만 debug 출력
 - 타임스탬프 포함
@@ -208,6 +225,7 @@
 **파일**: `frontend/components/screen-embedding/ScreenSplitPanel.tsx`
 
 **주요 기능**:
+
 - ✅ 좌우 화면 임베딩
 - ✅ 리사이저 (드래그로 비율 조정)
 - ✅ 데이터 전달 버튼
@@ -218,6 +236,7 @@
 - ✅ 전달 후 선택 초기화 (옵션)
 
 **UI 구조**:
+
 ```
 ┌─────────────────────────────────────────────────────────┐
 │  [좌측 패널 50%]  │  [버튼]  │  [우측 패널 50%]        │
@@ -230,6 +249,7 @@
 ```
 
 **이벤트 흐름**:
+
 1. 좌측에서 행 선택 → 선택 카운트 업데이트
 2. 전달 버튼 클릭 → 검증
 3. 우측 화면의 컴포넌트들에 데이터 전달
@@ -352,7 +372,7 @@ const inboundConfig: ScreenSplitPanel = {
   onDataTransferred={(data) => {
     console.log("전달된 데이터:", data);
   }}
-/>
+/>;
 ```
 
 ---
@@ -395,6 +415,7 @@ const inboundConfig: ScreenSplitPanel = {
 ### Phase 5: 고급 기능 (예정)
 
 1. **DataReceivable 인터페이스 구현**
+
    - TableComponent
    - InputComponent
    - SelectComponent
@@ -402,6 +423,7 @@ const inboundConfig: ScreenSplitPanel = {
    - 기타 컴포넌트들
 
 2. **양방향 동기화**
+
    - 우측 → 좌측 데이터 반영
    - 실시간 업데이트
 
@@ -412,6 +434,7 @@ const inboundConfig: ScreenSplitPanel = {
 ### Phase 6: 설정 UI (예정)
 
 1. **시각적 매핑 설정 UI**
+
    - 드래그앤드롭으로 필드 매핑
    - 변환 함수 선택
    - 조건 설정
@@ -463,7 +486,7 @@ import { getScreenSplitPanel } from "@/lib/api/screenEmbedding";
 const { data: config } = await getScreenSplitPanel(screenId);
 
 // 렌더링
-<ScreenSplitPanel config={config} />
+<ScreenSplitPanel config={config} />;
 ```
 
 ---
@@ -471,6 +494,7 @@ const { data: config } = await getScreenSplitPanel(screenId);
 ## ✅ 체크리스트
 
 ### 구현 완료
+
 - [x] 데이터베이스 스키마 (3개 테이블)
 - [x] TypeScript 타입 정의
 - [x] 백엔드 API (15개 엔드포인트)
@@ -481,6 +505,7 @@ const { data: config } = await getScreenSplitPanel(screenId);
 - [x] 로거 유틸리티
 
 ### 다음 단계
+
 - [ ] DataReceivable 구현 (각 컴포넌트 타입별)
 - [ ] 설정 UI (드래그앤드롭 매핑)
 - [ ] 미리보기 기능
@@ -500,4 +525,3 @@ const { data: config } = await getScreenSplitPanel(screenId);
 - ✅ 매핑 엔진 완성
 
 이제 입고 등록과 같은 복잡한 워크플로우를 구현할 수 있습니다. 다음 단계는 각 컴포넌트 타입별 DataReceivable 인터페이스 구현과 설정 UI 개발입니다.
-

화면_임베딩_시스템_충돌_분석_보고서.md

@@ -11,6 +11,7 @@
 ### 1. 데이터베이스 스키마
 
 #### 새로운 테이블 (독립적)
+
 ```sql
 - screen_embedding          (신규)
 - screen_data_transfer      (신규)
@@ -18,11 +19,13 @@
 ```
 
 **충돌 없는 이유**:
+
 - ✅ 완전히 새로운 테이블명
 - ✅ 기존 테이블과 이름 중복 없음
 - ✅ 외래키는 기존 `screen_definitions`만 참조 (읽기 전용)
 
 #### 기존 테이블 (영향 없음)
+
 ```sql
 - screen_definitions        (변경 없음)
 - screen_layouts            (변경 없음)
@@ -32,6 +35,7 @@
 ```
 
 **확인 사항**:
+
 - ✅ 기존 테이블 구조 변경 없음
 - ✅ 기존 데이터 마이그레이션 불필요
 - ✅ 기존 쿼리 영향 없음
@@ -41,6 +45,7 @@
 ### 2. API 엔드포인트
 
 #### 새로운 엔드포인트 (독립적)
+
 ```
 POST   /api/screen-embedding
 GET    /api/screen-embedding
@@ -59,11 +64,13 @@ DELETE /api/screen-split-panel/:id
 ```
 
 **충돌 없는 이유**:
+
 - ✅ 기존 `/api/screen-management/*` 와 다른 경로
 - ✅ 새로운 라우트 추가만 (기존 라우트 수정 없음)
 - ✅ 독립적인 컨트롤러 파일
 
 #### 기존 엔드포인트 (영향 없음)
+
 ```
 /api/screen-management/*    (변경 없음)
 /api/screen/*               (변경 없음)
@@ -75,16 +82,19 @@ DELETE /api/screen-split-panel/:id
 ### 3. TypeScript 타입
 
 #### 새로운 타입 파일 (독립적)
+
 ```typescript
-frontend/types/screen-embedding.ts  (신규)
+frontend / types / screen - embedding.ts(신규);
 ```
 
 **충돌 없는 이유**:
+
 - ✅ 기존 `screen.ts`, `screen-management.ts` 와 별도 파일
 - ✅ 타입명 중복 없음
 - ✅ 독립적인 네임스페이스
 
 #### 기존 타입 (영향 없음)
+
 ```typescript
 frontend/types/screen.ts              (변경 없음)
 frontend/types/screen-management.ts   (변경 없음)
@@ -96,6 +106,7 @@ backend-node/src/types/screen.ts      (변경 없음)
 ### 4. 프론트엔드 컴포넌트
 
 #### 새로운 컴포넌트 (독립적)
+
 ```
 frontend/components/screen-embedding/
   ├── EmbeddedScreen.tsx       (신규)
@@ -104,11 +115,13 @@ frontend/components/screen-embedding/
 ```
 
 **충돌 없는 이유**:
+
 - ✅ 별도 디렉토리 (`screen-embedding/`)
 - ✅ 기존 컴포넌트 수정 없음
 - ✅ 독립적으로 import 가능
 
 #### 기존 컴포넌트 (영향 없음)
+
 ```
 frontend/components/screen/          (변경 없음)
 frontend/app/(main)/screens/[screenId]/page.tsx  (변경 없음)
@@ -121,6 +134,7 @@ frontend/app/(main)/screens/[screenId]/page.tsx  (변경 없음)
 ### 1. screen_definitions 테이블 참조
 
 **현재 구조**:
+
 ```sql
 -- 새 테이블들이 screen_definitions를 참조
 CONSTRAINT fk_parent_screen FOREIGN KEY (parent_screen_id)
@@ -128,10 +142,12 @@ CONSTRAINT fk_parent_screen FOREIGN KEY (parent_screen_id)
 ```
 
 **잠재적 문제**:
+
 - ⚠️ 기존 화면 삭제 시 임베딩 설정도 함께 삭제됨 (CASCADE)
 - ⚠️ 화면 ID 변경 시 임베딩 설정이 깨질 수 있음
 
 **해결 방법**:
+
 ```sql
 -- 이미 구현됨: ON DELETE CASCADE
 -- 화면 삭제 시 자동으로 관련 임베딩도 삭제
@@ -139,6 +155,7 @@ CONSTRAINT fk_parent_screen FOREIGN KEY (parent_screen_id)
 ```
 
 **권장 사항**:
+
 - ✅ 화면 삭제 전 임베딩 사용 여부 확인 UI 추가 (Phase 6)
 - ✅ 삭제 시 경고 메시지 표시
 
@@ -147,6 +164,7 @@ CONSTRAINT fk_parent_screen FOREIGN KEY (parent_screen_id)
 ### 2. 화면 렌더링 로직
 
 **현재 화면 렌더링**:
+
 ```typescript
 // frontend/app/(main)/screens/[screenId]/page.tsx
 function ScreenViewPage() {
@@ -157,11 +175,12 @@ function ScreenViewPage() {
   const layout = await screenApi.getScreenLayout(screenId);
 
   // 컴포넌트 렌더링
-  <DynamicComponentRenderer components={layout.components} />
+  <DynamicComponentRenderer components={layout.components} />;
 }
 ```
 
 **새로운 렌더링 (분할 패널)**:
+
 ```typescript
 // 분할 패널 화면인 경우
 if (isSplitPanelScreen) {
@@ -174,10 +193,12 @@ return <DynamicComponentRenderer components={layout.components} />;
 ```
 
 **잠재적 문제**:
+
 - ⚠️ 화면 타입 구분 로직 필요
 - ⚠️ 기존 화면 렌더링 로직 수정 필요
 
 **해결 방법**:
+
 ```typescript
 // 1. screen_definitions에 screen_type 컬럼 추가 (선택사항)
 ALTER TABLE screen_definitions ADD COLUMN screen_type VARCHAR(20) DEFAULT 'normal';
@@ -191,6 +212,7 @@ if (splitPanelConfig.success && splitPanelConfig.data) {
 ```
 
 **권장 구현**:
+
 ```typescript
 // frontend/app/(main)/screens/[screenId]/page.tsx 수정
 useEffect(() => {
@@ -200,7 +222,7 @@ useEffect(() => {
 
     if (splitPanelResult.success && splitPanelResult.data) {
       // 분할 패널 화면
-      setScreenType('split_panel');
+      setScreenType("split_panel");
       setSplitPanelConfig(splitPanelResult.data);
       return;
     }
@@ -209,7 +231,7 @@ useEffect(() => {
     const screenResult = await screenApi.getScreen(screenId);
     const layoutResult = await screenApi.getScreenLayout(screenId);
 
-    setScreenType('normal');
+    setScreenType("normal");
     setScreen(screenResult.data);
     setLayout(layoutResult.data);
   };
@@ -218,13 +240,17 @@ useEffect(() => {
 }, [screenId]);
 
 // 렌더링
-{screenType === 'split_panel' && splitPanelConfig && (
+{
+  screenType === "split_panel" && splitPanelConfig && (
     <ScreenSplitPanel config={splitPanelConfig} />
-)}
+  );
+}
 
-{screenType === 'normal' && layout && (
+{
+  screenType === "normal" && layout && (
     <DynamicComponentRenderer components={layout.components} />
-)}
+  );
+}
 ```
 
 ---
@@ -232,6 +258,7 @@ useEffect(() => {
 ### 3. 컴포넌트 등록 시스템
 
 **현재 시스템**:
+
 ```typescript
 // frontend/lib/registry/components.ts
 const componentRegistry = new Map<string, ComponentDefinition>();
@@ -242,6 +269,7 @@ export function registerComponent(id: string, component: any) {
 ```
 
 **새로운 요구사항**:
+
 ```typescript
 // DataReceivable 인터페이스 구현 필요
 interface DataReceivable {
@@ -254,10 +282,12 @@ interface DataReceivable {
 ```
 
 **잠재적 문제**:
+
 - ⚠️ 기존 컴포넌트들이 DataReceivable 인터페이스 미구현
 - ⚠️ 데이터 수신 기능 없음
 
 **해결 방법**:
+
 ```typescript
 // Phase 5에서 구현 예정
 // 기존 컴포넌트를 래핑하는 어댑터 패턴 사용
@@ -266,9 +296,9 @@ class TableComponentAdapter implements DataReceivable {
   constructor(private tableComponent: any) {}
 
   async receiveData(data: any[], mode: DataReceiveMode) {
-    if (mode === 'append') {
+    if (mode === "append") {
       this.tableComponent.addRows(data);
-    } else if (mode === 'replace') {
+    } else if (mode === "replace") {
       this.tableComponent.setRows(data);
     }
   }
@@ -284,6 +314,7 @@ class TableComponentAdapter implements DataReceivable {
 ```
 
 **권장 사항**:
+
 - ✅ 기존 컴포넌트 수정 없이 어댑터로 래핑
 - ✅ 점진적으로 DataReceivable 구현
 - ✅ 하위 호환성 유지
@@ -297,12 +328,15 @@ class TableComponentAdapter implements DataReceivable {
 **파일**: `frontend/app/(main)/screens/[screenId]/page.tsx`
 
 **수정 내용**:
+
 ```typescript
 import { getScreenSplitPanel } from "@/lib/api/screenEmbedding";
 import { ScreenSplitPanel } from "@/components/screen-embedding";
 
 function ScreenViewPage() {
-  const [screenType, setScreenType] = useState<'normal' | 'split_panel'>('normal');
+  const [screenType, setScreenType] = useState<"normal" | "split_panel">(
+    "normal"
+  );
   const [splitPanelConfig, setSplitPanelConfig] = useState<any>(null);
 
   useEffect(() => {
@@ -311,7 +345,7 @@ function ScreenViewPage() {
       const splitResult = await getScreenSplitPanel(screenId);
 
       if (splitResult.success && splitResult.data) {
-        setScreenType('split_panel');
+        setScreenType("split_panel");
         setSplitPanelConfig(splitResult.data);
         setLoading(false);
         return;
@@ -325,7 +359,7 @@ function ScreenViewPage() {
   }, [screenId]);
 
   // 렌더링
-  if (screenType === 'split_panel' && splitPanelConfig) {
+  if (screenType === "split_panel" && splitPanelConfig) {
     return <ScreenSplitPanel config={splitPanelConfig} />;
   }
 
@@ -343,6 +377,7 @@ function ScreenViewPage() {
 **파일**: 화면 관리 페이지
 
 **추가 기능**:
+
 - 화면 생성 시 "분할 패널" 타입 선택
 - 분할 패널 설정 UI
 - 임베딩 설정 UI
@@ -355,7 +390,7 @@ function ScreenViewPage() {
 ## 📊 충돌 위험도 평가
 
 | 항목                 | 위험도  | 설명                | 조치 필요         |
-|------|--------|------|-----------|
+| -------------------- | ------- | ------------------- | ----------------- |
 | 데이터베이스 스키마  | 🟢 낮음 | 독립적인 새 테이블  | ❌ 불필요         |
 | API 엔드포인트       | 🟢 낮음 | 새로운 경로 추가    | ❌ 불필요         |
 | TypeScript 타입      | 🟢 낮음 | 별도 파일           | ❌ 불필요         |
@@ -371,24 +406,28 @@ function ScreenViewPage() {
 ## ✅ 안전성 체크리스트
 
 ### 데이터베이스
+
 - [x] 새 테이블명이 기존과 중복되지 않음
 - [x] 기존 테이블 구조 변경 없음
 - [x] 외래키 CASCADE 설정 완료
 - [x] 멀티테넌시 (company_code) 지원
 
 ### 백엔드
+
 - [x] 새 라우트가 기존과 충돌하지 않음
 - [x] 독립적인 컨트롤러 파일
 - [x] 기존 API 수정 없음
 - [x] 에러 핸들링 완료
 
 ### 프론트엔드
+
 - [x] 새 컴포넌트가 별도 디렉토리
 - [x] 기존 컴포넌트 수정 없음
 - [x] 독립적인 타입 정의
 - [ ] 화면 페이지 수정 필요 (조건 분기)
 
 ### 호환성
+
 - [x] 기존 화면 동작 영향 없음
 - [x] 하위 호환성 유지
 - [ ] 컴포넌트 어댑터 구현 (Phase 5)
@@ -400,6 +439,7 @@ function ScreenViewPage() {
 ### 즉시 조치 (필수)
 
 1. **화면 페이지 수정**
+
    ```typescript
    // frontend/app/(main)/screens/[screenId]/page.tsx
    // 분할 패널 확인 로직 추가
@@ -421,11 +461,13 @@ function ScreenViewPage() {
 ### 단계적 조치 (Phase 5-6)
 
 1. **컴포넌트 어댑터 구현**
+
    - TableComponent → DataReceivable
    - InputComponent → DataReceivable
    - 기타 컴포넌트들
 
 2. **설정 UI 개발**
+
    - 분할 패널 생성 UI
    - 매핑 규칙 설정 UI
    - 미리보기 기능
@@ -442,6 +484,7 @@ function ScreenViewPage() {
 ### ✅ 안전성 평가: 높음
 
 **이유**:
+
 1. ✅ 대부분의 코드가 독립적으로 추가됨
 2. ✅ 기존 시스템 수정 최소화
 3. ✅ 하위 호환성 유지
@@ -450,10 +493,12 @@ function ScreenViewPage() {
 ### ⚠️ 주의 사항
 
 1. **화면 페이지 수정 필요**
+
    - 분할 패널 확인 로직 추가
    - 조건부 렌더링 구현
 
 2. **점진적 구현 권장**
+
    - Phase 5: 컴포넌트 어댑터
    - Phase 6: 설정 UI
    - 단계별 테스트
@@ -467,4 +512,3 @@ function ScreenViewPage() {
 **충돌 위험도: 낮음 (🟢)**
 
 새로운 시스템은 기존 시스템과 **독립적으로 동작**하며, 최소한의 수정만으로 통합 가능합니다. 화면 페이지에 조건 분기만 추가하면 바로 사용할 수 있습니다.
-