[FEATURE] 저장 링크 API 연동 및 제목 수정 기능 적용#46
Conversation
sunm2n
left a comment
sunm2n
left a comment
There was a problem hiding this comment.
제목 수정 모달 UI가 두 파일에 완전 중복
index.tsx와 saved-links.tsx에 동일한 Modal JSX, renameStyles, handleTitleCancel, handleTitleConfirm, openTitleModal, titleSubmitDisabled 로직이 똑같아 보입니다.
별도의 TitleEditModal 컴포넌트 또는 useTitleEdit 훅으로 추출하는 것을 제안드립니다.
// components/ui/title-edit-modal.tsx 로 추출 권장
interface TitleEditModalProps {
editingLink: SavedLink | null;
onConfirm: (id: number, title: string) => Promise<void>;
onClose: () => void;
}
|
전체적으로 모달 중복을 제외하면은 잘 짜여진 거 같습니다! 모달 중복만 확인하시고 머지해도 문제 없을 거 같습니다 수고하셨습니다! |
| params.set('bookmarked', String(query.bookmarked)); | ||
| } | ||
|
|
||
| if (query.cursor) { |
There was a problem hiding this comment.
다른 필드는 != null로 체크하면서 cursor만 falsy check를 사용합니다.
일관성을 위해 if (query.cursor != null)로 통일 하는 것이 어떨가 합니다.
// 현재
if (query.cursor) { ... }
// 권장
if (query.cursor != null) { ... }
There was a problem hiding this comment.
반영했습니다!
categoryId, bookmarked, size와 일관되도록 cursor 조건도 query.cursor != null로 변경했습니다.
반영했습니다! 중복되던 제목 수정 모달 UI와 상태/검증 로직을 기존 동작인 입력 focus, 저장 중 닫기 방지, 빈 값/500자 초과/동일 제목 저장 비활성화, 실패 Alert 흐름은 유지했습니다. |
2 participants
Closes #45
개요
safe/caution 검사 결과 화면과 저장 링크 목록 화면에서 기존 mock 기반 저장 링크 흐름을 실제 백엔드 Saved Link API 연동 흐름으로 교체했습니다.
분석 완료 후 전달받은
analysisId를 기준으로POST /api/v1/saved-links를 호출해 링크를 저장하고, 저장 링크 목록은GET /api/v1/saved-links응답의items,hasNext,nextCursor구조를 기준으로 표시하도록 정리했습니다.또한 저장 링크 카드의 더보기 메뉴에서 기존
북마크 추가항목을제목 수정으로 변경하고, 제목 수정 모달을 통해PATCH /api/v1/saved-links/{id}/titleAPI와 연동했습니다. 북마크 변경과 링크 삭제 역시 각각PATCH /api/v1/saved-links/{id}/bookmark,DELETE /api/v1/saved-links/{id}API 호출 결과를 화면 상태에 반영하도록 변경했습니다.주요 구현 내용
api/saved-links.ts추가POST /api/v1/saved-links저장 API 연동GET /api/v1/saved-links목록 조회 API 연동DELETE /api/v1/saved-links/{id}삭제 API 연동PATCH /api/v1/saved-links/{id}/bookmark북마크 변경 API 연동PATCH /api/v1/saved-links/{id}/title제목 수정 API 연동items,hasNext,nextCursor상태 반영analysisId,categoryId,title,description구조로 저장 요청Toast컴포넌트에placement,topOffset옵션 추가파일별 역할
api/saved-links.ts: 저장 링크 생성/조회/삭제/북마크/카테고리/제목 수정 API 타입 및 호출 함수 추가context/saved-links-context.tsx: 저장 링크 API 기반 목록 상태, pagination 상태, 저장/북마크/삭제/제목 수정 액션 관리app/(tabs)/(home)/scan-result.tsx: 안전 결과 화면의 실제 저장 API 호출, 저장 중 상태, 저장 성공 후 홈 이동 및 토스트 처리app/(tabs)/(home)/scan-result-caution.tsx: 주의 결과 화면의 실제 저장 API 호출, 저장 중 상태, 저장 성공 후 홈 이동 및 토스트 처리app/(tabs)/(home)/saved-links.tsx: 저장 링크 목록 조회 상태 표시, 북마크/삭제/제목 수정 API 연동, 제목 수정 모달 및 토스트 처리app/(tabs)/(home)/index.tsx: 홈 최근 저장 링크 카드의 제목 수정/삭제/북마크 흐름 및 토스트 처리components/ui/link-save-modal.tsx: 저장 중 상태, 500자 제목 제한, 중복 저장 클릭 방지 UI 반영components/ui/toast.tsx: 상단 배치 옵션 및 offset 옵션 추가해결한 이슈 목록
analysisId로POST /api/v1/saved-links호출analysisId,categoryId,title,description으로 구성saved-links-context.tsx의 mock 저장 링크 상태를 API 기반 상태로 교체GET /api/v1/saved-links와 연동items,hasNext,nextCursor구조 반영PATCH /api/v1/saved-links/{id}/bookmark와 연동isBookmarked값 반영DELETE /api/v1/saved-links/{id}와 연동북마크 추가항목을제목 수정으로 변경제목 수정클릭 시 폴더명 수정과 동일한 형태의 모달 표시PATCH /api/v1/saved-links/{id}/title호출title값을 목록/context 상태에 반영fetch()직접 호출하지 않음Authorization헤더 직접 주입하지 않음{ data: ... }응답 직접 unwrap하지 않음authenticatedApiRequest사용/auth/me수동 사전 호출에 의존하지 않음204 No Content삭제 API가 공통 클라이언트 흐름에서 처리되도록 구성체크 사항
fetch()호출 없음Authorization헤더 주입 없음{ data: ... }응답 직접 unwrap 없음참고
카테고리/폴더 API 실제 연동은 이번 PR 범위에서 제외했습니다.
저장 링크 목록 화면의 폴더 필터 칩은 기존 화면 흐름을 유지하되, 저장 링크 API 호출 함수에서는
categoryId,bookmarked,cursor,sizequery를 지원하도록 준비했습니다.DELETE /api/v1/saved-links/{id}는 백엔드가204 No Content를 반환하는 계약이므로, 공통 API 클라이언트의204처리 흐름을 그대로 사용합니다.스크린샷