# ItemRow

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

- 분류: Calendar 앱
- 가져오기: `import { ItemRow } from '@/cal/ui'`
- 코드 위치: `apps/calendar/src/cal/ui.tsx:133` (Mordy 저장소 60df633)
- 웹 페이지: https://developers.moring.co/tds/components/item-row

## 미리보기

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

## 언제 쓰는가

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

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

## 종류

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

## 크기

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

## 상태

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

## 사용 방법

### 기본

```tsx
import { ItemRow, useLookups } from '@/cal/ui';

const l = useLookups();

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

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `item` | `CalItem` | — | 필수 | 항목(할 일 또는 일정). |
| `l` | `ReturnType<typeof useLookups>` | — | 필수 | 과목·캘린더 조회 표(`useLookups()`의 결과). 색과 이름을 찾는 데 쓴다. |
| `onToggle` | `() => void` | — | 선택 | 체크 원을 눌렀을 때 호출된다(할 일). |
| `onPress` | `() => void` | — | 선택 | 행을 눌렀을 때 호출된다. |
| `showDate` | `string` | — | 선택 | 보조 줄 맨 앞에 쓸 날짜 글자. |
| `right` | `ReactNode` | — | 선택 | 오른쪽에 놓을 요소. |
| `inSubject` | `boolean` | — | 선택 | `true`이면 보조 줄에서 과목 이름을 뺀다(과목 화면 안에서). |

## 치수와 토큰

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

## 접근성

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

### 글자 색 대비

| 쓰임 | 글자색 | 바탕 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 기준 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 제목 | `text` | `bg` | 16.72:1 통과 | 16.78:1 통과 | 15.51:1 통과 | 12.24:1 통과 | 4.5:1 |
| 보조 줄 (13px) | `textSecondary` | `bg` | 4.13:1 미달 | 7.65:1 통과 | 4.69:1 통과 | 7.96:1 통과 | 4.5:1 |

## 잘한 예와 잘못한 예

- 잘한 예: 일정은 시간과 색 막대, 할 일은 체크로 구분한다.
- 잘못한 예: 긴 제목을 한 줄에 억지로 넣지 않는다. 두 줄까지 보이고 줄여진다.

## 함께 보는 컴포넌트

- [PlanRow](https://developers.moring.co/tds/components/plan-row.md): Mordy가 만든 학습 계획 한 줄이다. 체크 원, 제목, "Mordy" 표지, 푼 문제 진행률(막대)이 있다. 직접 옮긴 계획에는 자물쇠가 붙는다.
- [CheckCircle](https://developers.moring.co/tds/components/check-circle.md): 할 일을 완료로 바꾸는 동그란 체크 표시다. 비어 있다가 누르면 색이 채워지며 체크가 나타난다.
- [DdayChip](https://developers.moring.co/tds/components/dday-chip.md): 시험까지 남은 날을 "D-24"처럼 보여 주는 칩이다. 7일 이내면 빨간색, 그 외는 주색이다.