[REFACTOR] 채팅 컴포넌트 구조 개선

[gominzip]

🚀 Issue Number

• resolve: [REFACTOR] 채팅 컴포넌트 구조 개선 #5

주요 작업

1. roomId(sessionKey)를 가져오는 로직 차이로 인해 Host와 Client로 분리되어 있던 채팅 컴포넌트: 향후에 채팅 유저가 다양해질 경우 컴포넌트를 매번 생성해야 되는 구조적 불편함 존재
2. reducer와 context의 혼재 : ChatContext 파일에서 관련 Reducer에 대한 정의도 함께 존재

고민과 해결 과정

context api와 커스텀 훅을 어떻게 조합하는 것이 좋을지에 대한 고민...
해결 과정에서 토스의 discussion글을 참고했습니다.

1. ChatSessionContext로 userType에 따라 sessionKey를 적합하게 패칭하도록 분리. => HostChatRoom과 ClientChatRoom을 ChatRoomContainer로 통합
2. Reducer 디렉토리에 chatUIReducer로 분리. 기존 dispatch를 컴포넌트에서 액션 스트링을 넣으며 조작하던 문제를 action handler로 메서드화 시키며 코드 가독성 개선
3. ChatList와 ChatItem을 분리. switch 문을 통해서 채팅 메세지 타입에 따른 컴포넌트가 명확하게 보이도록 개선

📸 Screenshots

🔜 추가 내용 (선택)