Feat: MessagePage.tsx 채팅방 나가기 구현 및 파일 업로드 모달을 띄운다 - Githubissues

Kim-DaHam / Portfolly

Portfolly 프로젝트 리팩토링

1 stars 0 forks source link

Feat: MessagePage.tsx 채팅방 나가기 구현 및 파일 업로드 모달을 띄운다 #74

Closed Kim-DaHam closed 9 months ago

Kim-DaHam commented 9 months ago

개요

MessagePage.tsx 페이지에서 채팅방 나가기 기능을 구현합니다.
파일 첨부 시 MessageRoom.tsx에 업로드할 파일 목록을 띄웁니다.

작업사항

useMessageRoomDeleteMutation() 훅을 생성한다.
- MSW /message DELETE 핸들러를 작성한다.
- 채팅방을 나가면 해당 채팅방에 대한 정보가 담긴 쿼리가 삭제된다.
- 삭제되고 남은 채팅방 중 가장 최상단에 존재하는 채팅방으로 이동한다.
- 존재하는 모든 채팅방을 삭제하면 빈 채팅 화면이 나타난다.
파일 첨부 클릭 시 다중 파일 업로드가 가능하다.
파일 선택 시 MessageRoom.tsx 하단에 FileModal.tsx 컴포넌트가 나타난다.
- 모두 이미지 타입일 경우 이미지 썸네일이 나타난다.
- 그 외 다른 파일이거나 이미지, 문서 파일이 섞여있을 경우 파일 제목만 보여준다.
- 업로드 파일 목록 우측에 x 아이콘 클릭 시 개별 삭제할 수 있다.
- FileModal.tsx 우측 상단 x 아이콘 클릭 시 파일 업로드를 취소한다.

변경후

https://github.com/Kim-DaHam/Portfolly/assets/81691456/ad13f26a-447a-4961-a461-c38fda9b57b5