[fix] 상시모집 버튼 상태가 유지되지 않는 버그를 수정한다 #990
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning
|
| Cohort / File(s) | 설명 |
|---|---|
Button / Input 스타일 frontend/src/components/common/Button/Button.tsx, frontend/src/components/common/InputField/InputField.styles.ts |
버튼 높이 45px→42px, 버튼 폰트 1.125rem→16px; Input border-radius 6px→10px, placeholder 색상→colors.gray[400], placeholder 폰트-size:16px 추가 |
RecruitEditTab 로직 및 스타일 frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsx, frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.styles.ts |
상시모집 판정을 clubDetail.recruitmentStatus === '상시모집'에서 isFarFuture(end) 날짜 기반으로 변경; Save 버튼 너비 150px→135px; AlwaysRecruitButton에 테마 색상 및 border-radius/width 등 스타일 조정 |
Calendar 스타일링(테마 적용) frontend/src/pages/AdminPage/tabs/RecruitEditTab/components/Calendar/Calendar.styles.ts |
하드코딩 색상들을 colors 테마로 대체(선택/호버/헤더/네비게이션/disabled 등), border-radius·폰트·포커스 처리 및 일부 !important 추가 |
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related issues
Moadong/moadong#989: 상시모집 토글 상태 유지 버그 관련 — RecruitEditTab의 상시모집 판단을 날짜 기반으로 바꾸는 변경이 이 이슈 목표와 일치합니다.
Possibly related PRs
Moadong/moadong#774: RecruitEditTab 및 AlwaysRecruitButton 관련 스타일/로직 변경을 함께 다루는 PR — 코드 레벨 연관성 높음.Moadong/moadong#873: 상시모집 판정 로직을 날짜 기반으로 개선하는 변경과 관련 있음.Moadong/moadong#942: 동일 AdminPage RecruitEditTab 파일들을 수정하여 UI/로직이 겹침.
Suggested labels
🛠Fix
Suggested reviewers
- seongwon030
- oesnuj
- Zepelown
Pre-merge checks and finishing touches
❌ Failed checks (1 inconclusive)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Out of Scope Changes check | ❓ Inconclusive | 버튼 높이/폰트 크기 조정, 보더 반지름 증가, 입력 필드 스타일 변경 등 여러 스타일 수정이 포함되어 있습니다. | 이러한 UI 스타일 변경들이 MOA-467에 명시된 요구사항인지 명확히 확인하세요. PR 설명에서 '변경된 디자인을 반영'이라고 언급했으나 세부사항이 불명확합니다. |
✅ Passed checks (4 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-467 이슈의 요구사항을 충족합니다: recruitmentStatus 대신 모집 마감 날짜(2999년 여부) 기준 판별 로직 수정, 디자인 변경 적용. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
✨ Finishing touches
- 📝 Generate docstrings
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.
Comment @coderabbitai help to get the list of available commands and usage tips.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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/AdminPage/tabs/RecruitEditTab/components/Calendar/Calendar.styles.ts (1)
6-12: 사용되지 않는 상수 제거이 로컬 상수들은 테마 색상으로 마이그레이션한 후 파일 내에서 사용되지 않고 있습니다.
colors.primary[800],colors.base.white,colors.gray[700]등 테마에서 제공하는 색상으로 완전히 대체되었으므로 정리 차원에서 제거해주세요.
🧹 Nitpick comments (3)
frontend/src/components/common/Button/Button.tsx (1)
1-49: 테마 색상 적용 고려다른 파일들(InputField, Calendar, RecruitEditTab.styles)은 하드코딩된 색상 값을 테마 색상(
colors)으로 마이그레이션했는데, 이 파일은 여전히#3a3a3a,#ffffff,#cccccc등의 하드코딩된 색상을 사용하고 있습니다. 디자인 일관성과 유지보수성을 위해 이 컴포넌트도 테마 색상으로 전환하는 것을 고려해보세요.🔎 테마 색상 적용 예시
+import { colors } from '@/styles/theme/colors'; import styled, { css, keyframes } from 'styled-components'; const pulse = keyframes` - 0% { transform: scale(1); background-color: #3a3a3a; } - 50% { transform: scale(1.05); background-color: #505050; } - 100% { transform: scale(1); background-color: #3a3a3a; } + 0% { transform: scale(1); background-color: ${colors.gray[900]}; } + 50% { transform: scale(1.05); background-color: ${colors.gray[800]}; } + 100% { transform: scale(1); background-color: ${colors.gray[900]}; } `; const StyledButton = styled.button<ButtonProps>` - background-color: #3a3a3a; - color: #ffffff; + background-color: ${colors.gray[900]}; + color: ${colors.base.white};frontend/src/components/common/InputField/InputField.styles.ts (1)
35-78: 테마 색상 마이그레이션 완성 권장placeholder 색상은 테마(
colors.gray[400])를 사용하도록 업데이트되었으나, 여전히 하드코딩된 색상이 남아있습니다:
- Line 37:
#c5c5c5(border color)- Line 37, 54-61:
red,#28a745,#007bff(validation colors)- Line 66:
rgba(0, 0, 0, 0.05)(disabled background)- Line 116:
#c5c5c5(CharCount)일관성을 위해 이러한 색상들도 테마로 마이그레이션하는 것을 고려해보세요. 예를 들어 validation colors는
colors.accent팔레트를 활용할 수 있습니다.frontend/src/pages/AdminPage/tabs/RecruitEditTab/components/Calendar/Calendar.styles.ts (1)
161-161: 테마 색상으로 마이그레이션 완성대부분의 색상이 테마로 마이그레이션되었으나, hover 상태에서 여전히 하드코딩된 색상(
rgba(255, 84, 20, 0.12))을 사용하고 있습니다. 일관성을 위해 이것도 테마의 primary 색상에서 파생시키거나 테마에 hover용 색상을 추가하는 것을 고려해보세요.Also applies to: 220-220
📜 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.
📒 Files selected for processing (5)
frontend/src/components/common/Button/Button.tsxfrontend/src/components/common/InputField/InputField.styles.tsfrontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.styles.tsfrontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsxfrontend/src/pages/AdminPage/tabs/RecruitEditTab/components/Calendar/Calendar.styles.ts
🧰 Additional context used
📓 Path-based instructions (3)
frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx,js,jsx}: Replace magic numbers with named constants for clarity
Replace complex/nested ternaries withif/elseor IIFEs for readability
Assign complex boolean conditions to named variables for explicit meaning
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle)
Use unique and descriptive names for custom wrappers/functions to avoid ambiguity
Define constants near related logic or ensure names link them clearly to avoid silent failures
Break down broad state management into smaller, focused hooks/contexts to reduce coupling
Files:
frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsxfrontend/src/components/common/Button/Button.tsxfrontend/src/pages/AdminPage/tabs/RecruitEditTab/components/Calendar/Calendar.styles.tsfrontend/src/components/common/InputField/InputField.styles.tsfrontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.styles.ts
frontend/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{tsx,jsx}: Abstract complex logic/interactions into dedicated components/HOCs
Separate significantly different conditional UI/logic into distinct components
Colocate simple, localized logic or use inline definitions to reduce context switching
Choose field-level or form-level cohesion based on form requirements when using form libraries like react-hook-form
Use Component Composition instead of Props Drilling to reduce coupling
Files:
frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsxfrontend/src/components/common/Button/Button.tsx
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
Use consistent return types for similar functions/hooks
Files:
frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsxfrontend/src/components/common/Button/Button.tsxfrontend/src/pages/AdminPage/tabs/RecruitEditTab/components/Calendar/Calendar.styles.tsfrontend/src/components/common/InputField/InputField.styles.tsfrontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.styles.ts
🧠 Learnings (2)
📚 Learning: 2025-03-19T05:18:07.818Z
Learnt from: seongwon030
Repo: Moadong/moadong PR: 195
File: frontend/src/pages/AdminPage/AdminPage.tsx:7-7
Timestamp: 2025-03-19T05:18:07.818Z
Learning: AdminPage.tsx에서 현재 하드코딩된 클럽 ID('67d2e3b9b15c136c6acbf20b')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.
Applied to files:
frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsx
📚 Learning: 2025-11-25T14:08:23.253Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-11-25T14:08:23.253Z
Learning: Applies to frontend/**/*.{ts,tsx,js,jsx} : Replace magic numbers with named constants for clarity
Applied to files:
frontend/src/pages/AdminPage/tabs/RecruitEditTab/components/Calendar/Calendar.styles.tsfrontend/src/components/common/InputField/InputField.styles.tsfrontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.styles.ts
🧬 Code graph analysis (2)
frontend/src/components/common/InputField/InputField.styles.ts (1)
frontend/src/styles/theme/colors.ts (1)
colors(1-81)
frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.styles.ts (1)
frontend/src/styles/theme/colors.ts (1)
colors(1-81)
🔇 Additional comments (6)
frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsx (5)
17-17: 상수 정의 승인
FAR_FUTURE_YEAR상수를 명확하게 정의하여 매직 넘버를 피한 것은 좋은 접근입니다. 코딩 가이드라인을 잘 따르고 있습니다.
39-40: 명확한 헬퍼 함수
isFarFuture함수가 간결하고 명확하게 의도를 표현하고 있습니다. null 체크도 포함되어 있어 안전합니다.
72-100: 토글 로직 개선 승인백업이 상시모집인 경우를 별도로 처리하는 로직(Lines 86-96)이 엣지 케이스를 잘 다루고 있습니다. 사용자가 상시모집 ↔ 일반모집을 반복해서 전환할 때 의도하지 않은 날짜가 복원되는 문제를 방지합니다.
141-141: 마이너한 스타일 변경Save 버튼의 width를 150px에서 135px로 조정한 것은 UI 일관성을 위한 변경으로 보입니다.
42-64: Calendar 컴포넌트는recruitmentEnd: Date | null의 prop 타입으로 null 값을 명시적으로 허용하며, 실제 구현에서도 안전하게 처리됩니다.DatePicker 컴포넌트는
selected={null}로 렌더링될 수 있으며,handleStartChange핸들러에서if (recruitmentEnd && date && date > recruitmentEnd)로직으로 null을 안전하게 검사합니다. 또한 상시모집 활성화 시 end DatePicker는disabled={true}상태가 되어 사용자 상호작용이 차단되고, 두 번째 useEffect가 즉시recruitmentEnd를 설정하므로 실질적인 문제는 없습니다.frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.styles.ts (1)
1-36: 테마 색상 마이그레이션 완료모든 하드코딩된 색상을 테마 색상으로 성공적으로 마이그레이션했습니다. 활성/비활성 상태에 따라 적절한 색상이 적용되며, 다른 컴포넌트들과의 일관성도 유지됩니다.
명시적인 width(120px)와 증가된 border-radius(10px)는 디자인 요구사항을 반영한 것으로 보입니다.
frontend/src/pages/AdminPage/tabs/RecruitEditTab/components/Calendar/Calendar.styles.ts
Outdated
Show resolved
Hide resolved
suhyun113
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/src/pages/AdminPage/tabs/RecruitEditTab/components/Calendar/Calendar.styles.ts (1)
152-152: 하드코딩된 색상 값을 테마 색상으로 교체하는 것을 권장합니다.Lines 152와 211에 하드코딩된
rgba(255, 84, 20, 0.12)값이 남아있습니다. 이 값은colors.primary[900]에 12% 투명도를 적용한 것으로 보입니다. 일관성과 유지보수성을 위해 테마 색상 시스템을 사용하는 것이 좋습니다.🔎 제안하는 수정 사항
/* 기본 hover */ .react-datepicker__day:hover { - background: rgba(255, 84, 20, 0.12); + background-color: ${colors.primary[900]}1F; }&:hover { - background: rgba(255, 84, 20, 0.12); + background-color: ${colors.primary[900]}1F; }참고:
1F는 12% 투명도를 나타내는 16진수 값입니다. 또는 CSS의color-mix()함수나 styled-components의rgba()헬퍼를 사용할 수도 있습니다.코딩 가이드라인 기준: 명확성을 위해 매직 넘버를 명명된 상수로 교체
Also applies to: 211-211
📜 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.
📒 Files selected for processing (1)
frontend/src/pages/AdminPage/tabs/RecruitEditTab/components/Calendar/Calendar.styles.ts
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx,js,jsx}: Replace magic numbers with named constants for clarity
Replace complex/nested ternaries withif/elseor IIFEs for readability
Assign complex boolean conditions to named variables for explicit meaning
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle)
Use unique and descriptive names for custom wrappers/functions to avoid ambiguity
Define constants near related logic or ensure names link them clearly to avoid silent failures
Break down broad state management into smaller, focused hooks/contexts to reduce coupling
Files:
frontend/src/pages/AdminPage/tabs/RecruitEditTab/components/Calendar/Calendar.styles.ts
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
Use consistent return types for similar functions/hooks
Files:
frontend/src/pages/AdminPage/tabs/RecruitEditTab/components/Calendar/Calendar.styles.ts
🧠 Learnings (1)
📚 Learning: 2025-11-25T14:08:23.253Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-11-25T14:08:23.253Z
Learning: Applies to frontend/**/*.{ts,tsx,js,jsx} : Replace magic numbers with named constants for clarity
Applied to files:
frontend/src/pages/AdminPage/tabs/RecruitEditTab/components/Calendar/Calendar.styles.ts
🧬 Code graph analysis (1)
frontend/src/pages/AdminPage/tabs/RecruitEditTab/components/Calendar/Calendar.styles.ts (1)
frontend/src/styles/theme/colors.ts (1)
colors(1-81)
🔇 Additional comments (3)
frontend/src/pages/AdminPage/tabs/RecruitEditTab/components/Calendar/Calendar.styles.ts (3)
3-13: 테마 색상 시스템 도입이 잘 적용되었습니다.하드코딩된 색상 값을 테마 기반 색상으로 교체하여 유지보수성을 크게 향상시켰습니다.
!important사용은 react-datepicker의 기본 스타일을 오버라이드하기 위해 필요한 경우이므로 적절합니다.
122-128: 입력 필드 스타일 업데이트가 적절합니다.테마 색상을 사용하여 입력 필드 스타일을 업데이트했으며, border-radius, font-size, text-align 등의 속성 변경이 PR에 명시된 디자인 변경 사항과 일치합니다.
141-142: 비활성화 상태 색상이 적절히 적용되었습니다.gray[400]과 gray[500]를 사용하여 비활성화된 입력 필드에 적절한 시각적 피드백을 제공하고 있습니다.
seongwon030
left a comment
seongwon030
left a comment
There was a problem hiding this comment.
상시모집 처리 좋습니다. 스타일도 상수화 굳굳
#️⃣연관된 이슈
📝작업 내용
기존에는 clubDetail에 저장된
recruitmentStatus를 이용해서 상시모집 상태를 판단했습니다.그러나, 상시모집으로 지정한 동아리이더라도 모집기간이 시작되지 않았을 경우 저장은 상시모집이 아니라 모집마감 또는 모집예정으로 저장되는 것을 알게되었습니다. 그리고 실제로 모집중이면서 모집 마감 기간이 2999년인 동아리만 상시모집 태그로 뜨는 것을 알게되었습니다.
관리자 페이지에서는 현재 동아리 모집 여부와 관계없이 모집 마감 기간이 2999년일 경우 상시모집 버튼이 활성화되어야 했습니다.
따라서,
recruitmentStatus만으로 판단이 불가하여 2999년을 기준으로 판별하도록 수정했습니다.중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit
릴리스 노트
Style
Bug Fixes
✏️ Tip: You can customize this high-level summary in your review settings.