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

[oesnuj]

#️⃣연관된 이슈

#870

📝작업 내용

모바일/태블릿 헤더에서 검색바가 중앙에 위치하지 않는 문제를 해결했습니다.

변경사항

• MenuButton에 order: 2를 적용하여 flex 순서 조정
• 모바일 레이아웃: 로고(왼쪽) - 검색바(가운데) - 메뉴버튼(오른쪽)

해결 방법

• Flexbox의 기본 order 값(0)을 활용
• 추가적인 wrapper 컴포넌트 없이 CSS만으로 간단하게 해결

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

헤더가 관리자/사용자에서 의도대로 동작하는지 확인 부탁드립니다.

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

🫡 참고사항

Summary by CodeRabbit

Style

• 태블릿 화면에서 헤더 메뉴 버튼의 레이아웃 위치가 조정되었습니다.

_{✏️ 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	Preview	Comments	Updated (UTC)
moadong	Ready	Preview	Comment	Nov 20, 2025 3:11am

[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

개요

Header 컴포넌트의 MenuButton에 태블릿 화면 범위에서 order: 2 flex 속성을 추가하여 flex 컨테이너 내 요소의 배치 순서를 조정했습니다. 공개 API나 내보내진 선언에는 변경사항이 없습니다.

변경 사항

주제 / 파일(들)	변경 요약
Header 스타일 조정 frontend/src/components/common/Header/Header.styles.ts	MenuButton에 태블릿 브레이크포인트에서 order: 2 속성 추가

예상 코드 리뷰 소요 시간

🎯 1 (Trivial) | ⏱️ ~3분

• 단일 파일 수정으로 범위가 제한적
• CSS flex order 속성 추가로 변경 사항이 명확하고 검증 용이
• 로직 변경 없이 순수 스타일 수정

관련 가능성 있는 이슈

• [Bug] 헤더 영역에서 flex 정렬 순서가 의도와 다르게 변경되는 버그 #870: Header 요소의 flex 순서 수정을 다루고 있어 현재 변경 사항과 관련이 있습니다.

관련 가능성 있는 PR

• [fix] 메인/상세 페이지 UI 레이아웃 통일화 및 마진 수정 #812: frontend/src/components/common/Header/Header.styles.ts 파일을 수정하며, Header z-index 및 Container 너비를 조정하는 변경을 포함하고 있습니다.

추천 리뷰어

• suhyun113
• seongwon030

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 변경사항의 핵심과 정확하게 일치합니다. 모바일 헤더 검색바의 레이아웃 순서 버그 수정이라는 제목이 raw_summary의 MenuButton에 order 속성 추가를 통한 flex 순서 조정과 일치합니다.
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.

✨ 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/#870-header-flex-order-bug

---

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

🧹 Nitpick comments (1)

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

149-154: 모바일/태블릿에서의 버튼 정렬을 위한 order: 2 적용은 의도와 잘 맞습니다

media.tablet 이하에서만 MenuButton에 order: 2를 주어 기본 order: 0인 로고/검색바보다 뒤로 보내는 방식이라, DOM 구조를 바꾸지 않고도 “로고 - 검색바 - 메뉴 버튼” 순서를 시각적으로 맞출 수 있어 보입니다.

다만 order로 시각적 순서만 바꾸면 DOM/포커스/스크린리더 순서는 그대로라서, 키보드 탐색 시 “메뉴 → 로고 → 검색바”처럼 느껴질 수 있습니다. JSX에서 가능하다면 요소 DOM 순서를 재배치해 order 의존도를 줄이는 쪽이 접근성 면에서는 더 안전할 수 있습니다.

또한 관리자 헤더와 사용자 헤더에서 MenuButton이 포함된 flex 컨테이너 구조가 동일한지, 다른 flex 아이템들에 별도의 order가 지정된 곳은 없는지 실제 브라우저에서 한 번씩 확인 부탁드립니다.

📜 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 ad24725 and faa3c5e.

📒 Files selected for processing (1)

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

[lepitaaar]

flex order에 대해 좀더 설명해주실수있을까요? 처음보는 속성이라 신기하네요

[oesnuj]

order는 flex item의 배치 순서를 제어하는 속성입니다!!

모든 flex 요소는 기본적으로 order: 0 값을 가지고 있어 flex-direction에 따라 순서대로 정렬됩니다. 하지만 특정 요소에 order 값을 지정하면 그 순서에 맞게 재배치할 수 있습니다.

데스크탑에서는 햄버거(네비게이션) 버튼이 가운데에 위치하지만, 태블릿에서는 햄버거 버튼으로 전환되면서 오른쪽 끝에 배치되어야 했기 때문에, 이러한 요구사항을 order 속성을 활용해 해결했습니다

참고: https://naradesign.github.io/flex-direction-order.html#flex-item%EC%9D%98-%EB%B0%B0%EC%B9%98-%EC%88%9C%EC%84%9C%EB%A5%BC-%EC%A0%9C%EC%96%B4%ED%95%98%EB%8A%94-order

[oesnuj]

@suhyun113 같이 참고해주세용
이전에는 문제없었는데 관리자용 헤더부분을 넣어주면서 검색창과 관리자 프로필을 조건처리한다고 마크업 순서를 바꾸어서 저렇게 된 것 같아요

[suhyun113]

기존에는 햄버거 버튼이 오른쪽에 있었잖아요?
그때는 order 속성이 없어도 문제가 없었던 것 같은데... 왜 이런 문제가 발생한건지 궁금하네요

빠른 수정 감사합니다ㅏ