[Feat] 모각코 상세 게시글 페이지 API 연동

[js43o]

설명

• [FEATURE] 모각코 게시글 참석/참석 취소 구현 #154
• [FEATURE] 모각코 게시글 삭제 구현 #155
• 모각코 상세 게시글 페이지에서 사용되는 기능에 대한 API를 작성하고 연동합니다.

완료한 기능 명세

• 모각코 주최자일 경우 - 삭제
• 모각코 미참여자일 경우 - 참석하기
• 모각코 참여자일 경우 - 참석 취소

동작 영상

bandicam.2023-11-24.03-53-35-259.mp4

고민한 내용

• react-query를 사용하면 서버 상태를 마치 전역 상태처럼 어떤 컴포넌트에서든 자유롭게 불러올 수 있는데, 이 경우 서버 상태에 대하여 부모-자식 컴포넌트 간 props 전달이 굳이 필요할지, 필요하다면 그 중 어떤 값을 전달해야 할지 고민이 되었습니다.
  • 각자의 컴포넌트 안에서 useQuery로 불러오기: 성능에 대한 걱정도 있지만 중복 코드, 컴포넌트가 커지는 문제가 있음.
  • 최상위 컴포넌트에서 불러온 후 props로 내려주기: 기존 리액트식 상태 관리 문제처럼 props drilling이 발생함.

리뷰 요청 사항

• 모각코 주최자의 '수정' 버튼은 아직 구현하지 않았습니다. => 게시글 작성 페이지로 게시글 id와 함께 리다이렉트 시킨 후, 거기서 정보를 불러와야 할 것 같음
• 모각코 글을 작성할 때 참여자 목록으로 본인(작성자)이 자동으로 포함되는 과정이 필요할 것 같음
• 실제 배포 서버에서는 잘 동작하지 않습니다. 원인 찾는 중... => GET /member/me API가 작동하지 않음. 현재 로그인한 사용자 정보를 가져오기 위해 필요함

[ttaerrim]

p2; join을 했을 때는 1. 참가하기 / 참가 취소, 채팅 버튼 status 2. 사람 count가 변경되어야 하고 이 정보는 1. /mogaco/:id/participants 2. /mogaco/:id 요청을 했을 때 오겠네요. (맞나요?) 그렇다면 invalidate 해야 할 쿼리 키는 participants뿐만이 아닐 수도 있어요.
�queryKey를 복수 개 써서 invalidate 할 수도 있겠죠? 그렇지만 보통 쿼리 키를 작성할 때 ['todo', 'list'], ['todo', 'list', { page:1, 뭐시기: 2}], ['todo', 'detail'] 이런 식으로 관리하는데 ['todo']라는 키만 invalidate 한다면 제가 앞서 작성한 세 가지의 쿼리 키를 가지고 있는 쿼리는 전부 invalidate 되어요!! 이 점을 잘 고려해서 작성하면 좋을 것 같습니다~!!!!

이해가 되셨는지 모르겠네요 ㅠㅠ https://www.zigae.com/react-query-key/ 이 글이 쿼리 키 이해하는 데에 참 좋습니다

[ttaerrim]

pr 보다가 써보았어요 ,, ㅎㅎ

[js43o]

와 감사합니다!!😭 설명이랑 자료 참고해서 계속 작성해보겠습니다!