[fix] 지원자 상세 페이지 네비게이션 버튼 반응형 레이아웃 수정

[seongwon030]

#️⃣연관된 이슈

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

📝작업 내용

• ApplicantContainer의 고정 gap(240px)을 space-between으로 변경
• NavigationButton에 flex-shrink: 0 추가하여 버튼 축소 방지
• 모바일 환경에서 select 폰트 크기 미디어 쿼리 추가

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

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

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

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

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

🫡 참고사항

Summary by CodeRabbit

릴리스 노트

• 스타일
  • 신청자 상세 페이지의 레이아웃을 개선하여 더 나은 간격과 정렬을 제공합니다.
  • 작은 화면에서의 반응형 디자인을 강화했습니다.
  • 네비게이션 버튼의 크기 조정 동작을 개선했습니다.

_{✏️ 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 14, 2026 0:30am

[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

개요

지원자 상세 페이지 스타일링 파일에서 ApplicantContainer의 레이아웃을 중앙 정렬에서 좌우 배치로 변경하고, 작은 화면에서 폰트 크기 제약을 추가했으며, NavigationButton의 축소 방지 속성을 추가했습니다.

변경 사항

집합 / 파일	변경 내용
스타일 조정 frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/ApplicantDetailPage.styles.ts	ApplicantContainer: 레이아웃 변경 (중앙 정렬 → space-between), 수평 패딩 추가, 768px 이하에서 select 폰트 크기 제약(18px) 추가 NavigationButton: flex-shrink: 0 속성 추가

예상 코드 리뷰 시간

🎯 1 (Trivial) | ⏱️ ~5 분

관련 가능 PR

• [feature] 지원자 현황 디자인을 적용한다 #659: 동일한 ApplicantDetailPage.styles.ts 파일과 ApplicantContainer, NavigationButton 스타일 수정이 겹쳐있어 연관성이 있습니다.

제안 라벨

🛠Fix, 💻 FE, 🎨 Design

제안 리뷰어

• lepitaaar
• oesnuj

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	❓ Inconclusive	연관 이슈(MOA-512)의 구체적인 코딩 요구사항이 명시되지 않아 변경사항이 이슈 요구사항을 충족하는지 확인할 수 없습니다.	연관 이슈(MOA-512)의 상세 설명과 체크리스트 항목을 구체적으로 기재하여 코드 변경사항이 요구사항을 충족하는지 확인할 수 있도록 해주세요.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목은 지원자 상세 페이지의 네비게이션 버튼 반응형 레이아웃 수정이라는 주요 변경사항을 명확하게 설명하고 있습니다.
Out of Scope Changes check	✅ Passed	ApplicantDetailPage.styles.ts의 스타일 변경사항들이 모두 지원자 상세 페이지 반응형 레이아웃 개선과 관련되어 있습니다.
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 nitpick comments

frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/ApplicantDetailPage.styles.ts (1)

111-111: 기존 코드: 잘못된 CSS 변수명 형식

var(--, #111)에서 -- 뒤에 변수명이 누락되어 있습니다. 이 PR 범위는 아니지만, 향후 수정이 필요합니다.

-  color: var(--, `#111`);
+  color: var(--text-color, `#111`);

---

📜 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 229a384 and 444c056.

📒 Files selected for processing (1)

• frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/ApplicantDetailPage.styles.ts

🔇 Additional comments (2)

frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/ApplicantDetailPage.styles.ts (2)

22-56: LGTM! 반응형 레이아웃 개선이 적절합니다.

• justify-content: space-between과 padding: 0 20px 조합으로 요소들이 컨테이너 양 끝에 배치되면서 적절한 여백이 확보됩니다.
• 768px 미디어 쿼리로 모바일에서 select 폰트 크기를 18px로 줄이는 것은 가독성 유지에 적절합니다.

---

160-163: LGTM! 버튼 축소 방지 처리가 올바릅니다.

flex-shrink: 0 추가로 flex 컨테이너 내에서 공간이 부족해도 네비게이션 버튼이 축소되지 않습니다. PR 목표에 부합하는 수정입니다.

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

[suhyun113]

화면 크기 줄여도 네비게이션 버튼 잘 보이네요!
빠른 수정 좋아요~