feat: 조건부 컨테이너 initialData 전달 체계 구현

InteractiveScreenViewerDynamic: originalData를 initialData로 추가 전달
DynamicComponentRenderer: initialData 우선순위 로직 추가
ConditionalContainerComponent: initialData props 추가 및 하위 전달
ConditionalSectionViewer: initialData props 추가 및 하위 전달
types.ts: initialData 타입 정의 추가
수정 모드에서 조건부 컨테이너 내부 컴포넌트 초기값 표시 지원
This commit is contained in:
SeongHyun Kim 2026-01-06 17:29:41 +09:00
parent 25b7e637de
commit a2b701a4bf
5 changed files with 31 additions and 3 deletions

View File

@ -365,6 +365,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
isInteractive={true}
formData={formData}
originalData={originalData || undefined}
initialData={originalData || undefined} // 🆕 조건부 컨테이너 등에서 initialData로 전달
onFormDataChange={handleFormDataChange}
screenId={screenInfo?.id}
tableName={screenInfo?.tableName}

View File

@ -413,10 +413,12 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
groupedData: props.groupedData, // ✅ 언더스코어 제거하여 직접 전달
_groupedData: props.groupedData, // 하위 호환성 유지
// 🆕 UniversalFormModal용 initialData 전달
// originalData가 비어있지 않으면 originalData 사용, 아니면 formData 사용
// 생성 모드에서는 originalData가 빈 객체이므로 formData를 사용해야 함
_initialData: (originalData && Object.keys(originalData).length > 0) ? originalData : formData,
// 우선순위: props.initialData > originalData > formData
// 조건부 컨테이너에서 전달된 initialData가 있으면 그것을 사용
_initialData: props.initialData || ((originalData && Object.keys(originalData).length > 0) ? originalData : formData),
_originalData: originalData,
// 🆕 initialData도 직접 전달 (조건부 컨테이너 → 내부 컴포넌트)
initialData: props.initialData,
// 🆕 탭 관련 정보 전달 (탭 내부의 테이블 컴포넌트에서 사용)
parentTabId: props.parentTabId,
parentTabsComponentId: props.parentTabsComponentId,

View File

@ -42,7 +42,16 @@ export function ConditionalContainerComponent({
className,
groupedData, // 🆕 그룹 데이터
onSave, // 🆕 EditModal의 handleSave 콜백
initialData, // 🆕 수정 모드: 초기 데이터 (발주일, 담당자, 메모 등)
}: ConditionalContainerProps) {
// 🔍 디버그: initialData 수신 확인
React.useEffect(() => {
console.log("[ConditionalContainer] initialData 수신:", {
hasInitialData: !!initialData,
initialDataKeys: initialData ? Object.keys(initialData) : [],
initialData,
});
}, [initialData]);
// 화면 컨텍스트 (데이터 제공자로 등록)
const screenContext = useScreenContextOptional();
@ -221,6 +230,7 @@ export function ConditionalContainerComponent({
onSave={onSave}
controlField={controlField}
selectedCondition={selectedValue}
initialData={initialData}
/>
))}
</div>
@ -244,6 +254,7 @@ export function ConditionalContainerComponent({
onSave={onSave}
controlField={controlField}
selectedCondition={selectedValue}
initialData={initialData}
/>
) : null
)

View File

@ -29,7 +29,17 @@ export function ConditionalSectionViewer({
onSave, // 🆕 EditModal의 handleSave 콜백
controlField, // 🆕 조건부 컨테이너의 제어 필드명
selectedCondition, // 🆕 현재 선택된 조건 값
initialData, // 🆕 수정 모드: 초기 데이터 (발주일, 담당자, 메모 등)
}: ConditionalSectionViewerProps) {
// 🔍 디버그: initialData 수신 확인
React.useEffect(() => {
console.log("[ConditionalSectionViewer] initialData 수신:", {
sectionId,
hasInitialData: !!initialData,
initialDataKeys: initialData ? Object.keys(initialData) : [],
initialData,
});
}, [initialData, sectionId]);
const { userId, userName, user } = useAuth();
const [isLoading, setIsLoading] = useState(false);
const [components, setComponents] = useState<ComponentData[]>([]);
@ -191,6 +201,7 @@ export function ConditionalSectionViewer({
onFormDataChange={onFormDataChange}
groupedData={groupedData}
onSave={hasUniversalFormModal ? undefined : onSave}
initialData={initialData}
/>
</div>
);

View File

@ -47,6 +47,7 @@ export interface ConditionalContainerProps {
onFormDataChange?: (fieldName: string, value: any) => void;
groupedData?: Record<string, any>[]; // 🆕 그룹 데이터 (EditModal → ModalRepeaterTable)
onSave?: () => Promise<void>; // 🆕 EditModal의 handleSave 콜백
initialData?: Record<string, any>; // 🆕 수정 모드: 초기 데이터 (발주일, 담당자, 메모 등)
// 화면 편집기 관련
isDesignMode?: boolean; // 디자인 모드 여부
@ -82,5 +83,7 @@ export interface ConditionalSectionViewerProps {
// 🆕 조건부 컨테이너 정보 (자식 화면에 전달)
controlField?: string; // 제어 필드명 (예: "inbound_type")
selectedCondition?: string; // 현재 선택된 조건 값 (예: "PURCHASE_IN")
// 🆕 수정 모드: 초기 데이터 전달 (발주일, 담당자, 메모 등)
initialData?: Record<string, any>;
}