[fix] 한글 url 말줄임이 안 되는 오류를 해결한다

[suhyun113]

#️⃣연관된 이슈

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

📝작업 내용

문제 상황

보블리스 동아리와 같이 SNS url이 한글인 경우, 말줄임이 안 되는 오류 발생

문제 원인

• 기존 Social URL은 말줄임 처리가 영어 URL로 정상 동작했습니다.

• 이는 영어를 브라우저가 한 단어로 인식하기 때문에, 줄바꿈이 불가하여 max-width 초과 시 바로 말줄임(...)이 적용되었던 것입니다.

• 그런데, 한글 문자열은 브라우저가 줄바꿈이 가능하다고 인식해서 max-width를 초과해도 말줄임이 적용되지 않는 문제가 있었습니다.

해결

따라서 한글 문자열을 위해 SocialUrl 스타일에 white-space: nowrap을 추가해주어 한글/영문 URL 모두 말줄임(...)이 적용되도록 했습니다.

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

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

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

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

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

🫡 참고사항

Summary by CodeRabbit

릴리스 노트

• Style
  • 클럽 프로필 카드의 소셜 URL 표시 방식을 개선했습니다. URL 텍스트가 여러 줄로 나뉘지 않고 한 줄로 유지되도록 변경하여 더 나은 시각적 표현을 제공합니다.

_{✏️ 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 15, 2026 4:45pm

[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

개요

클럽 프로필 카드의 소셜 URL 스타일에 white-space: nowrap 속성을 추가하여 URL 텍스트가 여러 줄로 나뉘지 않도록 방지합니다. 기존의 max-width, overflow, text-overflow 동작은 유지됩니다.

변경 사항

집단 / 파일(들)	요약
소셜 URL 스타일 업데이트 frontend/src/pages/ClubDetailPage/components/ClubProfileCard/ClubProfileCard.styles.ts	SocialUrl 스타일 컴포넌트에 white-space: nowrap 추가하여 URL 텍스트 줄바꿈 방지

예상 코드 리뷰 소요 시간

🎯 1 (Trivial) | ⏱️ ~2분

관련 이슈

• [feature] MOA-510 SNS 링크 표시 방식을 개선한다 #1031: 클럽 프로필의 SNS 링크 렌더링 방식 개선과 직접 관련 있음
• MOA-510: 유튜브 링크 표시 방식 개선 목표 달성을 위한 스타일 조정

관련 PR

• [feature] SNS 링크 표시 방식을 개선한다 #1038: 동일한 ClubProfileCard.styles.ts의 SocialUrl 스타일 컴포넌트를 수정하는 관련 변경

검토자 추천

• seongwon030

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 변경 사항과 직접적으로 관련되어 있으며, 한글 URL 말줄임 오류 해결이라는 주요 변경 사항을 명확하게 설명합니다.
Linked Issues check	✅ Passed	코드 변경이 MOA-510 이슈의 유튜브 링크 표시 방식 개선 목표를 충족하며, SocialUrl에 white-space: nowrap 추가로 URL 말줄임이 모든 언어에서 작동하도록 개선했습니다.
Out of Scope Changes check	✅ Passed	변경 사항이 ClubProfileCard 스타일 파일 내 SocialUrl 컴포넌트의 CSS 속성만 수정하였으며, 이슈 범위 내의 변경으로 범위 외 코드 변경은 없습니다.
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 b8e8681 and 53ec2c4.

📒 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! 한글 URL 말줄임 문제에 대한 올바른 수정입니다.

white-space: nowrap 추가는 text-overflow: ellipsis가 정상 작동하기 위한 필수 조건입니다. 한글 문자열은 브라우저에서 줄바꿈 가능으로 인식되어 기존 스타일만으로는 말줄임이 동작하지 않았는데, 이 수정으로 한글/영문 URL 모두에서 말줄임이 정상 적용됩니다.

_{✏️ 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.}

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

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

196-198: IntroSection의 미디어 쿼리 블록에 닫는 중괄호가 누락되었습니다.

196-197줄의 ${media.tablet} 블록이 } 없이 종료되어 CSS 구문 오류가 발생합니다. 198줄의 템플릿 리터럴 종료(`;)가 미디어 쿼리 블록을 닫지 않고 있으므로, 다음과 같이 수정이 필요합니다:

🐛 수정 제안

 export const IntroSection = styled.section`
   padding: 16px;
   border-radius: 14px;
   background-color: ${colors.base.white};

   ${media.tablet} {
     background-color: ${colors.gray[100]};
+  }
 `;

📜 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 b8e8681 and 53ec2c4.

📒 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! 한글 URL 말줄임 문제에 대한 올바른 수정입니다.

white-space: nowrap 추가는 text-overflow: ellipsis가 정상 작동하기 위한 필수 조건입니다. 한글 문자열은 브라우저에서 줄바꿈 가능으로 인식되어 기존 스타일만으로는 말줄임이 동작하지 않았는데, 이 수정으로 한글/영문 URL 모두에서 말줄임이 정상 적용됩니다.

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

[seongwon030]

영어는 줄바꿈이 안되고 한글은 되군요 .. 고생하셨습니다