feat(pop): 뷰어 스크롤 수정 및 컴포넌트 레지스트리 연동

- page.tsx: overflow-hidden 제거로 뷰어 스크롤 활성화,
  pop-components 레지스트리 자동 등록 import 추가
- PopRenderer.tsx: 레지스트리에서 실제 컴포넌트 조회 후 렌더링,
  미등록 컴포넌트는 플레이스홀더 fallback 표시
- PLAN.MD: POP 뷰어 스크롤 수정 계획으로 업데이트
- POPUPDATE_2.md: v8.0 - 모달 화면 설계 규칙(제9조) 추가,
  버튼 modal action 스펙 확장 (inline/screen-ref 모드)

Co-authored-by: Cursor <cursoragent@cursor.com>

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

@@ -24,6 +24,8 @@ import {
   GRID_BREAKPOINTS,
   detectGridMode,
 } from "@/components/pop/designer/types/pop-layout";
+// POP 컴포넌트 자동 등록 (레지스트리 초기화 - PopRenderer보다 먼저 import)
+import "@/lib/registry/pop-components";
 import PopRenderer from "@/components/pop/designer/renderers/PopRenderer";
 import { 
   useResponsiveModeWithOverride,
@@ -180,7 +182,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 +263,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 +272,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",

frontend/components/pop/designer/renderers/PopRenderer.tsx

@@ -553,9 +553,20 @@ function ComponentContent({ component, effectivePosition, isDesignMode, isSelect
 // ========================================
 
 function renderActualComponent(component: PopComponentDefinitionV5): React.ReactNode {
-  const typeLabel = COMPONENT_TYPE_LABELS[component.type];
-  
-  // 샘플 박스 렌더링
+  // 레지스트리에서 등록된 실제 컴포넌트 조회
+  const registeredComp = PopComponentRegistry.getComponent(component.type);
+  const ActualComp = registeredComp?.component;
+
+  if (ActualComp) {
+    return (
+      <div className="h-full w-full overflow-hidden">
+        <ActualComp config={component.config} label={component.label} />
+      </div>
+    );
+  }
+
+  // 미등록 컴포넌트: 플레이스홀더 (fallback)
+  const typeLabel = COMPONENT_TYPE_LABELS[component.type] || component.type;
   return (
     <div className="flex h-full w-full items-center justify-center p-2">
       <span className="text-xs text-gray-500">{component.label || typeLabel}</span>