fix(테이블타입): 컬럼 탭 그룹 정리 (#25)

johngreen → main: 컬럼 탭 그룹 헤더 사용자/시스템 2그룹으로 정리

frontend/components/admin/table-type/ColumnGrid.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useMemo } from "react";
-import { MoreHorizontal, Database, Layers, FileStack, Trash2 } from "lucide-react";
+import { MoreHorizontal, Database, FileStack, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import {
@@ -47,11 +47,10 @@ function getIndexState(
   return { isPk, hasIndex };
 }
 
-/** 그룹 헤더 라벨 */
+/** 그룹 헤더 라벨 — 참조 컬럼은 별도 "참조" 탭에서 보여주므로 컬럼 탭에서는 사용자/시스템 2그룹으로만 분류 */
-const GROUP_LABELS: Record<string, { icon: React.FC<{ className?: string }>; label: string }> = {
+const GROUP_LABELS: Record<"user" | "system", { icon: React.FC<{ className?: string }>; label: string }> = {
-  basic: { icon: FileStack, label: "기본 정보" },
+  user:   { icon: FileStack, label: "사용자 컬럼" },
-  reference: { icon: Layers, label: "참조 정보" },
+  system: { icon: Database,  label: "시스템 컬럼" },
-  meta: { icon: Database, label: "메타 정보" },
 };
 
 export function ColumnGrid({
@@ -73,20 +72,19 @@ export function ColumnGrid({
     [constraints, externalGetIndexState],
   );
 
-  /** typeFilter 적용 후 그룹별로 정렬 */
+  /** typeFilter 적용 후 사용자/시스템 그룹으로 분류 (참조 컬럼은 참조 탭으로 분리됐으므로 사용자 컬럼에 합침) */
   const filteredAndGrouped = useMemo(() => {
     const filtered =
       typeFilter != null ? columns.filter((c) => (c.input_type || "text") === typeFilter) : columns;
-    const groups = { basic: [] as ColumnTypeInfo[], reference: [] as ColumnTypeInfo[], meta: [] as ColumnTypeInfo[] };
+    const groups = { user: [] as ColumnTypeInfo[], system: [] as ColumnTypeInfo[] };
     for (const col of filtered) {
-      const group = getColumnGroup(col);
+      const g = getColumnGroup(col) === "meta" ? "system" : "user";
-      groups[group].push(col);
+      groups[g].push(col);
     }
     return groups;
   }, [columns, typeFilter]);
 
-  const totalFiltered =
+  const totalFiltered = filteredAndGrouped.user.length + filteredAndGrouped.system.length;
-    filteredAndGrouped.basic.length + filteredAndGrouped.reference.length + filteredAndGrouped.meta.length;
 
   return (
     <div className="flex flex-1 flex-col overflow-hidden">
@@ -107,7 +105,7 @@ export function ColumnGrid({
             {typeFilter ? "해당 타입의 컬럼이 없습니다." : "컬럼이 없습니다."}
           </div>
         ) : (
-          (["basic", "reference", "meta"] as const).map((groupKey) => {
+          (["user", "system"] as const).map((groupKey) => {
             const list = filteredAndGrouped[groupKey];
             if (list.length === 0) return null;
             const { icon: Icon, label } = GROUP_LABELS[groupKey];