[FIX] 북마크 토글 API 중복 호출 방지

[kbh0218]

Closes #57

개요

링크 카드의 북마크 버튼을 빠르게 여러 번 누를 때 같은 링크에 대한 PATCH /api/v1/saved-links/{id}/bookmark 요청이 중복 호출되지 않도록 수정했습니다.

기존에는 CardLink의 useGuardedPress를 통해 짧은 시간 안의 연타는 일부 방지할 수 있었지만, 홈 화면과 저장 링크 전체보기에서는 void handleBookmark(id) 형태로 Promise가 전달되지 않아 API 요청이 700ms보다 오래 걸리는 경우 같은 링크에 대해 추가 토글 요청이 다시 발생할 수 있었습니다.

또한 화면별로 북마크 호출 방식이 달라 홈 화면, 저장 링크 전체보기, 폴더 상세 화면의 동작이 완전히 일관되지 않았습니다.

따라서 이번 작업에서는 버튼 단위의 짧은 입력 방지가 아니라 toggleBookmark context 레벨에서 링크 id별 요청 진행 상태를 관리하도록 변경했습니다. 같은 링크의 북마크 요청이 진행 중이면 추가 요청을 무시하고, 요청이 완료된 뒤 다시 누른 경우에만 새로운 토글 요청이 발생하도록 처리했습니다.

주요 구현 내용

• SavedLinksContext에 bookmarkingLinkIds 상태 추가
• toggleBookmark(id) 내부에 링크 id별 in-flight guard 추가
• 같은 링크의 북마크 요청이 진행 중이면 추가 PATCH /bookmark 요청이 나가지 않도록 처리
• 북마크 요청 시작 시 해당 링크 id를 bookmarkingLinkIds에 추가
• 북마크 요청 성공/실패 후 finally에서 해당 링크 id 제거
• 요청 중인 링크의 북마크 버튼만 비활성화하도록 CardLink에 bookmarkDisabled prop 추가
• 홈 화면, 저장 링크 전체보기, 폴더 상세 화면 모두 bookmarkingLinkIds.has(link.id) 기준으로 북마크 버튼 비활성화
• 홈 화면과 저장 링크 전체보기의 void handleBookmark(id) 호출을 Promise 반환 흐름으로 정리
• 폴더 상세 화면에도 북마크 변경 실패 alert 처리 추가
• optimistic update 실패 시 전체 링크 목록을 되돌리지 않고 해당 링크의 이전 isBookmarked 값만 rollback
• Network request failed 에러 메시지를 한글 안내 문구로 변환

파일별 역할

• context/saved-links-context.tsx: 북마크 요청 중인 링크 id 상태 관리, id별 중복 요청 방지, 실패 시 해당 링크만 rollback, 네트워크 실패 메시지 한글화
• components/ui/card-link.tsx: 북마크 버튼 전용 비활성화 prop 추가 및 요청 중인 북마크 아이콘 터치 차단
• app/(tabs)/(home)/index.tsx: 홈 화면 최근 저장 링크 북마크 버튼에 요청 중 상태 반영
• app/(tabs)/(home)/saved-links.tsx: 저장 링크 전체보기 북마크 버튼에 요청 중 상태 반영
• app/(tabs)/(folder)/[id].tsx: 폴더 상세 화면 북마크 버튼에 요청 중 상태 반영 및 실패 안내 처리

해결한 이슈 목록

• 링크 카드 북마크 버튼을 누를 때마다 API 요청이 발생하는 흐름 확인
• context/saved-links-context.tsx의 toggleBookmark 호출 흐름 확인
• PATCH /api/v1/saved-links/{id}/bookmark 요청이 연속 터치 시 여러 번 발생할 수 있는 구조 확인
• 같은 링크에 대해 북마크 요청이 진행 중일 때 추가 요청이 발생하지 않도록 처리
• 요청 중인 링크의 북마크 버튼을 비활성화하도록 처리
• optimistic update 실패 상황에서 기존 상태로 rollback 되도록 처리
• rollback 범위를 전체 링크 목록이 아닌 해당 링크의 북마크 상태로 제한
• 홈 화면의 최근 저장 링크 북마크 동작에 동일한 guard 적용
• 저장 링크 전체보기 화면의 북마크 동작에 동일한 guard 적용
• 폴더 상세 화면의 북마크 동작에 동일한 guard 적용
• 북마크 요청 실패 시 사용자에게 안내가 표시되도록 처리
• 네트워크 실패 시 영어 메시지 대신 한글 안내 문구가 표시되도록 처리
• Android 에뮬레이터에서 빠른 연속 터치 시 중복 API 요청이 발생하지 않는지 확인
• 실제 휴대폰 preview 빌드에서 빠른 연속 터치 시 중복 API 요청이 발생하지 않는지 확인

체크 사항

• 커밋/코딩 컨벤션에 맞게 작성
• 기존 홈/저장 링크 전체보기/폴더 상세 북마크 흐름 유지
• 같은 링크 요청 중 재요청 방지 방식으로 toggle API 특성 반영
• 다른 링크의 북마크 버튼은 독립적으로 동작하도록 유지

참고사항

• 단순 debounce나 버튼 guard만으로는 API 요청 시간이 700ms보다 길어질 때 중복 요청을 완전히 막기 어렵다고 판단했습니다.
• 이번 수정은 UI 버튼 단위가 아니라 toggleBookmark context 레벨에서 같은 링크 id의 중복 요청을 막는 방식입니다.
• 첫 번째 북마크 요청이 완료되기 전까지는 같은 링크의 북마크 버튼이 비활성화됩니다.
• 첫 번째 요청이 완료된 뒤 다시 누르는 것은 사용자의 새로운 의도로 보고 정상적으로 다음 토글 요청을 보냅니다.
• Network request failed는 네트워크 연결 상태를 확인한 뒤 다시 시도해주세요.로 표시되도록 변경했습니다.

Screenshots or Video

• 별도 화면 구조 변경 없음
• 요청 중인 북마크 아이콘만 일시적으로 비활성화됩니다.

-테스트를 위해 spring 서버를 일부러 껐습니다. 북마크가 일시적으로 비활성화 된 화면입니다.

• 다음과 같이 에러메시지를 띄웁니다.

[minsoo0506]

확인했습니다! 별도 코멘트를 남길만한 부분은 없는 것 같습니다. 고생하셨습니다 :)