모달창 올리기

2025-10-29 11:26:00 +09:00
parent eeae338cd4
commit efdef36cda
21 changed files with 727 additions and 728 deletions
--- a/frontend/components/common/ScreenModal.tsx
+++ b/frontend/components/common/ScreenModal.tsx
@@ -35,6 +35,8 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
  const [screenDimensions, setScreenDimensions] = useState<{
    width: number;
    height: number;
+    offsetX?: number;
+    offsetY?: number;
  } | null>(null);

  // 폼 데이터 상태 추가
@@ -42,11 +44,20 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {

  // 화면의 실제 크기 계산 함수
  const calculateScreenDimensions = (components: ComponentData[]) => {
+    if (components.length === 0) {
+      return {
+        width: 400,
+        height: 300,
+        offsetX: 0,
+        offsetY: 0,
+      };
+    }
+
    // 모든 컴포넌트의 경계 찾기
    let minX = Infinity;
    let minY = Infinity;
-    let maxX = 0;
-    let maxY = 0;
+    let maxX = -Infinity;
+    let maxY = -Infinity;

    components.forEach((component) => {
      const x = parseFloat(component.position?.x?.toString() || "0");
@@ -60,17 +71,22 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
      maxY = Math.max(maxY, y + height);
    });

-    // 컨텐츠 실제 크기 + 넉넉한 여백 (양쪽 각 64px)
+    // 실제 컨텐츠 크기 계산
    const contentWidth = maxX - minX;
    const contentHeight = maxY - minY;
-    const padding = 128; // 좌우 또는 상하 합계 여백

-    const finalWidth = Math.max(contentWidth + padding, 400); // 최소 400px
-    const finalHeight = Math.max(contentHeight + padding, 300); // 최소 300px
+    // 적절한 여백 추가
+    const paddingX = 40;
+    const paddingY = 40;
+
+    const finalWidth = Math.max(contentWidth + paddingX, 400);
+    const finalHeight = Math.max(contentHeight + paddingY, 300);

    return {
-      width: Math.min(finalWidth, window.innerWidth * 0.98),
-      height: Math.min(finalHeight, window.innerHeight * 0.95),
+      width: Math.min(finalWidth, window.innerWidth * 0.95),
+      height: Math.min(finalHeight, window.innerHeight * 0.9),
+      offsetX: Math.max(0, minX - paddingX / 2), // 좌측 여백 고려
+      offsetY: Math.max(0, minY - paddingY / 2), // 상단 여백 고려
    };
  };

@@ -172,20 +188,20 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
  const getModalStyle = () => {
    if (!screenDimensions) {
      return {
-        className: "w-fit min-w-[400px] max-w-4xl max-h-[80vh] overflow-hidden",
+        className: "w-fit min-w-[400px] max-w-4xl max-h-[90vh] overflow-hidden p-0",
        style: {},
      };
    }

-    // 헤더 높이만 고려 (패딩 제거)
-    const headerHeight = 73; // DialogHeader 실제 높이 (border-b px-6 py-4 포함)
+    // 헤더 높이를 최소화 (제목 영역만)
+    const headerHeight = 60; // DialogHeader 최소 높이 (타이틀 + 최소 패딩)
    const totalHeight = screenDimensions.height + headerHeight;

    return {
      className: "overflow-hidden p-0",
      style: {
-        width: `${Math.min(screenDimensions.width, window.innerWidth * 0.98)}px`, // 화면 크기 그대로
-        height: `${Math.min(totalHeight, window.innerHeight * 0.95)}px`, // 헤더 + 화면 높이
+        width: `${Math.min(screenDimensions.width, window.innerWidth * 0.98)}px`,
+        height: `${Math.min(totalHeight, window.innerHeight * 0.95)}px`,
        maxWidth: "98vw",
        maxHeight: "95vh",
      },
@@ -197,12 +213,14 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
  return (
    <Dialog open={modalState.isOpen} onOpenChange={handleClose}>
      <DialogContent className={`${modalStyle.className} ${className || ""}`} style={modalStyle.style}>
-        <DialogHeader className="border-b px-6 py-4">
-          <DialogTitle>{modalState.title}</DialogTitle>
-          <DialogDescription>{loading ? "화면을 불러오는 중입니다..." : "화면 내용을 표시합니다."}</DialogDescription>
+        <DialogHeader className="shrink-0 border-b px-4 py-3">
+          <DialogTitle className="text-base">{modalState.title}</DialogTitle>
+          {loading && (
+            <DialogDescription className="text-xs">{loading ? "화면을 불러오는 중입니다..." : ""}</DialogDescription>
+          )}
        </DialogHeader>

-        <div className="flex-1 flex items-center justify-center 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">
@@ -216,35 +234,50 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
              style={{
                width: screenDimensions?.width || 800,
                height: screenDimensions?.height || 600,
-                transformOrigin: 'center center',
-                maxWidth: '100%',
-                maxHeight: '100%',
+                transformOrigin: "center center",
+                maxWidth: "100%",
+                maxHeight: "100%",
              }}
            >
-              {screenData.components.map((component) => (
-                <InteractiveScreenViewerDynamic
-                  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,
-                  }}
-                />
-              ))}
+              {screenData.components.map((component) => {
+                // 컴포넌트 위치를 offset만큼 조정 (왼쪽 상단으로 정렬)
+                const offsetX = screenDimensions?.offsetX || 0;
+                const offsetY = screenDimensions?.offsetY || 0;
+
+                const adjustedComponent = {
+                  ...component,
+                  position: {
+                    ...component.position,
+                    x: parseFloat(component.position?.x?.toString() || "0") - offsetX,
+                    y: parseFloat(component.position?.y?.toString() || "0") - offsetY,
+                  },
+                };
+
+                return (
+                  <InteractiveScreenViewerDynamic
+                    key={component.id}
+                    component={adjustedComponent}
+                    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,
+                    }}
+                  />
+                );
+              })}
            </div>
          ) : (
            <div className="flex h-full items-center justify-center">