Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node into feature/screen-management

frontend/components/common/ScreenModal.tsx

@@ -16,6 +16,7 @@ import { ComponentData } from "@/types/screen";
 import { toast } from "sonner";
 import { useAuth } from "@/hooks/useAuth";
 import { TableOptionsProvider } from "@/contexts/TableOptionsContext";
+import { TableSearchWidgetHeightProvider } from "@/contexts/TableSearchWidgetHeightContext";
 
 interface ScreenModalState {
   isOpen: boolean;
@@ -55,11 +56,11 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
 
   // 폼 데이터 상태 추가
   const [formData, setFormData] = useState<Record<string, any>>({});
-  
+
   // 연속 등록 모드 상태 (localStorage에 저장하여 리렌더링에 영향받지 않도록)
   const continuousModeRef = useRef(false);
   const [, setForceUpdate] = useState(0); // 강제 리렌더링용 (값은 사용하지 않음)
-  
+
   // localStorage에서 연속 모드 상태 복원
   useEffect(() => {
     const savedMode = localStorage.getItem("screenModal_continuousMode");
@@ -121,7 +122,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
   useEffect(() => {
     const handleOpenModal = (event: CustomEvent) => {
       const { screenId, title, description, size, urlParams } = event.detail;
-      
+
       // 🆕 URL 파라미터가 있으면 현재 URL에 추가
       if (urlParams && typeof window !== "undefined") {
         const currentUrl = new URL(window.location.href);
@@ -132,7 +133,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
         window.history.pushState({}, "", currentUrl.toString());
         console.log("✅ URL 파라미터 추가:", urlParams);
       }
-      
+
       setModalState({
         isOpen: true,
         screenId,
@@ -151,7 +152,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
         window.history.pushState({}, "", currentUrl.toString());
         console.log("🧹 URL 파라미터 제거");
       }
-      
+
       setModalState({
         isOpen: false,
         screenId: null,
@@ -172,14 +173,14 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
       // console.log("💾 저장 성공 이벤트 수신");
       // console.log("📌 현재 연속 모드 상태 (ref):", isContinuousMode);
       // console.log("📌 localStorage:", localStorage.getItem("screenModal_continuousMode"));
-      
+
       if (isContinuousMode) {
         // 연속 모드: 폼만 초기화하고 모달은 유지
         // console.log("✅ 연속 모드 활성화 - 폼만 초기화");
-        
+
         // 폼만 초기화 (연속 모드 상태는 localStorage에 저장되어 있으므로 유지됨)
         setFormData({});
-        
+
         toast.success("저장되었습니다. 계속 입력하세요.");
       } else {
         // 일반 모드: 모달 닫기
@@ -226,7 +227,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
 
         // 화면 관리에서 설정한 해상도 사용 (우선순위)
         const screenResolution = (layoutData as any).screenResolution || (screenInfo as any).screenResolution;
-        
+
         let dimensions;
         if (screenResolution && screenResolution.width && screenResolution.height) {
           // 화면 관리에서 설정한 해상도 사용
@@ -242,7 +243,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
           dimensions = calculateScreenDimensions(components);
           console.log("⚠️ 자동 계산된 크기 사용:", dimensions);
         }
-        
+
         setScreenDimensions(dimensions);
 
         setScreenData({
@@ -302,17 +303,17 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
   };
 
   const modalStyle = getModalStyle();
-  
+
   // 안정적인 modalId를 상태로 저장 (모달이 닫혀도 유지)
   const [persistedModalId, setPersistedModalId] = useState<string | undefined>(undefined);
-  
+
   // modalId 생성 및 업데이트
   useEffect(() => {
     // 모달이 열려있고 screenId가 있을 때만 업데이트
     if (!modalState.isOpen) return;
-    
+
     let newModalId: string | undefined;
-    
+
     // 1순위: screenId (가장 안정적)
     if (modalState.screenId) {
       newModalId = `screen-modal-${modalState.screenId}`;
@@ -350,11 +351,17 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
       //   result: newModalId,
       // });
     }
-    
+
     if (newModalId) {
       setPersistedModalId(newModalId);
     }
-  }, [modalState.isOpen, modalState.screenId, modalState.title, screenData?.screenInfo?.tableName, screenData?.screenInfo?.screenName]);
+  }, [
+    modalState.isOpen,
+    modalState.screenId,
+    modalState.title,
+    screenData?.screenInfo?.tableName,
+    screenData?.screenInfo?.screenName,
+  ]);
 
   return (
     <ResizableDialog open={modalState.isOpen} onOpenChange={handleClose}>
@@ -397,7 +404,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
           ) : screenData ? (
             <TableOptionsProvider>
               <div
-                className="relative bg-white mx-auto"
+                className="relative mx-auto bg-white"
                 style={{
                   width: `${screenDimensions?.width || 800}px`,
                   height: `${screenDimensions?.height || 600}px`,
@@ -410,14 +417,17 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
                   const offsetY = screenDimensions?.offsetY || 0;
 
                   // offset이 0이면 원본 위치 사용 (화면 관리 해상도 사용 시)
-                  const adjustedComponent = (offsetX === 0 && offsetY === 0) ? component : {
-                    ...component,
-                    position: {
-                      ...component.position,
-                      x: parseFloat(component.position?.x?.toString() || "0") - offsetX,
-                      y: parseFloat(component.position?.y?.toString() || "0") - offsetY,
-                    },
-                  };
+                  const adjustedComponent =
+                    offsetX === 0 && offsetY === 0
+                      ? component
+                      : {
+                          ...component,
+                          position: {
+                            ...component.position,
+                            x: parseFloat(component.position?.x?.toString() || "0") - offsetX,
+                            y: parseFloat(component.position?.y?.toString() || "0") - offsetY,
+                          },
+                        };
 
                   return (
                     <InteractiveScreenViewerDynamic
@@ -472,10 +482,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
                 // console.log("🔄 연속 모드 변경:", isChecked);
               }}
             />
-            <Label
-              htmlFor="continuous-mode"
-              className="text-sm font-normal cursor-pointer select-none"
-            >
+            <Label htmlFor="continuous-mode" className="cursor-pointer text-sm font-normal select-none">
               저장 후 계속 입력 (연속 등록 모드)
             </Label>
           </div>