지난 2단계에서 카카오톡 선물하기의 하트 버튼에 낙관적 업데이트를 적용하였었습니다.

북마크 기능도 이와 같은 낙관적 업데이트를 적용해야

• 즉시반영
• 사용자 경험 향상
• 자연스러운 인터랙션

을 반영할 수 있을 것입니다.

단계를 주석으로 표현하자면

const handleClick = async (e: React.MouseEvent) => {
  e.stopPropagation();
  
  const newBookmarkState = !localBookmarkState;
  
  try {
    // API 응답 전에 먼저 UI 업데이트
    setLocalBookmarkState(newBookmarkState);
    
    // 2. 실제 API 호출
    await bookmarkMutation.mutateAsync({
      quizId,
      isBookmarked: newBookmarkState,
    });
    
    // 3. 성공 시 부모 컴포넌트에 알림
    onBookmarkChange?.(quizId, newBookmarkState);
    
  } catch (error) {
    // 4. 실패 시 롤백
    setLocalBookmarkState(isBookmarked);
    console.error('북마크 업데이트 실패:', error);
  }
};

먼저 로컬의 이미지를 변경시켜 줍니다.

이후 실제 api를 호출하고, 실패시 롤백합니다.

따로 api 호출에 실패했을 때, 어느 정도 로컬 ui를 유지하는 기법은 제외했습니다.

대신 이미지가 작아졌다 커지는, 튕기는 것 같은 효과가 있기 때문에, 굳이 타임까지 주는 기법은 적용하지 않았습니다.