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

ConceptBody

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

이 페이지의 목차
분류
학습 콘텐츠
가져오기
import { ConceptBody } from '@/ui/blocks/ConceptBody'
코드 위치
apps/mobile/src/ui/blocks/ConceptBody.tsx:11

미리보기#

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

광합성은 빛에너지로 포도당을 만드는 과정이다.
엽록체에서 일어난다.
이산화탄소와 물이 재료다.
기본
광합성은 빛에너지로 포도당을 만드는 과정이다.
엽록체에서 일어난다.
이산화탄소와 물이 재료다.
compact

언제 쓰는가#

쓴다

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

쓰지 않는다

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

종류#

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

크기#

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

상태#

광합성은 빛에너지로 포도당을 만드는 과정이다.
엽록체에서 일어난다.
이산화탄소와 물이 재료다.
기본
ConceptBody 상태
상태모습과 동작
기본기본 모습이다.

사용 방법#

기본

기본
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)#

ConceptBody 속성
이름타입기본값필수설명
summarystring—필수요약 문장(글자). content가 없을 때 쓴다.
keyPointsstring[][]선택핵심 포인트 글 목록. content가 없을 때 쓴다.
renderPartial<Record<string, Segment[]>> | null—선택요약과 포인트를 미리 그린 조각(수식).
contentConceptContent | null—선택서버가 만든 블록 내용. 있으면 위의 글자 대신 이것을 쓴다.
assetsAssets | null—선택그림 블록이 쓰는 페이지 이미지 목록.
tintstringcolor.primary선택핵심 포인트 점의 색. 기본 color.primary. 과목 색을 넘긴다.
summaryOnlyboolean—선택true이면 요약 첫 블록만 그린다.
compactboolean—선택true이면 작은 글자와 좁은 간격으로 그린다.

치수와 토큰#

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

접근성#

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

글자 색 대비

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

ConceptBody 글자 색 대비
쓰임글자색바탕대비기준
핵심 포인트 (13px)textSecondarysurface4.23:1 미달6.95:1 통과4.88:1 통과7.11:1 통과4.5:1 (작은 글자)

잘한 예와 잘못한 예#

광합성은 빛에너지로 포도당을 만드는 과정이다.
엽록체에서 일어난다.
이산화탄소와 물이 재료다.
잘한 예개념은 모두 같은 ConceptBody로 그린다.
1. 엽록체에서 일어난다.
잘못한 예번호 목록으로 바꾸면 다른 화면의 개념과 모양이 달라진다.
  • Blocks: 문제 본문, 보기, 해설을 이루는 블록(문단, 보기 상자, 수식, 표, 그래프, 그림)을 위에서 아래로 그린다. RichText는 그중 문단 하나다.
  • MathText: 수식이 섞인 글을 그린다. 서버가 미리 그려 둔 수식(SVG)을 글자 사이에 끼워 넣고, 없으면 읽을 수 있는 글자로 대신 보여 준다.