# 컴포넌트

공통 UI 키트의 컴포넌트 문서 목록이다. 각 문서는 같은 순서(미리보기, 언제 쓰는가, 종류, 크기, 상태, 사용 방법, 치수와 토큰, 접근성, 잘한 예와 잘못한 예)로 쓰여 있다.

## 버튼

누르면 동작을 시작하는 컴포넌트

- [PrimaryButton](https://developers.moring.co/tds/components/primary-button.md): 서비스 주색 그라데이션으로 채운 알약 모양 버튼이다. 한 화면에서 가장 중요한 행동 하나에 쓴다.
- [SecondaryButton](https://developers.moring.co/tds/components/secondary-button.md): 테두리만 있거나 옅은 주색으로 채운 알약 모양 버튼이다. PrimaryButton 옆의 두 번째 행동에 쓴다.
- [AmberButton](https://developers.moring.co/tds/components/amber-button.md): 주의 색(amber)으로 채운 알약 모양 버튼이다. "복습 추천" 카드의 행동에만 쓴다.
- [SmallButton](https://developers.moring.co/tds/components/small-button.md): 목록 행 안에 놓는 작은 사각형 버튼이다. "풀기", "승인", "거절" 같은 한 단어 행동에 쓴다.
- [TextButton](https://developers.moring.co/tds/components/text-button.md): 글자만 있는 가장 가벼운 버튼이다. "나중에", "건너뛰기" 같은 선택 행동에 쓴다.
- [CircleButton](https://developers.moring.co/tds/components/circle-button.md): 화살표가 들어 있는 둥근 주색 버튼이다. 온보딩에서 다음 단계로 넘어갈 때 쓴다.
- [IconButton](https://developers.moring.co/tds/components/icon-button.md): 아이콘 하나만 있는 투명한 둥근 버튼이다. 헤더의 "뒤로", "검색"에 쓴다.
- [Pressable](https://developers.moring.co/tds/components/pressable.md): React Native의 Pressable에 Android 눌림 물결(ripple)을 더한 기본 눌림 영역이다. 앱의 모든 버튼이 이것을 쓴다.

## 입력과 선택

값을 적거나 고르는 컴포넌트

- [Field](https://developers.moring.co/tds/components/field.md): 글자를 입력하는 칸이다. 이름(라벨), 안내 문구, 오류 문구, 비밀번호 보기와 지우기 버튼을 포함한다.
- [PillTabs](https://developers.moring.co/tds/components/pill-tabs.md): 알약 모양의 탭 모음이다. 하나를 고르면 그 칸이 짙은 색(네이비, 다크 모드는 주색)으로 채워진다.
- [Chip](https://developers.moring.co/tds/components/chip.md): 짧은 글자를 담는 작은 알약 표지다. 상태, 분류, D-Day를 알린다. 눌리지 않는다.
- [OptionRow](https://developers.moring.co/tds/components/option-row.md): 퀴즈 보기 한 줄이다. 고르기 전, 고른 뒤, 채점 뒤(정답, 오답)의 모습이 정해져 있다.
- [ChoiceCard](https://developers.moring.co/tds/components/choice-card.md): 카드 모양의 선택지다. 고르면 테두리가 굵어지고 체크 표시가 붙는다. 온보딩의 과목·알림 선택에 쓴다.
- [ChoiceNumber](https://developers.moring.co/tds/components/choice-number.md): 숫자가 들어간 얇은 동그라미다. 시험지 보기 번호(① ② ③ ④ ⑤)를 그린다.
- [FilterPill](https://developers.moring.co/tds/components/filter-pill.md): "과목  전체 ▾"처럼 이름과 지금 값을 보여 주고, 누르면 선택 목록을 여는 알약 버튼이다.
- [SettingsSwitch](https://developers.moring.co/tds/components/settings-switch.md): 켜고 끄는 스위치다. 설정 행의 오른쪽에 놓는다.
- [RangeSlider](https://developers.moring.co/tds/components/range-slider.md): 손잡이 두 개로 정수 범위(시작~끝)를 고르는 슬라이더다. PDF 페이지 범위를 고를 때 쓴다.
- [Calendar](https://developers.moring.co/tds/components/date-calendar.md): 한 달 달력에서 여러 날짜를 고르는 컴포넌트다. 시험 날짜를 고를 때 쓴다.
- [TimeSheet](https://developers.moring.co/tds/components/time-sheet.md): 아래에서 올라오는 시트에서 시각을 고른다. 오전/오후, 시, 분(5분 단위) 세 줄 바퀴를 돌려서 고른다.
- [RadioMark](https://developers.moring.co/tds/components/radio-mark.md): 선택 목록 행의 끝에 놓는 동그란 라디오 표시다. 시트의 선택 목록에서 쓴다.

## 탐색

화면 안에서 위치를 바꾸거나 보여 주는 컴포넌트

- [TabBar](https://developers.moring.co/tds/components/tab-bar.md): Mordy 앱 맨 아래의 탭 줄이다. 홈 · 과목 · (+) · 커뮤니티 · 더보기. 가운데 +는 탭이 아니라 자료 추가 행동이다.
- [PageDots](https://developers.moring.co/tds/components/page-dots.md): 지금이 몇 번째 단계인지 알려 주는 작은 점 줄이다. 온보딩 단계 표시에 쓴다.
- [WeekStrip](https://developers.moring.co/tds/components/week-strip.md): 월요일부터 일요일까지 7일을 한 줄로 보여 주는 주간 표시다. 공부한 날에는 점이 찍힌다.
- [Timeline](https://developers.moring.co/tds/components/timeline.md): 세로 선으로 단계를 이어 보여 주는 타임라인이다. 시험 준비 단계(개념 → 문제 → 모의고사)에 쓴다.
- [BackHeader](https://developers.moring.co/tds/components/back-header.md): 화면 위쪽의 뒤로 가기 줄이다. 왼쪽에 뒤로 화살표, 가운데에 제목(선택), 오른쪽에 행동 자리가 있다.
- [TitleHeader](https://developers.moring.co/tds/components/title-header.md): 탭의 첫 화면 위쪽에 놓는 큰 제목 줄이다. 왼쪽에 제목, 오른쪽에 행동 자리가 있다.

## 면과 목록

내용을 담는 면, 헤더, 목록 행

- [Screen](https://developers.moring.co/tds/components/screen.md): 모든 화면의 바탕이다. 안전 영역, 키보드, 스크롤, 좌우 여백, 아래 고정 영역을 한 번에 처리한다.
- [Card](https://developers.moring.co/tds/components/card.md): 옅은 주색 틴트(`card`)를 깐 둥근 상자다. 안내, 요약, 눌러서 이동하는 카드에 쓴다.
- [Panel](https://developers.moring.co/tds/components/panel.md): 회색 바탕(`canvas`) 위에 놓는 흰 패널이다. 제목 줄(제목, 설명 아이콘, 오른쪽 링크)과 내용을 담는다. 리포트와 시험 계획 화면의 기본 면이다.
- [SectionTitle](https://developers.moring.co/tds/components/section-title.md): 화면 안의 한 묶음(섹션)을 시작하는 제목 줄이다. 위에 24, 아래에 12의 간격을 포함한다.
- [WellRow](https://developers.moring.co/tds/components/well-row.md): 패널 안의 목록 한 줄이다. 옅은 홈(`well`)에 앞 아이콘 타일, 제목, 보조 줄, 뒤 요소가 놓인다.
- [SettingsGroup](https://developers.moring.co/tds/components/settings-list.md): 설정 화면의 목록이다. 작은 구역 이름, 행이 든 흰 패널, 아래 안내 글로 이루어진다.
- [SwipeRow](https://developers.moring.co/tds/components/swipe-row.md): 행을 왼쪽으로 밀면 뒤에서 행동 하나(삭제 등)가 나타나고, 끝까지 밀면 그 행동이 실행되는 행이다.
- [Gap · HScroll](https://developers.moring.co/tds/components/layout-helpers.md): `Gap`은 세로 빈 간격이고, `HScroll`은 가로로 밀어 보는 줄이다. 레이아웃을 돕는 작은 컴포넌트다.
- [ThemeProvider · ThemeFade](https://developers.moring.co/tds/components/theme.md): 화면 모드(시스템·라이트·다크)와 글자 크기 설정을 앱 전체에 적용하는 도구다. 모드가 바뀌는 순간 새 배경색 덮개로 화면을 가렸다가 걷어서 깜빡임을 줄인다.

## 알림과 안내

상태, 결과, 확인을 알리는 컴포넌트

- [Notice](https://developers.moring.co/tds/components/notice.md): 화면 안에 끼워 넣는 한 줄 안내 상자다. 안내(파랑), 주의(주황), 오류(빨강) 세 가지 톤이 있다.
- [FeedbackCard](https://developers.moring.co/tds/components/feedback-card.md): 문제를 채점한 뒤 결과("정답!", "오답")와 해설을 보여 주는 카드다.
- [EmptyState](https://developers.moring.co/tds/components/empty-state.md): 보여 줄 내용이 없을 때의 안내다. 옅은 아이콘 타일, 제목, 한 줄 설명, 다음 행동 버튼으로 이루어진다.
- [Skeleton](https://developers.moring.co/tds/components/skeleton.md): 내용이 불러와지기 전에 그 자리를 채우는 깜빡이는 막대다.
- [Sheet](https://developers.moring.co/tds/components/sheet.md): 화면 아래에서 올라오는 시트다. 위쪽 두 모서리가 둥글고, 손잡이와 제목 줄, 닫기 버튼이 있다.
- [OptionSheet](https://developers.moring.co/tds/components/option-sheet.md): 시트 안에서 목록 중 하나를 고르는 컴포넌트다. 행마다 라디오 표시가 있고, 고르면 바로 닫힌다.
- [dialog](https://developers.moring.co/tds/components/dialog.md): 화면 가운데 뜨는 확인 대화상자와 아래에서 올라오는 메뉴를 함수 호출 하나로 여는 도구다. 결과(눌린 버튼)를 약속(Promise)으로 돌려준다.
- [toast](https://developers.moring.co/tds/components/toast.md): 화면 아래에 잠깐 떴다 사라지는 짧은 확인 메시지다. 함수 한 번 호출로 띄운다. 되돌리기 같은 행동 하나를 붙일 수 있다.
- [AiMark](https://developers.moring.co/tds/components/ai-mark.md): 생성형 AI가 만든 결과임을 알리는 표시다. AI가 만든 모든 결과에 붙인다.

## 데이터 표시

글자, 아이콘, 이미지, 진행률 같은 값을 보여 주는 컴포넌트

- [AppText](https://developers.moring.co/tds/components/app-text.md): 앱의 모든 글자를 그리는 컴포넌트다. 글자 스타일 11종 중 하나를 `variant`로 고르면 크기, 줄 높이, 굵기, 자간이 정해진다.
- [PaperType](https://developers.moring.co/tds/components/paper-type.md): 안쪽의 모든 글자를 시험지 서체(Noto Serif KR)로 바꾸는 감싸개다. 모의고사 시험지 화면에 쓴다.
- [SubjectIcon](https://developers.moring.co/tds/components/subject-icon.md): 과목을 나타내는 둥근 아이콘 타일이다. 과목마다 기호(Σ, Aa, 책, 건물, 잎, 지구, …)와 색이 정해져 있다.
- [Avatar](https://developers.moring.co/tds/components/avatar.md): 사용자의 사진, 또는 닉네임 첫 글자를 브랜드 그라데이션 원 위에 보여 준다. `NameLine`은 닉네임, 공식 배지, @아이디를 한 줄로 놓는다.
- [BrandMark](https://developers.moring.co/tds/components/brand-mark.md): Mordy의 심벌(웃는 얼굴이 복습 화살표로 이어지는 모양)을 브랜드 타일 위에 그린 이미지다.
- [ProgressRing](https://developers.moring.co/tds/components/progress-ring.md): 진행률을 둥근 고리로 보여 준다. `ProgressRing`은 작은 고정 고리, `AnimatedRing`은 나타날 때 0%에서 값까지 채워지는 큰 고리다.
- [ProgressBar](https://developers.moring.co/tds/components/progress-bar.md): 진행률을 가로 막대로 보여 준다. 채운 부분은 기본으로 서비스 주색 그라데이션이다.
- [SegmentedProgress](https://developers.moring.co/tds/components/segmented-progress.md): 문제 하나에 칸 하나씩, 푼 문제만큼 칸이 채워지는 진행 막대다. 퀴즈 맨 위에 쓴다.

## 차트

숫자를 그림으로 보여 주는 컴포넌트

- [DonutChart](https://developers.moring.co/tds/components/donut-chart.md): 전체를 여러 부분으로 나눠 보여 주는 도넛 차트다. 부분 사이에 3의 틈이 있다. 시험 계획의 익힘/학습 중/시작 전 비율에 쓴다.
- [Sparkline](https://developers.moring.co/tds/components/sparkline.md): 정답률 같은 작은 추이를 보여 주는 선 그림이다. 값이 없는 날은 선이 끊기고, 마지막 점이 크게 표시된다.
- [HourBars](https://developers.moring.co/tds/components/hour-bars.md): 값 축이 있는 막대 차트다. 학습 시간(시간·분)이나 푼 문제 수를 날짜별로 보여 주고, 고른 막대 위에 말풍선이 뜬다.
- [AreaLine](https://developers.moring.co/tds/components/area-line.md): 누적 값을 선과 옅은 면으로 보여 주는 차트다. 모든 점에 점이 찍히고 마지막 점에 말풍선이 뜬다. 리포트의 누적 문제 수, 누적 학습 시간에 쓴다.
- [CalendarHeat](https://developers.moring.co/tds/components/calendar-heat.md): 한 달 달력에서 날마다 공부한 시간을 색의 진하기(5단계)로 보여 주는 차트다.
- [ScoreBars](https://developers.moring.co/tds/components/score-bars.md): 과목별 예상 점수(0~100)를 막대로 보여 준다. 점수는 막대 위에, 과목 이름은 아래에 쓴다.

## 학습 콘텐츠

문제, 개념, 수식, 그림을 그리는 컴포넌트

- [MathText](https://developers.moring.co/tds/components/math-text.md): 수식이 섞인 글을 그린다. 서버가 미리 그려 둔 수식(SVG)을 글자 사이에 끼워 넣고, 없으면 읽을 수 있는 글자로 대신 보여 준다.
- [Blocks](https://developers.moring.co/tds/components/blocks.md): 문제 본문, 보기, 해설을 이루는 블록(문단, 보기 상자, 수식, 표, 그래프, 그림)을 위에서 아래로 그린다. `RichText`는 그중 문단 하나다.
- [ConceptBody](https://developers.moring.co/tds/components/concept-body.md): 개념의 요약 문장과 핵심 포인트 목록을 그린다. 개념 카드, 관련 개념, 틀린 개념, 자료 상세, 레슨 목록이 모두 같은 모양을 쓴다.
- [ChartBlock](https://developers.moring.co/tds/components/chart-block.md): 문제와 해설 안의 그래프(선, 막대, 점)를 그린다. 함수 그래프는 교과서처럼 원점을 지나는 화살표 축으로, 자료 그래프는 격자와 눈금과 범례로 그린다.
- [DiagramBlock](https://developers.moring.co/tds/components/diagram-block.md): 선, 도형, 글자, 회로 부품(저항, 전지, 전구, 스위치), 스프링 같은 기본 모양으로 만든 도식을 그린다. 컨테이너 폭에 맞게 줄어든다.
- [ImageBlock](https://developers.moring.co/tds/components/image-block.md): 문제에 쓰인 원본 자료의 한 영역을 오려 보여 준다. 영역 위에 라벨과 강조 고리를 얹을 수 있고, 눌러서 크게 볼 수 있다.
- [SourceCrop](https://developers.moring.co/tds/components/source-crop.md): 문제가 나온 원본 자료의 근거 부분을 보여 준다. 근거가 있는 줄을 가운데로 한 가로 띠, 또는 전체 페이지에 근거 영역 표시를 얹은 모양이다.
- [ZoomableImage](https://developers.moring.co/tds/components/zoomable-image.md): 페이지 이미지를 두 손가락으로 1배에서 4배까지 확대하고, 확대한 동안에만 끌어서 움직이며, 두 번 눌러 확대·축소하는 이미지다.

## Calendar 앱

Mordy Calendar 앱이 쓰는 컴포넌트

- [CheckCircle](https://developers.moring.co/tds/components/check-circle.md): 할 일을 완료로 바꾸는 동그란 체크 표시다. 비어 있다가 누르면 색이 채워지며 체크가 나타난다.
- [DayStrip](https://developers.moring.co/tds/components/day-strip.md): 한 주 7일을 한 줄로 보여 주고 날짜를 골라 이동하는 주간 줄이다. 좌우로 밀면 앞뒤 주로 이동한다. 일정이 있는 날에는 점이 찍힌다.
- [TabBar (Calendar)](https://developers.moring.co/tds/components/calendar-tab-bar.md): Mordy Calendar 앱의 탭 줄이다. 오늘 · 캘린더 · (+) · 할 일 · 더보기. Mordy 앱의 `TabBar`와 같은 모양이고 가운데 +는 빠른 추가를 연다.
- [ScreenHeader](https://developers.moring.co/tds/components/calendar-header.md): Calendar 앱의 전체 화면 위쪽 줄이다. 왼쪽에 뒤로, 가운데에 제목, 오른쪽에 행동. 모두 48의 누르는 영역이고 화면 가장자리에서 8 들어와 있다.
- [MonthView](https://developers.moring.co/tds/components/month-view.md): 한 달을 화면 가득 보여 주는 달력이다. 날마다 칩(시험 먼저, 시간 있는 일정, 나머지)을 줄에 들어가는 만큼 보이고 넘치면 "+n"으로 줄인다.
- [TimeGrid](https://developers.moring.co/tds/components/time-grid.md): 주·일 보기의 24시간 시간표다. 일정 블록을 길게 눌러 끌면 시간(15분 단위)과 날짜가 바뀌고, 빈 칸을 누르면 그 시각에 추가한다.
- [ItemRow](https://developers.moring.co/tds/components/item-row.md): 오늘과 할 일 목록의 한 줄이다. 할 일은 앞에 체크 원, 일정은 앞에 시간과 색 막대가 있다.
- [PlanRow](https://developers.moring.co/tds/components/plan-row.md): Mordy가 만든 학습 계획 한 줄이다. 체크 원, 제목, "Mordy" 표지, 푼 문제 진행률(막대)이 있다. 직접 옮긴 계획에는 자물쇠가 붙는다.
- [DdayChip](https://developers.moring.co/tds/components/dday-chip.md): 시험까지 남은 날을 "D-24"처럼 보여 주는 칩이다. 7일 이내면 빨간색, 그 외는 주색이다.
- [MordyTag](https://developers.moring.co/tds/components/mordy-tag.md): "Mordy"라고 적힌 작은 표지다. Mordy가 만든 계획 항목임을 알린다. 이 계획은 실제 학습 기록으로 계산한 규칙 기반이라 AI라고 부르지 않는다.
- [SubjectMark · CategoryDot · GroupAvatar](https://developers.moring.co/tds/components/calendar-marks.md): 일정 줄과 칩에 붙는 작은 표식 세 가지다. 과목 아이콘(`SubjectMark`), 분류 색 점(`CategoryDot`), 그룹 캘린더의 동그란 그림(`GroupAvatar`).
- [ColorRow](https://developers.moring.co/tds/components/color-row.md): 과목 팔레트 8색을 동그란 점으로 늘어놓고 하나를 고르는 컴포넌트다. 카테고리와 캘린더의 색을 정할 때 쓴다.
- [PlannerPreview](https://developers.moring.co/tds/components/planner-preview.md): 환영·설정 화면에서 플래너가 어떤 모양인지 보여 주는 작은 그림이다. 하루를 과목별 또는 시간별로 나눈 예시다.
- [QuickAddHost](https://developers.moring.co/tds/components/quick-add.md): 할 일, 일정, 시험을 한 줄로 빠르게 추가하는 시트다. 한 줄에 "내일 4시 영어학원"처럼 쓰면 날짜와 시간을 알아듣고, 못 알아들은 것은 알약 선택으로 채운다.
- [DateSheetHost · PlanSheetHost · MissedSheet · CategorySheetHost](https://developers.moring.co/tds/components/calendar-sheets.md): Calendar 앱의 시트 네 가지다. 날짜 고르기, Mordy 계획 항목 메뉴, 어제 못한 계획 정리, 카테고리 고르기. 앞의 둘과 마지막은 앱 루트에 한 번 두고 함수 호출로 연다.
- [ExamForm](https://developers.moring.co/tds/components/exam-form.md): 시험을 만드는 양식이다. 시험 날짜(여러 날 가능), 과목 칩, 과목별 시험 범위를 고른다. 빠른 추가 시트와 전체 편집 화면이 같은 양식을 쓴다.