90 lines
2.7 KiB
TypeScript
90 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { ConditionalSectionViewerProps } from "./types";
|
|
import { InteractiveScreenViewer } from "@/components/screen/InteractiveScreenViewer";
|
|
import { cn } from "@/lib/utils";
|
|
import { Loader2 } from "lucide-react";
|
|
|
|
/**
|
|
* 조건부 섹션 뷰어 컴포넌트
|
|
* 각 조건에 해당하는 화면을 표시
|
|
*/
|
|
export function ConditionalSectionViewer({
|
|
sectionId,
|
|
condition,
|
|
label,
|
|
screenId,
|
|
screenName,
|
|
isActive,
|
|
isDesignMode,
|
|
showBorder = true,
|
|
formData,
|
|
onFormDataChange,
|
|
}: ConditionalSectionViewerProps) {
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
// 디자인 모드가 아니고 비활성 섹션이면 렌더링하지 않음
|
|
if (!isDesignMode && !isActive) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"relative min-h-[200px] transition-all",
|
|
showBorder && "rounded-lg border-2",
|
|
isDesignMode ? (
|
|
"border-dashed border-muted-foreground/30 bg-muted/20"
|
|
) : (
|
|
showBorder ? "border-border bg-card" : ""
|
|
),
|
|
!isDesignMode && !isActive && "hidden"
|
|
)}
|
|
data-section-id={sectionId}
|
|
>
|
|
{/* 섹션 라벨 (디자인 모드에서만 표시) */}
|
|
{isDesignMode && (
|
|
<div className="absolute -top-3 left-4 bg-background px-2 text-xs font-medium text-muted-foreground z-10">
|
|
{label} {isActive && "(활성)"}
|
|
{screenId && ` - 화면 ID: ${screenId}`}
|
|
</div>
|
|
)}
|
|
|
|
{/* 화면 미선택 안내 (디자인 모드 + 화면 없을 때) */}
|
|
{isDesignMode && !screenId && (
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className="text-center text-muted-foreground">
|
|
<p className="text-sm">설정 패널에서 화면을 선택하세요</p>
|
|
<p className="text-xs mt-1">조건: {condition}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 로딩 중 */}
|
|
{isLoading && (
|
|
<div className="absolute inset-0 flex items-center justify-center bg-background/50 z-20">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<Loader2 className="h-6 w-6 animate-spin text-primary" />
|
|
<p className="text-xs text-muted-foreground">화면 로드 중...</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 화면 렌더링 */}
|
|
{screenId && (
|
|
<div className="relative p-4 min-h-[200px]">
|
|
<InteractiveScreenViewer
|
|
screenId={screenId}
|
|
formData={formData}
|
|
onFormDataChange={onFormDataChange}
|
|
mode="view" // 항상 뷰 모드로 표시
|
|
isInModal={true} // 모달 내부처럼 처리
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|