feat : 내 모든 핀 스켈레톤 및 노래 검색 빈 결과 UI

[kim3360]

변경 내용

• 내 PLIMAP > 내 모든 핀 탭 로딩 시 MyAllPinsCard 구조에 맞는 스켈레톤 UI 적용
• 노래 선택 화면에서 검색 결과가 없을 때 「검색 결과가 없어요」 empty 상태 표시

관련 이슈

Closes #326

변경 사항

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

테스트

• 브라우저에서 정상 동작 확인
• 기존 기능에 영향 없음 확인

스크린샷 (UI 변경시)

체크리스트

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

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

pnpm lint:fix
pnpm format

Summary by CodeRabbit

• 새로운 기능
  • 검색 결과가 없을 때 “검색 결과가 없어요” 안내 메시지를 표시합니다.
• 개선 사항
  • 전체 핀 목록을 불러오는 동안 카드 형태의 로딩 스켈레톤을 제공합니다.
  • 로딩 화면의 스켈레톤 표시 개수를 3개로 조정했습니다.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: c0bd6d7c-0636-40fd-883b-75a0dba8d3fb

📥 Commits

Reviewing files that changed from the base of the PR and between 7a811be and c909c69.

📒 Files selected for processing (3)

• src/components/skeletons/MyAllPinsCardSkeleton.tsx
• src/pages/MyPlimapPage.tsx
• src/pages/SongListPage.tsx

---

📝 Walkthrough

Walkthrough

내 모든 핀 탭에 전용 카드 스켈레톤을 적용했습니다. 노래 검색 결과가 없으면 안내 문구를 표시합니다.

Changes

내 모든 핀 로딩

Layer / File(s)	Summary
핀 카드 스켈레톤 추가 및 적용 src/components/skeletons/MyAllPinsCardSkeleton.tsx, src/pages/MyPlimapPage.tsx	핀 카드의 헤더, 프로필, 본문, 액션, 메타데이터를 표현하는 MyAllPinsCardSkeleton을 추가했습니다. 전체 핀 로딩 시 기존 스켈레톤 대신 3개를 표시합니다.

노래 검색 빈 상태

Layer / File(s)	Summary
검색 결과 없음 안내 src/pages/SongListPage.tsx	검색어가 있고 검색 결과가 없으면 “검색 결과가 없어요” 문구를 표시합니다. 기존 트랙 목록 조건식의 줄바꿈도 정리했습니다.

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

Possibly related PRs

• UMC10th-PLIMAP/plimap-web#120: MyPlimapPage의 전체 핀 로딩 UI와 직접 연결됩니다.
• UMC10th-PLIMAP/plimap-web#177: 핀 카드 스켈레톤 시스템과 코드 수준에서 연결됩니다.
• UMC10th-PLIMAP/plimap-web#321: SongListPage의 검색 결과 처리와 직접 연결됩니다.

Suggested labels: feature

Suggested reviewers: jeonggyul

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목은 내 모든 핀 스켈레톤과 노래 검색 빈 결과 UI라는 주요 변경 사항을 명확하게 설명합니다.
Linked Issues check	✅ Passed	MyAllPinsCardSkeleton 추가, MyPlimapPage 적용, SongListPage 빈 결과 UI가 이슈 #326의 요구 사항을 충족합니다.
Out of Scope Changes check	✅ Passed	변경 사항은 이슈 #326의 스켈레톤 UI와 검색 빈 결과 UI 범위에 포함되며 관련 없는 코드 변경은 확인되지 않습니다.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/326-my-all-pins-skeleton-song-search-empty

---

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-327.plimap.kr