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

SubjectMark · CategoryDot · GroupAvatar

일정 줄과 칩에 붙는 작은 표식 세 가지다. 과목 아이콘(SubjectMark), 분류 색 점(CategoryDot), 그룹 캘린더의 동그란 그림(GroupAvatar).

이 페이지의 목차
분류
Calendar 앱
가져오기
import { SubjectMark, CategoryDot, GroupAvatar } from '@/cal/ui'
코드 위치
apps/calendar/src/cal/ui.tsx:81

미리보기#

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

Aa
SubjectMark
CategoryDot
우🎸
GroupAvatar

언제 쓰는가#

쓴다

  • 이 컴포넌트는 Mordy Calendar 앱(apps/calendar/src/cal)에만 있다.
  • SubjectMark: 과목 칩과 행에 과목 아이콘(사진이 있으면 사진)을 작게 보인다.
  • CategoryDot: 카테고리의 색을 점으로 보인다.
  • GroupAvatar: 그룹 캘린더의 그림을, 없으면 주제 이모지나 이름 첫 글자를 보인다.

쓰지 않는다

  • 표식만으로 과목이나 그룹을 구분하지 않는다. 이름을 글자로 함께 쓴다.
  • 큰 크기로 쓰지 않는다. 행과 칩 안의 작은 표식이다.

종류#

SubjectMark · CategoryDot · GroupAvatar 종류
이름설명
SubjectMarkSubjectIcon을 작게 쓴다. 기본 18.
CategoryDot색 점. 기본 10.
GroupAvatar원. 기본 24. 사진, 이모지, 첫 글자 순서로 보인다.

크기#

SubjectMark · CategoryDot · GroupAvatar 크기
이름값설명
SubjectMark18
CategoryDot10
GroupAvatar24

상태#

📚
그림 없는 그룹
SubjectMark · CategoryDot · GroupAvatar 상태
상태모습과 동작
그림 없는 그룹primarySoft 원에 primary 이모지나 첫 글자.

사용 방법#

기본

기본
import { CategoryDot, GroupAvatar, SubjectMark } from '@/cal/ui';

<SubjectMark subject={subject} />
<CategoryDot category={category} />
<GroupAvatar cal={calendar} size={28} />

속성(props)#

SubjectMark

SubjectMark 속성
이름타입기본값필수설명
subjectSubject—필수과목(아이콘, 색, 사진을 가진 객체).
sizenumber18선택크기(px). 기본 18.

CategoryDot

CategoryDot 속성
이름타입기본값필수설명
categoryPick<CategoryInfo, 'color'>—필수카테고리(color를 가진 객체).
sizenumber10선택지름(px). 기본 10.

GroupAvatar

GroupAvatar 속성
이름타입기본값필수설명
calPick<CalendarInfo, 'name' | 'groupIconPath' | 'groupEmoji'>—필수그룹 캘린더(name, groupIconPath, groupEmoji).
sizenumber24선택지름(px). 기본 24.

치수와 토큰#

GroupAvatar 글자
이모지는 지름 × 0.55, 첫 글자는 × 0.45, Bold, primary
CategoryDot 색
과목 팔레트의 glyph 색

접근성#

  • 표식은 장식이다. GroupAvatar의 사진에는 캘린더 이름이 접근성 이름으로 붙는다. 이름 글자를 함께 쓴다.

잘한 예와 잘못한 예#

우우리 반
잘한 예이름을 옆에 글자로 쓴다.
잘못한 예점 색만으로 카테고리를 구분하지 않는다.
  • SubjectIcon: 과목을 나타내는 둥근 아이콘 타일이다. 과목마다 기호(Σ, Aa, 책, 건물, 잎, 지구, …)와 색이 정해져 있다.
  • Avatar: 사용자의 사진, 또는 닉네임 첫 글자를 브랜드 그라데이션 원 위에 보여 준다. NameLine은 닉네임, 공식 배지, @아이디를 한 줄로 놓는다.
  • ColorRow: 과목 팔레트 8색을 동그란 점으로 늘어놓고 하나를 고르는 컴포넌트다. 카테고리와 캘린더의 색을 정할 때 쓴다.