3 Commits

Author SHA1 Message Date
johngreen 5cd8e72bf0 fix(테이블타입): 탭 너비 컨텐츠에 맞춤 — shadcn TabsTrigger flex-1 기본값 해제
shadcn TabsTrigger 가 기본 flex-1 이라 두 탭이 가로 폭 절반씩 차지해서 너무
넓게 늘어남. flex-none 으로 override 해서 글자/아이콘 폭만큼만 차지.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-22 19:16:08 +09:00
johngreen 387a1ae611 style(테이블타입): 탭 Chrome outline 스타일 (#33)
Build & Deploy to K8s / build-and-deploy (push) Successful in 6m37s
탭 스타일 v5-tab 톤 매칭
2026-05-22 09:49:53 +00:00
johngreen eeb130e3a8 style(테이블타입): 탭 스타일 Chrome 식 outline 으로 변경 — 페이지 탭(v5-tab)과 톤 일치
밑줄(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>
2026-05-22 18:49:14 +09:00
@@ -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 flex-none 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 flex-none 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" />