style(테이블타입): 탭 스타일 Google 식 underline 으로 변경 #27

2026-05-22T05:04:25Z

johngreen commented

2026-05-22 05:04:25 +00:00

Summary

사용자가 "탭이 눈에 잘 안 띈다" 지적. shadcn 기본 Tabs (둥근 알약) 가 탭이 아니라 토글처럼 보임 → Gmail/Drive/GitHub/Vercel 공통 패턴인 underline 스타일로 변경.

TabsList: 전체 폭 + 하단 1px 구분선, 배경/padding 제거
TabsTrigger: 평면 + 활성 시 2px primary 밑줄 + 글자 색 강조
글자/아이콘 크기 한 단계 ↑ (text-xs→text-sm)
layout shift 방지용 transparent border-b-2 비활성에도

Test plan

컬럼 / 참조 탭이 더 크고 눈에 잘 띄는지
활성 탭에 primary 색 밑줄과 진한 글자
비활성 탭은 회색, hover 시 진해짐
탭 전환 시 layout 흔들림 없음

## Summary 사용자가 "탭이 눈에 잘 안 띈다" 지적. shadcn 기본 Tabs (둥근 알약) 가 탭이 아니라 토글처럼 보임 → Gmail/Drive/GitHub/Vercel 공통 패턴인 underline 스타일로 변경. - TabsList: 전체 폭 + 하단 1px 구분선, 배경/padding 제거 - TabsTrigger: 평면 + 활성 시 2px primary 밑줄 + 글자 색 강조 - 글자/아이콘 크기 한 단계 ↑ (text-xs→text-sm) - layout shift 방지용 transparent border-b-2 비활성에도 ## Test plan - [ ] 컬럼 / 참조 탭이 더 크고 눈에 잘 띄는지 - [ ] 활성 탭에 primary 색 밑줄과 진한 글자 - [ ] 비활성 탭은 회색, hover 시 진해짐 - [ ] 탭 전환 시 layout 흔들림 없음

johngreen added 1 commit 2026-05-22 05:04:25 +00:00

style(테이블타입): 탭 스타일 Google 식 underline 으로 변경 — 가시성 ↑ 6233877029

기존 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>

johngreen merged commit 99487049fb into main

2026-05-22 05:04:27 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: gbpark/invyone#27