반응형 레이아웃 기능 구현

frontend/app/(main)/screens/[screenId]/page.tsx

@@ -1,20 +1,17 @@
 "use client";
 
-import React, { useEffect, useState, useRef, useMemo } from "react";
+import React, { useEffect, useState } from "react";
 import { useParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { Loader2 } from "lucide-react";
 import { screenApi } from "@/lib/api/screen";
 import { ScreenDefinition, LayoutData } from "@/types/screen";
-import { InteractiveScreenViewer } from "@/components/screen/InteractiveScreenViewerDynamic";
-import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
-import { DynamicWebTypeRenderer } from "@/lib/registry";
 import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import { initializeComponents } from "@/lib/registry/components";
 import { EditModal } from "@/components/screen/EditModal";
-import { isFileComponent, getComponentWebType } from "@/lib/utils/componentTypeUtils";
-// import { ResponsiveScreenContainer } from "@/components/screen/ResponsiveScreenContainer"; // 컨테이너 제거
+import { ResponsiveLayoutEngine } from "@/components/screen/ResponsiveLayoutEngine";
+import { useBreakpoint } from "@/hooks/useBreakpoint";
 
 export default function ScreenViewPage() {
   const params = useParams();
@@ -27,15 +24,7 @@ export default function ScreenViewPage() {
   const [error, setError] = useState<string | null>(null);
   const [formData, setFormData] = useState<Record<string, any>>({});
 
-  // 테이블 선택된 행 상태 (화면 레벨에서 관리)
-  const [selectedRows, setSelectedRows] = useState<any[]>([]);
-  const [selectedRowsData, setSelectedRowsData] = useState<any[]>([]);
-
-  // 테이블 새로고침을 위한 키 상태
-  const [refreshKey, setRefreshKey] = useState(0);
-
-  // 스케일 상태
-  const [scale, setScale] = useState(1);
+  const breakpoint = useBreakpoint();
 
   // 편집 모달 상태
   const [editModalOpen, setEditModalOpen] = useState(false);
@@ -122,73 +111,6 @@ export default function ScreenViewPage() {
     }
   }, [screenId]);
 
-  // 가로폭 기준 자동 스케일 계산
-  useEffect(() => {
-    const updateScale = () => {
-      if (layout) {
-        // main 요소의 실제 너비를 직접 사용
-        const mainElement = document.querySelector("main");
-        const mainWidth = mainElement ? mainElement.clientWidth : window.innerWidth - 288;
-
-        // 좌우 마진 16px씩 제외
-        const margin = 32; // 16px * 2
-        const availableWidth = mainWidth - margin;
-
-        const screenWidth = layout?.screenResolution?.width || 1200;
-        const newScale = availableWidth / screenWidth;
-
-        console.log("🎯 스케일 계산 (마진 포함):", {
-          mainWidth,
-          margin,
-          availableWidth,
-          screenWidth,
-          newScale,
-        });
-
-        setScale(newScale);
-      }
-    };
-
-    updateScale();
-  }, [layout]);
-
-  // 실제 컨텐츠의 동적 높이 상태
-  const [actualContentHeight, setActualContentHeight] = useState(layout?.screenResolution?.height || 800);
-  const contentRef = useRef<HTMLDivElement>(null);
-
-  // ResizeObserver로 컨텐츠 높이 실시간 모니터링
-  useEffect(() => {
-    if (!contentRef.current) return;
-
-    const resizeObserver = new ResizeObserver(() => {
-      if (!contentRef.current) return;
-
-      // 모든 컴포넌트의 실제 높이를 측정
-      const components = contentRef.current.querySelectorAll("[data-component-id]");
-      let maxBottom = layout?.screenResolution?.height || 800;
-
-      components.forEach((element) => {
-        const rect = element.getBoundingClientRect();
-        const parentRect = contentRef.current!.getBoundingClientRect();
-        const relativeTop = rect.top - parentRect.top;
-        const bottom = relativeTop + rect.height;
-        maxBottom = Math.max(maxBottom, bottom);
-      });
-
-      setActualContentHeight(maxBottom);
-    });
-
-    resizeObserver.observe(contentRef.current);
-
-    // 모든 자식 요소도 관찰
-    const childElements = contentRef.current.querySelectorAll("[data-component-id]");
-    childElements.forEach((child) => resizeObserver.observe(child));
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [layout]);
-
   if (loading) {
     return (
       <div className="flex h-full min-h-[400px] w-full items-center justify-center bg-gradient-to-br from-gray-50 to-slate-100">
@@ -219,275 +141,21 @@ export default function ScreenViewPage() {
 
   // 화면 해상도 정보가 있으면 해당 크기로, 없으면 기본 크기 사용
   const screenWidth = layout?.screenResolution?.width || 1200;
-  const screenHeight = layout?.screenResolution?.height || 800;
 
   return (
-    <div className="h-full w-full bg-white" style={{ padding: "16px 0" }}>
-      {layout && layout.components.length > 0 ? (
-        // 스케일링된 화면을 감싸는 래퍼 (실제 크기 조정 + 좌우 마진 16px)
-        <div
-          style={{
-            width: `${screenWidth * scale}px`,
-            minHeight: `${actualContentHeight * scale}px`,
-            marginLeft: "16px",
-            marginRight: "16px",
-          }}
-        >
-          {/* 캔버스 컴포넌트들을 가로폭에 맞춰 스케일링하여 표시 */}
-          <div
-            ref={contentRef}
-            className="relative bg-white"
-            style={{
-              width: `${screenWidth}px`,
-              minHeight: `${actualContentHeight}px`,
-              transform: `scale(${scale})`,
-              transformOrigin: "top left",
-            }}
-          >
-            {layout.components
-              .filter((comp) => !comp.parentId) // 최상위 컴포넌트만 렌더링 (그룹 포함)
-              .map((component) => {
-                // 그룹 컴포넌트인 경우 특별 처리
-                if (component.type === "group") {
-                  const groupChildren = layout.components.filter((child) => child.parentId === component.id);
-
-                  return (
-                    <div
-                      key={component.id}
-                      style={{
-                        position: "absolute",
-                        left: `${component.position.x}px`,
-                        top: `${component.position.y}px`,
-                        width: component.style?.width || `${component.size.width}px`,
-                        height: component.style?.height || `${component.size.height}px`,
-                        zIndex: component.position.z || 1,
-                        backgroundColor: (component as any).backgroundColor || "rgba(59, 130, 246, 0.05)",
-                        border: (component as any).border || "1px solid rgba(59, 130, 246, 0.2)",
-                        borderRadius: (component as any).borderRadius || "12px",
-                        padding: "20px",
-                        boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-                      }}
-                    >
-                      {/* 그룹 제목 */}
-                      {(component as any).title && (
-                        <div className="mb-3 inline-block rounded-lg bg-blue-50 px-3 py-1 text-sm font-semibold text-blue-700">
-                          {(component as any).title}
-                        </div>
-                      )}
-
-                      {/* 그룹 내 자식 컴포넌트들 렌더링 */}
-                      {groupChildren.map((child) => (
-                        <div
-                          key={child.id}
-                          style={{
-                            position: "absolute",
-                            left: `${child.position.x}px`,
-                            top: `${child.position.y}px`,
-                            width: child.style?.width || `${child.size.width}px`,
-                            height: child.style?.height || `${child.size.height}px`,
-                            zIndex: child.position.z || 1,
-                          }}
-                        >
-                          <InteractiveScreenViewer
-                            component={child}
-                            allComponents={layout.components}
-                            formData={formData}
-                            onFormDataChange={(fieldName, value) => {
-                              console.log("📝 폼 데이터 변경:", { fieldName, value });
-                              setFormData((prev) => {
-                                const newFormData = {
-                                  ...prev,
-                                  [fieldName]: value,
-                                };
-                                console.log("📊 전체 폼 데이터:", newFormData);
-                                return newFormData;
-                              });
-                            }}
-                            screenInfo={{
-                              id: screenId,
-                              tableName: screen?.tableName,
-                            }}
-                          />
-                        </div>
-                      ))}
-                    </div>
-                  );
-                }
-
-                // 라벨 표시 여부 계산
-                const templateTypes = ["datatable"];
-                const shouldShowLabel =
-                  component.style?.labelDisplay !== false &&
-                  (component.label || component.style?.labelText) &&
-                  !templateTypes.includes(component.type);
-
-                const labelText = component.style?.labelText || component.label || "";
-                const labelStyle = {
-                  fontSize: component.style?.labelFontSize || "14px",
-                  color: component.style?.labelColor || "#212121",
-                  fontWeight: component.style?.labelFontWeight || "500",
-                  backgroundColor: component.style?.labelBackgroundColor || "transparent",
-                  padding: component.style?.labelPadding || "0",
-                  borderRadius: component.style?.labelBorderRadius || "0",
-                  marginBottom: component.style?.labelMarginBottom || "4px",
-                };
-
-                // 일반 컴포넌트 렌더링
-                return (
-                  <div key={component.id}>
-                    {/* 라벨을 외부에 별도로 렌더링 */}
-                    {shouldShowLabel && (
-                      <div
-                        style={{
-                          position: "absolute",
-                          left: `${component.position.x}px`,
-                          top: `${component.position.y - 25}px`, // 컴포넌트 위쪽에 라벨 배치
-                          zIndex: (component.position.z || 1) + 1,
-                          ...labelStyle,
-                        }}
-                      >
-                        {labelText}
-                        {component.required && <span style={{ color: "#f97316", marginLeft: "2px" }}>*</span>}
-                      </div>
-                    )}
-
-                    {/* 실제 컴포넌트 */}
-                    <div
-                      data-component-id={component.id}
-                      style={{
-                        position: "absolute",
-                        left: `${component.position.x}px`,
-                        top: `${component.position.y}px`,
-                        width: component.style?.width || `${component.size.width}px`,
-                        minHeight: component.style?.height || `${component.size.height}px`,
-                        zIndex: component.position.z || 1,
-                      }}
-                      onMouseEnter={() => {
-                        // console.log("🎯 할당된 화면 컴포넌트:", {
-                        //   id: component.id,
-                        //   type: component.type,
-                        //   position: component.position,
-                        //   size: component.size,
-                        //   styleWidth: component.style?.width,
-                        //   styleHeight: component.style?.height,
-                        //   finalWidth: `${component.size.width}px`,
-                        //   finalHeight: `${component.size.height}px`,
-                        // });
-                      }}
-                    >
-                      {/* 위젯 컴포넌트가 아닌 경우 DynamicComponentRenderer 사용 */}
-                      {component.type !== "widget" ? (
-                        <DynamicComponentRenderer
-                          component={{
-                            ...component,
-                            style: {
-                              ...component.style,
-                              labelDisplay: shouldShowLabel ? false : (component.style?.labelDisplay ?? true), // 상위에서 라벨을 표시했으면 컴포넌트 내부에서는 숨김
-                            },
-                          }}
-                          isInteractive={true}
-                          formData={formData}
-                          onFormDataChange={(fieldName, value) => {
-                            setFormData((prev) => ({
-                              ...prev,
-                              [fieldName]: value,
-                            }));
-                          }}
-                          screenId={screenId}
-                          tableName={screen?.tableName}
-                          onRefresh={() => {
-                            console.log("화면 새로고침 요청");
-                            // 테이블 컴포넌트 강제 새로고침을 위한 키 업데이트
-                            setRefreshKey((prev) => prev + 1);
-                            // 선택된 행 상태도 초기화
-                            setSelectedRows([]);
-                            setSelectedRowsData([]);
-                          }}
-                          onClose={() => {
-                            console.log("화면 닫기 요청");
-                          }}
-                          // 테이블 선택된 행 정보 전달
-                          selectedRows={selectedRows}
-                          selectedRowsData={selectedRowsData}
-                          onSelectedRowsChange={(newSelectedRows, newSelectedRowsData) => {
-                            setSelectedRows(newSelectedRows);
-                            setSelectedRowsData(newSelectedRowsData);
-                          }}
-                          // 테이블 새로고침 키 전달
-                          refreshKey={refreshKey}
-                        />
-                      ) : (
-                        <DynamicWebTypeRenderer
-                          webType={(() => {
-                            // 유틸리티 함수로 파일 컴포넌트 감지
-                            if (isFileComponent(component)) {
-                              console.log('🎯 page.tsx - 파일 컴포넌트 감지 → webType: "file"', {
-                                componentId: component.id,
-                                componentType: component.type,
-                                originalWebType: component.webType,
-                              });
-                              return "file";
-                            }
-                            // 다른 컴포넌트는 유틸리티 함수로 webType 결정
-                            return getComponentWebType(component) || "text";
-                          })()}
-                          config={component.webTypeConfig}
-                          props={{
-                            component: component,
-                            value: formData[component.columnName || component.id] || "",
-                            onChange: (value: any) => {
-                              const fieldName = component.columnName || component.id;
-                              setFormData((prev) => ({
-                                ...prev,
-                                [fieldName]: value,
-                              }));
-                            },
-                            onFormDataChange: (fieldName, value) => {
-                              console.log(`🎯 page.tsx onFormDataChange 호출: ${fieldName} = "${value}"`);
-                              console.log("📋 현재 formData:", formData);
-                              setFormData((prev) => {
-                                const newFormData = {
-                                  ...prev,
-                                  [fieldName]: value,
-                                };
-                                console.log("📝 업데이트된 formData:", newFormData);
-                                return newFormData;
-                              });
-                            },
-                            isInteractive: true,
-                            formData: formData,
-                            readonly: component.readonly,
-                            required: component.required,
-                            placeholder: component.placeholder,
-                            className: "w-full h-full",
-                          }}
-                        />
-                      )}
-                    </div>
-                  </div>
-                );
-              })}
-          </div>
-        </div>
-      ) : (
-        // 빈 화면일 때도 같은 스케일로 표시 + 좌우 마진 16px
-        <div
-          style={{
-            width: `${screenWidth * scale}px`,
-            minHeight: `${screenHeight * scale}px`,
-            marginLeft: "16px",
-            marginRight: "16px",
-          }}
-        >
-          <div
-            className="flex items-center justify-center bg-white"
-            style={{
-              width: `${screenWidth}px`,
-              minHeight: `${screenHeight}px`,
-              transform: `scale(${scale})`,
-              transformOrigin: "top left",
-            }}
-          >
+    <div className="h-full w-full bg-white">
+      <div style={{ padding: "16px 0" }}>
+        {/* 항상 반응형 모드로 렌더링 */}
+        {layout && layout.components.length > 0 ? (
+          <ResponsiveLayoutEngine
+            components={layout?.components || []}
+            breakpoint={breakpoint}
+            containerWidth={window.innerWidth}
+            screenWidth={screenWidth}
+          />
+        ) : (
+          // 빈 화면일 때
+          <div className="flex items-center justify-center bg-white" style={{ minHeight: "600px" }}>
             <div className="text-center">
               <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-white shadow-sm">
                 <span className="text-2xl">📄</span>
@@ -496,8 +164,8 @@ export default function ScreenViewPage() {
               <p className="text-gray-600">이 화면에는 아직 설계된 컴포넌트가 없습니다.</p>
             </div>
           </div>
-        </div>
-      )}
+        )}
+      </div>
 
       {/* 편집 모달 */}
       <EditModal