기능추가

2025-11-06 17:32:29 +09:00
parent b3cd771b99
commit ead3433f3e
8 changed files with 232 additions and 147 deletions
--- a/frontend/components/common/ScreenModal.tsx
+++ b/frontend/components/common/ScreenModal.tsx
@@ -1,6 +1,6 @@
 "use client";

-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import {
  ResizableDialog,
  ResizableDialogContent,
@@ -8,6 +8,8 @@ import {
  ResizableDialogTitle,
  ResizableDialogDescription,
 } from "@/components/ui/resizable-dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
 import { InteractiveScreenViewerDynamic } from "@/components/screen/InteractiveScreenViewerDynamic";
 import { screenApi } from "@/lib/api/screen";
 import { ComponentData } from "@/types/screen";
@@ -52,6 +54,19 @@ 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");
+    if (savedMode === "true") {
+      continuousModeRef.current = true;
+      // console.log("🔄 연속 모드 복원: true");
+    }
+  }, []);

  // 화면의 실제 크기 계산 함수
  const calculateScreenDimensions = (components: ComponentData[]) => {
@@ -124,16 +139,43 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
      });
      setScreenData(null);
      setFormData({});
+      continuousModeRef.current = false;
+      localStorage.setItem("screenModal_continuousMode", "false"); // localStorage에 저장
+      // console.log("🔄 연속 모드 초기화: false");
+    };
+
+    // 저장 성공 이벤트 처리 (연속 등록 모드 지원)
+    const handleSaveSuccess = () => {
+      const isContinuousMode = continuousModeRef.current;
+      // console.log("💾 저장 성공 이벤트 수신");
+      // console.log("📌 현재 연속 모드 상태 (ref):", isContinuousMode);
+      // console.log("📌 localStorage:", localStorage.getItem("screenModal_continuousMode"));
+      
+      if (isContinuousMode) {
+        // 연속 모드: 폼만 초기화하고 모달은 유지
+        // console.log("✅ 연속 모드 활성화 - 폼만 초기화");
+        
+        // 폼만 초기화 (연속 모드 상태는 localStorage에 저장되어 있으므로 유지됨)
+        setFormData({});
+        
+        toast.success("저장되었습니다. 계속 입력하세요.");
+      } else {
+        // 일반 모드: 모달 닫기
+        // console.log("❌ 일반 모드 - 모달 닫기");
+        handleCloseModal();
+      }
    };

    window.addEventListener("openScreenModal", handleOpenModal as EventListener);
    window.addEventListener("closeSaveModal", handleCloseModal);
+    window.addEventListener("saveSuccessInModal", handleSaveSuccess);

    return () => {
      window.removeEventListener("openScreenModal", handleOpenModal as EventListener);
      window.removeEventListener("closeSaveModal", handleCloseModal);
+      window.removeEventListener("saveSuccessInModal", handleSaveSuccess);
    };
-  }, []);
+  }, []); // 의존성 제거 (ref 사용으로 최신 상태 참조)

  // 화면 데이터 로딩
  useEffect(() => {
@@ -160,8 +202,25 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
      if (screenInfo && layoutData) {
        const components = layoutData.components || [];

-        // 화면의 실제 크기 계산
-        const dimensions = calculateScreenDimensions(components);
+        // 화면 관리에서 설정한 해상도 사용 (우선순위)
+        const screenResolution = (layoutData as any).screenResolution || (screenInfo as any).screenResolution;
+        
+        let dimensions;
+        if (screenResolution && screenResolution.width && screenResolution.height) {
+          // 화면 관리에서 설정한 해상도 사용
+          dimensions = {
+            width: screenResolution.width,
+            height: screenResolution.height,
+            offsetX: 0,
+            offsetY: 0,
+          };
+          console.log("✅ 화면 관리 해상도 사용:", dimensions);
+        } else {
+          // 해상도 정보가 없으면 자동 계산
+          dimensions = calculateScreenDimensions(components);
+          console.log("⚠️ 자동 계산된 크기 사용:", dimensions);
+        }
+        
        setScreenDimensions(dimensions);

        setScreenData({
@@ -235,39 +294,39 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
    // 1순위: screenId (가장 안정적)
    if (modalState.screenId) {
      newModalId = `screen-modal-${modalState.screenId}`;
-      console.log("🔑 ScreenModal modalId 생성:", {
-        method: "screenId",
-        screenId: modalState.screenId,
-        result: newModalId,
-      });
+      // console.log("🔑 ScreenModal modalId 생성:", {
+      //   method: "screenId",
+      //   screenId: modalState.screenId,
+      //   result: newModalId,
+      // });
    }
    // 2순위: 테이블명
    else if (screenData?.screenInfo?.tableName) {
      newModalId = `screen-modal-table-${screenData.screenInfo.tableName}`;
-      console.log("🔑 ScreenModal modalId 생성:", {
-        method: "tableName",
-        tableName: screenData.screenInfo.tableName,
-        result: newModalId,
-      });
+      // console.log("🔑 ScreenModal modalId 생성:", {
+      //   method: "tableName",
+      //   tableName: screenData.screenInfo.tableName,
+      //   result: newModalId,
+      // });
    }
    // 3순위: 화면명
    else if (screenData?.screenInfo?.screenName) {
      newModalId = `screen-modal-name-${screenData.screenInfo.screenName}`;
-      console.log("🔑 ScreenModal modalId 생성:", {
-        method: "screenName",
-        screenName: screenData.screenInfo.screenName,
-        result: newModalId,
-      });
+      // console.log("🔑 ScreenModal modalId 생성:", {
+      //   method: "screenName",
+      //   screenName: screenData.screenInfo.screenName,
+      //   result: newModalId,
+      // });
    }
    // 4순위: 제목
    else if (modalState.title) {
-      const titleId = modalState.title.replace(/\s+/g, '-');
+      const titleId = modalState.title.replace(/\s+/g, "-");
      newModalId = `screen-modal-title-${titleId}`;
-      console.log("🔑 ScreenModal modalId 생성:", {
-        method: "title",
-        title: modalState.title,
-        result: newModalId,
-      });
+      // console.log("🔑 ScreenModal modalId 생성:", {
+      //   method: "title",
+      //   title: modalState.title,
+      //   result: newModalId,
+      // });
    }
    
    if (newModalId) {
@@ -325,11 +384,12 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
              }}
            >
              {screenData.components.map((component) => {
-                // 컴포넌트 위치를 offset만큼 조정 (왼쪽 상단으로 정렬)
+                // 화면 관리 해상도를 사용하는 경우 offset 조정 불필요
                const offsetX = screenDimensions?.offsetX || 0;
                const offsetY = screenDimensions?.offsetY || 0;

-                const adjustedComponent = {
+                // offset이 0이면 원본 위치 사용 (화면 관리 해상도 사용 시)
+                const adjustedComponent = (offsetX === 0 && offsetY === 0) ? component : {
                  ...component,
                  position: {
                    ...component.position,
@@ -345,14 +405,14 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
                    allComponents={screenData.components}
                    formData={formData}
                    onFormDataChange={(fieldName, value) => {
-                      console.log(`🎯 ScreenModal onFormDataChange 호출: ${fieldName} = "${value}"`);
-                      console.log("📋 현재 formData:", formData);
+                      // console.log(`🎯 ScreenModal onFormDataChange 호출: ${fieldName} = "${value}"`);
+                      // console.log("📋 현재 formData:", formData);
                      setFormData((prev) => {
                        const newFormData = {
                          ...prev,
                          [fieldName]: value,
                        };
-                        console.log("📝 ScreenModal 업데이트된 formData:", newFormData);
+                        // console.log("📝 ScreenModal 업데이트된 formData:", newFormData);
                        return newFormData;
                      });
                    }}
@@ -370,6 +430,29 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
            </div>
          )}
        </div>
+
+        {/* 연속 등록 모드 체크박스 */}
+        <div className="border-t px-4 py-3">
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="continuous-mode"
+              checked={continuousModeRef.current}
+              onCheckedChange={(checked) => {
+                const isChecked = checked === true;
+                continuousModeRef.current = isChecked;
+                localStorage.setItem("screenModal_continuousMode", String(isChecked));
+                setForceUpdate((prev) => prev + 1); // 체크박스 UI 업데이트를 위한 강제 리렌더링
+                // console.log("🔄 연속 모드 변경:", isChecked);
+              }}
+            />
+            <Label
+              htmlFor="continuous-mode"
+              className="text-sm font-normal cursor-pointer select-none"
+            >
+              저장 후 계속 입력 (연속 등록 모드)
+            </Label>
+          </div>
+        </div>
      </ResizableDialogContent>
    </ResizableDialog>
  );