style(테이블타입): 탭 스타일 Google 식 underline 으로 변경 — 가시성 ↑
기존 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>
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user