[fix] 관리자 페이지 모집 기간 캘린더 레이아웃 오류를 수정한다

[suhyun113]

#️⃣연관된 이슈

ex) #1148

📝작업 내용

모집 기간 캘린더 레이아웃 오류 수정

변경 전	변경 후

문제 상황

관리자 페이지의 모집 기간 설정 캘린더에서 달력 하단이 계속 늘어나며 레이아웃이 깨지는 현상이 발생했습니다.

특히 showTimeSelect가 활성화된 상태에서
시간 리스트가 길어질수록 달력 전체 높이가 함께 확장되는 문제가 있었습니다.

동아리 관리자들의 사용성을 고려하여 빠르게 수정해야겠다고 생각했습니다.

원인 분석

react-datepicker에서 기존에 아래와 같은 구조였습니다.

.react-datepicker {
  display: inline-flex;
  align-items: stretch;
}

.react-datepicker가 flex 컨테이너이기 때문에, align-items: stretch 로 인해 자식 중 가장 큰 높이인 시간 리스트에 맞춰 달력 전체 컨테이너가 함께 늘어나고 있었습니다.

해결 방법

flex 컨테이너의 정렬 방식을 명시적으로 수정했습니다.

.react-datepicker {
  align-items: flex-start;
}

각 컬림이 자신의 높이만큼만 렌더링되도록 하여 시간 리스트의 높이가 커져도 달력 전체 높이에 영향이 없도록 했습니다.

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

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

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	Feb 7, 2026 11:32am

[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

관리자 페이지의 모집 기간 캘린더 컴포넌트에서 react-datepicker 루트의 정렬 속성을 "stretch"에서 "flex-start"로 변경하여 달력 컨테이너 내용의 수직 정렬 문제를 수정했습니다.

Changes

Cohort / File(s)	Summary
Calendar 스타일링 frontend/src/pages/AdminPage/tabs/RecruitEditTab/components/Calendar/Calendar.styles.ts	react-datepicker 루트의 정렬 속성을 flex-start로 변경하여 캘린더 레이아웃 정렬 오류 수정

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• [fix] 상시모집 버튼 상태가 유지되지 않는 버그를 수정한다 #990: 동일한 Calendar.styles.ts 파일의 datepicker 스타일링을 수정하는 관련 PR
• [feature] 모집기간 달력 UX 개선: 시간 선택 추가, 날짜 로직 변경 및 시간대 오류 수정 #664: react-datepicker 루트의 flex 정렬/레이아웃 규칙을 조정하는 동일 파일 수정 PR

Suggested reviewers

• seongwon030
• oesnuj
• Zepelown

🚥 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	풀 리퀘스트 제목이 react-datepicker의 align-items 속성 변경을 통한 캘린더 레이아웃 오류 수정이라는 주요 변경사항을 명확하게 반영합니다.
Linked Issues check	✅ Passed	코드 변경사항이 MOA-610 이슈의 요구사항을 충족합니다. 관리자 페이지 모집 기간 캘린더에서 시간 목록으로 인한 레이아웃 확장 문제를 align-items: flex-start 설정으로 해결했습니다.
Out of Scope Changes check	✅ Passed	Calendar.styles.ts 파일의 align-items 속성만 변경되었으며, 모든 수정사항이 MOA-610 이슈에서 정의한 캘린더 레이아웃 오류 수정과 관련됩니다.
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

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/#1148-admin-recruit-calendar-layout-MOA-610

---

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.}

[seongwon030]

👍