vexplor_dev/docs/yc/MSN[체크]-메신저기능.md

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

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

---

구현 체크리스트

Phase 1: DB & 백엔드 기반

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

Phase 2: 프론트엔드 컴포넌트

• frontend/contexts/MessengerContext.tsx (전역 상태)
• frontend/hooks/useMessengerSocket.ts (Socket.IO 연결 관리)
• frontend/hooks/useMessenger.ts (채팅방/메시지 React Query)
• frontend/components/messenger/UserAvatar.tsx (프로필 이미지 / 이름 첫 글자)
• frontend/components/messenger/MessengerFAB.tsx (플로팅 버튼 + 배지)
• frontend/components/messenger/MessengerModal.tsx (메인 모달 컨테이너)
• frontend/components/messenger/RoomList.tsx (채팅방 목록 + DM/그룹/채널 탭)
• frontend/components/messenger/ChatPanel.tsx (채팅 영역)
• frontend/components/messenger/MessageItem.tsx (메시지 + 리액션 + 스레드 버튼)
• frontend/components/messenger/MessageInput.tsx (입력창 + 파일 + 이모지 + 멘션)
• frontend/components/messenger/NewRoomModal.tsx (방 생성 모달)
• frontend/components/messenger/MessengerSettings.tsx (토스트 알림 on/off 등)
• 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	최초 설계 확정