저장버튼 제어기능 (insert)

frontend/components/common/ScreenModal.tsx

@@ -1,12 +1,7 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { InteractiveScreenViewerDynamic } from "@/components/screen/InteractiveScreenViewerDynamic";
 import { screenApi } from "@/lib/api/screen";
 import { ComponentData } from "@/types/screen";
@@ -30,18 +25,21 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
     title: "",
     size: "md",
   });
-  
+
   const [screenData, setScreenData] = useState<{
     components: ComponentData[];
     screenInfo: any;
   } | null>(null);
-  
+
   const [loading, setLoading] = useState(false);
   const [screenDimensions, setScreenDimensions] = useState<{
     width: number;
     height: number;
   } | null>(null);
 
+  // 폼 데이터 상태 추가
+  const [formData, setFormData] = useState<Record<string, any>>({});
+
   // 화면의 실제 크기 계산 함수
   const calculateScreenDimensions = (components: ComponentData[]) => {
     let maxWidth = 800; // 최소 너비
@@ -96,9 +94,9 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
   const loadScreenData = async (screenId: number) => {
     try {
       setLoading(true);
-      
+
       console.log("화면 데이터 로딩 시작:", screenId);
-      
+
       // 화면 정보와 레이아웃 데이터 로딩
       const [screenInfo, layoutData] = await Promise.all([
         screenApi.getScreen(screenId),
@@ -110,11 +108,11 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
       // screenApi는 직접 데이터를 반환하므로 .success 체크 불필요
       if (screenInfo && layoutData) {
         const components = layoutData.components || [];
-        
+
         // 화면의 실제 크기 계산
         const dimensions = calculateScreenDimensions(components);
         setScreenDimensions(dimensions);
-        
+
         setScreenData({
           components,
           screenInfo: screenInfo,
@@ -144,6 +142,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
       size: "md",
     });
     setScreenData(null);
+    setFormData({}); // 폼 데이터 초기화
   };
 
   // 모달 크기 설정 - 화면 내용에 맞게 동적 조정
@@ -151,7 +150,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
     if (!screenDimensions) {
       return {
         className: "w-fit min-w-[400px] max-w-4xl max-h-[80vh] overflow-hidden",
-        style: {}
+        style: {},
       };
     }
 
@@ -164,9 +163,9 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
       style: {
         width: `${screenDimensions.width + 48}px`, // 헤더 패딩과 여백 고려
         height: `${Math.min(totalHeight, window.innerHeight * 0.8)}px`,
-        maxWidth: '90vw',
-        maxHeight: '80vh'
-      }
+        maxWidth: "90vw",
+        maxHeight: "80vh",
+      },
     };
   };
 
@@ -174,28 +173,25 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
 
   return (
     <Dialog open={modalState.isOpen} onOpenChange={handleClose}>
-      <DialogContent 
-        className={`${modalStyle.className} ${className || ""}`}
-        style={modalStyle.style}
-      >
-        <DialogHeader className="px-6 py-4 border-b">
+      <DialogContent className={`${modalStyle.className} ${className || ""}`} style={modalStyle.style}>
+        <DialogHeader className="border-b px-6 py-4">
           <DialogTitle>{modalState.title}</DialogTitle>
         </DialogHeader>
-        
+
         <div className="flex-1 overflow-hidden p-4">
           {loading ? (
-            <div className="flex items-center justify-center h-full">
+            <div className="flex h-full items-center justify-center">
               <div className="text-center">
-                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
+                <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600"></div>
                 <p className="text-gray-600">화면을 불러오는 중...</p>
               </div>
             </div>
           ) : screenData ? (
-            <div 
-              className="relative bg-white overflow-hidden"
+            <div
+              className="relative overflow-hidden bg-white"
               style={{
-                width: (screenDimensions?.width || 800),
-                height: (screenDimensions?.height || 600),
+                width: screenDimensions?.width || 800,
+                height: screenDimensions?.height || 600,
               }}
             >
               {screenData.components.map((component) => (
@@ -203,6 +199,19 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
                   key={component.id}
                   component={component}
                   allComponents={screenData.components}
+                  formData={formData}
+                  onFormDataChange={(fieldName, value) => {
+                    console.log(`🎯 ScreenModal onFormDataChange 호출: ${fieldName} = "${value}"`);
+                    console.log(`📋 현재 formData:`, formData);
+                    setFormData((prev) => {
+                      const newFormData = {
+                        ...prev,
+                        [fieldName]: value,
+                      };
+                      console.log(`📝 ScreenModal 업데이트된 formData:`, newFormData);
+                      return newFormData;
+                    });
+                  }}
                   screenInfo={{
                     id: modalState.screenId!,
                     tableName: screenData.screenInfo?.tableName,
@@ -211,7 +220,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
               ))}
             </div>
           ) : (
-            <div className="flex items-center justify-center h-full">
+            <div className="flex h-full items-center justify-center">
               <p className="text-gray-600">화면 데이터가 없습니다.</p>
             </div>
           )}