From dd77ddc1414541afb3e44af82be3157132d627bc Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Fri, 14 Nov 2025 18:20:52 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=A1=B0=EA=B1=B4=EB=B6=80=20=EC=BB=A8?=
 =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=84=88=EC=97=90=EC=84=9C=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=EC=9D=B4=20=EB=A0=8C=EB=8D=94=EB=A7=81=EB=90=98?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- InteractiveScreenViewer는 screenId가 아닌 component, allComponents를 받음
- screenApi.getLayout()과 getScreen()으로 화면 데이터 로드
- 로드된 컴포넌트들을 InteractiveScreenViewer로 렌더링
- 화면 로딩 상태 추가
- screenInfo 전달하여 테이블 컨텍스트 제공
---
 .../ConditionalSectionViewer.tsx              | 59 ++++++++++++++++---
 1 file changed, 50 insertions(+), 9 deletions(-)

diff --git a/frontend/lib/registry/components/conditional-container/ConditionalSectionViewer.tsx b/frontend/lib/registry/components/conditional-container/ConditionalSectionViewer.tsx
index 6ff42149..9f17c5eb 100644
--- a/frontend/lib/registry/components/conditional-container/ConditionalSectionViewer.tsx
+++ b/frontend/lib/registry/components/conditional-container/ConditionalSectionViewer.tsx
@@ -5,6 +5,8 @@ import { ConditionalSectionViewerProps } from "./types";
 import { InteractiveScreenViewer } from "@/components/screen/InteractiveScreenViewer";
 import { cn } from "@/lib/utils";
 import { Loader2 } from "lucide-react";
+import { screenApi } from "@/lib/api/screen";
+import { ComponentData } from "@/types/screen";
 
 /**
  * 조건부 섹션 뷰어 컴포넌트
@@ -23,6 +25,41 @@ export function ConditionalSectionViewer({
   onFormDataChange,
 }: ConditionalSectionViewerProps) {
   const [isLoading, setIsLoading] = useState(false);
+  const [components, setComponents] = useState<ComponentData[]>([]);
+  const [screenInfo, setScreenInfo] = useState<{ id: number; tableName?: string } | null>(null);
+
+  // 화면 로드
+  useEffect(() => {
+    if (!screenId) {
+      setComponents([]);
+      setScreenInfo(null);
+      return;
+    }
+
+    const loadScreen = async () => {
+      setIsLoading(true);
+      try {
+        const [layout, screen] = await Promise.all([
+          screenApi.getLayout(screenId),
+          screenApi.getScreen(screenId),
+        ]);
+
+        setComponents(layout.components || []);
+        setScreenInfo({
+          id: screenId,
+          tableName: screen.tableName,
+        });
+      } catch (error) {
+        console.error("화면 로드 실패:", error);
+        setComponents([]);
+        setScreenInfo(null);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadScreen();
+  }, [screenId]);
 
   // 디자인 모드가 아니고 비활성 섹션이면 렌더링하지 않음
   if (!isDesignMode && !isActive) {
@@ -72,15 +109,19 @@ export function ConditionalSectionViewer({
       )}
 
       {/* 화면 렌더링 */}
-      {screenId && (
-        <div className="relative p-4 min-h-[200px]">
-          <InteractiveScreenViewer
-            screenId={screenId}
-            formData={formData}
-            onFormDataChange={onFormDataChange}
-            mode="view" // 항상 뷰 모드로 표시
-            isInModal={true} // 모달 내부처럼 처리
-          />
+      {screenId && components.length > 0 && (
+        <div className="relative min-h-[200px] w-full">
+          {components.map((component) => (
+            <InteractiveScreenViewer
+              key={component.id}
+              component={component}
+              allComponents={components}
+              formData={formData}
+              onFormDataChange={onFormDataChange}
+              hideLabel={false}
+              screenInfo={screenInfo || undefined}
+            />
+          ))}
         </div>
       )}
     </div>