fix : 곡·핀 상세 긴 제목 줄바꿈 및 헤더 높이 대응

[kim3360]

변경 내용

• 곡 상세·핀 상세에서 긴 제목을 최대 2줄로 줄바꿈하고, 핀 상세 헤더 고정 높이를 제거해 좋아요 버튼이 가려지지 않도록 수정했습니다.

관련 이슈

Closes #298

변경 사항

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

테스트

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

스크린샷 (UI 변경시)

체크리스트

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

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

pnpm lint:fix
pnpm format

Summary by CodeRabbit

• 개선 사항
  • 핀 상세 화면 상단 영역이 콘텐츠에 맞춰 자연스럽게 확장되도록 개선했습니다.
  • 앨범 이미지와 정보 영역의 가로 여백 및 너비를 조정했습니다.
  • 핀과 노래 제목이 최대 두 줄로 표시되며, 긴 제목은 말줄임 처리됩니다.

[coderabbitai]

Warning

Review limit reached

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

Next review available in: 44 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: 8614886b-4313-4106-8360-38fe19cc9868

📥 Commits

Reviewing files that changed from the base of the PR and between 0633216 and 384ce32.

📒 Files selected for processing (1)

• src/pages/SongDetailPage.tsx

📝 Walkthrough

Walkthrough

핀 상세 헤더의 고정 높이를 제거했습니다. 핀과 노래 제목 영역은 전체 너비와 가로 패딩을 사용합니다. 두 화면의 제목은 최대 두 줄로 표시됩니다.

Changes

상세 페이지 레이아웃

Layer / File(s)	Summary
제목 및 헤더 레이아웃 조정 src/pages/PinDetailPage.tsx, src/pages/SongDetailPage.tsx	핀 상세 헤더의 고정 높이를 제거했습니다. 앨범 정보 영역을 전체 너비로 확장했습니다. 핀과 노래 제목에 가로 패딩과 최대 두 줄 말줄임 처리를 적용했습니다.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

• UMC10th-PLIMAP/plimap-web#58: SongDetailPage.tsx의 레이아웃과 제목 말줄임 처리를 수정합니다.
• UMC10th-PLIMAP/plimap-web#106: PinDetailPage와 SongDetailPage의 레이아웃과 제목 스타일을 수정합니다.
• UMC10th-PLIMAP/plimap-web#158: PinDetailPage와 SongDetailPage의 레이아웃을 조정합니다.

Suggested reviewers: onebone

🚥 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	제목은 곡·핀 상세의 긴 제목 줄바꿈과 헤더 높이 조정이라는 주요 변경 사항을 정확히 요약합니다.
Linked Issues check	✅ Passed	SongDetailPage와 PinDetailPage에 두 줄 제한과 너비 조정을 적용하고, 핀 상세 헤더의 고정 높이를 제거했습니다 [#298].
Out of Scope Changes check	✅ Passed	모든 변경 사항이 긴 제목 처리와 핀 상세 헤더 높이 대응이라는 이슈 범위에 포함됩니다.

✨ 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 fix/298-song-pin-detail-title-overflow

---

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