# MSN[체크] 메신저 기능 개발

## 공정 상태: 90% (1차 구현 완료, 2차 테스트 대기)

---

## 구현 체크리스트

### Phase 1: DB & 백엔드 기반
- [x] `db/migrations/messenger_tables.sql` 작성 및 실행
- [x] `backend-node/src/types/messenger.ts` 타입 정의
- [x] `backend-node/src/services/messengerService.ts` 구현
  - [x] getRooms (내 채팅방 목록)
  - [x] createRoom (DM / 그룹 / 채널)
  - [x] getMessages (메시지 히스토리, 페이지네이션)
  - [x] sendMessage
  - [x] markAsRead
  - [x] getCompanyUsers (사용자 목록)
  - [x] addReaction / removeReaction
- [x] `backend-node/src/controllers/messengerController.ts` 구현
- [x] `backend-node/src/routes/messengerRoutes.ts` 구현
- [x] `backend-node/src/config/multerMessengerConfig.ts` 구현 (파일 업로드)
- [x] `backend-node/src/socket/messengerSocket.ts` 구현
  - [x] JWT 인증 미들웨어
  - [x] join_rooms 이벤트
  - [x] send_message 이벤트
  - [x] message_read 이벤트
  - [x] typing_start / typing_stop 이벤트
  - [x] add_reaction 이벤트
  - [x] 온라인 상태 관리 (connect / disconnect)
- [x] `backend-node/src/app.ts` Socket.IO 초기화 및 라우트 등록

### Phase 2: 프론트엔드 컴포넌트
- [x] `frontend/contexts/MessengerContext.tsx` (전역 상태)
- [x] `frontend/hooks/useMessengerSocket.ts` (Socket.IO 연결 관리)
- [x] `frontend/hooks/useMessenger.ts` (채팅방/메시지 React Query)
- [x] `frontend/components/messenger/UserAvatar.tsx` (프로필 이미지 / 이름 첫 글자)
- [x] `frontend/components/messenger/MessengerFAB.tsx` (플로팅 버튼 + 배지)
- [x] `frontend/components/messenger/MessengerModal.tsx` (메인 모달 컨테이너)
- [x] `frontend/components/messenger/RoomList.tsx` (채팅방 목록 + DM/그룹/채널 탭)
- [x] `frontend/components/messenger/ChatPanel.tsx` (채팅 영역)
- [x] `frontend/components/messenger/MessageItem.tsx` (메시지 + 리액션 + 스레드 버튼)
- [x] `frontend/components/messenger/MessageInput.tsx` (입력창 + 파일 + 이모지 + 멘션)
- [x] `frontend/components/messenger/NewRoomModal.tsx` (방 생성 모달)
- [x] `frontend/components/messenger/MessengerSettings.tsx` (토스트 알림 on/off 등)
- [x] `frontend/app/(main)/layout.tsx` MessengerProvider + MessengerFAB 추가

---

## 검증 체크리스트

### 기본 동작
- [ ] FAB 버튼이 모든 페이지에서 우측 하단 고정 (z-index 최상위)
- [ ] FAB 클릭 시 모달 열기/닫기 동작
- [ ] 모달 크기: 좌측 240px + 우측 480px

### 채팅
- [ ] DM 방 생성 (사용자 선택 → 방 생성)
- [ ] 그룹 방 생성 (여러 사용자 선택 → 방 이름 입력 → 생성)
- [ ] 채널 방 생성
- [ ] 메시지 전송 및 실시간 수신 (Socket.IO)
- [ ] 메시지 히스토리 로드 (스크롤 시 이전 메시지)

### 부가 기능
- [ ] 파일 첨부 업로드/다운로드
- [ ] 이모지 리액션 추가/제거
- [ ] 멘션(@) 자동완성 드롭다운
- [ ] 스레드 답글
- [ ] 타이핑 표시 ("김민호님이 입력 중...")

### 알림
- [ ] 읽지 않은 메시지 수 FAB 배지 표시
- [ ] 다른 방 메시지 수신 시 토스트 알림
- [ ] 토스트 알림 on/off 토글 동작
- [ ] 토스트 설정값 localStorage 저장/복원

### 프로필
- [ ] photo 있는 사용자: 원형 이미지 표시
- [ ] photo 없는 사용자: 이름 첫 글자 원형 아바타 표시

### 멀티테넌시
- [ ] 다른 company_code 사용자 목록에 미노출
- [ ] 다른 회사 채팅방 접근 불가

---

## 정리

- [ ] DB 체크포인트 파일 삭제 (2차 테스트 완료 후)

---

## 변경 이력

| 날짜 | 내용 |
|------|------|
| 2026-03-30 | 최초 설계 확정 |
