노래 검색 페이지 스켈레톤 추가

[onebone]

변경 내용

• 노래 검색 페이지에서 검색어 디바운싱 및 API 요청 대기 중 스켈레톤을 표시합니다.
• 노래 선택 바텀시트와 동일한 SongSelectSkeleton 및 로딩 조건을 재사용합니다.

관련 이슈

Closes #319

변경 사항

• 새로운 기능 추가
• 버그 수정
• UI/UX 개선
• 리팩토링
• 문서 업데이트

테스트

• 브라우저에서 정상 동작 확인

• 기존 기능에 영향 없음 확인

• pnpm typecheck

• pnpm exec eslint src/pages/SongListPage.tsx

• pnpm exec prettier src/pages/SongListPage.tsx --check

• git diff --check

스크린샷 (UI 변경시)

체크리스트

• 코드가 정상적으로 동작합니다
• 새로운 에러나 경고가 없습니다
• 필요시 문서를 업데이트했습니다
• 코드 포맷팅을 실행했습니다 (pnpm format)
• ESLint 검사를 통과했습니다 (pnpm lint:fix)

코드 품질 확인
PR 제출 전에 다음 명령어를 실행하여 코드 품질을 확인해주세요:

pnpm lint:fix
pnpm format

Summary by CodeRabbit

• 버그 수정
  • 필수 태그를 선택하지 않은 경우 불필요한 태그 오류 메시지가 표시되지 않도록 수정했습니다.
  • 곡 검색 중 디바운싱 또는 로딩 상태를 명확히 표시하도록 개선했습니다.
  • 검색어가 없을 때 빈 목록을 표시하고, 검색 완료 후 결과를 표시하도록 수정했습니다.

[coderabbitai]

Warning

Review limit reached

@onebone, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 42 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: b920f27b-93a3-4f90-8811-34af9b746930

📥 Commits

Reviewing files that changed from the base of the PR and between 4181690 and c12846e.

📒 Files selected for processing (6)

• src/features/pin/components/PinRadiusOverlay.tsx
• src/features/pin/components/PlaceResultRow.tsx
• src/pages/PinRadiusOverlayPreviewPage.tsx
• src/pages/PinRegisterPage.tsx
• src/pages/SongDetailPage.tsx
• src/pages/SongListPage.tsx

📝 Walkthrough

Walkthrough

노래 검색 화면이 디바운싱 또는 요청 대기 중일 때 SongSelectSkeleton을 표시합니다. 태그 오류 메시지는 태그 제한 오류가 있을 때만 표시합니다.

Changes

노래 검색 로딩 상태

Layer / File(s)	Summary
검색 결과 로딩 렌더링 src/pages/SongListPage.tsx	useSearchTracks의 디바운싱·요청 상태를 계산합니다. 로딩 중에는 SongSelectSkeleton을 표시하고, 완료 후 검색 트랙을 렌더링합니다.

태그 오류 메시지

Layer / File(s)	Summary
태그 오류 메시지 계산 src/pages/SongDetailPage.tsx	필수 태그 미선택 분기를 제거합니다. hasTagLimitError가 참일 때만 최대 태그 수 오류 메시지를 설정합니다.

Estimated code review effort: 2 (Simple) | ~10 minutes

Sequence Diagram(s)

sequenceDiagram
  participant SongListPage
  participant useSearchTracks
  participant SongSelectSkeleton
  SongListPage->>useSearchTracks: 검색어와 검색 상태 조회
  useSearchTracks-->>SongListPage: 디바운싱·요청 상태와 검색 트랙 반환
  SongListPage->>SongSelectSkeleton: 디바운싱 또는 요청 대기 중 표시

Loading

Possibly related PRs

• UMC10th-PLIMAP/plimap-web#250: SongSelectSkeleton과 검색 디바운싱·로딩 상태 처리와 직접 관련됩니다.
• UMC10th-PLIMAP/plimap-web#177: 공유 스켈레톤 컴포넌트와 로딩 패턴을 추가한 변경입니다.
• UMC10th-PLIMAP/plimap-web#248: SongDetailPage.tsx의 태그 검증 로직과 직접 관련됩니다.

Suggested labels: feature

Suggested reviewers: kim3360, jeonggyul

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	SongDetailPage.tsx의 최소 태그 오류 메시지 변경은 이슈 #319의 검색 스켈레톤 목표와 관련이 없습니다.	태그 오류 메시지 변경을 별도 풀 리퀘스트로 분리하거나 이슈 #319의 범위에서 해당 변경의 근거를 명시하세요.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목은 노래 검색 페이지에 스켈레톤을 추가하는 주요 변경 사항을 정확하게 설명합니다.
Linked Issues check	✅ Passed	SongListPage.tsx가 디바운싱 및 API 요청 대기 중 SongSelectSkeleton을 표시하여 이슈 #319의 목표를 충족합니다.

✨ Finishing Touches 💡 1

⚔️ Resolve merge conflicts 💡

• Resolve merge conflict in branch feat/319-song-search-skeleton

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/319-song-search-skeleton

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

https://pr-321.plimap.kr