[Fix] 메인 UI 수정

[seongwon030]

#️⃣연관된 이슈

ex) #1141

📝작업 내용

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

메인

• 헤더 패딩 늘림
• 카테고리와 배너, 카테고리와 동아리 카드 간 간격 줄임
• "부경대학교 중앙동아리" 폰트 사이즈 줄임

상세

• 줄간격 160%로 변경

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

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

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

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

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

🫡 참고사항

Summary by CodeRabbit

스타일 개선

• 스타일
  • 모바일, 태블릿, 데스크톱 환경에서 반응형 레이아웃을 최적화했습니다.
  • 헤더, 검색창, 배너 등 주요 UI 요소의 간격과 크기를 조정하여 시각적 일관성을 개선했습니다.
  • 모바일 환경에서의 가독성과 사용성을 강화했습니다.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
moadong	Ready	Preview, Comment	Feb 10, 2026 4:52pm

[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

Walkthrough

여러 프론트엔드 스타일 파일에서 반응형 레이아웃 조정, 간격 및 타이포그래피 속성을 수정합니다. 헤더, 검색 필드, 배너, 카테고리 버튼, 클럽 상세 페이지 및 전역 스타일의 마진, 패딩, 높이, 폰트 가중치를 변경하며, 글로벌 스타일에 overscroll-behavior 규칙을 추가합니다.

Changes

Cohort / File(s)	Summary
Navigation & Top Bar frontend/src/components/common/Header/Header.styles.ts, frontend/src/components/common/SearchField/SearchField.styles.ts	헤더의 고정 높이를 패딩 기반 구조로 변경(18px 상하 패딩 추가), 태블릿 및 모바일 브레이크포인트 추가. 검색 상자 높이를 36px에서 40px로 증가.
Main Page Layout frontend/src/pages/MainPage/MainPage.styles.ts, frontend/src/pages/MainPage/components/Banner/Banner.styles.ts, frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.ts	SectionBar 마진 조정(외부 60px 0px 24px 8px → 24px 0px 16px 8px), Tab 폰트 크기 24px → 20px 감소 및 폰트 가중치 조정. Banner 상단 마진 2px 감소. CategoryButton 모바일 패딩 및 폰트 가중치(600) 추가.
Content Styling & Global frontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.styles.ts, frontend/src/styles/Global.styles.ts	ClubIntroContent에 line-height: 160% 추가. 전역 스타일에 overscroll-behavior: none 규칙 추가.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• [fix] 데스크탑, 모바일 카드 디자인을 피그마와 통일한다 #830: MainPage.styles.ts의 SectionBar 관련 레이아웃 및 마진 규칙 수정
• [fix] 모바일 카테고리 버튼 양쪽에 생기는 여백을 제거한다 #904: CategoryButtonList.styles.ts 모바일 패딩 및 버튼 간격 변경
• [style] 모바일 검색창 크기 키우기 #361: Header.styles.ts 및 SearchField 크기/레이아웃 조정 수정

Suggested reviewers

• lepitaaar
• suhyun113
• oesnuj

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목 '[Fix] 메인 UI 수정'은 변경 사항의 주요 내용인 메인 페이지 UI 스타일 조정을 정확하게 요약하고 있습니다.
Linked Issues check	✅ Passed	PR 변경 사항은 연결된 이슈 MOA-603의 목표인 메인 UI 수정을 충족합니다. 헤더, 배너, 카테고리 버튼, 검색 필드 등 메인 페이지 UI 요소의 스타일 조정이 구현되었습니다.
Out of Scope Changes check	✅ Passed	모든 변경 사항은 메인 UI 수정 목표 범위 내에 있으며, 헤더, 배너, 검색 필드, 카테고리 버튼, 글로벌 스타일 등의 UI 관련 스타일 조정으로 일관성 있게 구성되어 있습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ 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 feature/#1142-main-ui-fix-MOA-603

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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]

Caution

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

⚠️ Outside diff range comments (1)

frontend/src/components/common/Header/Header.styles.ts (1)

5-27: ⚠️ Potential issue | 🟡 Minor

헤더 데스크톱에서 고정 높이 제거 후 패딩 기반 레이아웃으로 전환 — 적절한 변경입니다.

데스크톱에서 height 대신 padding: 18px 0으로 컨텐츠 기반 높이를 사용하고, 태블릿/모바일은 기존 height: 56px을 유지합니다. 배너의 margin-top 값은 데스크톱 88px, 모바일 56px로 정확히 대응됩니다.

데스크톱에서 고정 높이가 제거되었으므로, 헤더 내부 컨텐츠 높이 + padding(36px) 합계가 88px 이하임을 확인하십시오. 현재 구조상 로고(auto height)와 네비게이션 요소들이 52px 이내에 수렴해야 배너 겹침이 발생하지 않습니다.

🧹 Nitpick comments (1)

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

41-54: TextContainer의 line-height: 160%와 자식 Text의 line-height: 1.5(150%) 간 불일치 확인 필요.

TextContainer에 line-height: 160%가 추가되었으나, 자식 Text 컴포넌트는 line-height: 1.5(150%)로 오버라이드합니다. Text로 감싸지지 않은 직접 텍스트에만 160%가 적용되므로, 의도된 동작인지 확인해 주세요. 일관성을 위해 두 값을 통일하는 것을 권장합니다.

Also applies to: 56-65

[lepitaaar]

디자인 변경 좋습니다