Conversation
src/components/chat/BottomMenu.tsx
Outdated
There was a problem hiding this comment.
제가 알기론 아마 책임분배의 원칙이라고 해서 함수뿐 아니라 파일도 전역적인 함수가 두개 이상 있으면 안된다..? 까진 아니고 분리하는게 좀 국룰인걸로 알아요!! 요건 폴더링하셔서 index.tsx랑 MenuItem.tsx로 나누시는것도 좋을 것 같습니다!
src/components/chat/BottomMenu.tsx
Outdated
| import CancelMatching from '@/assets/icon/cancelMatching.svg?react'; | ||
| import CloseMatching from '@/assets/icon/closeMatching.svg?react'; | ||
|
|
||
| const menuItems = [ |
src/components/chat/MessageInput.tsx
Outdated
|
|
||
| return ( | ||
| <> | ||
| <div className="h-[55px] flex items-center gap-2 p-4"> |
There was a problem hiding this comment.
아마 요 부분은 부모로부터 width가 종속되는거면 모바일 뷰에서는 양옆이 짤리는 느낌으로 보일 수도 있을 것 같아요..!! 확인 한번 해보시구 만약 그렇다면 NavBar 컴포넌트 스타일처럼 fixed나 absolute 사용해서 아예 루트에 종속되도록 해서 꽉 채우게 하는것도 좋을 것 같습니다!
| {showMenu ? <ChatX /> : <ChatPlus />} | ||
| </button> | ||
|
|
||
| <input |
There was a problem hiding this comment.
저희 바텀메뉴가 높이가 별로 크지 않아서 포커싱을 유지하는 상태로 바텀메뉴를 열수 있게 하는것도 괜찮을 것 같기도 하고... 요 부분은 다같이 말해봐도 좋겠네요!
src/components/chat/MessageList.tsx
Outdated
There was a problem hiding this comment.
채팅방 배열 나눠서 사람별로 구분하는거 어려우셨을 텐데 고생 많으셨습니다 😁👍
src/components/chat/MessageList.tsx
Outdated
| msg.senderName.trim() === '나' ? 'justify-end' : 'justify-start' | ||
| } mb-4`} | ||
| > | ||
| {msg.senderName.trim() === '나' ? ( |
There was a problem hiding this comment.
요 놈들도 따로 분리해주는 것도 좋겠네요!!
| ...(lastMessageTimeStamp && { lastMessageTimeStamp }), | ||
| }).toString(); | ||
|
|
||
| const response = await fetch(`/api/chat/${roomId}/messages?${queryParams}`, { |
There was a problem hiding this comment.
아직 웹소켓을 사용하지 않으신거라 충돌이 있을지는 잘 모르겠는데 웹소켓 로직 자체를 떠나서 애초에 fetch를 사용하는 거면 axios 활용해도 괜찮을 것 같다는 생각이 드네요...??
| <div className="sticky top-0 bg-[#011A11]"> | ||
| <BackButton /> | ||
| <div className="flex h-[48px] items-center"> | ||
| <h1 className="font-bold text-header">채팅방</h1> |
There was a problem hiding this comment.
요것도 국룰같은 느낌이긴한데 접근성 측면에서 h1 태그는 페이지당 하나만 있는게 좋다고 합니다!! 알아두시면 좋을 것 같아요 😁그래서 단순히 숫자를 표현하는 태그는 span도 좋을 것 같습니다요!!
디자이너분께 여쭤봤는데 모달 디자인 통일해서 사용해도 좋다고 하시네요!! |
1. 무슨 이유로 코드를 변경했나요?
매칭 채팅 UI를 구현하였습니다.
2. 어떤 위험이나 장애를 발견했나요?
3. 관련 스크린샷을 첨부해주세요.
4. 완료 사항
5. 추가 사항
src/components/chat/MessageList.tsx이 부분에서 현재 api 연결 로직 부분은 다 주석 처리 후mockMessage를 넣어서 현재 UI만 먼저 구현하였습니다. 그래서 보실때 주석 처리된 부분은 다음 api 연결 이슈에서 다시 수정할 예정이라 그냥 무시하시고 봐주세요😅 저 부분 코드가 길어보이지만 mock 삭제하고 api 연결 로직 부분 무시하시면 막상... 많이 없습니다 ㅎㅎ... 그리고src/libs/apis/chat/MessageList.api.ts이 부분도 무시하시고 봐주세요... 머지 후 api 연결 이슈에서 다시 수정할 예정입니당...그리고 새로 나온 모달 UI는 새로운 이슈파서 다 구현하도록 하겠습니다!