Merge branch 'ksh-v2-work'

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

@@ -24,7 +24,9 @@ import {
   GRID_BREAKPOINTS,
   detectGridMode,
 } from "@/components/pop/designer/types/pop-layout";
-import PopRenderer from "@/components/pop/designer/renderers/PopRenderer";
+// POP 컴포넌트 자동 등록 (레지스트리 초기화 - PopRenderer보다 먼저 import)
+import "@/lib/registry/pop-components";
+import PopViewerWithModals from "@/components/pop/viewer/PopViewerWithModals";
 import { 
   useResponsiveModeWithOverride,
   type DeviceType,
@@ -144,6 +146,28 @@ function PopScreenViewPage() {
     }
   }, [screenId]);
 
+  // 뷰어 모드에서도 컴포넌트 크기 변경 지원 (더보기 등)
+  const handleRequestResize = React.useCallback((componentId: string, newRowSpan: number, newColSpan?: number) => {
+    setLayout((prev) => {
+      const comp = prev.components[componentId];
+      if (!comp) return prev;
+      return {
+        ...prev,
+        components: {
+          ...prev.components,
+          [componentId]: {
+            ...comp,
+            position: {
+              ...comp.position,
+              rowSpan: newRowSpan,
+              ...(newColSpan !== undefined ? { colSpan: newColSpan } : {}),
+            },
+          },
+        },
+      };
+    });
+  }, []);
+
   const currentDevice = DEVICE_SIZES[deviceType][isLandscape ? "landscape" : "portrait"];
   const hasComponents = Object.keys(layout.components).length > 0;
 
@@ -180,7 +204,7 @@ function PopScreenViewPage() {
     <ScreenPreviewProvider isPreviewMode={isPreviewMode}>
       <ActiveTabProvider>
         <TableOptionsProvider>
-          <div className="h-screen bg-gray-100 flex flex-col overflow-hidden">
+          <div className="h-screen bg-gray-100 flex flex-col">
             {/* 상단 툴바 (프리뷰 모드에서만) */}
             {isPreviewMode && (
               <div className="sticky top-0 z-50 bg-white border-b shadow-sm">
@@ -261,7 +285,7 @@ function PopScreenViewPage() {
             )}
 
             {/* POP 화면 컨텐츠 */}
-            <div className={`flex-1 flex flex-col ${isPreviewMode ? "py-4 overflow-auto items-center" : ""}`}>
+            <div className={`flex-1 flex flex-col overflow-auto ${isPreviewMode ? "py-4 items-center" : ""}`}>
               {/* 현재 모드 표시 (일반 모드) */}
               {!isPreviewMode && (
                 <div className="absolute top-2 right-2 z-10 bg-black/50 text-white text-xs px-2 py-1 rounded">
@@ -270,7 +294,7 @@ function PopScreenViewPage() {
               )}
 
               <div
-                className={`bg-white transition-all duration-300 ${isPreviewMode ? "shadow-2xl rounded-3xl overflow-auto border-8 border-gray-800" : "w-full"}`}
+                className={`bg-white transition-all duration-300 ${isPreviewMode ? "shadow-2xl rounded-3xl overflow-auto border-8 border-gray-800" : "w-full min-h-full"}`}
                 style={isPreviewMode ? {
                   width: currentDevice.width,
                   maxHeight: "80vh",
@@ -292,13 +316,15 @@ function PopScreenViewPage() {
                       const adjustedPadding = Math.max(8, Math.round(breakpoint.padding * gapMultiplier));
                       
                       return (
-                        <PopRenderer
+                        <PopViewerWithModals
                           layout={layout}
                           viewportWidth={isPreviewMode ? currentDevice.width : viewportWidth}
+                          screenId={String(screenId)}
                           currentMode={currentModeKey}
-                          isDesignMode={false}
                           overrideGap={adjustedGap}
                           overridePadding={adjustedPadding}
+                          onRequestResize={handleRequestResize}
+                          currentScreenId={screenId}
                         />
                       );
                     })()}