feat: Add close confirmation dialog to ScreenModal and enhance SelectedItemsDetailInputComponent

- Implemented a confirmation dialog in ScreenModal to prevent accidental closure, allowing users to confirm before exiting and potentially losing unsaved data.
- Enhanced SelectedItemsDetailInputComponent by ensuring that base records are created even when detail data is absent, maintaining item-client mapping.
- Improved logging for better traceability during the UPSERT process and refined the handling of parent data mappings for more robust data management.

frontend/components/common/ScreenModal.tsx

@@ -1,7 +1,17 @@
 "use client";
 
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, useCallback } from "react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from "@/components/ui/alert-dialog";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import { InteractiveScreenViewerDynamic } from "@/components/screen/InteractiveScreenViewerDynamic";
@@ -67,6 +77,9 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
   // 화면 리셋 키 (컴포넌트 강제 리마운트용)
   const [resetKey, setResetKey] = useState(0);
 
+  // 모달 닫기 확인 다이얼로그 표시 상태
+  const [showCloseConfirm, setShowCloseConfirm] = useState(false);
+
   // localStorage에서 연속 모드 상태 복원
   useEffect(() => {
     const savedMode = localStorage.getItem("screenModal_continuousMode");
@@ -218,10 +231,33 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
         const parentDataMapping = splitPanelContext?.parentDataMapping || [];
 
         // 부모 데이터 소스
-        const rawParentData =
-          splitPanelParentData && Object.keys(splitPanelParentData).length > 0
-            ? splitPanelParentData
-            : splitPanelContext?.selectedLeftData || {};
+        // 🔧 수정: 여러 소스를 병합 (우선순위: splitPanelParentData > selectedLeftData > 기존 formData의 링크 필드)
+        // 예: screen 150→226→227 전환 시:
+        //   - splitPanelParentData: item_info 데이터 (screen 226에서 전달)
+        //   - selectedLeftData: customer_mng 데이터 (SplitPanel 좌측 선택)
+        //   - 기존 formData: 이전 모달에서 설정된 link 필드 (customer_code 등)
+        const contextData = splitPanelContext?.selectedLeftData || {};
+        const eventData = splitPanelParentData && Object.keys(splitPanelParentData).length > 0
+          ? splitPanelParentData
+          : {};
+        
+        // 🆕 기존 formData에서 link 필드(_code, _id)를 가져와 base로 사용
+        // 모달 체인(226→227)에서 이전 모달의 연결 필드가 유지됨
+        const previousLinkFields: Record<string, any> = {};
+        if (formData && typeof formData === "object" && !Array.isArray(formData)) {
+          const linkFieldPatterns = ["_code", "_id"];
+          const excludeFields = ["id", "created_date", "updated_date", "created_at", "updated_at", "writer"];
+          for (const [key, value] of Object.entries(formData)) {
+            if (excludeFields.includes(key)) continue;
+            if (value === undefined || value === null) continue;
+            const isLinkField = linkFieldPatterns.some((pattern) => key.endsWith(pattern));
+            if (isLinkField) {
+              previousLinkFields[key] = value;
+            }
+          }
+        }
+        
+        const rawParentData = { ...previousLinkFields, ...contextData, ...eventData };
 
         // 🔧 신규 등록 모드에서는 연결에 필요한 필드만 전달
         const parentData: Record<string, any> = {};
@@ -495,14 +531,31 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
     }
   };
 
-  const handleClose = () => {
-    // 🔧 URL 파라미터 제거 (mode, editId, tableName 등)
+  // 사용자가 바깥 클릭/ESC/X 버튼으로 닫으려 할 때 확인 다이얼로그 표시
+  const handleCloseAttempt = useCallback(() => {
+    setShowCloseConfirm(true);
+  }, []);
+
+  // 확인 후 실제로 모달을 닫는 함수
+  const handleConfirmClose = useCallback(() => {
+    setShowCloseConfirm(false);
+    handleCloseInternal();
+  }, []);
+
+  // 닫기 취소 (계속 작업)
+  const handleCancelClose = useCallback(() => {
+    setShowCloseConfirm(false);
+  }, []);
+
+  const handleCloseInternal = () => {
+    // 🔧 URL 파라미터 제거 (mode, editId, tableName, groupByColumns, dataSourceId 등)
     if (typeof window !== "undefined") {
       const currentUrl = new URL(window.location.href);
       currentUrl.searchParams.delete("mode");
       currentUrl.searchParams.delete("editId");
       currentUrl.searchParams.delete("tableName");
       currentUrl.searchParams.delete("groupByColumns");
+      currentUrl.searchParams.delete("dataSourceId");
       window.history.pushState({}, "", currentUrl.toString());
     }
 
@@ -514,8 +567,15 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
     });
     setScreenData(null);
     setFormData({}); // 폼 데이터 초기화
+    setOriginalData(null); // 원본 데이터 초기화
+    setSelectedData([]); // 선택된 데이터 초기화
+    setContinuousMode(false);
+    localStorage.setItem("screenModal_continuousMode", "false");
   };
 
+  // 기존 handleClose를 유지 (이벤트 핸들러 등에서 사용)
+  const handleClose = handleCloseInternal;
+
   // 모달 크기 설정 - 화면관리 설정 크기 + 헤더/푸터
   const getModalStyle = () => {
     if (!screenDimensions) {
@@ -615,10 +675,28 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
   ]);
 
   return (
-    <Dialog open={modalState.isOpen} onOpenChange={handleClose}>
+    <Dialog
+      open={modalState.isOpen}
+      onOpenChange={(open) => {
+        // X 버튼 클릭 시에도 확인 다이얼로그 표시
+        if (!open) {
+          handleCloseAttempt();
+        }
+      }}
+    >
       <DialogContent
         className={`${modalStyle.className} ${className || ""} max-w-none flex flex-col`}
         {...(modalStyle.style && { style: modalStyle.style })}
+        // 바깥 클릭 시 바로 닫히지 않도록 방지
+        onInteractOutside={(e) => {
+          e.preventDefault();
+          handleCloseAttempt();
+        }}
+        // ESC 키 누를 때도 바로 닫히지 않도록 방지
+        onEscapeKeyDown={(e) => {
+          e.preventDefault();
+          handleCloseAttempt();
+        }}
       >
         <DialogHeader className="shrink-0 border-b px-4 py-3">
           <div className="flex items-center gap-2">
@@ -838,6 +916,36 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
           </div>
         </div>
       </DialogContent>
+
+      {/* 모달 닫기 확인 다이얼로그 */}
+      <AlertDialog open={showCloseConfirm} onOpenChange={setShowCloseConfirm}>
+        <AlertDialogContent className="!z-[1100] max-w-[95vw] sm:max-w-[400px]">
+          <AlertDialogHeader>
+            <AlertDialogTitle className="text-base sm:text-lg">
+              화면을 닫으시겠습니까?
+            </AlertDialogTitle>
+            <AlertDialogDescription className="text-xs sm:text-sm">
+              지금 나가시면 진행 중인 데이터가 저장되지 않습니다.
+              <br />
+              계속 작업하시려면 &apos;계속 작업&apos; 버튼을 눌러주세요.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter className="gap-2 sm:gap-0">
+            <AlertDialogCancel
+              onClick={handleCancelClose}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              계속 작업
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirmClose}
+              className="h-8 flex-1 text-xs bg-destructive text-destructive-foreground hover:bg-destructive/90 sm:h-10 sm:flex-none sm:text-sm"
+            >
+              나가기
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </Dialog>
   );
 };