카테고리 매핑 로직 개선 및 디버그 로그 제거

- InteractiveDataTable에서 valueCode 및 valueId에 대한 매핑 로직을 추가하여, 두 가지 키로 카테고리 정보를 저장할 수 있도록 개선하였습니다. - UnifiedInput 및 TableListComponent에서 불필요한 디버그 로그를 주석 처리하여 코드 가독성을 향상시켰습니다. 이로 인해 카테고리 관리 및 데이터 처리의 효율성이 향상되었습니다.
2026-01-21 18:19:29 +09:00 · 2026-01-21 18:19:29 +09:00 · e3df70d0fa
parent 623ade4f28
commit e3df70d0fa
4 changed files with 64 additions and 46 deletions
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@ -384,13 +384,23 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
            );

            if (response.data.success && response.data.data) {
-              // valueCode -> {label, color} 매핑 생성
+              // valueCode 및 valueId -> {label, color} 매핑 생성
              const mapping: Record<string, { label: string; color?: string }> = {};
              response.data.data.forEach((item: any) => {
-                mapping[item.valueCode] = {
-                  label: item.valueLabel,
-                  color: item.color,
-                };
+                // valueCode로 매핑
+                if (item.valueCode) {
+                  mapping[item.valueCode] = {
+                    label: item.valueLabel,
+                    color: item.color,
+                  };
+                }
+                // valueId로도 매핑 (숫자 ID 저장 시 라벨 표시용)
+                if (item.valueId !== undefined && item.valueId !== null) {
+                  mapping[String(item.valueId)] = {
+                    label: item.valueLabel,
+                    color: item.color,
+                  };
+                }
              });
              mappings[col.columnName] = mapping;
              console.log(`✅ 카테고리 매핑 로드 성공 [${col.columnName}]:`, mapping, { menuObjid });
--- a/frontend/components/unified/UnifiedInput.tsx
+++ b/frontend/components/unified/UnifiedInput.tsx
@ -584,7 +584,7 @@ export const UnifiedInput = forwardRef<HTMLDivElement, UnifiedInputProps>((props
            userEditedNumberingRef.current = false;
          }
          
-          console.log("채번 코드 생성 성공:", generatedCode);
+          // 채번 코드 생성 성공
        } else {
          console.warn("채번 코드 생성 실패:", previewResponse);
        }
@ -703,7 +703,7 @@ export const UnifiedInput = forwardRef<HTMLDivElement, UnifiedInputProps>((props
        const template = numberingTemplateRef.current;
        const canEdit = hadManualPartRef.current && template;
        
-        console.log("채번 필드 렌더링:", { displayValue, template, manualInputValue, canEdit, isGeneratingNumbering });
+        // 채번 필드 렌더링
        
        // 템플릿이 없으면 읽기 전용 (아직 생성 전이거나 수동 입력 부분 없음)
        if (!canEdit) {
--- a/frontend/lib/registry/DynamicComponentRenderer.tsx
+++ b/frontend/lib/registry/DynamicComponentRenderer.tsx
@ -206,15 +206,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
  
  const componentType = mapToV2ComponentType(rawComponentType);
  
-  // 디버그: 컴포넌트 타입 확인
-  if (rawComponentType && rawComponentType.includes("table")) {
-    console.log("🔍 DynamicComponentRenderer 타입 변환:", {
-      raw: rawComponentType,
-      mapped: componentType,
-      hasComponent: ComponentRegistry.hasComponent(componentType || ""),
-      componentConfig: (component as any).componentConfig,
-    });
-  }
+  // 컴포넌트 타입 변환 완료

  // 🆕 Unified 폼 시스템 연동 (최상위에서 한 번만 호출)
  // eslint-disable-next-line react-hooks/rules-of-hooks
--- a/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx
@ -353,11 +353,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
      }
    });

-    console.log("🔍 [TableListComponent] filters → searchValues:", {
-      filtersCount: filters.length,
-      filters: filters.map((f) => ({ col: f.columnName, op: f.operator, val: f.value })),
-      searchValues: newSearchValues,
-    });
+    // filters → searchValues 변환 완료

    setSearchValues(newSearchValues);
    setCurrentPage(1); // 필터 변경 시 첫 페이지로
@ -1286,11 +1282,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({

  // 카테고리 컬럼 목록 추출 (useMemo로 최적화)
  const categoryColumns = useMemo(() => {
-    const cols = Object.entries(columnMeta)
+    return Object.entries(columnMeta)
      .filter(([_, meta]) => meta.inputType === "category")
      .map(([columnName, _]) => columnName);
-
-    return cols;
  }, [columnMeta]);

  // 카테고리 매핑 로드 (columnMeta 변경 시 즉시 실행)
@ -1331,20 +1325,38 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
            if (response.data.success && response.data.data && Array.isArray(response.data.data)) {
              const mapping: Record<string, { label: string; color?: string }> = {};

-              response.data.data.forEach((item: any) => {
-                // valueCode를 문자열로 변환하여 키로 사용
-                const key = String(item.valueCode);
-                mapping[key] = {
-                  label: item.valueLabel,
-                  color: item.color,
-                };
-              });
+              // 트리 구조를 평탄화하는 헬퍼 함수
+              const flattenTree = (items: any[]) => {
+                items.forEach((item: any) => {
+                  // valueCode를 문자열로 변환하여 키로 사용
+                  if (item.valueCode) {
+                    const key = String(item.valueCode);
+                    mapping[key] = {
+                      label: item.valueLabel,
+                      color: item.color,
+                    };
+                  }
+                  // valueId도 키로 추가 (숫자 ID 저장 시 라벨 표시용)
+                  if (item.valueId !== undefined && item.valueId !== null) {
+                    mapping[String(item.valueId)] = {
+                      label: item.valueLabel,
+                      color: item.color,
+                    };
+                  }
+                  // 자식 노드도 재귀적으로 처리
+                  if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+                    flattenTree(item.children);
+                  }
+                });
+              };
+
+              flattenTree(response.data.data);

              if (Object.keys(mapping).length > 0) {
                // 🆕 원래 컬럼명(item_info.material)으로 매핑 저장
                mappings[columnName] = mapping;
              } else {
-                console.warn(`⚠️ [TableList] 매핑 데이터가 비어있음 [${columnName}]`);
+                // 매핑 데이터가 비어있음 - 해당 컬럼에 카테고리 값이 없음
              }
            } else {
              console.warn(`⚠️ [TableList] 카테고리 값 없음 [${columnName}]:`, {
@ -1448,11 +1460,21 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                    const mapping: Record<string, { label: string; color?: string }> = {};

                    response.data.data.forEach((item: any) => {
-                      const key = String(item.valueCode);
-                      mapping[key] = {
-                        label: item.valueLabel,
-                        color: item.color,
-                      };
+                      // valueCode로 매핑
+                      if (item.valueCode) {
+                        const key = String(item.valueCode);
+                        mapping[key] = {
+                          label: item.valueLabel,
+                          color: item.color,
+                        };
+                      }
+                      // valueId도 키로 추가 (숫자 ID 저장 시 라벨 표시용)
+                      if (item.valueId !== undefined && item.valueId !== null) {
+                        mapping[String(item.valueId)] = {
+                          label: item.valueLabel,
+                          color: item.color,
+                        };
+                      }
                    });

                    if (Object.keys(mapping).length > 0) {
@ -1498,10 +1520,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                };
              }
            }
-            console.log("✅ [TableList] 카테고리 연쇄관계 매핑 로드 완료:", {
-              tableName: tableConfig.selectedTable,
-              cascadingColumns: Object.keys(cascadingMappings),
-            });
+            // 카테고리 연쇄관계 매핑 로드 완료
          }
        } catch (cascadingError: any) {
          // 연쇄관계 매핑이 없는 경우 무시 (404 등)
@ -4992,10 +5011,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
  useEffect(() => {
    if (!isDesignMode) {
      // relatedButtonFilter가 있으면 데이터 로드, null이면 빈 상태 (setRefreshTrigger로 트리거)
-      console.log("🔄 [TableList] RelatedDataButtons 상태 변경:", {
-        relatedButtonFilter,
-        isRelatedButtonTarget,
-      });
+      // RelatedDataButtons 상태 변경
      setRefreshTrigger((prev) => prev + 1);
    }
  }, [relatedButtonFilter, isDesignMode]);