feat: 카테고리 컬럼 카드에 항목 개수 표시

- 컬럼명(column_name) 제거
- 우측에 해당 카테고리의 항목 개수 표시
- getCategoryValues API로 각 컬럼의 값 개수 조회
- 'N개' 형식으로 깔끔하게 표시
- 로딩 중에는 '...' 표시

frontend/components/table-category/CategoryColumnList.tsx

@@ -2,12 +2,14 @@
 
 import React, { useState, useEffect } from "react";
 import { apiClient } from "@/lib/api/client";
+import { getCategoryValues } from "@/lib/api/tableCategoryValue";
 import { FolderTree, Loader2 } from "lucide-react";
 
 interface CategoryColumn {
   columnName: string;
   columnLabel: string;
   inputType: string;
+  valueCount?: number;
 }
 
 interface CategoryColumnListProps {
@@ -79,20 +81,37 @@ export function CategoryColumnList({ tableName, selectedColumn, onColumnSelect }
         })),
       });
 
-      setColumns(
-        categoryColumns.map((col: any) => ({
-          columnName: col.columnName || col.column_name,
-          columnLabel: col.columnLabel || col.column_label || col.displayName || col.columnName || col.column_name,
-          inputType: col.inputType || col.input_type,
-        })),
+      const columnsWithCount = await Promise.all(
+        categoryColumns.map(async (col: any) => {
+          const colName = col.columnName || col.column_name;
+          const colLabel = col.columnLabel || col.column_label || col.displayName || colName;
+          
+          // 각 컬럼의 값 개수 가져오기
+          let valueCount = 0;
+          try {
+            const valuesResult = await getCategoryValues(tableName, colName, false);
+            if (valuesResult.success && valuesResult.data) {
+              valueCount = valuesResult.data.length;
+            }
+          } catch (error) {
+            console.error(`항목 개수 조회 실패 (${colName}):`, error);
+          }
+          
+          return {
+            columnName: colName,
+            columnLabel: colLabel,
+            inputType: col.inputType || col.input_type,
+            valueCount,
+          };
+        })
       );
 
+      setColumns(columnsWithCount);
+
       // 첫 번째 컬럼 자동 선택
-      if (categoryColumns.length > 0 && !selectedColumn) {
-        const firstCol = categoryColumns[0];
-        const colName = firstCol.columnName || firstCol.column_name;
-        const colLabel = firstCol.columnLabel || firstCol.column_label || firstCol.displayName || colName;
-        onColumnSelect(colName, colLabel);
+      if (columnsWithCount.length > 0 && !selectedColumn) {
+        const firstCol = columnsWithCount[0];
+        onColumnSelect(firstCol.columnName, firstCol.columnLabel);
       }
     } catch (error) {
       console.error("❌ 카테고리 컬럼 조회 실패:", error);
@@ -147,8 +166,10 @@ export function CategoryColumnList({ tableName, selectedColumn, onColumnSelect }
               />
               <div className="flex-1">
                 <h4 className="text-sm font-semibold">{column.columnLabel || column.columnName}</h4>
-                <p className="text-muted-foreground text-xs">{column.columnName}</p>
               </div>
+              <span className="text-muted-foreground text-xs font-medium">
+                {column.valueCount !== undefined ? `${column.valueCount}개` : "..."}
+              </span>
             </div>
           </div>
         ))}