# ConceptBody

개념의 요약 문장과 핵심 포인트 목록을 그린다. 개념 카드, 관련 개념, 틀린 개념, 자료 상세, 레슨 목록이 모두 같은 모양을 쓴다.

- 분류: 학습 콘텐츠
- 가져오기: `import { ConceptBody } from '@/ui/blocks/ConceptBody'`
- 코드 위치: `apps/mobile/src/ui/blocks/ConceptBody.tsx:11` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/concept-body

## 미리보기

실제 컴포넌트를 그린 화면은 https://developers.moring.co/tds/components/concept-body 에서 볼 수 있다. 서비스 색 선택기로 Mordy, Morit 색을 바꿔 볼 수 있다.

## 언제 쓰는가

### 쓴다
- 개념을 보여 주는 모든 곳에서 요약과 핵심 포인트를 이것으로 그린다.
- 카드 안처럼 좁은 곳에서는 `compact`를, 요약만 보이려면 `summaryOnly`를 켠다.

### 쓰지 않는다
- 개념 내용을 `AppText`로 직접 이어 붙이지 않는다. 수식과 블록이 빠진다.
- 핵심 포인트를 번호 목록으로 바꾸지 않는다. 앞에 6px 점을 쓴다.

## 종류

| 이름 | 설명 |
| --- | --- |
| 블록 내용 | `content`(서버가 만든 블록 내용)가 있으면 그것을 `Blocks`로 그린다. |
| 글자 내용 | 없으면 `summary` 글과 `keyPoints`를 `MathText`로 그린다. |
| summaryOnly | 요약 첫 블록만 보인다. |

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 요약 `body`, 포인트 `small` | `compact`면 요약도 `small`, 간격 8(기본 12). |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 기본 | 기본 모습이다. |

## 사용 방법

### 기본

```tsx
import { ConceptBody } from '@/ui/blocks/ConceptBody';

<ConceptBody summary={concept.summary} keyPoints={concept.keyPoints} render={concept.render} content={concept.content} assets={assets} tint={subjectColor.glyph} />
```

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `summary` | `string` | — | 필수 | 요약 문장(글자). `content`가 없을 때 쓴다. |
| `keyPoints` | `string[]` | `[]` | 선택 | 핵심 포인트 글 목록. `content`가 없을 때 쓴다. |
| `render` | `Partial<Record<string, Segment[]>> \| null` | — | 선택 | 요약과 포인트를 미리 그린 조각(수식). |
| `content` | `ConceptContent \| null` | — | 선택 | 서버가 만든 블록 내용. 있으면 위의 글자 대신 이것을 쓴다. |
| `assets` | `Assets \| null` | — | 선택 | 그림 블록이 쓰는 페이지 이미지 목록. |
| `tint` | `string` | `color.primary` | 선택 | 핵심 포인트 점의 색. 기본 `color.primary`. 과목 색을 넘긴다. |
| `summaryOnly` | `boolean` | — | 선택 | `true`이면 요약 첫 블록만 그린다. |
| `compact` | `boolean` | — | 선택 | `true`이면 작은 글자와 좁은 간격으로 그린다. |

## 치수와 토큰

| 항목 | 값 |
| --- | --- |
| 핵심 포인트 | 앞에 6px 원(`tint`), 윗선에서 8 아래, 글자 `small` `textSecondary`, 포인트 사이 10 |
| 간격 | 요약과 포인트 사이 `md`(12), `compact` `sm`(8). 포인트 목록 위 `xs`(4) |

## 접근성

- 요약과 포인트는 모두 읽히는 글이다. 점은 장식이다.

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 핵심 포인트 (13px) | `textSecondary` | `surface` | 4.23:1 미달 | 6.95:1 통과 | 4.88:1 통과 | 7.11:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 개념은 모두 같은 `ConceptBody`로 그린다.
- 잘못한 예: 번호 목록으로 바꾸면 다른 화면의 개념과 모양이 달라진다.

## 함께 보는 컴포넌트

- [Blocks](https://developers.moring.co/tds/components/blocks.md): 문제 본문, 보기, 해설을 이루는 블록(문단, 보기 상자, 수식, 표, 그래프, 그림)을 위에서 아래로 그린다. `RichText`는 그중 문단 하나다.
- [MathText](https://developers.moring.co/tds/components/math-text.md): 수식이 섞인 글을 그린다. 서버가 미리 그려 둔 수식(SVG)을 글자 사이에 끼워 넣고, 없으면 읽을 수 있는 글자로 대신 보여 준다.