# PlanRow

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

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

## 미리보기

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

## 언제 쓰는가

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

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

## 종류

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

## 크기

| 이름 | 값 | 설명 |
| --- | --- | --- |
| 기본 | 최소 높이 52 | `ItemRow`와 같다. |

## 상태

| 상태 | 모습과 동작 |
| --- | --- |
| 진행 중 | 기본 모습이다. |
| 완료 | 기본 모습이다. |
| 직접 옮김 | 오른쪽에 자물쇠(14px). 다시 계산해도 그 날짜를 유지한다. |

## 사용 방법

### 기본

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

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

### 속성(props)

| 이름 | 타입 | 기본값 | 필수 | 설명 |
| --- | --- | --- | --- | --- |
| `plan` | `PlanItem` | — | 필수 | 계획 항목. |
| `l` | `ReturnType<typeof useLookups>` | — | 필수 | 과목·캘린더 조회 표(`useLookups()`의 결과). |
| `onToggle` | `() => void` | — | 필수 | 체크 원을 눌렀을 때 호출된다. |
| `onPress` | `() => void` | — | 필수 | 행을 눌렀을 때 호출된다(계획 시트가 열린다). |
| `showDate` | `string` | — | 선택 | 보조 줄 맨 앞에 쓸 날짜 글자. |
| `inSubject` | `boolean` | — | 선택 | `true`이면 제목 앞의 "과목 · "을 뺀다. |
| `tag` | `boolean` | `true` | 선택 | `false`이면 "Mordy" 표지를 숨긴다. 기본 `true`. |

## 치수와 토큰

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

## 접근성

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

### 글자 색 대비

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

## 잘한 예와 잘못한 예

- 잘한 예: 진행률을 글자와 막대로 함께 보인다.
- 잘못한 예: "Mordy" 표지를 "AI"로 바꾸지 않는다. 이 계획은 규칙 기반 계산이다.

## 함께 보는 컴포넌트

- [ItemRow](https://developers.moring.co/tds/components/item-row.md): 오늘과 할 일 목록의 한 줄이다. 할 일은 앞에 체크 원, 일정은 앞에 시간과 색 막대가 있다.
- [MordyTag](https://developers.moring.co/tds/components/mordy-tag.md): "Mordy"라고 적힌 작은 표지다. Mordy가 만든 계획 항목임을 알린다. 이 계획은 실제 학습 기록으로 계산한 규칙 기반이라 AI라고 부르지 않는다.
- [CheckCircle](https://developers.moring.co/tds/components/check-circle.md): 할 일을 완료로 바꾸는 동그란 체크 표시다. 비어 있다가 누르면 색이 채워지며 체크가 나타난다.
- [ProgressBar](https://developers.moring.co/tds/components/progress-bar.md): 진행률을 가로 막대로 보여 준다. 채운 부분은 기본으로 서비스 주색 그라데이션이다.