jskim/vexplor_dev

Files

syc0123 b08d337a33 [RAPID] PCC: SCR

2026-04-01 12:20:41 +09:00

3.2 KiB

Raw Blame History

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

관련 문서: 계획서 | 맥락노트

공정 상태

전체 진행률: 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	계획서, 맥락노트, 체크리스트 작성 완료