[feature] 비참여 동아리 카드 색상을 회색으로 변경한다#553
Merged
seongwon030 merged 4 commits intodevelop-fefrom Jul 19, 2025
Merged
Conversation
- 차단된 동아리 카드는 배경색을 연회색(#F5F5F5)으로 변경하여 구분
Contributor
|
Warning
|
| 파일/경로 요약 | 변경 요약 |
|---|---|
| frontend/src/constants/joinedClubNames.ts | 참여 동아리 이름 배열(joinedClubNames) 상수로 추가 및 export |
| frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx | 하드코딩된 비참여 동아리 배열 제거, joinedClubNames import 및 접근 제어 로직을 joined 기반으로 변경 |
| frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts | CardContainer에 $isBlockedClub boolean prop 추가, 비참여 동아리일 때 회색 배경 및 hover/커서 효과 변경 |
| frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx | joinedClubNames import, CardContainer에 $isBlockedClub prop 전달(참여 여부에 따라 true/false) |
Sequence Diagram(s)
sequenceDiagram
participant User
participant MainPage
participant ClubCard
participant joinedClubNames
User->>MainPage: 페이지 접속
MainPage->>ClubCard: 동아리 카드 렌더링
ClubCard->>joinedClubNames: club.name 포함 여부 확인
alt club.name not in joinedClubNames
ClubCard->>User: 회색 카드 + hover 비활성화
else club.name in joinedClubNames
ClubCard->>User: 일반 카드 + hover 활성화
end
sequenceDiagram
participant User
participant ClubDetailPage
participant joinedClubNames
User->>ClubDetailPage: 동아리 상세 접근
ClubDetailPage->>joinedClubNames: club.name 포함 여부 확인
alt club.name not in joinedClubNames
ClubDetailPage->>User: 접근 차단 alert, 홈으로 이동
else club.name in joinedClubNames
ClubDetailPage->>User: 상세 페이지 정상 표시
end
Possibly related issues
- [feature] MOA-94 비참여 동아리 카드 색상을 회색으로 변경한다 #552: 비참여 동아리 카드 색상을 회색으로 변경하는 목적과 직접적으로 일치합니다.
Possibly related PRs
- [feature] 비참여 동아리 상세페이지 접근 시 alert 처리 #548: ClubDetailPage에서 비참여 동아리 접근 제어 로직을 리팩토링하여 본 PR의 중앙 집중화된 joinedClubNames 활용과 직접적으로 연관됨.
Suggested labels
💻 FE
Suggested reviewers
- oesnuj
- Zepelown
📜 Recent review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
frontend/src/constants/joinedClubNames.ts(1 hunks)frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx(2 hunks)frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts(2 hunks)frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- frontend/.cursorrules
frontend/**/*.tsx
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- frontend/.cursorrules
🧠 Learnings (5)
📓 Common learnings
Learnt from: seongwon030
PR: Moadong/moadong#195
File: frontend/src/pages/AdminPage/AdminPage.tsx:7-7
Timestamp: 2025-03-19T05:18:07.818Z
Learning: AdminPage.tsx에서 현재 하드코딩된 클럽 ID('67d2e3b9b15c136c6acbf20b')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.
Learnt from: seongwon030
PR: Moadong/moadong#548
File: frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx:17-57
Timestamp: 2025-07-19T05:05:10.171Z
Learning: ClubDetailPage.tsx에서 notJoinedClubNames 배열의 하드코딩은 의도적인 설계 결정입니다. 개발자가 명시적으로 하드코딩을 선택했으므로 이에 대한 리팩토링 제안을 하지 않아야 합니다.
frontend/src/constants/joinedClubNames.ts (4)
Learnt from: seongwon030
PR: Moadong/moadong#548
File: frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx:17-57
Timestamp: 2025-07-19T05:05:10.171Z
Learning: ClubDetailPage.tsx에서 notJoinedClubNames 배열의 하드코딩은 의도적인 설계 결정입니다. 개발자가 명시적으로 하드코딩을 선택했으므로 이에 대한 리팩토링 제안을 하지 않아야 합니다.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.{ts,tsx} : Define constants near related logic or ensure names link them clearly.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.
Learnt from: seongwon030
PR: Moadong/moadong#195
File: frontend/src/pages/AdminPage/AdminPage.tsx:7-7
Timestamp: 2025-03-19T05:18:07.818Z
Learning: AdminPage.tsx에서 현재 하드코딩된 클럽 ID('67d2e3b9b15c136c6acbf20b')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.
frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx (9)
Learnt from: seongwon030
PR: Moadong/moadong#548
File: frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx:17-57
Timestamp: 2025-07-19T05:05:10.171Z
Learning: ClubDetailPage.tsx에서 notJoinedClubNames 배열의 하드코딩은 의도적인 설계 결정입니다. 개발자가 명시적으로 하드코딩을 선택했으므로 이에 대한 리팩토링 제안을 하지 않아야 합니다.
Learnt from: seongwon030
PR: Moadong/moadong#195
File: frontend/src/pages/AdminPage/AdminPage.tsx:7-7
Timestamp: 2025-03-19T05:18:07.818Z
Learning: AdminPage.tsx에서 현재 하드코딩된 클럽 ID('67d2e3b9b15c136c6acbf20b')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.tsx : Colocate simple, localized logic or use inline definitions to reduce context switching.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.{ts,tsx} : Define constants near related logic or ensure names link them clearly.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.tsx : Use component composition instead of props drilling.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.tsx : Abstract complex logic/interactions into dedicated components or higher-order components (HOCs).
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.{ts,tsx} : Assign complex boolean conditions to named variables.
frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx (7)
Learnt from: seongwon030
PR: Moadong/moadong#548
File: frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx:17-57
Timestamp: 2025-07-19T05:05:10.171Z
Learning: ClubDetailPage.tsx에서 notJoinedClubNames 배열의 하드코딩은 의도적인 설계 결정입니다. 개발자가 명시적으로 하드코딩을 선택했으므로 이에 대한 리팩토링 제안을 하지 않아야 합니다.
Learnt from: seongwon030
PR: Moadong/moadong#195
File: frontend/src/pages/AdminPage/AdminPage.tsx:7-7
Timestamp: 2025-03-19T05:18:07.818Z
Learning: AdminPage.tsx에서 현재 하드코딩된 클럽 ID('67d2e3b9b15c136c6acbf20b')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.tsx : Colocate simple, localized logic or use inline definitions to reduce context switching.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.{ts,tsx} : Define constants near related logic or ensure names link them clearly.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.tsx : Break down broad state management into smaller, focused hooks or contexts.
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts (3)
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.
Learnt from: seongwon030
PR: Moadong/moadong#548
File: frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx:17-57
Timestamp: 2025-07-19T05:05:10.171Z
Learning: ClubDetailPage.tsx에서 notJoinedClubNames 배열의 하드코딩은 의도적인 설계 결정입니다. 개발자가 명시적으로 하드코딩을 선택했으므로 이에 대한 리팩토링 제안을 하지 않아야 합니다.
Learnt from: seongwon030
PR: Moadong/moadong#195
File: frontend/src/pages/AdminPage/AdminPage.tsx:7-7
Timestamp: 2025-03-19T05:18:07.818Z
Learning: AdminPage.tsx에서 현재 하드코딩된 클럽 ID('67d2e3b9b15c136c6acbf20b')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.
🧬 Code Graph Analysis (2)
frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx (1)
frontend/src/constants/joinedClubNames.ts (1)
joinedClubNames(1-32)
frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx (1)
frontend/src/constants/joinedClubNames.ts (1)
joinedClubNames(1-32)
🔇 Additional comments (7)
frontend/src/constants/joinedClubNames.ts (1)
1-32: 중앙집중화된 상수 정의가 잘 구현되었습니다.동아리 참여 정보를 중앙에서 관리하도록 상수로 분리한 것이 코드의 일관성과 유지보수성을 높입니다. 명확한 네이밍과 함께 다른 컴포넌트들에서 재사용 가능한 구조로 잘 설계되었습니다.
frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx (2)
10-10: 상수 import가 적절하게 구현되었습니다.중앙집중화된 상수를 올바르게 import하여 사용하고 있습니다.
32-32: 멤버십 체크 로직이 명확하게 구현되었습니다.
joinedClubNames를 활용한 차단 상태 판단 로직이 간결하고 명확합니다. 다른 컴포넌트와 일관된 패턴을 따르고 있어 좋습니다.frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts (2)
6-6: 스타일드 컴포넌트 prop 추가가 적절합니다.
$isBlockedClubboolean prop이 타입과 함께 올바르게 정의되었습니다.
12-13: 차단된 클럽에 대한 시각적 피드백이 잘 구현되었습니다.회색 배경색과 호버 효과 비활성화를 통해 사용자에게 명확한 시각적 피드백을 제공합니다.
not-allowed커서로 상호작용 불가 상태를 직관적으로 표현한 것이 좋습니다.Also applies to: 28-31
frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx (2)
16-16: 상수 import가 올바르게 구현되었습니다.중앙집중화된
joinedClubNames상수를 적절하게 import하고 있습니다.
32-38: 멤버십 체크 로직 리팩터링이 올바르게 구현되었습니다.중앙집중화된
joinedClubNames를 활용하여 접근 제어 로직을 일관되게 구현했습니다. 기존 동작(알림 + 홈으로 이동)을 유지하면서 다른 컴포넌트와 동일한 패턴을 따르고 있어 좋습니다.
✨ 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.
🪧 Tips
Chat
There are 3 ways to chat with CodeRabbit:
- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
I pushed a fix in commit <commit_id>, please review it.Explain this complex logic.Open a follow-up GitHub issue for this discussion.
- Files and specific lines of code (under the "Files changed" tab): Tag
@coderabbitaiin a new review comment at the desired location with your query. Examples:@coderabbitai explain this code block.@coderabbitai modularize this function.
- PR comments: Tag
@coderabbitaiin a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.@coderabbitai read src/utils.ts and explain its main purpose.@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.@coderabbitai help me debug CodeRabbit configuration file.
Support
Need help? Create a ticket on our support page for assistance with any issues or questions.
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.
CodeRabbit Commands (Invoked using PR comments)
@coderabbitai pauseto pause the reviews on a PR.@coderabbitai resumeto resume the paused reviews.@coderabbitai reviewto trigger an incremental review. This is useful when automatic reviews are disabled for the repository.@coderabbitai full reviewto do a full review from scratch and review all the files again.@coderabbitai summaryto regenerate the summary of the PR.@coderabbitai generate docstringsto generate docstrings for this PR.@coderabbitai generate sequence diagramto generate a sequence diagram of the changes in this PR.@coderabbitai resolveresolve all the CodeRabbit review comments.@coderabbitai configurationto show the current CodeRabbit configuration for the repository.@coderabbitai helpto get help.
Other keywords and placeholders
- Add
@coderabbitai ignoreanywhere in the PR description to prevent this PR from being reviewed. - Add
@coderabbitai summaryto generate the high-level summary at a specific location in the PR description. - Add
@coderabbitaianywhere in the PR title to generate the title automatically.
Documentation and Community
- Visit our Documentation for detailed information on how to use CodeRabbit.
- Join our Discord Community to get help, request features, and share feedback.
- Follow us on X/Twitter for updates and announcements.
1 task
✅ Deploy Preview for moadong ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
#️⃣연관된 이슈
📝작업 내용
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit
신규 기능
리팩터