Feat: 채팅 페이지 UI

[YujinJI]

PR 타입

• [x] 기능 추가
• [ ] 기능 삭제
• [ ] 버그 수정
• [ ] 의존성, 환경 변수, 빌드 관련 코드 업데이트

변경 사항

• /chat 경로로 진입 시 채팅 페이지가 렌더링됩니다.
• 채팅 방 목록, 채팅 내용은 mock data를 사용했습니다.
• 화면 초기에는 채팅 방 목록만 나타나며, 특정 방 클릭 시 해당 방의 채팅 내용이 렌더링됩니다.
  • 현재는 useQuery를 통해 가져오고 있지만, useInfiniteQuery를 사용해 무한 스크롤을 생각하고 있습니다.
• 스크롤은 항상 아래에 위치하게 했습니다.

채팅 테스트 하는 방법

console에 아래와 같이 작성하면 됩니다.

// 현재 currentUser은 임의로 'userId1'로 할당되어있습니다.
// userId: 'userId1' -> 'me' 채팅 스타일
// userId: !'userId1' -> 'other' 채팅 스타일
// publishEvent(roomId, newMessage)
window.__LIVE_TEST__.publishEvent(2, {
    userId: 'userId1',
    nickName: 'name',
    profileUrl: 'https://picsum.photos/200',
    messageId: 'messageId',
    messageContent: '라이브 메세지 테스트입니다.',
    createdAt: '2023-11-14T10:10:10.100+09:00',
    isWelcome: false,
})

채팅을 보내는 테스트는 추가 commit에 포함되어있습니다.

• 현재 currentUserId는 임의로 'userId1'로 할당되어 있음.
• userId는 userId${roomId}로 설정해 놓았음.
  • 1번 방에서 채팅 보낼 시 'me' 채팅 스타일
  • 1번 외의 방에서 채팅 보낼 시 'other' 채팅 스타일