[Fix/#157] letter-select 페이지 세로 UI 조정

[KwonDeaGeun]

Summary

관련 있는 Issue를 태그해주세요. (e.g. > - #100)

• [Fix]: letter-select 페이지 UI 세로 간격 조정 #157

해당 PR에 대한 작업 내용을 요약하여 작성해주세요.

Tasks

• 해당 PR에 수행한 작업을 작성해주세요.
• 글자 쓰기 가로 간격에 대해서 줄바꿈 금지 및 크기 조정
• letter-select 아이튠즈 뱃지 gap-4, pt-4 중복에 대해서 pt-4 제거

Summary by CodeRabbit

릴리스 노트

• 스타일
  • 작은 화면 크기에 최적화된 반응형 텍스트 크기 조정으로 가독성 개선
  • 제목의 단어 줄바꿈 개선으로 더 나은 텍스트 배치
  • iTunes 링크 영역의 간격 정리로 더 깔끔한 레이아웃

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
2025-seasonthon-team-80-fe	Ready	Preview, Comment	Dec 28, 2025 0:29am

[coderabbitai]

개요

제목 요소에 반응형 타이포그래피 클래스와 텍스트 줄바꿈 개선이 추가되었습니다. 레터 선택 페이지의 제목은 단어 중간 끊김을 방지하도록 조정되었고, iTunes 배지 영역의 상단 여백이 제거되었습니다.

변경 사항

그룹 / 파일	요약
페이지 레이아웃 반응형 타이포그래피 src/components/ui/page-layout.tsx	제목 <p> 요소에 text-wrap:balance 및 반응형 폰트 크기 클래스 추가 (max-[450px]:text-[28px], max-[400px]:text-[26px], max-[350px]:text-[24px]). 기존 콘텐츠 및 레이아웃 로직은 변경 없음.
레터 선택 페이지 제목 및 여백 조정 src/pages/letterPage/pages/letter-select-page.tsx	제목을 두 줄로 분할하고 두 번째 줄에 whitespace-nowrap 스타일 적용하여 단어 중간 끊김 방지. 모든 페이지 컨텍스트(첫 참여, 참여 페이지, 수신자 기반)에 적용. iTunes 배지 컨테이너에서 상단 여백(mt-4) 제거. 수신자 기반 제목의 닉네임 세그먼트를 분할하여 정확한 줄바꿈 동작 보존.

예상 코드 리뷰 시간

🎯 2 (Simple) | ⏱️ ~10 분

관련 이슈

• [Fix]: letter-select 페이지 UI 세로 간격 조정 #157 — 레터 선택 페이지의 제목 줄바꿈 방지 및 iTunes 배지 여백 조정 변경 사항이 동일하게 다루어짐.

제안 라벨

🛠 Fix

제안 검토자

• hyesngy

시

🐰 반응형 텍스트가 춤을 춘다,

폰트는 화면에 맞게 흐르고,

단어는 더 이상 쪼개지지 않으니,

아름다운 줄바꿈의 악수! ✨

레이아웃이 속삭인다, "완벽해" 💕

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목은 '[Fix/#157] letter-select 페이지 세로 UI 조정'으로 저장소의 템플릿 형식을 따르고 있으며, 주요 변경 사항(letter-select 페이지의 세로 UI 조정)을 명확하게 요약하고 있습니다.
Description check	✅ Passed	PR 설명은 템플릿의 주요 구조(Summary, Tasks)를 포함하고 있으며, 관련 이슈(#157)와 수행한 작업들(줄바꿈 금지 및 크기 조정, pt-4 제거)이 기재되어 있습니다.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/#157

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5304159 and ff31dca.

📒 Files selected for processing (2)

• src/components/ui/page-layout.tsx
• src/pages/letterPage/pages/letter-select-page.tsx

🔇 Additional comments (3)

src/pages/letterPage/pages/letter-select-page.tsx (2)

128-140: 텍스트 줄바꿈 전략이 잘 적용되었습니다.

세 가지 조건(첫 가입, 일반 가입, 수신자 기반)에서 일관되게 whitespace-nowrap을 사용하여 "이 노래를 들려드릴까요?" 문구가 중간에 끊기지 않도록 처리한 점이 좋습니다. 수신자 닉네임에 inline-block을 추가한 것도 레이아웃 제어에 적절합니다.

---

208-208: 간격 조정이 PR 목표와 일치합니다.

mt-4 제거와 gap-4에서 gap-2로의 변경은 PR 설명에 명시된 "아이튠즈 뱃지 gap-4, pt-4 중복에 대해서 pt-4 제거"와 일치합니다. 세로 간격이 의도대로 조정되었는지 시각적으로 확인해 주세요.

src/components/ui/page-layout.tsx (1)

24-24: 프로젝트의 브라우저 지원 범위를 확인하세요.

text-wrap: balance는 Chrome 114+, Firefox 121+, Safari 17.5+에서 지원되는 최신 CSS 기능입니다. 이 코드는 제목 요소(heading)에 사용되는 권장 용례이며, 미지원 브라우저에서는 자동으로 무시되어 텍스트가 정상적으로 표시됩니다. 프로젝트의 타겟 브라우저 범위에 구형 브라우저 지원이 필요한 경우, @supports 규칙으로 명시적 폴백을 추가하는 것을 검토하세요.

---

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 and usage tips.}

[github-actions]

✨ Storybook: 🔗 https://690458540424857aa71aec97-bppwobzffa.chromatic.com/