App Components

제품 대시보드의 내비게이션 4종을 실제 .shell 값 그대로 재현했습니다 — 세그먼트 · 서브탭 바 · 2차 리스트 패널 · 빌링 서브내비. 전부 화이트 표면 · 퍼플 액센트 · 8–12px 라운드. active 표현은 화면마다 한 가지로 고정합니다.

세그먼트 컨트롤

.seg — 기간·범위 같은 짧은 토글. surface-2 트랙 위 active 칩만 surface 배경 + 그림자로 떠오름. radius 9/6px.

7일 28일 90일 전체

스트리밍 다운로드 라디오

.seg · a.on(surface+shadow) · font 12.5/600 · pad 3 / 6×12

서브탭 바

.subnav — 설정·상세 화면의 탭 헤더. active는 하단 2px accent 보더 + accent-3 텍스트. 하단 라인 위로 −1px 겹침.

.subnav a.on{ color:accent-3 · border-bottom:2px accent }

2차 리스트 패널

.p-list 244px 고정 패널 — 사이드바와 본문 사이 2차 컬럼. 아티스트 가로 스크롤 + 검색 + .pane-list .li 항목 리스트. active 항목은 푸른빛 tint, 상태는 좌측 점.

아티스트 4

에

에스파

아

아이브

르

르세라핌

뉴

뉴진스

Whiplashaespa · 스트리밍 라이브

Supernovaaespa · 12,480 클릭

Drama (Pre-save)aespa · 초안

Spicyaespa · 보관됨

새 스마트링크

.p-list 244px · sticky pane-h · .li.on rgba(107,63,246,.09) · .st live/draft/archived 점

빌링 서브내비

.bil-nav 208px 세로 스택 — 결제·요금 영역 전용. active는 tint 배경 + accent-3 텍스트/아이콘. 좌측 아이콘은 평소 muted-2.

.bil-nav a.on{ background:tint · color:accent-3 } · .ni muted-2 → accent-3

상단바 검색

.tb-search — 상단바 중앙의 통합 검색. 좌측 .tb-sic 아이콘(muted-2 · pointer-events 없음) + 36px 입력. focus 시 accent 보더 + surface 배경 + 2px 링.

.tb-search input{ h:36 · pad-left:36 } · :focus border accent + box-shadow 2px

알림 · 미니 플레이어

상단바 우측 영역. 알림 벨 .tb-ic(투명 버튼 · hover surface-2 · 준비 중 상태)과 미니 플레이어 .sr-mini(이전·재생·다음 + progress + 타이틀). pill 999px.

Supernova — aespa

1:24

.tb-ic · 알림 준비 중

.sr-mini pill(999) · .srm-pp 26px text→bg · .srm-bar i 42% accent · 820px↓ 정보·바·시간 숨김

잔액 위젯

.side-balance — 사이드바 하단 크레딧 카드. coin 아이콘(green) + Balance 라벨 + 잔액(tabular) + .sbal-bar 진행 바 + 충전 링크. radius 10px.

Balance₩128,400

충전하기

.side-balance surface-2 · .sbal-ic green · .sbal-amt tabular · hover border line-strong

애널리틱스 레일

.an-side 186px sticky 세로 서브탭(top 78px) — 본문 좌측에 붙는 분석 내비. active는 surface-2 배경 + 아이콘 accent. 760px↓ 가로 wrap 스크롤로 전환.

an-main 콘텐츠 영역 — 선택된 서브탭(개요)의 본문이 여기에 렌더됩니다.

.an-side 186px sticky top:78 · a.on surface-2 + .an-ico accent · @760 → flex-wrap 가로

사용 규칙

권장

· 한 화면당 active 표현은 하나의 패턴으로 고정
· 짧은 토글(기간·범위)은 .seg, 화면 전환 탭은 .subnav
· 2차 리스트 active는 tint, 상태는 .st 점으로 분리
· 빌링 영역은 .bil-nav tint+accent-3로 통일
· 클릭 수·항목 수는 tabular-nums

금지

· 한 내비에서 active 표현 혼용(보더+배경+그림자 동시)
· 세그먼트를 화면 전체 탭 전환에 사용
· 큰 라운드(16/24) — 내비는 6–9px 고정
· 마케팅 라임/딥그린 액센트 색 차용
· 밝은 배경 위 내비 배치 — 항상 화이트 표면