본문으로 건너뛰기
TDSMoring 디자인 시스템

SettingsGroup

설정 화면의 목록이다. 작은 구역 이름, 행이 든 흰 패널, 아래 안내 글로 이루어진다.

이 페이지의 목차
분류
면과 목록
가져오기
import { SettingsGroup, SettingsCard, SettingsIcon, SettingsRow } from '@/ui/SettingsList'
코드 위치
apps/mobile/src/ui/SettingsList.tsx:22

미리보기#

실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.

일반
복습 알림
로그아웃
알림을 끄면 복습 시간을 알려 주지 않아요.
아이콘, 값, 스위치, 위험한 행

언제 쓰는가#

쓴다

  • 설정과 그 하위 화면의 모든 목록에 쓴다.
  • 행 하나는 아이콘 · 제목 · 현재 값 · 화살표다. 누르면 하위 화면이나 시트로 간다.
  • 숫자 입력기 같은 자유로운 내용은 SettingsCard에 넣는다.

쓰지 않는다

  • 설정이 아닌 목록에는 쓰지 않는다. WellRow를 쓴다.
  • 삭제처럼 위험한 행이 아니면 아이콘에 색을 주지 않는다. 아이콘 타일은 모두 중립색이다. 빨강은 위험한 행(danger)만 쓴다.

종류#

SettingsGroup 종류
이름설명
SettingsGroup행 목록. 행 사이에 얇은 구분선이 자동으로 들어간다.
SettingsCard자유로운 내용을 담는 같은 모양의 패널(안쪽 여백 18).
SettingsRow행. onPress가 있으면 버튼이고 ChevronRight가 붙는다. right에 스위치를 넣을 수 있다.
SettingsIcon행 앞의 34 × 34 중립 아이콘 타일. danger면 빨간 타일.

크기#

SettingsGroup 크기
이름값설명
행최소 높이 58좌우 18, 위아래 12, 요소 사이 12. 구분선은 아이콘이 있으면 왼쪽에서 64, 없으면 18 들여 시작한다.

상태#

SettingsGroup 상태
상태모습과 동작
기본surface 바탕, 모서리 22, shadow(1)(다크는 1px cardBorder).
누름행 배경이 pressed 색으로 바뀐다.
값이 긴 행제목은 폭을 지키고 값이 먼저 …으로 줄어든다(값은 행 폭의 58%까지).

사용 방법#

기본

기본
import { SettingsGroup, SettingsIcon, SettingsRow, SettingsSwitch } from '@/ui/SettingsList';

<SettingsGroup title="일반" footer="알림을 끄면 복습 시간을 알려 주지 않아요.">
  <SettingsRow icon={<SettingsIcon Icon={Bell} />} title="복습 알림" chevron={false}
    right={<SettingsSwitch label="복습 알림" value={on} onChange={setOn} />} />
  <SettingsRow icon={<SettingsIcon Icon={Globe} />} title="언어" value="한국어" onPress={openLanguage} />
  <SettingsRow icon={<SettingsIcon Icon={LogOut} danger />} title="로그아웃" tone={color.danger} onPress={logout} />
</SettingsGroup>

속성(props)#

SettingsGroup

SettingsGroup 속성
이름타입기본값필수설명
childrenReactNode—필수행들. 행 사이에 구분선이 자동으로 들어간다.
titlestring—선택패널 위의 작은 구역 이름(smallStrong, textSecondary).
footerstring—선택패널 아래 안내 글(caption).

SettingsCard

SettingsCard 속성
이름타입기본값필수설명
childrenReactNode—필수자유로운 내용.
titlestring—선택패널 위의 작은 구역 이름.
footerstring—선택패널 아래 안내 글.

SettingsIcon

SettingsIcon 속성
이름타입기본값필수설명
IconIcon—필수그릴 아이콘 컴포넌트.
dangerboolean—선택true이면 dangerSoft 타일에 danger 아이콘.

SettingsRow

SettingsRow 속성
이름타입기본값필수설명
iconReactNode—선택앞 요소. 보통 SettingsIcon.
titlestring—필수제목(bodyStrong).
subtitlestring—선택제목 아래 보조 글(small).
valuestring—선택현재 값. 길면 …으로 줄어든다.
onPress() => void—선택있으면 행이 버튼이 된다.
rightReactNode—선택뒤 요소. 스위치 등.
tonestringcolor.text선택제목 글자색. 위험한 행은 color.danger.
chevronbooleantrue선택false이면 화살표를 숨긴다. 기본 true(onPress가 있을 때).
accessibilityHintstring—선택화면 읽기 프로그램이 읽는 설명.

치수와 토큰#

패널
surface, 모서리 22, shadow(1)(다크는 1px cardBorder)
행
최소 58, 좌우 18, 위아래 12, 사이 12
구분선
헤어라인 line, 시작 위치 18(아이콘 있으면 64)
아이콘 타일
34 × 34, 모서리 11, well 바탕, 아이콘 18 선 2.1 textSecondary
구역 이름
smallStrong, textSecondary, 아래 8, 왼쪽 4

접근성#

  • onPress가 있는 행은 button이고 이름은 "제목, 보조 글, 값"을 이어 읽는다.
  • 화살표(ChevronRight)가 눌리는 행임을 보여 준다.
  • 위험한 행은 빨간 글자와 아이콘으로, 글자(로그아웃 등)로도 알린다.

글자 색 대비

글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.

SettingsGroup 글자 색 대비
쓰임글자색바탕대비기준
행 제목textsurface17.15:1 통과15.25:1 통과16.13:1 통과10.92:1 통과4.5:1 (작은 글자)
현재 값 (13px)textSecondarysurface4.23:1 미달6.95:1 통과4.88:1 통과7.11:1 통과4.5:1 (작은 글자)
위험한 행 제목dangersurface4.55:1 통과5.76:1 통과5.04:1 통과7.11:1 통과4.5:1 (작은 글자)

잘한 예와 잘못한 예#

탈퇴
잘한 예아이콘은 모두 중립색이고, 위험한 행만 빨강이다.
잘못한 예행마다 다른 색 아이콘을 쓰면 위험한 행이 눈에 띄지 않는다.
  • SettingsSwitch: 켜고 끄는 스위치다. 설정 행의 오른쪽에 놓는다.
  • WellRow: 패널 안의 목록 한 줄이다. 옅은 홈(well)에 앞 아이콘 타일, 제목, 보조 줄, 뒤 요소가 놓인다.
  • Panel: 회색 바탕(canvas) 위에 놓는 흰 패널이다. 제목 줄(제목, 설명 아이콘, 오른쪽 링크)과 내용을 담는다. 리포트와 시험 계획 화면의 기본 면이다.