feat: 채팅 디자인

[dasosann]

No description provided.

[qodo-code-review]

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

[gemini-code-assist]

Code Review

이번 풀 리퀘스트는 채팅 목록 및 개별 채팅방 기능을 구현하기 위해 새로운 컴포넌트와 데이터 페칭 훅을 도입했습니다. 전반적으로 기능 구현이 잘 이루어졌으나, Next.js 16 및 React 19의 최신 명세에 따른 개선이 필요합니다. 특히 params의 비동기 처리와 React Compiler를 고려한 useMemo 최적화, 그리고 웹 표준 및 접근성을 준수하기 위한 폼 구조 개선이 주요 피드백으로 제시되었습니다. 또한 프로덕션 코드 내 디버깅 로그 제거와 데이터 부재 시 mock 데이터 노출 로직에 대한 수정이 권장됩니다.

[dasosann]

@gemini-code-assist review

[gemini-code-assist]

Code Review

이번 PR은 Next.js 16 및 React 19를 기반으로 STOMP 소켓 통신을 통한 실시간 채팅 시스템을 구축합니다. 채팅 목록, 채팅방 UI 및 소켓 상태 관리를 위한 로직이 포함되었습니다. 리뷰 결과, Next.js 16의 비동기 params 처리 미비와 채팅방 내 정의되지 않은 변수(allMessages) 사용으로 인한 런타임 오류가 발견되었습니다. 또한 하드코딩된 데이터의 처리, 불필요한 console.log 제거, React 19 컴파일러를 고려한 useMemo 최적화 및 스타일링 유틸리티(cn) 활용에 대한 개선이 필요합니다.

[dasosann]

@gemini-code-assist review

[gemini-code-assist]

안녕하세요! 채팅 디자인 및 관련 기능 구현에 대한 코드 리뷰를 진행하겠습니다.

🔍 주요 검토 내용

1. 채팅방 목록 (ScreenChatList.tsx)

   • useChatRooms 훅을 통해 데이터를 가져오고, useMemo를 사용하여 UI 상태로 변환하는 방식이 적절합니다.
   • formatChatTime 함수는 가독성이 좋으며, 다양한 시간 단위를 잘 처리하고 있습니다.

2. 채팅방 (ScreenChatRoom.tsx)

   • useChatRoomSocket을 통해 실시간 메시지 수신과 전송이 잘 구현되었습니다.
   • messages 변수에서 API 히스토리와 소켓 메시지를 병합하는 로직이 중복 없이 잘 처리되어 있습니다.
   • PartnerProfileModal을 통해 상대방 프로필을 확인하는 UI가 사용자 경험 측면에서 좋습니다.

3. 상태 관리 및 초기화

   • ChatSocketInitializer를 통해 앱 전역에서 소켓 연결을 관리하는 방식은 적절합니다.
   • zustand를 활용한 useChatSocketStore 구현도 깔끔합니다.

💡 개선 제안

• 성능 최적화: ScreenChatRoom.tsx의 messages 변수에서 combined.some을 사용하여 중복을 제거하고 있는데, 메시지 개수가 많아질 경우 성능 저하가 발생할 수 있습니다. 메시지 ID를 키로 하는 Map이나 Set을 사용하여 중복 제거 로직을 최적화하는 것을 고려해 보세요.
• 에러 핸들링: ScreenChatRoom.tsx에서 partner 정보가 없을 경우를 대비한 렌더링 처리가 되어 있으나, 데이터 로딩 실패 시 사용자에게 알림을 주는 에러 UI를 추가하면 더 견고한 앱이 될 것입니다.
• 타입 안전성: ScreenChatRoom.tsx 내부에 정의된 partner 더미 데이터는 실제 데이터가 들어오면 제거하고, useChatRooms나 다른 API를 통해 가져온 데이터를 사용하도록 수정해야 합니다.

전반적으로 기능 구현이 잘 되어 있으며, 코드 구조도 체계적입니다. 수고하셨습니다!

[dasosann]

@gemini-code-assist review

[gemini-code-assist]

Code Review

이번 풀 리퀘스트는 채팅 기능 구현을 위한 소켓 초기화, 채팅방 목록 및 상세 화면 구성, 그리고 매칭 리스트와 프로필 모달 등 채팅 관련 UI와 로직을 전반적으로 추가했습니다. 전반적으로 React 19와 Next.js 15+의 비동기 API 처리 방식을 잘 따르고 있으나, 일부 컴포넌트에서 하드코딩된 더미 데이터 사용, 디버깅용 로그 잔재, 그리고 나이 계산 로직의 유틸리티 분리 필요성 등 개선할 점이 발견되었습니다. 특히 채팅방 상세 화면의 하드코딩된 파트너 정보와 날짜 구분선 로직은 실제 데이터 기반으로 수정이 필요합니다.

[gemini-code-assist]

updateFavorite 변이(mutation) 호출 시 historyId 대신 memberId를 사용하고 있습니다. 백엔드 API 명세에 따라 매칭 이력 ID(historyId)가 필요한 경우, 잘못된 데이터가 업데이트될 수 있습니다.