[feat] useOptimistic 기반 낙관적 업데이트 적용

[tnemnorivnelee]

개요

React Query 제거 이후 낙관적 업데이트가 제거된 상태다. React 19에 내장된 `useOptimistic` 훅을 활용하면 추가 라이브러리 없이 낙관적 업데이트를 구현할 수 있다.

즉각적인 피드백이 UX에 중요한 기능에 선택적으로 적용한다.

적용 대상

1순위: 좋아요 토글

• 클릭 즉시 카운트 및 상태 변경
• Server Action 실패 시 자동 롤백
• 현재: 클릭 → 서버 응답 대기 → UI 반영

2순위 (선택): 댓글 작성

• 작성 즉시 목록에 표시
• 실패 시 롤백 + 에러 메시지

작업 내용

• 좋아요 버튼 컴포넌트에 useOptimistic 적용
  • optimisticState: { liked: boolean, count: number }
  • toggleLikeAction 호출 전 즉시 UI 반영
  • 실패 시 자동 롤백 (useOptimistic 기본 동작)
• 빌드 확인 (yarn build)
• 좋아요 동작 확인 (즉시 반영 → 서버 응답 후 확정)

참고 사항

• React 19 useOptimistic 사용 (추가 설치 불필요)
• 기존 toggleLikeAction Server Action 그대로 재사용
• 서버 응답 실패 시 롤백은 React가 자동 처리

선행 작업

• [refactor] Middleware 기반 토큰 자동 재발급 구현 #133 Middleware 토큰 재발급 구현 완료 후 진행 권장