265 lines
8.8 KiB
TypeScript
265 lines
8.8 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useRef } from "react";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { ConditionalContainerProps, ConditionalSection } from "./types";
|
|
import { ConditionalSectionViewer } from "./ConditionalSectionViewer";
|
|
import { cn } from "@/lib/utils";
|
|
import { useScreenContextOptional } from "@/contexts/ScreenContext";
|
|
import type { DataProvidable } from "@/types/data-transfer";
|
|
|
|
/**
|
|
* 조건부 컨테이너 컴포넌트
|
|
* 상단 셀렉트박스 값에 따라 하단에 다른 UI를 표시
|
|
*/
|
|
export function ConditionalContainerComponent({
|
|
config,
|
|
controlField: propControlField,
|
|
controlLabel: propControlLabel,
|
|
sections: propSections,
|
|
defaultValue: propDefaultValue,
|
|
showBorder: propShowBorder,
|
|
spacing: propSpacing,
|
|
value,
|
|
onChange,
|
|
formData,
|
|
onFormDataChange,
|
|
isDesignMode = false,
|
|
onUpdateComponent,
|
|
onDeleteComponent,
|
|
onSelectComponent,
|
|
selectedComponentId,
|
|
onHeightChange,
|
|
componentId,
|
|
style,
|
|
className,
|
|
groupedData, // 🆕 그룹 데이터
|
|
onSave, // 🆕 EditModal의 handleSave 콜백
|
|
}: ConditionalContainerProps) {
|
|
|
|
// 화면 컨텍스트 (데이터 제공자로 등록)
|
|
const screenContext = useScreenContextOptional();
|
|
|
|
// config prop 우선, 없으면 개별 prop 사용
|
|
const controlField = config?.controlField || propControlField || "condition";
|
|
const controlLabel = config?.controlLabel || propControlLabel || "조건 선택";
|
|
const sections = config?.sections || propSections || [];
|
|
const defaultValue = config?.defaultValue || propDefaultValue || sections[0]?.condition;
|
|
const showBorder = config?.showBorder ?? propShowBorder ?? true;
|
|
const spacing = config?.spacing || propSpacing || "normal";
|
|
|
|
// 초기값 계산 (한 번만)
|
|
const initialValue = React.useMemo(() => {
|
|
return value || formData?.[controlField] || defaultValue || "";
|
|
}, []); // 의존성 없음 - 마운트 시 한 번만 계산
|
|
|
|
// 현재 선택된 값
|
|
const [selectedValue, setSelectedValue] = useState<string>(initialValue);
|
|
|
|
// 최신 값을 ref로 유지 (클로저 문제 방지)
|
|
const selectedValueRef = React.useRef(selectedValue);
|
|
selectedValueRef.current = selectedValue; // 렌더링마다 업데이트 (useEffect 대신)
|
|
|
|
// 콜백 refs (의존성 제거)
|
|
const onChangeRef = React.useRef(onChange);
|
|
const onFormDataChangeRef = React.useRef(onFormDataChange);
|
|
onChangeRef.current = onChange;
|
|
onFormDataChangeRef.current = onFormDataChange;
|
|
|
|
// 값 변경 핸들러 - 의존성 없음
|
|
const handleValueChange = React.useCallback((newValue: string) => {
|
|
// 같은 값이면 무시
|
|
if (newValue === selectedValueRef.current) return;
|
|
|
|
setSelectedValue(newValue);
|
|
|
|
if (onChangeRef.current) {
|
|
onChangeRef.current(newValue);
|
|
}
|
|
|
|
if (onFormDataChangeRef.current) {
|
|
onFormDataChangeRef.current(controlField, newValue);
|
|
}
|
|
}, [controlField]);
|
|
|
|
// sectionsRef 추가 (dataProvider에서 사용)
|
|
const sectionsRef = React.useRef(sections);
|
|
React.useEffect(() => {
|
|
sectionsRef.current = sections;
|
|
}, [sections]);
|
|
|
|
// dataProvider를 useMemo로 감싸서 불필요한 재생성 방지
|
|
const dataProvider = React.useMemo<DataProvidable>(() => ({
|
|
componentId: componentId || "conditional-container",
|
|
componentType: "conditional-container",
|
|
|
|
getSelectedData: () => {
|
|
// ref를 통해 최신 값 참조 (클로저 문제 방지)
|
|
const currentValue = selectedValueRef.current;
|
|
const currentSections = sectionsRef.current;
|
|
return [{
|
|
[controlField]: currentValue,
|
|
condition: currentValue,
|
|
label: currentSections.find(s => s.condition === currentValue)?.label || currentValue,
|
|
}];
|
|
},
|
|
|
|
getAllData: () => {
|
|
const currentSections = sectionsRef.current;
|
|
return currentSections.map(section => ({
|
|
condition: section.condition,
|
|
label: section.label,
|
|
}));
|
|
},
|
|
|
|
clearSelection: () => {
|
|
// 조건부 컨테이너는 초기화하지 않음
|
|
console.log("조건부 컨테이너는 선택 초기화를 지원하지 않습니다.");
|
|
},
|
|
}), [componentId, controlField]); // selectedValue, sections는 ref로 참조
|
|
|
|
// 화면 컨텍스트에 데이터 제공자로 등록
|
|
useEffect(() => {
|
|
if (screenContext && componentId) {
|
|
screenContext.registerDataProvider(componentId, dataProvider);
|
|
|
|
return () => {
|
|
screenContext.unregisterDataProvider(componentId);
|
|
};
|
|
}
|
|
}, [screenContext, componentId, dataProvider]);
|
|
|
|
// 컨테이너 높이 측정용 ref
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const previousHeightRef = useRef<number>(0);
|
|
|
|
// 높이 변화 감지 및 콜백 호출
|
|
useEffect(() => {
|
|
if (!containerRef.current || isDesignMode || !onHeightChange) return;
|
|
|
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
for (const entry of entries) {
|
|
const newHeight = entry.contentRect.height;
|
|
|
|
// 높이가 실제로 변경되었을 때만 콜백 호출
|
|
if (Math.abs(newHeight - previousHeightRef.current) > 5) {
|
|
console.log(`📏 조건부 컨테이너 높이 변화: ${previousHeightRef.current}px → ${newHeight}px`);
|
|
previousHeightRef.current = newHeight;
|
|
onHeightChange(newHeight);
|
|
}
|
|
}
|
|
});
|
|
|
|
resizeObserver.observe(containerRef.current);
|
|
|
|
return () => {
|
|
resizeObserver.disconnect();
|
|
};
|
|
}, [isDesignMode, onHeightChange, selectedValue]); // selectedValue 변경 시에도 감지
|
|
|
|
// 간격 스타일
|
|
const spacingClass = {
|
|
tight: "space-y-2",
|
|
normal: "space-y-4",
|
|
loose: "space-y-8",
|
|
}[spacing];
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
className={cn("w-full flex flex-col", spacingClass, className)}
|
|
style={style}
|
|
>
|
|
{/* 제어 셀렉트박스 */}
|
|
<div className="space-y-2 flex-shrink-0">
|
|
<Label htmlFor={controlField} className="text-xs sm:text-sm">
|
|
{controlLabel}
|
|
</Label>
|
|
<Select value={selectedValue} onValueChange={handleValueChange}>
|
|
<SelectTrigger
|
|
id={controlField}
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
|
>
|
|
<SelectValue placeholder="선택하세요" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{sections.map((section) => (
|
|
<SelectItem key={section.id} value={section.condition}>
|
|
{section.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 조건별 섹션들 */}
|
|
<div className="flex-1 min-h-0">
|
|
{isDesignMode ? (
|
|
// 디자인 모드: 모든 섹션 표시
|
|
<div className={spacingClass}>
|
|
{sections.map((section) => (
|
|
<ConditionalSectionViewer
|
|
key={section.id}
|
|
sectionId={section.id}
|
|
condition={section.condition}
|
|
label={section.label}
|
|
screenId={section.screenId}
|
|
screenName={section.screenName}
|
|
isActive={selectedValue === section.condition}
|
|
isDesignMode={isDesignMode}
|
|
showBorder={showBorder}
|
|
formData={formData}
|
|
onFormDataChange={onFormDataChange}
|
|
groupedData={groupedData}
|
|
onSave={onSave}
|
|
controlField={controlField}
|
|
selectedCondition={selectedValue}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
// 실행 모드: 활성 섹션만 표시
|
|
sections.map((section) =>
|
|
selectedValue === section.condition ? (
|
|
<ConditionalSectionViewer
|
|
key={section.id}
|
|
sectionId={section.id}
|
|
condition={section.condition}
|
|
label={section.label}
|
|
screenId={section.screenId}
|
|
screenName={section.screenName}
|
|
isActive={true}
|
|
isDesignMode={false}
|
|
showBorder={showBorder}
|
|
formData={formData}
|
|
onFormDataChange={onFormDataChange}
|
|
groupedData={groupedData}
|
|
onSave={onSave}
|
|
controlField={controlField}
|
|
selectedCondition={selectedValue}
|
|
/>
|
|
) : null
|
|
)
|
|
)}
|
|
|
|
{/* 섹션이 없는 경우 안내 */}
|
|
{sections.length === 0 && isDesignMode && (
|
|
<div className="flex items-center justify-center min-h-[200px] border-2 border-dashed border-muted-foreground/30 rounded-lg bg-muted/20">
|
|
<p className="text-sm text-muted-foreground">
|
|
설정 패널에서 조건을 추가하세요
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|