모집 마감 정보 노출 및 지원하기 버튼 스타일 통일

[suhyun113]

#️⃣연관된 이슈

ex) #1162

📝작업 내용

모집 마감 상태에서 최근 모집 기간 정보 제공

변경 전	변경 후

변경 전	변경 후

변경 배경

기존에는 동아리가 모집 예정이나 모집 중 상태가 아닐 경우 모두 모집 마감으로만 표시했습니다.
그러나 이 방식은 사용자가 이번 학기 모집이 끝난 것인지, 아니면 아직 모집을 시작하지 않은 것인지를 구분하기 어렵다는 문제가 있었습니다.

변경 내용

• 모집 상태가 모집 마감인 경우
  -> 단순히 모집 마감으로 표시하지 않고, 가장 최근 모집의 마감 날짜를 함께 노출하도록 변경
• 표시 형식
  -> 지난 모집・2025 3/25

그 외

• 데스크탑에서 지원하기 버튼과 공유 버튼의 색상을 모바일과 통일

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

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

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 8, 2026 11:58am

[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

Apply 버튼 스타일의 활성 배경색과 모바일 오버라이드를 변경하고, 모집 상태 'CLOSED' 처리에 지난 모집 라벨 및 마감일 기반 포맷팅을 추가했습니다.

Changes

Cohort / File(s)	Summary
Apply Button Styling frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.styles.ts	활성(enabled) 상태 배경색을 colors.primary[800]에서 colors.gray[900]으로 변경하고, 모바일(@media) 블록에서 배경색 오버라이드를 제거하여 모바일은 크기/폰트 조정만 남김.
Deadline Text Logic frontend/src/utils/getDeadLineText.ts	RECRUITMENT_STATUS에 LAST: '지난 모집'과 CLOSED: '모집 마감'을 포함시키고, recruitmentStatus === 'CLOSED'인 경우 recruitmentEnd가 없으면 CLOSED 반환, 있으면 지난 모집・yyyy M/d 형식으로 반환하도록 로직 추가/조정. 기타 기존 D‑Day/UPCOMING 흐름은 유지.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• [feature] 사용자가 모집 시작 일정을 확인할 수 있도록 지원하기 버튼을 개선한다 #986: 동일 파일들(ClubApplyButton.styles.ts, getDeadLineText.ts)에 대한 스타일 및 모집 상태/마감 처리 변경과 코드 수준에서 겹침.
• [feature] 모바일 상세페이지 Footer UI 변경  #744: Apply 버튼 스타일과 모집 마감 텍스트 로직을 동시에 수정한 PR로 직접적인 충돌 가능성 있음.
• [release] FE v1.1.9  #1001: 버튼 색상/모바일 오버라이드와 모집 상태 처리 변경을 포함해 이 PR과 변경 범위가 유사함.

Suggested reviewers

• lepitaaar
• seongwon030
• oesnuj

🚥 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	PR 제목은 모집 마감 정보 노출과 지원하기 버튼 스타일 통일이라는 두 가지 주요 변경사항을 명확하게 요약하고 있습니다.
Linked Issues check	✅ Passed	PR의 코드 변경사항이 MOA-622 이슈의 요구사항을 충족합니다. 모집 마감 상태에서 최근 모집 마감 날짜를 '지난 모집・YYYY M/D' 형식으로 노출하는 로직이 구현되었습니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 PR 목표인 모집 마감 정보 노출과 지원하기 버튼 스타일 통일과 직접적으로 관련되어 있습니다.
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 feature/#1162-show-last-recruitment-period-MOA-622

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

frontend/src/utils/getDeadLineText.ts (1)

17-21: Line 20: 불필요한 non-null assertion(!) 제거 권장

Line 18에서 !recruitmentEnd 가드로 이미 early return 처리하고 있으므로, Line 20의 recruitmentEnd!에서 !는 불필요합니다. TypeScript가 control flow analysis로 타입을 좁혀주므로 제거해도 됩니다.

♻️ 수정 제안

-    const lastDate = format(recruitmentEnd!, 'yyyy M/d', { locale: ko });
+    const lastDate = format(recruitmentEnd, 'yyyy M/d', { locale: ko });

---

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: 1

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

39-44: ⚠️ Potential issue | 🔴 Critical

모바일 미디어 쿼리 블록의 닫는 } 누락

${media.mobile} {로 열린 CSS 블록이 닫히지 않은 채 템플릿 리터럴이 종료됩니다. 44번 줄의 backtick 앞에 }를 추가해야 합니다. 이 오류로 인해 생성되는 CSS가 유효하지 않아 모바일 스타일이 적용되지 않습니다.

🐛 수정 제안

  ${media.mobile} {
    width: 273px;
    height: 44px;
    font-size: 16px;
    font-weight: 500;
+  }
`;

🤖 Fix all issues with AI agents

In `@frontend/src/utils/getDeadLineText.ts`:
- Around line 16-18: The code uses recruitmentEnd! inside getDeadLineText when
recruitmentStatus === 'CLOSED', which can throw if recruitmentEnd is null;
update the CLOSED branch in getDeadLineText to null-check recruitmentEnd (e.g.,
if recruitmentEnd is null return a safe fallback like
`${RECRUITMENT_STATUS.LAST}・정보 없음` or a localized fallback) and only call
format(recruitmentEnd, ...) when recruitmentEnd is non-null, ensuring you
reference recruitmentStatus, recruitmentEnd, RECRUITMENT_STATUS.LAST and format
in the fix.

[lepitaaar]

잘봤습니다. 사소한 수정인데 UX적으로 상당히 도움될꺼같네요!

[seongwon030]

빠른 수정 수고하셨습니다! 모집마감 상태는 이제 필요없을 수도 있겠네요

[suhyun113]

빠른 수정 수고하셨습니다! 모집마감 상태는 이제 필요없을 수도 있겠네요

처음에 뺐다가 예외처리를 위해 날짜가 없는 경우 모집마감만 보이도록 처리해뒀습니다!