# [체크리스트] 메신저 화면 캡처 기능

> 관련 문서: [계획서](./SCR[계획]-screen-capture.md) | [맥락노트](./SCR[맥락]-screen-capture.md)

---

## 공정 상태

- 전체 진행률: **0%** (구현 전)
- 현재 단계: 대기

---

## 구현 체크리스트

### 0단계: 패키지 설치

- [ ] `package.json`에 `modern-screenshot` 추가 및 `npm install` 실행
- [ ] `import { toBlob } from 'modern-screenshot'` 정상 동작 확인

### 1단계: MessageInput ref 인터페이스 추가

- [ ] `MessageInputHandle` 인터페이스 정의 (`addFiles: (files: File[]) => void`)
- [ ] `MessageInput`을 `forwardRef<MessageInputHandle, MessageInputProps>`로 변경
- [ ] `useImperativeHandle`로 `addFiles` 노출 (`setPendingFiles` 호출)
- [ ] 기존 `MessageInput` 사용처에서 타입 에러 없음 확인

### 2단계: ScreenCapture 컴포넌트 신규 생성

- [ ] `ScreenCapture.tsx` 파일 생성 (`components/messenger/`)
- [ ] `createPortal`로 `document.body`에 오버레이 렌더링
- [ ] 오버레이 스타일 적용: `fixed inset-0 z-[99999] bg-black/35 cursor-crosshair`
- [ ] `mousedown`: 시작 좌표(`startX`, `startY`) 상태 저장
- [ ] `mousemove`: 선택 rect 좌표/크기 실시간 업데이트
- [ ] 선택 rect UI: `absolute border-2 border-blue-500 bg-blue-500/20`
- [ ] `mouseup`: `toBlob` 호출로 캡처 실행
- [ ] `File` 객체 생성 (`capture-${Date.now()}.png`, `image/png`)
- [ ] `onCapture(file)` 콜백 호출
- [ ] `Escape` 키 이벤트 리스너 등록 → `onCancel` 호출
- [ ] 컴포넌트 언마운트 시 이벤트 리스너 정리 (`useEffect` cleanup)

### 3단계: MessengerModal 캡처 모드 연결

- [ ] `isCaptureMode` 상태 추가 (`useState(false)`)
- [ ] `messageInputRef` 생성 (`useRef<MessageInputHandle>(null)`)
- [ ] `MessageInput`에 `ref={messageInputRef}` 연결
- [ ] 헤더에 Scissors 아이콘 버튼 추가 (lucide-react `Scissors`)
- [ ] 버튼 클릭 시 `setIsCaptureMode(true)` 호출
- [ ] 모달 루트 div에 `style={{ display: isCaptureMode ? 'none' : undefined }}` 적용
- [ ] `isCaptureMode === true`일 때 `ScreenCapture` 렌더링
- [ ] `onCapture`: `messageInputRef.current?.addFiles([file])` → `setIsCaptureMode(false)`
- [ ] `onCancel`: `setIsCaptureMode(false)`

### 4단계: 검증

- [ ] 캡처 버튼 클릭 시 모달이 숨겨지고 오버레이가 표시되는지 확인
- [ ] 드래그 중 파란 반투명 rect가 정확히 그려지는지 확인
- [ ] 캡처 완료 후 모달이 복원되고 이미지가 MessageInput 첨부 영역에 추가되는지 확인
- [ ] 캡처 전 기존에 첨부한 파일이 캡처 후에도 유지되는지 확인 (display:none 상태 보존)
- [ ] Escape 키로 취소 시 모달이 정상 복원되는지 확인
- [ ] 캡처된 이미지를 메시지로 전송했을 때 수신측에서 정상 표시되는지 확인
- [ ] 고해상도 디스플레이(Retina)에서 캡처 이미지 해상도가 충분한지 확인

### 5단계: 정리

- [ ] 린트 에러 없음 확인
- [ ] `console.log` 등 디버그 코드 제거 확인
- [ ] 이 체크리스트 완료 표시 업데이트

---

## 변경 이력

| 날짜 | 내용 |
|------|------|
| 2026-03-31 | 계획서, 맥락노트, 체크리스트 작성 완료 |
