[hotfix] 유튜브링크 줄바꿈 문제 해결

[seongwon030]

#️⃣연관된 이슈

ex) #이슈번호, #이슈번호

📝작업 내용

이번 PR에서 작업한 내용을 간략히 설명해주세요(이미지/동영상 첨부 가능)

중점적으로 리뷰받고 싶은 부분(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

논의하고 싶은 부분(선택)

논의하고 싶은 부분이 있다면 작성해주세요.

🫡 참고사항

Summary by CodeRabbit

• 스타일 개선
  • 클럽 프로필 카드의 소셜 미디어 링크 표시 방식을 개선하여 텍스트 줄 바꿈을 방지하고 수평 레이아웃을 최적화했습니다.

_{✏️ 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)
moadong	Ready	Preview, Comment	Jan 16, 2026 7:47am

[coderabbitai]

Warning

.coderabbit.yaml has a parsing error

The CodeRabbit configuration file in this repository has a parsing error and default settings were used instead. Please fix the error(s) in the configuration file. You can initialize chat with CodeRabbit to get help with the configuration file.

💥 Parsing errors (1)

Validation error: Invalid regex pattern for base branch. Received: "**" at "reviews.auto_review.base_branches[0]"

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

워크스루

SocialUrl 스타일 컴포넌트에 white-space: nowrap CSS 속성을 추가하여 텍스트 줄바꿈을 방지하고 말줄임표 동작을 개선하는 스타일 수정입니다.

변경사항

코호트 / 파일(들)	변경 요약
ClubProfileCard 스타일 수정 frontend/src/pages/ClubDetailPage/components/ClubProfileCard/ClubProfileCard.styles.ts	SocialUrl span 요소에 white-space: nowrap 속성 추가하여 텍스트 줄바꿈 방지

추정 코드 리뷰 시간

🎯 1 (Trivial) | ⏱️ ~3 minutes

관련될 수 있는 PR들

• [fix] 한글 url 말줄임이 안 되는 오류를 해결한다 #1048: ClubProfileCard.styles.ts의 동일한 SocialUrl 스타일 컴포넌트를 수정하여 URL 말줄임표 동작을 개선하는 직접 관련 PR
• [feature] SNS 링크 표시 방식을 개선한다 #1038: ClubProfileCard.styles.ts의 SocialUrl 스타일 컴포넌트를 수정하여 줄바꿈/말줄임표 동작을 제어하는 관련 PR

제안 라벨

🛠Fix

제안 리뷰어

• suhyun113
• PororoAndFriends

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목은 변경사항의 핵심 내용인 유튜브 링크의 줄바꿈 문제 해결을 명확하게 설명하고 있으며, 실제 코드 변경(SocialUrl의 white-space: nowrap 추가)과 일치합니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between f535967 and 5b18d16.

📒 Files selected for processing (1)

• frontend/src/pages/ClubDetailPage/components/ClubProfileCard/ClubProfileCard.styles.ts

🔇 Additional comments (1)

frontend/src/pages/ClubDetailPage/components/ClubProfileCard/ClubProfileCard.styles.ts (1)

165-189: LGTM! text-overflow: ellipsis 동작을 위한 올바른 수정입니다.

text-overflow: ellipsis가 정상 작동하려면 세 가지 CSS 속성이 필요합니다:

1. overflow: hidden ✓
2. white-space: nowrap ✓ (이번 추가)
3. 너비 제한 (max-width) ✓

기존에는 white-space: nowrap이 없어서 텍스트가 줄바꿈되었고, 따라서 가로 방향 오버플로우가 발생하지 않아 ellipsis가 표시되지 않았습니다. 특히 한글이 포함된 URL의 경우 CSS word-breaking 규칙으로 인해 예기치 않은 줄바꿈이 발생할 수 있어 이 수정이 필수적입니다.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

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.}

[suhyun113]

빠르게 수정갑시당~