채팅방 버그 이슈 및 프로필 사진 변경 모달 UI 수정

[NEM-NE]

개요

• 채팅방을 새로 만들고 메세지를 보냈을 때 기존 채팅방이 있는 경우 중복되어 생성되는 버그
• 프로필 사진 input 숨기기
• user-service 구조 개선 제안

변경 로직

• 채팅방 버그는 방 생성 post 요청을 보낼 때 받는 응답에 있는 isNew 속성(새로 생성된 방인지 판단)을 기준으로 socket.emit을 보내줄지 안보내줄지 결정했습니다.
• profile 사진 변경 UI는 기존에 커스텀 체크박스를 만들어본 경험이 있어서 label를 이용하여 만들었습니다!

변경후

채팅 방 버그

2021-11-26.12.25.40.mov

프로필 사진 변경 UI 수정

2021-11-26.12.27.17.mov

기타

• user-service가 400줄 가까이 되어 단일 책임 원칙에 따라 기능별로 분리해봤습니다 혹시나 다른 의견이 있을까봐 적용은 안하고 별도 폴더로 분리해놨습니다.
• FE도 폴더 구조를 간략하게 생각해봤는데 아래 구조는 어떻게 생각하고 있는지 궁금합니다! (이미 바꾸기에는 늦었을까요? ㅠ)

src
│   index.tsx         
└─── api (공통 api)
└───components
                      └─── common
                      └─── room
                                       └───  api (Room에서만 사용되는 api )
                                       └───  modal
                                       └───  in-room-view
                                                            └─── index.tsx (해당 뷰 파일)
                                                            └─── in-room-user-box.tsx (in-room-view에 포함되어 있는 컴포넌트, 재사용성 있는 컴포넌트는 별도 폴더로 분리한다. )
                                                            └─── style.ts (내부에서 사용되는 뷰 스타일 분리)

 

[iHoHyeon]

커스텀훅을 사용해서 view의 역할에 더 알맞게 코드가 바뀐 것 같아서 아주 좋네요!

[iHoHyeon]

activity 부분을 따로 서비스로직을 빼주셨군요! class 명을 ActivityService라고 해야할 것 같아요

[iHoHyeon]

this.findUserByDocumentId 여기서 this는 UserService의 메서드라서 아마 수정이 필요하지 않을까요?

[iHoHyeon]

Users.findById 로 바꾸면 될 것 같습니다

[iHoHyeon]

수고하셨습니다! 코드가 깔끔해졌어요..!

1. userService 부분의 로직을 분리하는게 훨씬 가독성이 좋은 것 같아요! 처음에 저희가 싱글톤 클래스를 적용을 한 이유가 메서드에서 this를 사용하기 위함이었는데 그게 필요가 없도록 분리할 수 있다면 기능별로 나누어도 될 것 같습니다. 그리고 typescript에서 싱글톤과 네임스페이스 문법을 지원하는 것 같아서 찾아봤습니다 !
   https://radlohead.gitbook.io/typescript-deep-dive/main-1/singleton

2. 컴포넌트 폴더 구조는 감이 잘 안오네요.. 개인적으론 api는 어느 컴포넌트에서 쓰이냐보다 어떤 api를 호출하는지가 중요한 것 같아서 api 폴더에 api 라우터 네임별로 정리하는게 어떨가 생각하는데 어떠신가요?

3. 컴포넌트는 적어주신대로 도메인 별 view 파일들과 아닌 파일들을 분리하고 재사용이 되는 style들을 분리하는 형태로 하면 좋을 것 같아요 이 부분은 의견 들어보면서 다른 프로젝트 구조들도 더 참고해보겠습니다!