From 623387702994e72dcbd9db204a9e442c4269c756 Mon Sep 17 00:00:00 2001
From: johngreen <ramses7448@gmail.com>
Date: Fri, 22 May 2026 14:03:52 +0900
Subject: [PATCH] =?UTF-8?q?style(=ED=85=8C=EC=9D=B4=EB=B8=94=ED=83=80?=
 =?UTF-8?q?=EC=9E=85):=20=ED=83=AD=20=EC=8A=A4=ED=83=80=EC=9D=BC=20Google?=
 =?UTF-8?q?=20=EC=8B=9D=20underline=20=EC=9C=BC=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20=E2=80=94=20=EA=B0=80=EC=8B=9C=EC=84=B1=20=E2=86=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

기존 shadcn 기본 Tabs 가 둥근 알약 (segmented control) 스타일이라 탭이 아니라 토글처럼
보임. 사용자가 "탭이 눈에 잘 안 띈다" 지적.

Gmail/Drive/GitHub/Vercel 공통 패턴인 underline 스타일로 변경:
- TabsList: 전체 폭 + 하단 1px 구분선, 배경/padding 제거
- TabsTrigger: 평면 + 활성 시 2px primary 밑줄 + 글자 색 강조, 비활성은 muted
- 글자 / 아이콘 크기 한 단계 ↑ (text-xs→text-sm, h-3.5→h-4)
- 비활성에도 transparent border-b-2 줘서 layout shift 방지

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../admin/systemMng/tableMngList/page.tsx     | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx b/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
index 93228eb1..c1612719 100644
--- a/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
+++ b/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
@@ -1695,20 +1695,34 @@ export default function TableManagementPage() {
                 </div>
               ) : (
                 <Tabs defaultValue="columns" className="flex min-h-0 flex-1 flex-col">
-                  <TabsList className="h-8 w-fit shrink-0 self-start mx-4 mt-1">
-                    <TabsTrigger value="columns" className="flex items-center gap-1.5 text-xs">
-                      <Columns3 className="h-3.5 w-3.5" />
+                  <TabsList className="h-auto w-full shrink-0 justify-start gap-1 rounded-none border-b bg-transparent p-0">
+                    <TabsTrigger
+                      value="columns"
+                      className={cn(
+                        "flex items-center gap-2 rounded-none border-b-2 border-transparent bg-transparent px-4 py-2.5 text-sm font-medium text-muted-foreground transition-colors",
+                        "hover:text-foreground",
+                        "data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-primary data-[state=active]:shadow-none",
+                      )}
+                    >
+                      <Columns3 className="h-4 w-4" />
                       컬럼
                     </TabsTrigger>
-                    <TabsTrigger value="references" className="flex items-center gap-1.5 text-xs">
-                      <Link2 className="h-3.5 w-3.5" />
+                    <TabsTrigger
+                      value="references"
+                      className={cn(
+                        "flex items-center gap-2 rounded-none border-b-2 border-transparent bg-transparent px-4 py-2.5 text-sm font-medium text-muted-foreground transition-colors",
+                        "hover:text-foreground",
+                        "data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-primary data-[state=active]:shadow-none",
+                      )}
+                    >
+                      <Link2 className="h-4 w-4" />
                       참조
                       {(() => {
                         const refCount = columns.filter((c) =>
                           ["entity", "code", "category", "numbering"].includes(c.input_type),
                         ).length;
                         return refCount > 0 ? (
-                          <Badge variant="secondary" className="ml-1 h-4 px-1.5 text-[10px]">
+                          <Badge variant="secondary" className="ml-1.5 h-5 px-1.5 text-[11px]">
                             {refCount}
                           </Badge>
                         ) : null;
-- 
2.52.0