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

PlanRow

Mordy가 만든 학습 계획 한 줄이다. 체크 원, 제목, "Mordy" 표지, 푼 문제 진행률(막대)이 있다. 직접 옮긴 계획에는 자물쇠가 붙는다.

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

미리보기#

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

함수 취약 개념Mordy3/8문제 · 약 12분
문학 기출 18일차Mordy20/20문제 · Mordy에서 풀어서 완료
영어 어휘Mordy0/30문제
진행 중, 완료, 직접 옮김

언제 쓰는가#

쓴다

  • 이 컴포넌트는 Mordy Calendar 앱(apps/calendar/src/cal)에만 있다.
  • Mordy 시험 계획에서 온 항목을 보여 줄 때 쓴다. 풀면 계획이 자동으로 체크된다.
  • "Mordy" 표지는 이 계획이 AI가 아니라 Mordy의 규칙 기반 계산이라는 뜻이다.

쓰지 않는다

  • 사용자가 직접 만든 할 일에는 쓰지 않는다. ItemRow를 쓴다.
  • "Mordy" 표지를 "AI"로 바꾸지 않는다.

종류#

PlanRow 종류
이름설명
진행 중푼 문제가 있으면 제목 아래에 4px 진행 막대(과목 색).
완료체크, 취소선. Mordy에서 풀어서 완료했으면 "Mordy에서 풀어서 완료" 보조 글.
건너뜀취소선, "건너뜀".

크기#

PlanRow 크기
이름값설명
기본최소 높이 52ItemRow와 같다.

상태#

함수 취약 개념Mordy3/8문제 · 약 12분
진행 중
함수 취약 개념Mordy8/8문제 · Mordy에서 풀어서 완료
완료
함수 취약 개념Mordy0/8문제
직접 옮김
PlanRow 상태
상태모습과 동작
진행 중기본 모습이다.
완료기본 모습이다.
직접 옮김오른쪽에 자물쇠(14px). 다시 계산해도 그 날짜를 유지한다.

사용 방법#

기본

기본
import { PlanRow, useLookups } from '@/cal/ui';

<PlanRow plan={plan} l={useLookups()} onToggle={() => setStatus(plan)} onPress={() => openPlan(plan, today)} />

속성(props)#

PlanRow 속성
이름타입기본값필수설명
planPlanItem—필수계획 항목.
lReturnType<typeof useLookups>—필수과목·캘린더 조회 표(useLookups()의 결과).
onToggle() => void—필수체크 원을 눌렀을 때 호출된다.
onPress() => void—필수행을 눌렀을 때 호출된다(계획 시트가 열린다).
showDatestring—선택보조 줄 맨 앞에 쓸 날짜 글자.
inSubjectboolean—선택true이면 제목 앞의 "과목 · "을 뺀다.
tagbooleantrue선택false이면 "Mordy" 표지를 숨긴다. 기본 true.

치수와 토큰#

표지
MordyTag small(높이 17)
진행 막대
높이 4, 모서리 2, track 바탕, 과목 색 채움, 위 6
보조 줄
"n/m문제 · 약 n분 · Mordy에서 풀어서 완료 · 건너뜀"

접근성#

  • 행은 button, 체크 원은 checkbox다. 자물쇠는 이름 "직접 옮긴 계획"을 가진다.
  • 진행률은 글자("3/8문제")와 막대로 함께 알린다.

글자 색 대비

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

PlanRow 글자 색 대비
쓰임글자색바탕대비기준
보조 줄 (13px)textSecondarybg4.13:1 미달7.65:1 통과4.69:1 통과7.96:1 통과4.5:1 (작은 글자)

잘한 예와 잘못한 예#

함수 취약 개념Mordy3/8문제 · 약 12분
잘한 예진행률을 글자와 막대로 함께 보인다.
AI 계획 표지
잘못한 예"Mordy" 표지를 "AI"로 바꾸지 않는다. 이 계획은 규칙 기반 계산이다.
  • ItemRow: 오늘과 할 일 목록의 한 줄이다. 할 일은 앞에 체크 원, 일정은 앞에 시간과 색 막대가 있다.
  • MordyTag: "Mordy"라고 적힌 작은 표지다. Mordy가 만든 계획 항목임을 알린다. 이 계획은 실제 학습 기록으로 계산한 규칙 기반이라 AI라고 부르지 않는다.
  • CheckCircle: 할 일을 완료로 바꾸는 동그란 체크 표시다. 비어 있다가 누르면 색이 채워지며 체크가 나타난다.
  • ProgressBar: 진행률을 가로 막대로 보여 준다. 채운 부분은 기본으로 서비스 주색 그라데이션이다.