WellRow
패널 안의 목록 한 줄이다. 옅은 홈(well)에 앞 아이콘 타일, 제목, 보조 줄, 뒤 요소가 놓인다.
이 페이지의 목차
- 분류
- 면과 목록
- 가져오기
import { WellRow, RowIcon } from '@/ui/surface'- 코드 위치
apps/mobile/src/ui/surface.tsx:73
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
아이콘 + 제목 + 보조 줄 언제 쓰는가#
쓴다
- 과목, 자료, 시험처럼 눌러서 이동하거나 고르는 목록 행에 쓴다.
- 선택 목록(시트)에서는
selected와 RadioMark를 함께 쓴다. - 앞에
RowIcon을 두면 상태 색을 가진 아이콘 타일이 된다.
쓰지 않는다
- 설정 행에는 쓰지 않는다.
SettingsRow를 쓴다. - 행마다 그림자를 주지 않는다.
- 제목을 두 줄 넘게 쓰지 않는다.
titleLines로 줄 수를 정하고 넘치면 …으로 줄인다.
사용 방법#
기본
import { RowIcon, WellRow } from '@/ui/surface';
<WellRow
icon={<RowIcon tone="primary"><BookOpen size={20} color={toneInk('primary')} strokeWidth={2.1} /></RowIcon>}
title="수학"
meta="자료 18개 · 복습 12개"
onPress={() => router.push('/subject/math')}
/>
치수와 토큰#
- 행
- 최소 높이 56, 모서리 18, 좌우 12, 위아래 10, 사이 12, 바탕
well - 글자
- 제목
bodyStrong, 보조 caption(textSecondary) - 선택
selected 바탕 + primary 테두리- RowIcon
- 42 × 42, 모서리 14, 바탕은 tone의
…Soft, 아이콘 20 선 2.1
접근성#
onPress가 있으면 button 역할이고 selected 상태가 전달된다.- 선택은 색과 테두리, (시트에서는) 라디오 표시로 나타낸다.
글자 색 대비
글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.
잘한 예와 잘못한 예#
잘한 예앞 아이콘, 제목, 보조 줄, 뒤 화살표 순서로 놓는다.잘못한 예행마다 그림자를 주지 않는다. 홈(well) 색이 구분을 맡는다. - Panel: 회색 바탕(
canvas) 위에 놓는 흰 패널이다. 제목 줄(제목, 설명 아이콘, 오른쪽 링크)과 내용을 담는다. 리포트와 시험 계획 화면의 기본 면이다. - SettingsGroup: 설정 화면의 목록이다. 작은 구역 이름, 행이 든 흰 패널, 아래 안내 글로 이루어진다.
- RadioMark: 선택 목록 행의 끝에 놓는 동그란 라디오 표시다. 시트의 선택 목록에서 쓴다.
- SwipeRow: 행을 왼쪽으로 밀면 뒤에서 행동 하나(삭제 등)가 나타나고, 끝까지 밀면 그 행동이 실행되는 행이다.
