[FEATURE] 핵심 플로우 전환 속도 개선

[kbh0218]

Closes #88

개요

URL 검사 플로우와 폴더 URL 추가 플로우에서 사용자가 버튼을 누른 뒤 다음 화면에서 결과를 확인하기까지의 대기 흐름을 개선했습니다.

URL 검사 플로우에서는 기존에 검사 버튼 클릭 후 저장 링크 중복 체크를 먼저 기다린 뒤 scanning 화면으로 이동하던 구조를 변경했습니다. 사용자가 검사 버튼을 누르면 먼저 scanning 화면으로 이동하고, 중복 체크와 분석 요청은 scanning 화면에서 처리하도록 분리했습니다.

또한 분석 요청 결과를 결과 화면에서 다시 조회하지 않도록 AnalysisResultCacheProvider를 추가했습니다. scanning 화면에서 받은 분석 결과를 cache에 저장하고, 결과 화면에서는 cache를 우선 사용해 불필요한 결과 재요청을 줄였습니다.

폴더 URL 추가 플로우에서는 URL 추가 후 refreshFolders()까지 기다린 뒤 폴더 상세 화면으로 이동하던 구조를 변경했습니다. URL의 폴더 분류가 완료되면 바로 폴더 상세 화면으로 이동하고, 폴더 목록 갱신은 화면 이동 이후 background에서 처리하도록 분리했습니다.

이번 작업은 측정용 로그를 최종 코드에 남기지 않고, 측정 결과를 기반으로 실제 사용자 경험 개선에 필요한 로직만 반영했습니다.

주요 구현 내용

• URL 검사 버튼 클릭 후 scanning 화면으로 즉시 이동
• 저장 링크 중복 체크를 scanning 화면 내부 처리로 이동
• 중복 저장 링크인 경우 기존 안내 흐름 유지
• scanning 화면에서 분석 요청 및 polling 처리 유지
• 분석 결과 cache context 추가
• scanning 화면에서 분석 결과를 cache에 저장
• 결과 화면에서 cache 우선 사용
• cache hit 시 결과 화면 재요청 없이 표시
• cache miss 시 기존 analysisId 기반 조회 fallback 유지
• 폴더 URL 추가 시 refreshFolders() 대기를 화면 이동 전 blocking 흐름에서 제거
• 폴더 상세 화면 이동 후 refreshFolders()를 background로 실행
• 성능 측정용 임시 로그 및 유틸 제거

파일별 역할

• context/analysis-result-cache-context.tsx

  • 분석 결과를 화면 전환 사이에서 유지하기 위한 cache context 추가
  • analysisId 기준으로 결과 저장 및 조회

• app/(tabs)/(home)/_layout.tsx

  • 홈 stack 하위 화면에서 분석 결과 cache를 사용할 수 있도록 provider 연결

• app/(tabs)/(home)/add-link.tsx

  • URL 검증 후 바로 scanning 화면으로 이동하도록 변경
  • 저장 링크 중복 체크를 화면 이동 전 blocking 작업에서 제거

• app/(tabs)/(home)/scanning.tsx

  • 저장 링크 중복 체크를 scanning 화면에서 수행
  • 분석 요청 및 polling 처리
  • 분석 결과 수신 후 cache 저장
  • 기존 결과 화면 이동 정책 유지

• hooks/use-analysis-result.ts

  • 결과 화면에서 cache 우선 사용
  • cache hit 시 refetch 없이 분석 결과 반환
  • cache miss 시 기존 API 조회 fallback 유지
  • 조회 성공 시 cache 갱신

• app/(tabs)/(folder)/folder-add-url.tsx

  • assignCategory 완료 후 바로 폴더 상세 화면으로 이동
  • refreshFolders()는 화면 이동 이후 background로 실행
  • 기존 URL 추가 실패 alert 흐름 유지

• app/(tabs)/(folder)/[id].tsx

  • 폴더 URL 추가 후 전달되는 urlAdded param 기반 toast 표시 흐름 유지
  • 측정용 param 및 로그 제거

측정 결과

URL 검사 플로우

Before 평균:

• scan_button_to_scanning_screen: 371.0ms
• saved_link_duplicate_check_completed: 189.1ms
• analysis_request_completed: 211.3ms
• analysis_result_fetch_completed: 266.5ms

After 평균:

• scan_button_to_scanning_screen: 169.1ms
• saved_link_duplicate_check_completed: 188.9ms
• analysis_request_completed: 158.8ms
• scan_result_screen_with_cached_analysis: 158.9ms

개선 내용:

• 검사 버튼 클릭 후 scanning 화면 진입 시간 약 54.4% 단축
• 결과 화면 진입 시 analysis result refetch 제거
• 결과 화면 cache hit 5/5 확인

폴더 URL 추가 플로우

Before 평균:

• folder_assign_completed: 371.0ms
• folder_refresh_completed: 272.2ms
• folder_detail_screen_visible: 398.7ms
• folder_added_links_visible: 1047.7ms

개선 방향:

• 기존에는 assignCategory 완료 후 refreshFolders까지 기다린 뒤 폴더 상세 화면으로 이동했습니다.
• 변경 후에는 assignCategory 완료 직후 폴더 상세 화면으로 이동하고, refreshFolders는 화면 이동 이후 background에서 처리합니다.
• 네트워크 응답 시간 편차로 인해 전체 완료 시간은 측정 시점마다 차이가 있었지만, 화면 이동 전에 반드시 기다릴 필요가 없는 refreshFolders 단계를 blocking 흐름에서 분리했습니다.

해결한 이슈 목록

• URL 검사 버튼 클릭 후 scanning 화면 진입 전 대기 구간 확인
• 저장 링크 중복 체크가 화면 이동 전에 blocking되는 구조 확인
• 중복 체크를 scanning 화면 내부 처리로 이동
• 중복 저장 링크인 경우 기존 안내 흐름 유지
• 분석 요청 및 polling 흐름 유지
• scanning 화면에서 분석 결과를 cache에 저장
• 결과 화면에서 cache를 우선 사용하도록 처리
• cache hit 시 분석 결과 재요청 없이 결과 화면 표시
• cache miss 시 기존 analysisId 기반 조회 fallback 유지
• 폴더 URL 추가 플로우에서 assignCategory와 refreshFolders 대기 구간 확인
• 폴더 URL 추가 후 refreshFolders를 화면 이동 전 blocking 흐름에서 분리
• 폴더 상세 이동 이후 refreshFolders를 background로 실행
• 성능 측정용 임시 로그 및 유틸 제거

체크 사항

• 커밋/코딩 컨벤션에 맞게 작성
• 기존 URL 입력 검증 흐름 유지
• 기존 저장 링크 중복 안내 흐름 유지
• 기존 scanning 화면 분석 요청 흐름 유지
• 기존 안전/주의/위험 결과 화면 이동 정책 유지
• 결과 화면에서 cache가 없을 경우 기존 API 조회 fallback 유지
• 기존 폴더 URL 추가 기능 유지
• 폴더 URL 추가 실패 시 기존 alert 흐름 유지
• 성능 측정용 로그가 최종 코드에 남아있지 않음
• npx tsc --noEmit 통과
• npm run lint 통과
• git diff --check 통과

참고사항

• 성능 측정용 코드는 데이터 확인 후 최종 구현에서 제거했습니다.
• URL 검사 플로우는 사용자가 검사 버튼을 누른 뒤 빠르게 scanning 화면으로 이동하도록 변경했습니다.
• 저장 링크 중복 체크는 제거한 것이 아니라 scanning 화면으로 이동한 뒤 수행하도록 위치를 변경했습니다.
• 분석 결과 cache는 화면 전환 직후 동일한 분석 결과를 다시 요청하지 않기 위한 용도입니다.
• cache에 결과가 없는 경우에는 기존처럼 analysisId 기반 조회를 수행합니다.
• 폴더 URL 추가 플로우에서는 assignCategory 완료 후 바로 폴더 상세 화면으로 이동합니다.
• refreshFolders()는 폴더 상세 화면 이동 이후 background에서 실행되므로, 폴더 목록 갱신은 유지됩니다.
• 네트워크 응답 시간은 실행 시점마다 편차가 있어, 개선 여부는 API 시간과 프론트 전환 시간을 분리해서 해석했습니다.

[sunm2n]

확인결과 큰 문제는 보이지 않습니다 바로 머지해도 될 거 같습니다!