Conversation
lepitaaar
added
💻 FE
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning
|
| 그룹 / 파일 | 변경 요약 |
|---|---|
클럽 상태 표시 컴포넌트frontend/src/components/ClubStateBox/ClubStateBox.tsx |
STATE_TEXT 상수에 새로운 상태 매핑 추가: UPCOMING → '모집예정' |
상태 색상 정의frontend/src/styles/clubTags.ts |
STATUS_COLORS 객체에 새로운 항목 추가: 모집예정 (모집중과 동일한 색상 사용) |
Estimated code review effort
🎯 1 (Trivial) | ⏱️ ~5 minutes
Possibly related issues
- [fix] 모집예정 상태 추가 #980: UPCOMING 상태에 대한 '모집예정' 텍스트 매핑과 STATUS_COLORS 항목 추가로 "알 수 없음"으로 표시되던 버그를 직접 해결합니다.
Possibly related PRs
- [feature] 동아리 상시모집 상태 추가 #707: 클럽 상태 항목 추가 및 해당 스타일/색상 매핑을 ClubStateBox와 상태 색상 정의에 추가하는 동일한 패턴의 변경사항입니다.
Suggested labels
✨ Feature
Suggested reviewers
- seongwon030
- oesnuj
- Zepelown
Pre-merge checks and finishing touches
✅ Passed checks (3 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | PR 제목은 주요 변경사항을 명확하게 설명하고 있습니다. 새로운 '모집예정' 상태를 추가하는 것이 핵심 변경사항이며, 제목이 이를 정확하게 반영하고 있습니다. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
✨ 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/upcoming-status
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
📜 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 (2)
frontend/src/components/ClubStateBox/ClubStateBox.tsxfrontend/src/styles/clubTags.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/styles/clubTags.tsfrontend/src/components/ClubStateBox/ClubStateBox.tsx
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
Use consistent return types for similar functions/hooks
Files:
frontend/src/styles/clubTags.tsfrontend/src/components/ClubStateBox/ClubStateBox.tsx
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/components/ClubStateBox/ClubStateBox.tsx
🧠 Learnings (3)
📚 Learning: 2025-07-19T05:05:10.196Z
Learnt from: seongwon030
Repo: Moadong/moadong PR: 548
File: frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx:17-57
Timestamp: 2025-07-19T05:05:10.196Z
Learning: ClubDetailPage.tsx에서 notJoinedClubNames 배열의 하드코딩은 의도적인 설계 결정입니다. 개발자가 명시적으로 하드코딩을 선택했으므로 이에 대한 리팩토링 제안을 하지 않아야 합니다.
Applied to files:
frontend/src/styles/clubTags.tsfrontend/src/components/ClubStateBox/ClubStateBox.tsx
📚 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/components/ClubStateBox/ClubStateBox.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/components/ClubStateBox/ClubStateBox.tsx
🧬 Code graph analysis (1)
frontend/src/styles/clubTags.ts (1)
frontend/src/styles/theme/colors.ts (1)
colors(1-81)
🔇 Additional comments (1)
frontend/src/components/ClubStateBox/ClubStateBox.tsx (1)
8-8:모집예정상태 구현이 올바르게 완료되었습니다.UPCOMING 상태 추가는 기존 패턴을 따르고 있으며,
STATUS_COLORS에모집예정이 올바르게 설정되어 있습니다(colors.accent[1][900]). 컴포넌트의 폴백 처리도 적절합니다.클럽 상태 처리는 ClubStateBox 컴포넌트에만 집중되어 있으며, ClubProfileCard와 ClubCard에서
recruitmentStatusprop으로 전달되는 구조로 일관성 있게 구현되었습니다.다만 백엔드 API에서 실제로 UPCOMING 상태를 지원하는지 확인이 필요합니다.
| 모집중: colors.accent[1][900], | ||
| 모집마감: colors.gray[500], | ||
| 상시모집: colors.accent[2][900], | ||
| 모집예정: colors.accent[1][900], |
There was a problem hiding this comment.
'모집예정'과 '모집중'이 동일한 색상을 사용합니다.
현재 '모집예정'과 '모집중' 모두 colors.accent[1][900] (파란색)을 사용하고 있어, 사용자가 두 상태를 시각적으로 구분하기 어려울 수 있습니다.
'모집예정'은 아직 모집이 시작되지 않은 상태이므로, 다른 색상을 사용하는 것을 고려해보세요:
colors.accent[1][700]또는colors.accent[1][600](더 연한 파란색)colors.accent[2][900](민트색) - 하지만 이미 '상시모집'에서 사용 중colors.gray[400]등 다른 색상 계열
🔎 제안: 더 연한 파란색 사용
export const STATUS_COLORS: Record<string, string> = {
모집중: colors.accent[1][900],
모집마감: colors.gray[500],
상시모집: colors.accent[2][900],
- 모집예정: colors.accent[1][900],
+ 모집예정: colors.accent[1][700],
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| 모집예정: colors.accent[1][900], | |
| export const STATUS_COLORS: Record<string, string> = { | |
| 모집중: colors.accent[1][900], | |
| 모집마감: colors.gray[500], | |
| 상시모집: colors.accent[2][900], | |
| 모집예정: colors.accent[1][700], | |
| }; |
🤖 Prompt for AI Agents
In frontend/src/styles/clubTags.ts around line 21, the "모집예정" tag currently uses
the same color as "모집중" (colors.accent[1][900]), making states
indistinguishable; change "모집예정" to a different color such as
colors.accent[1][700] or colors.accent[1][600] (lighter blue) or an alternative
gray like colors.gray[400] to clearly differentiate it from "모집중", update the
value at line 21 accordingly and ensure it matches design tokens used elsewhere.
2 participants
#️⃣연관된 이슈
#980
📝작업 내용
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit
새 기능
✏️ Tip: You can customize this high-level summary in your review settings.