[fix] 동아리방 상세 위치가 긴 경우 지도 버튼이 가려지는 현상 수정

[suhyun113]

#️⃣연관된 이슈

#1532

📝작업 내용

모바일에서 동아리방 위치 텍스트가 길 경우 LocationInfo가 flex 컨테이너를 넘어서면서 · 지도 버튼이 화면 밖으로 밀려나는 문제를 수정했습니다.

수정 전	수정 후

• LocationInfo에 min-width: 0 추가 → flex 자식이 콘텐츠 크기 이하로 축소 가능
• LocationInfo에 overflow: hidden 추가 → 기존 text-overflow: ellipsis와 결합되어 긴 텍스트는 ...으로 표시
• LocationDot(·)과 MapLink(지도)는 flex-shrink: 0이므로 항상 표시됨

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

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

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

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

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

🫡 참고사항

Summary by CodeRabbit

릴리스 노트

• 스타일
  • 클럽 프로필 카드의 위치 정보 텍스트 표시 개선으로 더 나은 레이아웃 안정성 제공

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
moadong	Ready	Preview, Comment	May 13, 2026 9:29am

[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

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 63fad4ab-5280-496a-9ef2-78443793d3d6

📥 Commits

Reviewing files that changed from the base of the PR and between ff0802b and 4c358c2.

📒 Files selected for processing (1)

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

---

Walkthrough

ClubProfileCard 컴포넌트의 LocationInfo 스타일에 플렉스 레이아웃 제약을 추가합니다. min-width: 0과 overflow: hidden을 적용하여 위치 정보 텍스트가 플렉스 컨테이너 내에서 올바르게 절단되도록 수정합니다.

Changes

위치 정보 스타일 제약

Layer / File(s)	Summary
위치 정보 플렉스 제약 추가 frontend/src/pages/ClubDetailPage/components/ClubProfileCard/ClubProfileCard.styles.ts	LocationInfo 스타일 컴포넌트의 플렉스 행 규칙에 min-width: 0과 overflow: hidden을 추가하여 자식 요소의 텍스트 오버플로우 처리를 개선합니다.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3분

Possibly related PRs

• Moadong/moadong#1402: 동일한 ClubProfileCard.styles.ts의 LocationInfo 스타일링 관련 작업으로, 맵/위치 UI 레이아웃 및 텍스트 절단 처리에서 직접적으로 겹치는 부분이 있습니다.

Suggested reviewers

• seongwon030
• oesnuj

🚥 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 제목이 변경사항의 주요 내용을 명확하게 설명하고 있습니다. 모바일에서 긴 위치 텍스트로 인해 지도 버튼이 가려지는 현상을 수정한다는 핵심 목표를 정확히 반영합니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ 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/#1532-club-location-overflow-MOA-842

---

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]

🎨 UI 변경사항을 확인해주세요

변경된 스토리를 Chromatic에서 확인해주세요.

구분	링크
🔍 변경사항 리뷰	https://www.chromatic.com/build?appId=67904e61c16daa99a63b44a7&number=331
📖 Storybook	https://67904e61c16daa99a63b44a7-bjqjowkamw.chromatic.com/

2개 스토리 변경 · 전체 57개 스토리 · 22개 컴포넌트

[seongwon030]

인스타 링크 길이도 ellipsis 처리되는데 의도된건가요?

[suhyun113]

인스타 링크 길이도 ellipsis 처리되는데 의도된건가요?

인스타 링크 길이 ellipsis 처리는 이전에 상세 작업을 할때 되도록 만든 것이었는데, 이번 PR 비교 이미지 두개의 가로 너비가 달라서 추가된 것처럼 보인 것 같습니다!

기존에 있던 작업이었고, 이번에는 위치 부분의 ellipsis 처리만 추가했습니다!