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

Panel

회색 바탕(canvas) 위에 놓는 흰 패널이다. 제목 줄(제목, 설명 아이콘, 오른쪽 링크)과 내용을 담는다. 리포트와 시험 계획 화면의 기본 면이다.

이 페이지의 목차
분류
면과 목록
가져오기
import { Panel, PanelHead, PanelLink } from '@/ui/surface'
코드 위치
apps/mobile/src/ui/surface.tsx:21

미리보기#

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

이번 주 학습

수학3시간 20분
영어1시간 05분
제목 + 설명 아이콘 + 링크

언제 쓰는가#

쓴다

  • 리포트, 시험 계획 같은 대시보드 화면에서 내용을 묶는 흰 면으로 쓴다.
  • 제목 줄 오른쪽에는 PanelLink("전체보기 ›")나 토글을 둔다.
  • 제목 옆 설명(ⓘ)이 필요하면 info에 [제목, 설명]을 넘긴다. 누르면 대화상자가 뜬다.

쓰지 않는다

  • 흰 배경 화면(bg) 위에서 구분 없이 쓰지 않는다. 패널은 canvas 위에서 보인다.
  • 패널 안에 패널을 넣지 않는다. 안의 묶음은 WellRow로 나눈다.
  • 제목 줄 오른쪽에 요소를 둘 넘게 두지 않는다.

종류#

Panel 종류
이름설명
Panel흰 패널. 제목(title)을 주면 제목 줄이 생긴다.
PanelHead제목 줄만 따로 쓴다. 패널 밖에서 같은 모양의 제목이 필요할 때.
PanelLink"전체보기 ›" 모양의 작은 링크.

크기#

Panel 크기
이름값설명
기본안쪽 여백 18, 모서리 22제목 줄 아래 간격 14. 좁은 화면(글자 배율 반영 폭 370 미만)에서는 link가 패널 맨 아래로 옮겨 간다.

상태#

Panel 상태
상태모습과 동작
기본surface 바탕, 그림자 shadow(1). 다크 모드에서는 그림자 대신 1px cardBorder 테두리.
누르는 패널onPress가 있으면 버튼이 되고 눌렀을 때 투명도 0.88.

사용 방법#

기본

기본
import { Panel, PanelLink, WellRow } from '@/ui/surface';

<Screen background={color.canvas}>
  <Panel title="이번 주 학습" info={['이번 주 학습', '월요일부터 오늘까지 문제를 푼 시간이에요.']} link={<PanelLink label="전체보기" onPress={openReport} />}>
    <WellRow title="수학" meta="3시간 20분" />
  </Panel>
</Screen>

속성(props)#

Panel

Panel 속성
이름타입기본값필수설명
childrenReactNode—선택패널 안의 내용.
styleStyleProp<ViewStyle>—선택바깥 여백이나 배치만 바꾸는 React Native 스타일이다.
titlestring—선택제목. 있으면 제목 줄이 생긴다.
info[string, string]—선택제목 옆 ⓘ 설명. [제목, 설명]. 누르면 대화상자가 뜬다.
rightReactNode—선택제목 줄 오른쪽 요소. link보다 우선한다.
linkReactNode—선택제목 줄 오른쪽 링크. 좁은 화면에서는 패널 아래로 옮겨 간다.
onPress() => void—선택있으면 패널 전체가 버튼이 된다.
accessibilityLabelstring—선택누르는 패널의 이름.

PanelHead

PanelHead 속성
이름타입기본값필수설명
titlestring—필수제목(headline 18, 한 줄).
info[string, string]—선택제목 옆 ⓘ 설명 [제목, 설명].
rightReactNode—선택오른쪽 요소.
belowboolean—선택true이면 오른쪽 요소를 제목 아래로 내린다(좁은 화면).
styleStyleProp<ViewStyle>—선택바깥 여백이나 배치만 바꾸는 React Native 스타일이다.

PanelLink

PanelLink 속성
이름타입기본값필수설명
labelstring—필수링크 글자.
onPress() => void—필수눌렀을 때 실행할 함수.

치수와 토큰#

패널
surface 바탕, 모서리 22, 안쪽 여백 18, shadow(1)(다크는 1px cardBorder)
제목 줄
제목 headline 18 Bold, 아래 간격 14, ⓘ 17px(textTertiary)
PanelLink
small textSecondary, ChevronRight 15 선 2.3
좁은 화면
글자 배율을 반영한 화면 폭이 370 미만이면 링크를 패널 아래(위 구분선)로 옮긴다

접근성#

  • 제목은 header 역할이다. ⓘ 버튼의 이름은 "{제목} 설명"이다.
  • onPress가 있으면 패널 전체가 button 역할이다.
  • PanelLink는 button이고 눌리는 영역이 사방 8 넓다.

글자 색 대비

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

Panel 글자 색 대비
쓰임글자색바탕대비기준
패널 위 본문textsurface17.15:1 통과15.25:1 통과16.13:1 통과10.92:1 통과4.5:1 (작은 글자)
PanelLink 글자 (13px)textSecondarysurface4.23:1 미달6.95:1 통과4.88:1 통과7.11:1 통과4.5:1 (작은 글자)

잘한 예와 잘못한 예#

이번 주

수학3시간
잘한 예canvas 위에 패널을 놓고, 안의 묶음은 홈(WellRow)으로 나눈다.

이번 주

안쪽

내용
잘못한 예패널 안에 패널을 넣지 않는다.
  • Card: 옅은 주색 틴트(card)를 깐 둥근 상자다. 안내, 요약, 눌러서 이동하는 카드에 쓴다.
  • WellRow: 패널 안의 목록 한 줄이다. 옅은 홈(well)에 앞 아이콘 타일, 제목, 보조 줄, 뒤 요소가 놓인다.
  • SectionTitle: 화면 안의 한 묶음(섹션)을 시작하는 제목 줄이다. 위에 24, 아래에 12의 간격을 포함한다.
  • Screen: 모든 화면의 바탕이다. 안전 영역, 키보드, 스크롤, 좌우 여백, 아래 고정 영역을 한 번에 처리한다.