✨[Feat] api 수정 및 추가 사항 적용

[wynter24]

#️⃣연관된 이슈

#290 #291 #292

📝작업 내용

모임 목록 조회 페이지

• 신청 가능 필터 기존 로직 제거 및 api 사용
• 찜하기 딜레이 문제 확인 및 해결
  • 문제: 🐛 [Bug] 찜하기/찜 취소 버튼 클릭 후 UI 즉각 반영되지 않는 문제 #291
  • 해결: 🐛 [Bug] 찜하기/찜 취소 시 UI 반영이 두 번 클릭 후 이루어지는 문제 해결 #291 #292

모임 상세 페이지

• 리뷰 평균이 NaN일 경우, 0으로 표시
• 주최자: 모임 취소하기 후 모임 목록 캐시 무효화

미리보기 및 결과물

찜하기 클릭 시 UI 즉각 적용

default.mp4

💬리뷰 요구사항

낙관적 업데이트를 사용하여 찜하기 UI 딜레이 문제를 해결했어요!

문제 상황

찜하기 버튼을 클릭했을 때, 찜 상태가 즉시 반영되지 않고 두 번 클릭해야 상태가 반영됨.

원인 분석

1. 찜하기 요청 → 서버 데이터 변경 (시간 소요)
2. invalidateQueries 호출 → 캐시 무효화 → 서버에서 데이터 다시 가져옴 (추가 시간 소요)
3. UI가 새 데이터를 반영 (최종적으로 변경됨)

즉, 두 번 클릭이 필요했던 이유는 invalidateQueries로 캐시를 무효화한 후 네트워크 요청이 완료되기까지 시간이 걸리기 때문입니다.

해결

1. 낙관적 업데이트를 적용하여 UI와 캐시가 먼저 업데이트하고, 네트워크 요청의 결과를 기다리지 않고 즉시 반영합니다.
2. invalidateQueries는 캐시 무효화를 초래하여 UI와 데이터 동기화에 텀을 유발하므로 제거합니다.

관련 상세 내용은 위의 해결 이슈를 참고해주세요!

찜하기를 클릭했을 때 UI가 바로 반영되고 있습니다만... 로직이 맞는지는 확신이 없네요...ㅎㅎ

기타 참고사항

낙관적 업데이트(Optimistic Update)란?

낙관적 업데이트는 사용자가 요청을 보냈을 때, 서버 응답을 기다리지 않고 UI를 먼저 업데이트하는 방법이다.
사용자가 보는 화면을 즉각적으로 반영함으로써 더 빠르고 부드러운 사용자 경험(UX)을 제공한다.

💡 주요 동작 과정

1. 요청 전에 UI를 업데이트
   요청이 성공할 것이라고 가정(낙관적으로 생각)하고 UI 상태를 변경한다.
2. 요청 실패 시 복원
   요청이 실패하면 이전 상태로 돌아가도록 데이터를 복구한다.
3. 요청 성공 시 캐시 갱신
   서버에서 최신 데이터를 받아 캐시를 업데이트한다.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
bookco	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 5, 2025 4:33am

[cloud0406]

말씀해주신 해당 페이지 구조는 한 번 발표 이후 다시 확인해보겠습니다!

해당 페이지 로직이 바뀌던 안바뀌던 낙관적 업데이트 처리가 들어가는건 좋은 것 같아요!