feat: 리뷰 수정 구현

[imdaxsz]

📝 개요

리뷰 수정 구현

test.mp4

리뷰 수정 모달에서 별점 수정

test2.mp4

(현재 서버 쪽 문제로 리뷰 수정 시에도 리뷰 목록에 반영되지 않습니다.)

🚀 변경사항

• Review 공통 타입에 리뷰 아이디, 별점이 추가되었습니다.

declare interface Review {
  reviewId: number;
  name: string;
  score: number;
   ...
}

review mock data에도 전부 추가해주었습니다.

• useEvaluation 파일에서 별점 조회 부분을 useGetEvaluation 파일로 분리하였습니다. 현재 mutate가 ReviewMoreButton 안에서 일어나고 있어서 같이 두니까 마이페이지에서 평점 조회가 리뷰 개수만큼 일어나게 되어서 분리하게 되었습니다.

• ~요로 끝나는 메시지가 더 부드럽게 느껴진다고 하셨던 것 같아서 신고 snackbar 메시지도 살짝 바꿨습니다.

• 평점 -> 별점 통일

🔗 관련 이슈

#308 #286

➕ 기타

사용자가 작성한 리뷰가 있고 별점을 수정하게 될 때 만약 사용자의 이 리뷰가 최신 리뷰 목록, 랜딩 페이지 최신 리뷰 한 개, 애니 리뷰 목록, 회원 리뷰 목록에 모두 보여지고 있다고 하면 이 4가지 조회 쿼리를 전부 refetch 해야 하는 게 맞는지 궁금하네요.
현재는 애니 상세페이지에서 별점 수정 시 새로고침을 해야 리뷰 목록에 있는 내 리뷰의 별점에도 반영이 됩니다.

➡️ 사용자가 작성한 리뷰가 있는 경우에만 리뷰 목록 조회를 refetch 하도록 코드 추가했습니다.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	fafb1f6
Status:	✅  Deploy successful!
Preview URL:	https://3a8f8773.oduck-client.pages.dev
Branch Preview URL:	https://feature-308.oduck-client.pages.dev

View logs

[presentKey]

회원 리뷰 목록이 프로필 페이지 리뷰 목록인가요?

리뷰 작성 또는 수정시 영향받는 부분이

1. 랜딩페이지 최신 리뷰가 달린 최상단 캐러셀
2. 랜딩 페이지 최근 한줄리뷰
3. 최근 한줄리뷰 페이지
4. 애니 디테일 페이지 리뷰 목록
5. 프로필 페이지 리뷰 목록 + 프로필 페이지 북마크 목록(별점 수정 시)

의도대로 가려면 전부 refetch 일어나는게 맞는거 같긴해요

[imdaxsz]

회원 리뷰 목록이 프로필 페이지 리뷰 목록인가요?

리뷰 작성 또는 수정시 영향받는 부분이

1. 랜딩페이지 최신 리뷰가 달린 최상단 캐러셀
2. 랜딩 페이지 최근 한줄리뷰
3. 최근 한줄리뷰 페이지
4. 애니 디테일 페이지 리뷰 목록
5. 프로필 페이지 리뷰 목록 + 프로필 페이지 북마크 목록(별점 수정 시)

의도대로 가려면 전부 refetch 일어나는게 맞는거 같긴해요

네 맞습니다 아까 디코에서도 말씀드렸는데

마이페이지 한줄리뷰에 저 파란 별점이 내가 남긴 별점이라고 하더라구요.
흠 refetch가 많이 일어나네요...

[chanwukim]

즉시 refetch말고 캐싱을 무효화 시킨후, 해당 화면으로 이동해야 refetch가 일어나는 방법은 없을까영

[imdaxsz]

즉시 refetch말고 캐싱을 무효화 시킨후, 해당 화면으로 이동해야 refetch가 일어나는 방법은 없을까영

지금 그렇게 되고 있습니다! 저도 하면서 알게 되었는데 invalidateQueries를 사용하니까 무효화시킨 query가 현재 페이지에서 사용되는 query라면 바로 refetch(재요청)이 일어나고, 다른 페이지에 사용되는 query라면 해당 페이지로 이동했을 때 재요청을 합니다.
애니 상세페이지에서 별점 수정을 하면 애니 상세페이지 내에서 쓰이는 query들만 즉시 refetch가 됩니다.

test.mp4

위와 같이 이전 query data가 존재하는 경우(최근에 내 프로필에 접속했을 경우)에는 프로필 리뷰/입덕 애니 관련 query가 무효화가 되면서 0 숫자가 회색으로 변하고, 해당 페이지에 접속했을 때 재요청이 일어나도록 하고 있네요. 네트워크 탭에서도 페이지 이동 후에 재요청이 일어나는 걸 확인할 수 있습니다!