단지 한 줄
아바타 · 이름 · 메타 · 오른쪽 값 한 줄이에요. 시장 목록 · 허브 고를 거리 · 상세 아래 목록이 모두 이 줄을 쓰고, 카드 안은 flat(구분선) · 고를 거리는 tile(둥근 면)이에요.
모바일PCComplexRow실제 데이터 · 2026-11 기준
고르기#
이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.
언제 쓰나#
- 단지 한 줄(아바타·이름·메타·값)을 늘어놓을 때 써요. 카드 안은 flat, 고를 거리는 tile이고 아바타는 4단계(18·28·32·40)예요.
쓰지 말아야 할 때 · 대신 쓸 것#
인터페이스#
타입에서 자동으로 뽑은 표예요.
ComplexRow#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| name* | - | ReactNode | |
| meta | - | ReactNode | |
| value | - | ReactNode | 오른쪽 값 칸(가격·등락·건수). |
| valueClass | - | string | 값 칸 클래스 - 카드 안 여러 줄의 값 끝을 맞출 땐 VALUE_COL. 기본은 내용 폭. |
| lead | - | ReactNode | 순번(rank)·날짜(date) 칸. |
| leadKind | 'rank' | 'rank' | 'date' | |
| row | - | AvatarRow | 단지 아바타(AptAvatar) - row를 주면 그린다. 다른 아바타(브랜드·노선)는 avatar로 직접. |
| brands | - | {} | |
| avatar | - | ReactNode | |
| avatarSlot | - | boolean | 빈 아바타 자리(행이 없을 때도 이름 시작점을 맞춘다). |
| size | - | 'sm' | 'md' | 'lg' | 'xs' | 크기예요. |
| variant | 'flat' | 'flat' | 'tile' | 모양이에요. |
| extra | - | ReactNode | 이름 줄 뒤·값 앞에 끼우는 작은 표시(배지 등). |
| after | - | ReactNode | 맨 끝(펼침 화살표 등). |
| children | - | ReactNode | 줄 아래 딸리는 미리보기(tile 안) - 있으면 줄을 세로로 쌓는다. |
| href | - | string | |
| track | - | { where: string; what: string; to?: string; } | |
| onClick | - | () => void | 누르면 불러요. |
| ariaExpanded | - | boolean | |
| className | - | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
접근성#
- 누르면 열리는 줄은 버튼, 다른 페이지로 가는 줄은 링크(a href)예요.
- 펼치는 줄은 aria-expanded로 열림을 알려요.
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요. |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |