diff --git a/frontend/components/common/ScreenModal.tsx b/frontend/components/common/ScreenModal.tsx index 227eae70..138f560c 100644 --- a/frontend/components/common/ScreenModal.tsx +++ b/frontend/components/common/ScreenModal.tsx @@ -730,6 +730,91 @@ export const ScreenModal: React.FC = ({ className }) => { return activeComps; }, [formData, conditionalLayers, screenData?.components]); + // πŸ†• 이전 ν™œμ„± λ ˆμ΄μ–΄ ID 좔적 (λ ˆμ΄μ–΄ μ „ν™˜ κ°μ§€μš©) + const prevActiveLayerIdsRef = useRef([]); + + // πŸ†• λ ˆμ΄μ–΄ μ „ν™˜ μ‹œ λΉ„ν™œμ„±ν™”λœ λ ˆμ΄μ–΄μ˜ ν•„λ“œκ°’μ„ formDataμ—μ„œ 제거 + // (ν’ˆλͺ©μš°μ„  β†’ κ³΅κΈ‰μ—…μ²΄μš°μ„  μ „ν™˜ μ‹œ, ν’ˆλͺ©μš°μ„  λ ˆμ΄μ–΄μ˜ 데이터가 남지 μ•Šλ„λ‘) + useEffect(() => { + if (conditionalLayers.length === 0) return; + + // ν˜„μž¬ ν™œμ„± λ ˆμ΄μ–΄ ID λͺ©λ‘ + const currentActiveLayerIds = conditionalLayers + .filter((layer) => { + if (!layer.condition) return false; + const { targetComponentId, operator, value } = layer.condition; + if (!targetComponentId) return false; + + const allComponents = screenData?.components || []; + const comp = allComponents.find((c: any) => c.id === targetComponentId); + const fieldKey = + (comp as any)?.overrides?.columnName || + (comp as any)?.columnName || + (comp as any)?.componentConfig?.columnName || + targetComponentId; + + const targetValue = formData[fieldKey]; + switch (operator) { + case "eq": + return String(targetValue ?? "") === String(value ?? ""); + case "neq": + return String(targetValue ?? "") !== String(value ?? ""); + case "in": + if (Array.isArray(value)) { + return value.some((v) => String(v) === String(targetValue ?? "")); + } else if (typeof value === "string" && value.includes(",")) { + return value.split(",").map((v) => v.trim()).includes(String(targetValue ?? "")); + } + return false; + default: + return false; + } + }) + .map((l) => l.id); + + const prevIds = prevActiveLayerIdsRef.current; + + // 이전에 ν™œμ„±μ΄μ—ˆλŠ”λ° μ΄λ²ˆμ— λΉ„ν™œμ„±μ΄ 된 λ ˆμ΄μ–΄ μ°ΎκΈ° + const deactivatedLayerIds = prevIds.filter((id) => !currentActiveLayerIds.includes(id)); + + if (deactivatedLayerIds.length > 0) { + // λΉ„ν™œμ„±ν™”λœ λ ˆμ΄μ–΄μ˜ μ»΄ν¬λ„ŒνŠΈ ν•„λ“œλͺ… μˆ˜μ§‘ + const fieldsToRemove: string[] = []; + deactivatedLayerIds.forEach((layerId) => { + const layer = conditionalLayers.find((l) => l.id === layerId); + if (!layer) return; + + layer.components.forEach((comp: any) => { + const fieldName = + comp?.overrides?.columnName || + comp?.columnName || + comp?.componentConfig?.columnName; + if (fieldName) { + fieldsToRemove.push(fieldName); + } + }); + }); + + if (fieldsToRemove.length > 0) { + console.log("[ScreenModal] λ ˆμ΄μ–΄ μ „ν™˜ 감지 - λΉ„ν™œμ„± λ ˆμ΄μ–΄ ν•„λ“œ 제거:", { + deactivatedLayerIds, + fieldsToRemove, + }); + + setFormData((prev) => { + const cleaned = { ...prev }; + fieldsToRemove.forEach((field) => { + delete cleaned[field]; + }); + return cleaned; + }); + } + } + + // ν˜„μž¬ μƒνƒœ μ €μž₯ + prevActiveLayerIdsRef.current = currentActiveLayerIds; + }, [formData, conditionalLayers, screenData?.components]); + // μ‚¬μš©μžκ°€ λ°”κΉ₯ 클릭/ESC/X λ²„νŠΌμœΌλ‘œ λ‹«μœΌλ € ν•  λ•Œ // 폼 데이터 변경이 있으면 확인 λ‹€μ΄μ–Όλ‘œκ·Έ, μ—†μœΌλ©΄ λ°”λ‘œ λ‹«κΈ° const handleCloseAttempt = useCallback(() => {