From eeb130e3a833466eef42fbe6ce338fa09a825189 Mon Sep 17 00:00:00 2001
From: johngreen <ramses7448@gmail.com>
Date: Fri, 22 May 2026 18:49:14 +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=20Chrome?=
 =?UTF-8?q?=20=EC=8B=9D=20outline=20=EC=9C=BC=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20=E2=80=94=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=83=AD?=
 =?UTF-8?q?(v5-tab)=EA=B3=BC=20=ED=86=A4=20=EC=9D=BC=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

밑줄(underline) 스타일이 너무 평면이라 사용자가 페이지 상단 v5-tab(브라우저 탭처럼
border 두른 outline 카드 스타일) 과 톤을 맞추길 원함.

- TabsList: 좌측 정렬 + 하단 1px 구분선 + 좌우 padding
- TabsTrigger: 위 모서리만 둥글게 (rounded-t-md), 1px border 둘러, -mb-px 로
  컨테이너 하단선과 겹쳐 카드처럼 떠 보임
- 활성 탭: bg-card + primary 색 텍스트 + 굵게 + 위쪽 2px primary 강조선 (inset shadow)
  + 하단 border 를 카드색으로 덮어 본문과 seamless

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

diff --git a/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx b/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
index 2ae86a37..20cb5159 100644
--- a/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
+++ b/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
@@ -1660,13 +1660,21 @@ export default function TableManagementPage() {
                 </div>
               ) : (
                 <Tabs defaultValue="columns" className="flex min-h-0 flex-1 flex-col">
-                  <TabsList className="h-auto w-full shrink-0 justify-start gap-1 rounded-none border-b bg-transparent p-0">
+                  <TabsList
+                    className={cn(
+                      "h-9 w-full shrink-0 justify-start gap-1 rounded-none bg-transparent p-0 px-2 pt-1",
+                      "border-b border-border",
+                    )}
+                  >
                     <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",
+                        "flex items-center gap-2 rounded-t-md rounded-b-none border border-border bg-transparent -mb-px",
+                        "px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors",
+                        "hover:bg-muted/40 hover:text-foreground",
+                        "data-[state=active]:bg-card data-[state=active]:text-primary data-[state=active]:font-semibold",
+                        "data-[state=active]:border-b-card",
+                        "data-[state=active]:shadow-[inset_0_2px_0_hsl(var(--primary))]",
                       )}
                     >
                       <Columns3 className="h-4 w-4" />
@@ -1675,9 +1683,12 @@ export default function TableManagementPage() {
                     <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",
+                        "flex items-center gap-2 rounded-t-md rounded-b-none border border-border bg-transparent -mb-px",
+                        "px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors",
+                        "hover:bg-muted/40 hover:text-foreground",
+                        "data-[state=active]:bg-card data-[state=active]:text-primary data-[state=active]:font-semibold",
+                        "data-[state=active]:border-b-card",
+                        "data-[state=active]:shadow-[inset_0_2px_0_hsl(var(--primary))]",
                       )}
                     >
                       <Link2 className="h-4 w-4" />