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

ItemRow

오늘과 할 일 목록의 한 줄이다. 할 일은 앞에 체크 원, 일정은 앞에 시간과 색 막대가 있다.

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

미리보기#

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

수학 숙제오후 7:30 · 수학
영어 단어 30개영어
16:0018:00영어학원영어 · 우리 반
할 일과 일정

언제 쓰는가#

쓴다

  • 이 컴포넌트는 Mordy Calendar 앱(apps/calendar/src/cal)에만 있다.
  • 할 일과 일정을 같은 목록에서 보여 줄 때 쓴다.
  • 보조 줄에는 날짜, 시간, 과목, 그룹 캘린더 이름이 가운뎃점으로 이어진다.

쓰지 않는다

  • Mordy 계획에는 쓰지 않는다. PlanRow를 쓴다.
  • 제목을 세 줄 이상 쓰지 않는다. 두 줄에서 줄인다.

종류#

ItemRow 종류
이름설명
할 일 (task)앞에 CheckCircle. 완료되면 제목에 취소선과 textTertiary.
일정 (event)앞에 시작 시간(없으면 "종일")과 끝 시간, 그 옆에 과목·캘린더 색 막대(3px).

크기#

ItemRow 크기
이름값설명
기본최소 높이 52, 위아래 11, 요소 사이 12시간 영역 폭 44.

상태#

영어 단어 30개
완료
ItemRow 상태
상태모습과 동작
완료취소선, textTertiary.
반복·그룹오른쪽에 반복(Repeat2) 또는 그룹(UsersRound) 아이콘 15px.
권한 없음그룹 일정을 고칠 권한이 없으면 체크가 disabled다.

사용 방법#

기본

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

const l = useLookups();

<ItemRow item={item} l={l} onToggle={() => toggle(item)} onPress={() => open(item)} />

속성(props)#

ItemRow 속성
이름타입기본값필수설명
itemCalItem—필수항목(할 일 또는 일정).
lReturnType<typeof useLookups>—필수과목·캘린더 조회 표(useLookups()의 결과). 색과 이름을 찾는 데 쓴다.
onToggle() => void—선택체크 원을 눌렀을 때 호출된다(할 일).
onPress() => void—선택행을 눌렀을 때 호출된다.
showDatestring—선택보조 줄 맨 앞에 쓸 날짜 글자.
rightReactNode—선택오른쪽에 놓을 요소.
inSubjectboolean—선택true이면 보조 줄에서 과목 이름을 뺀다(과목 화면 안에서).

치수와 토큰#

행
최소 높이 52, 위아래 11, 요소 사이 12
제목
body, 최대 2줄, 완료는 textTertiary + 취소선
보조 줄
small textSecondary, 1줄, 가운뎃점으로 이은 날짜·시간·과목·캘린더
일정 막대
폭 3, 모서리 2, 과목 색(없으면 캘린더 색)

접근성#

  • 행의 역할은 button, 이름은 제목이다. 체크 원은 따로 checkbox("{제목} 완료")다.
  • 완료는 취소선, 색, 체크로 함께 나타낸다.

글자 색 대비

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

ItemRow 글자 색 대비
쓰임글자색바탕대비기준
제목textbg16.72:1 통과16.78:1 통과15.51:1 통과12.24:1 통과4.5:1 (작은 글자)
보조 줄 (13px)textSecondarybg4.13:1 미달7.65:1 통과4.69:1 통과7.96:1 통과4.5:1 (작은 글자)

잘한 예와 잘못한 예#

16:0018:00영어학원
잘한 예일정은 시간과 색 막대, 할 일은 체크로 구분한다.
이번 학기 영어 단어장과 문법 정리 노트를 모두 복습하기
잘못한 예긴 제목을 한 줄에 억지로 넣지 않는다. 두 줄까지 보이고 줄여진다.
  • PlanRow: Mordy가 만든 학습 계획 한 줄이다. 체크 원, 제목, "Mordy" 표지, 푼 문제 진행률(막대)이 있다. 직접 옮긴 계획에는 자물쇠가 붙는다.
  • CheckCircle: 할 일을 완료로 바꾸는 동그란 체크 표시다. 비어 있다가 누르면 색이 채워지며 체크가 나타난다.
  • DdayChip: 시험까지 남은 날을 "D-24"처럼 보여 주는 칩이다. 7일 이내면 빨간색, 그 외는 주색이다.