스타일 수정중

frontend/components/screen/EditModal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { X, Save, RotateCcw } from "lucide-react";
 import { toast } from "sonner";
@@ -51,9 +51,15 @@ export const EditModal: React.FC<EditModalProps> = ({
 
     const maxWidth = Math.max(...components.map((c) => (c.position?.x || 0) + (c.size?.width || 200)), 500) + 100; // 더 넉넉한 여백
 
-    const maxHeight = Math.max(...components.map((c) => (c.position?.y || 0) + (c.size?.height || 40)), 400) + 20; // 최소한의 여백만 추가
+    const contentHeight = Math.max(...components.map((c) => (c.position?.y || 0) + (c.size?.height || 40)), 400) + 20; // 컨텐츠 높이
 
-    console.log(`🎯 계산된 모달 크기: ${maxWidth}px x ${maxHeight}px`);
+    // 헤더 높이 추가 (ScreenModal과 동일)
+    const headerHeight = 60; // DialogHeader 높이 (타이틀 + 패딩)
+    const maxHeight = contentHeight + headerHeight;
+
+    console.log(
+      `🎯 계산된 모달 크기: ${maxWidth}px x ${maxHeight}px (컨텐츠: ${contentHeight}px + 헤더: ${headerHeight}px)`,
+    );
     console.log(
       "📍 컴포넌트 위치들:",
       components.map((c) => ({ x: c.position?.x, y: c.position?.y, w: c.size?.width, h: c.size?.height })),
@@ -71,7 +77,7 @@ export const EditModal: React.FC<EditModalProps> = ({
     };
 
     window.addEventListener("closeEditModal", handleCloseEditModal);
-    
+
     return () => {
       window.removeEventListener("closeEditModal", handleCloseEditModal);
     };
@@ -123,17 +129,13 @@ export const EditModal: React.FC<EditModalProps> = ({
       console.log("📋 originalData 설정 완료:", dataClone);
       console.log("📋 formData 설정 완료:", dataClone);
     } else {
-      console.log("⚠️ editData가 없습니다.");
       setOriginalData({});
       setFormData({});
     }
   }, [editData]);
 
   // formData 변경 시 로그
-  useEffect(() => {
-    console.log("🔄 EditModal formData 상태 변경:", formData);
-    console.log("🔄 formData 키들:", Object.keys(formData || {}));
-  }, [formData]);
+  useEffect(() => {}, [formData]);
 
   // 화면 데이터 로드
   useEffect(() => {
@@ -252,7 +254,7 @@ export const EditModal: React.FC<EditModalProps> = ({
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent
-        className="p-0"
+        className="overflow-hidden p-0"
         style={{
           // 실제 컨텐츠 크기 그대로 적용 (패딩/여백 제거)
           width: dynamicSize.width,
@@ -265,27 +267,23 @@ export const EditModal: React.FC<EditModalProps> = ({
         }}
         data-radix-portal="true"
       >
-        {/* 모달 헤더 (제목/설명이 있으면 표시) */}
-        {(modalTitle || modalDescription) && (
-          <DialogHeader className="border-b bg-gray-50 px-6 py-4">
-            <DialogTitle className="text-lg font-semibold">{modalTitle || "수정"}</DialogTitle>
-            {modalDescription && <p className="mt-1 text-sm text-gray-600">{modalDescription}</p>}
-          </DialogHeader>
-        )}
+        {/* 모달 헤더 - 항상 표시 (ScreenModal과 동일 구조) */}
+        <DialogHeader className="shrink-0 border-b px-4 py-3">
+          <DialogTitle className="text-base">{modalTitle || "데이터 수정"}</DialogTitle>
+          {modalDescription && !loading && (
+            <DialogDescription className="text-muted-foreground text-xs">{modalDescription}</DialogDescription>
+          )}
+          {loading && (
+            <DialogDescription className="text-xs">{loading ? "화면을 불러오는 중입니다..." : ""}</DialogDescription>
+          )}
+        </DialogHeader>
 
-        {/* 제목/설명이 없으면 접근성을 위한 숨김 헤더만 표시 */}
-        {!modalTitle && !modalDescription && (
-          <DialogHeader className="sr-only">
-            <DialogTitle>수정</DialogTitle>
-          </DialogHeader>
-        )}
-
-        <div className="flex-1 overflow-hidden">
+        <div className="flex flex-1 items-center justify-center overflow-auto">
           {loading ? (
             <div className="flex h-full items-center justify-center">
               <div className="text-center">
-                <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-blue-500"></div>
-                <p className="text-muted-foreground">화면 로딩 중...</p>
+                <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600"></div>
+                <p className="text-muted-foreground">화면을 불러오는 중...</p>
               </div>
             </div>
           ) : screenData && components.length > 0 ? (