123

frontend/components/common/ScreenModal.tsx

@@ -686,6 +686,91 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
     return activeComps;
   }, [formData, conditionalLayers, screenData?.components]);
 
+  // 🆕 이전 활성 레이어 ID 추적 (레이어 전환 감지용)
+  const prevActiveLayerIdsRef = useRef<string[]>([]);
+
+  // 🆕 레이어 전환 시 비활성화된 레이어의 필드값을 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(() => {