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>