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

Notice

화면 안에 끼워 넣는 한 줄 안내 상자다. 안내(파랑), 주의(주황), 오류(빨강) 세 가지 톤이 있다.

이 페이지의 목차
분류
알림과 안내
가져오기
import { Notice } from '@/ui/feedback'
코드 위치
apps/mobile/src/ui/feedback.tsx:29

미리보기#

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

info
warn
error + 행동

언제 쓰는가#

쓴다

  • 작업 가까이에 상태를 알릴 때 쓴다. 예: "네트워크가 불안정해요", "저장하지 못했어요".
  • 다시 시도 같은 복구 행동이 있으면 action에 SmallButton이나 TextButton을 넣는다.
  • 처리 중이라는 안내는 busy로 스피너를 보여 준다.

쓰지 않는다

  • 화면 전체를 대신하는 오류에는 쓰지 않는다. 데이터가 전혀 없을 때는 EmptyState다.
  • 잠깐 뜨고 사라지는 확인("저장했어요")에는 쓰지 않는다. toast를 쓴다.
  • 긴 문장이나 여러 문단을 넣지 않는다. 한두 줄이다.

종류#

Notice 종류
이름설명
info (기본)primarySoft 바탕, primary 글자·아이콘(원 안의 i).
warnamberSoft 바탕, amberText 글자와 아이콘(느낌표).
errordangerSoft 바탕, danger 글자와 아이콘(느낌표).

크기#

Notice 크기
이름값설명
기본좌우 14, 위아래 12, 모서리 12높이는 글자 줄 수가 정한다. 아이콘은 18px.

상태#

info
warn
error
처리 중
Notice 상태
상태모습과 동작
info기본 모습이다.
warn기본 모습이다.
error기본 모습이다.
처리 중아이콘 자리에 스피너가 돈다.

사용 방법#

기본

기본
import { Notice } from '@/ui/feedback';

<Notice tone="warn" text="네트워크가 불안정해요" />

복구 행동과 함께

복구 행동과 함께
<Notice tone="error" text="저장하지 못했어요" action={<SmallButton label="다시" onPress={retry} />} />

속성(props)#

Notice 속성
이름타입기본값필수설명
tone'info' | 'warn' | 'error''info'선택"info"(기본), "warn", "error".
textstring—필수안내 문구.
actionReactNode—선택오른쪽에 놓을 행동(버튼).
busyboolean—선택true이면 아이콘 대신 스피너를 보여 준다.

치수와 토큰#

모양
모서리 radius.md(12), 좌우 14, 위아래 12, 요소 사이 8
글자
small(13/19 Medium), 톤 색
아이콘
18px, 선 2

접근성#

  • 역할은 alert라서 나타나면 화면 읽기 프로그램이 바로 읽어 준다.
  • 톤은 색과 아이콘 모양(i, !)과 문구로 나타낸다.

글자 색 대비

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

Notice 글자 색 대비
쓰임글자색바탕대비기준
info 글자 (13px)primaryprimarySoft3.45:1 미달4.32:1 미달4.21:1 미달4.68:1 통과4.5:1 (작은 글자)
warn 글자 (13px)amberTextamberSoft5.48:1 통과9.81:1 통과6.66:1 통과6.86:1 통과4.5:1 (작은 글자)
error 글자 (13px)dangerdangerSoft4.09:1 미달5.39:1 통과4.69:1 통과5.43:1 통과4.5:1 (작은 글자)

잘한 예와 잘못한 예#

잘한 예무엇이 문제인지와 다음 행동(다시)을 함께 둔다.
잘못한 예문제만 알리고 할 일이 없으면 사용자가 멈춘다.
  • toast: 화면 아래에 잠깐 떴다 사라지는 짧은 확인 메시지다. 함수 한 번 호출로 띄운다. 되돌리기 같은 행동 하나를 붙일 수 있다.
  • EmptyState: 보여 줄 내용이 없을 때의 안내다. 옅은 아이콘 타일, 제목, 한 줄 설명, 다음 행동 버튼으로 이루어진다.
  • FeedbackCard: 문제를 채점한 뒤 결과("정답!", "오답")와 해설을 보여 주는 카드다.