카테고리

frontend/components/table-category/CategoryColumnList.tsx

@@ -20,11 +20,7 @@ interface CategoryColumnListProps {
  * 카테고리 컬럼 목록 (좌측 패널)
  * - 현재 테이블에서 input_type='category'인 컬럼들을 표시 (테이블 스코프)
  */
-export function CategoryColumnList({
+export function CategoryColumnList({ tableName, selectedColumn, onColumnSelect }: CategoryColumnListProps) {
-  tableName,
-  selectedColumn,
-  onColumnSelect,
-}: CategoryColumnListProps) {
   const [columns, setColumns] = useState<CategoryColumn[]>([]);
   const [isLoading, setIsLoading] = useState(false);
 
@@ -36,9 +32,7 @@ export function CategoryColumnList({
     setIsLoading(true);
     try {
       // table_type_columns에서 input_type = 'category'인 컬럼 조회
-      const response = await apiClient.get(
+      const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
-        `/table-management/tables/${tableName}/columns`
-      );
 
       console.log("🔍 테이블 컬럼 API 응답:", {
         tableName,
@@ -74,7 +68,7 @@ export function CategoryColumnList({
 
       // category 타입만 필터링
       const categoryColumns = allColumns.filter(
-        (col: any) => col.inputType === "category" || col.input_type === "category"
+        (col: any) => col.inputType === "category" || col.input_type === "category",
       );
 
       console.log("✅ 카테고리 컬럼:", {
@@ -90,7 +84,7 @@ export function CategoryColumnList({
           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,
-        }))
+        })),
       );
 
       // 첫 번째 컬럼 자동 선택
@@ -111,7 +105,7 @@ export function CategoryColumnList({
   if (isLoading) {
     return (
       <div className="flex items-center justify-center py-12">
-        <Loader2 className="h-6 w-6 animate-spin text-primary" />
+        <Loader2 className="text-primary h-6 w-6 animate-spin" />
       </div>
     );
   }
@@ -120,14 +114,11 @@ export function CategoryColumnList({
     return (
       <div className="space-y-3">
         <h3 className="text-lg font-semibold">카테고리 컬럼</h3>
-        <div className="rounded-lg border bg-muted/50 p-6 text-center">
+        <div className="bg-muted/50 rounded-lg border p-6 text-center">
-          <FolderTree className="mx-auto h-8 w-8 text-muted-foreground" />
+          <FolderTree className="text-muted-foreground mx-auto h-8 w-8" />
-          <p className="mt-2 text-sm text-muted-foreground">
+          <p className="text-muted-foreground mt-2 text-sm">카테고리 타입 컬럼이 없습니다</p>
-            카테고리 타입 컬럼이 없습니다
+          <p className="text-muted-foreground mt-1 text-xs">
-          </p>
+            테이블 타입 관리에서 컬럼의 입력 타입을 &apos;카테고리&apos;로 설정하세요
-          <p className="mt-1 text-xs text-muted-foreground">
-            테이블 타입 관리에서 컬럼의 입력 타입을 &apos;카테고리&apos;로
-            설정하세요
           </p>
         </div>
       </div>
@@ -138,42 +129,25 @@ export function CategoryColumnList({
     <div className="space-y-3">
       <div className="space-y-1">
         <h3 className="text-lg font-semibold">카테고리 컬럼</h3>
-        <p className="text-xs text-muted-foreground">
+        <p className="text-muted-foreground text-xs">관리할 카테고리 컬럼을 선택하세요</p>
-          관리할 카테고리 컬럼을 선택하세요
-        </p>
       </div>
 
       <div className="space-y-2">
         {columns.map((column) => (
           <div
             key={column.columnName}
-            onClick={() =>
+            onClick={() => onColumnSelect(column.columnName, column.columnLabel || column.columnName)}
-              onColumnSelect(
-                column.columnName,
-                column.columnLabel || column.columnName
-              )
-            }
             className={`cursor-pointer rounded-lg border p-4 transition-all ${
-              selectedColumn === column.columnName
+              selectedColumn === column.columnName ? "border-primary bg-primary/10 shadow-sm" : "hover:bg-muted/50"
-                ? "border-primary bg-primary/10 shadow-sm"
-                : "hover:bg-muted/50"
             }`}
           >
             <div className="flex items-center gap-2">
               <FolderTree
-                className={`h-4 w-4 ${
+                className={`h-4 w-4 ${selectedColumn === column.columnName ? "text-primary" : "text-muted-foreground"}`}
-                  selectedColumn === column.columnName
-                    ? "text-primary"
-                    : "text-muted-foreground"
-                }`}
               />
               <div className="flex-1">
-                <h4 className="text-sm font-semibold">
+                <h4 className="text-sm font-semibold">{column.columnLabel || column.columnName}</h4>
-                  {column.columnLabel || column.columnName}
+                <p className="text-muted-foreground text-xs">{column.columnName}</p>
-                </h4>
-                <p className="text-xs text-muted-foreground">
-                  {column.columnName}
-                </p>
               </div>
             </div>
           </div>
@@ -182,4 +156,3 @@ export function CategoryColumnList({
     </div>
   );
 }
-