[fix] 메인/상세 페이지 UI 레이아웃 통일화 및 마진 수정 by oesnuj · Pull Request #812 · Moadong/moadong

oesnuj · 2025-11-09T05:13:33Z

#️⃣연관된 이슈

#810

📝작업 내용

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

1️⃣ PageContainer의 불필요한 패딩 제거

상단/좌우 불필요한 패딩을 제거하여 콘텐츠 영역이 레이아웃에 맞게 정렬되도록 수정했습니다

2️⃣ 헤더의 z-index가 낮아 배너의 버트이 헤더보다 위에 있었음

헤더의 z-index가 낮아 배너 버튼이 헤더 위로 노출되는 이슈를 해결했습니다.

헤더가 항상 상단에 고정되도록 z-index 우선순위를 1000으로 조정했습니다.

vercel · 2025-11-09T05:13:38Z

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

Project	Deployment	Preview	Comments	Updated (UTC)
moadong	Ready	Preview	Comment	Nov 9, 2025 5:13am

coderabbitai · 2025-11-09T05:13:52Z

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

개요

프론트엔드 스타일 파일들을 수정하여 레이아웃 개선 및 반응형 디자인 리팩토링을 수행했습니다. Header z-index와 Container 너비 조정, PageContainer 패딩 통합, 미디어 쿼리 토큰 기반 리팩토링을 포함합니다.

변경 사항

응집 / 파일	요약
Header 스타일 업데이트 `frontend/src/components/common/Header/Header.styles.ts`	미사용 import 제거 (msw HttpResponse), z-index를 2에서 1000으로 상향, Container max-width를 1100px에서 1180px로 확대
MainPage 스타일 리팩토링 `frontend/src/pages/MainPage/MainPage.styles.ts`	Tab 컴포넌트 제네릭 타입 파라미터 공백 정렬 (`{$active?: boolean}` → `{ $active?: boolean }`), ContentWrapper에 margin-bottom: 60px 추가, PageContainer를 하드코딩된 미디어 쿼리에서 명명된 토큰 (${media.laptop})으로 전환, 마이너 들여쓰기 및 포맷팅 조정
Banner 반응형 레이아웃 `frontend/src/pages/MainPage/components/Banner/Banner.styles.ts`	BannerContainer에 노트북 크기 뷰포트용 반응형 규칙 추가 (padding: 0 20px)
PageContainer 미디어 쿼리 통합 `frontend/src/styles/PageContainer.styles.ts`	기본 padding 제거, media helper import 추가 (`@/styles/mediaQuery`), 하드코딩된 브레이크포인트를 미디어 쿼리 헬퍼로 전환 (${media.laptop}, ${media.mobile}, ${media.mini_mobile}), 고정 `@media` 블록 제거

예상 코드 리뷰 난이도

🎯 2 (단순함) | ⏱️ ~12분

PageContainer.styles.ts: 미디어 토큰 통합이 기존 반응형 동작을 유지하는지 확인 필요
MainPage.styles.ts: 제네릭 타입 파라미터 공백 변경 및 margin-bottom: 60px 추가의 의도 명확화
Header.styles.ts: z-index 1000 상향이 다른 컴포넌트와의 스택 컨텍스트 충돌 여부 검증

검수자 제안

seongwon030
lepitaaar
suhyun113

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목은 메인/상세 페이지 레이아웃 통일화 및 마진 수정에 관한 변경사항을 명확하게 반영하고 있습니다.
Linked Issues check	✅ Passed	변경사항(PageContainer 패딩 제거, Header z-index 수정)이 연결된 이슈 MOA-305의 목표인 레이아웃 통일화 및 마진/패딩 수정 요구사항을 충족합니다.
Out of Scope Changes check	✅ Passed	모든 변경사항(Header z-index, Container max-width, PageContainer 패딩, Banner padding, Tab 타입 포맷팅)이 레이아웃 통일화 및 마진/패딩 수정 범위 내에 있습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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/#810-ui-layout-MOA-305

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 5

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/MainPage/components/Banner/Banner.styles.ts (1)

6-6: 중앙화된 레이아웃 상수를 사용하세요.

max-width: 1180px 값이 여러 파일에서 반복됩니다. Header.styles.ts에 남긴 리뷰 코멘트를 참고하여 중앙화된 LAYOUT.MAX_CONTENT_WIDTH 상수를 사용하세요.

Based on learnings

🧹 Nitpick comments (1)

frontend/src/pages/MainPage/MainPage.styles.ts (1)
4-19: PageContainer 스타일이 중복됩니다.

이 파일에서 정의된 PageContainer는 frontend/src/styles/PageContainer.styles.ts와 동일한 스타일을 가지고 있습니다. 스타일 중복을 피하고 일관성을 유지하기 위해 중앙화된 PageContainer를 import하여 사용하는 것을 고려하세요.

다음과 같이 변경:
 import styled from 'styled-components';
 import { media } from '@/styles/mediaQuery';
+import { PageContainer as BasePageContainer } from '@/styles/PageContainer.styles';

-export const PageContainer = styled.div`
-  max-width: 1180px;
-  margin: 0 auto;
-
-  ${media.laptop} {
-    padding: 0 20px;
-  }
-
-  ${media.mobile} {
-    padding: 0 20px;
-  }
-
-  ${media.mini_mobile} {
-    padding: 0 10px;
-  }
-`;
+export const PageContainer = BasePageContainer;
또는 추가 스타일이 필요한 경우:
export const PageContainer = styled(BasePageContainer)`
  // MainPage에만 필요한 추가 스타일
`;

📜 Review details

Configuration used: CodeRabbit 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 716abb2 and 9e69ed0.

📒 Files selected for processing (4)

frontend/src/components/common/Header/Header.styles.ts (2 hunks)
frontend/src/pages/MainPage/MainPage.styles.ts (5 hunks)
frontend/src/pages/MainPage/components/Banner/Banner.styles.ts (1 hunks)
frontend/src/styles/PageContainer.styles.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

frontend/**/*.{ts,tsx}

📄 CodeRabbit inference engine (frontend/.cursorrules)

frontend/**/*.{ts,tsx}: Replace magic numbers with named constants for clarity.
Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
Assign complex boolean conditions to named variables.
Use consistent return types for similar functions and hooks.
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle).
Use unique, descriptive names for custom wrappers and functions to avoid ambiguity.
Define constants near related logic or ensure names link them clearly.

Files:

frontend/src/pages/MainPage/components/Banner/Banner.styles.ts
frontend/src/components/common/Header/Header.styles.ts
frontend/src/styles/PageContainer.styles.ts
frontend/src/pages/MainPage/MainPage.styles.ts

🧠 Learnings (3)

📚 Learning: 2025-07-19T05:09:10.702Z

Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.

Applied to files:

frontend/src/components/common/Header/Header.styles.ts
frontend/src/pages/MainPage/MainPage.styles.ts

📚 Learning: 2025-07-19T05:09:10.702Z

Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Define constants near related logic or ensure names link them clearly.

Applied to files:

frontend/src/pages/MainPage/MainPage.styles.ts

📚 Learning: 2025-07-19T05:09:10.702Z

Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.

Applied to files:

frontend/src/pages/MainPage/MainPage.styles.ts

🧬 Code graph analysis (3)

frontend/src/pages/MainPage/components/Banner/Banner.styles.ts (1)

frontend/src/styles/mediaQuery.ts (1)

media (8-14)

frontend/src/styles/PageContainer.styles.ts (1)

frontend/src/styles/mediaQuery.ts (1)

media (8-14)

frontend/src/pages/MainPage/MainPage.styles.ts (1)

frontend/src/styles/mediaQuery.ts (1)

media (8-14)

🔇 Additional comments (3)

frontend/src/pages/MainPage/components/Banner/Banner.styles.ts (1)

15-17: 반응형 패딩 추가가 적절합니다.

laptop 브레이크포인트에서 패딩을 추가하여 다른 컴포넌트(PageContainer)와 일관된 레이아웃을 유지하고 있습니다.

frontend/src/styles/PageContainer.styles.ts (1)

2-2: 중앙화된 미디어 쿼리 헬퍼 사용이 적절합니다.

@/styles/mediaQuery를 import하여 반응형 스타일을 일관되게 관리하는 것은 좋은 접근입니다.

frontend/src/pages/MainPage/MainPage.styles.ts (1)

46-73: 타입 및 포매팅 개선이 적절합니다.

Tab 컴포넌트의 타입 정의에 공백을 추가하고 (<{ $active?: boolean }>) 인터폴레이션 표현식의 포매팅을 일관되게 개선했습니다. 이는 코드 가독성을 향상시킵니다.

frontend/src/components/common/Header/Header.styles.ts

frontend/src/pages/MainPage/MainPage.styles.ts

frontend/src/styles/PageContainer.styles.ts

seongwon030

UI 수정 좋습니다

suhyun113

수정된거 확인했습니다ㅏ!
수고하셨어요~

oesnuj added 5 commits November 9, 2025 14:07

style: 메인페이지 스타일 코드 정리 및 미디어 쿼리 포맷 통일

07b1e66

style: 배너 컨테이너의 미디어 쿼리에서 랩탑 패딩 추가

2adfb38

style: PageContainer의 미디어 쿼리 패딩 수정 및 정리

c542dca

style: Header 컴포넌트의 z-index 수정 및 Container의 최대 너비 증가

8a2163d

style: 메인페이지와 푸터 사이에 간격 넣기

9e69ed0

oesnuj requested review from seongwon030 and suhyun113 November 9, 2025 05:13

oesnuj self-assigned this Nov 9, 2025

oesnuj added 🎨 Design 마크업 & 스타일링 💻 FE Frontend 🛠Fix 기능이 의도한 대로 동작하지 않는 버그를 수정 labels Nov 9, 2025

coderabbitai bot reviewed Nov 9, 2025

View reviewed changes

seongwon030 approved these changes Nov 9, 2025

View reviewed changes

suhyun113 approved these changes Nov 9, 2025

View reviewed changes

oesnuj merged commit 0942f1b into develop-fe Nov 9, 2025
5 checks passed

oesnuj deleted the fix/#810-ui-layout-MOA-305 branch November 11, 2025 04:56

coderabbitai bot mentioned this pull request Nov 20, 2025

[fix] 모바일 헤더 검색바 레이아웃 순서 버그 수정 #871

Merged

coderabbitai bot mentioned this pull request Nov 30, 2025

[refactor] z-index 기준으로 리팩토링한다 #908

Merged

coderabbitai bot mentioned this pull request Dec 29, 2025

[fix] MOA-467 상시모집 버튼 상태가 유지되지 않는 버그를 수정한다 #989

Closed

2 tasks

coderabbitai bot mentioned this pull request Feb 8, 2026

[fix] 필터탭 메인에서 제거 #1152

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

[fix] 메인/상세 페이지 UI 레이아웃 통일화 및 마진 수정#812

[fix] 메인/상세 페이지 UI 레이아웃 통일화 및 마진 수정#812
oesnuj merged 5 commits intodevelop-fefrom
fix/#810-ui-layout-MOA-305

oesnuj commented Nov 9, 2025 •

edited

Loading

Uh oh!

vercel bot commented Nov 9, 2025

Uh oh!

coderabbitai bot commented Nov 9, 2025 •

edited

Loading

`.coderabbit.yaml` has a parsing error

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

seongwon030 left a comment

Uh oh!

suhyun113 left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Comments

Conversation

oesnuj commented Nov 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

#️⃣연관된 이슈

📝작업 내용

1️⃣ PageContainer의 불필요한 패딩 제거

2️⃣ 헤더의 z-index가 낮아 배너의 버트이 헤더보다 위에 있었음

Uh oh!

vercel bot commented Nov 9, 2025

Uh oh!

coderabbitai bot commented Nov 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

.coderabbit.yaml has a parsing error

개요

변경 사항

예상 코드 리뷰 난이도

관련 이슈

관련 PR

검수자 제안

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

seongwon030 left a comment

Choose a reason for hiding this comment

Uh oh!

suhyun113 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

oesnuj commented Nov 9, 2025 •

edited

Loading

coderabbitai bot commented Nov 9, 2025 •

edited

Loading

`.coderabbit.yaml` has a parsing error