[feature] 비참여 동아리 카드 hover 효과를 제거한다#551
Merged
seongwon030 merged 3 commits intodevelop-fefrom Jul 19, 2025
Merged
Conversation
Contributor
|
Warning
|
| 파일/경로 | 변경 요약 |
|---|---|
| frontend/src/constants/joinedClubNames.ts | 가입한 클럽 이름 배열 joinedClubNames를 새로 정의 및 export |
| frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx | 하드코딩된 미가입 클럽 리스트 제거, joinedClubNames import 및 접근 제어 조건 반전 |
| frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx | joinedClubNames import, 카드 컴포넌트에 $isBlockedClub prop 전달하여 미가입 여부 반영 |
| frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts | 스타일드 컴포넌트에 $isBlockedClub prop 추가, 미가입 시 hover 효과 비활성화 및 커서 변경 |
Sequence Diagram(s)
sequenceDiagram
participant User
participant MainPage
participant ClubCard
participant ClubDetailPage
participant joinedClubNames
User->>MainPage: 페이지 진입
MainPage->>ClubCard: 클럽 리스트 렌더링
ClubCard->>joinedClubNames: 클럽 이름이 joinedClubNames에 포함되어 있는지 확인
alt 미가입 클럽
ClubCard-->>User: hover 효과 없음, 커서 not-allowed
else 가입 클럽
ClubCard-->>User: hover 효과 활성화
end
User->>ClubCard: 클럽 카드 클릭
ClubCard->>ClubDetailPage: 상세 페이지 이동 시도
ClubDetailPage->>joinedClubNames: 클럽 이름이 joinedClubNames에 포함되어 있는지 확인
alt 미가입 클럽
ClubDetailPage-->>User: 접근 차단, alert, 홈으로 리다이렉트
else 가입 클럽
ClubDetailPage-->>User: 상세 페이지 접근 허용
end
Possibly related issues
- Moadong/moadong#549: 클럽 카드 hover 효과를 미가입 클럽에 대해 비활성화하는 요구와 직접적으로 일치합니다.
- [feature] MOA-93 비참여 동아리 카드 hover 효과를 제거한다 #550: 미가입 클럽 카드 hover 효과 제거와 관련된 요구로, 본 PR의 변경과 목적이 동일합니다.
Possibly related PRs
- [feature] 비참여 동아리 상세페이지 접근 시 alert 처리 #548: 기존 접근 차단 로직을
notJoinedClubNames에서joinedClubNames로 리팩토링한 전 단계 PR로, 본 PR과 직접적으로 연결되어 있습니다.
Suggested reviewers
- oesnuj
📜 Recent review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
frontend/src/constants/joinedClubNames.ts(1 hunks)frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx(2 hunks)frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- frontend/src/constants/joinedClubNames.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx
- frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx
✨ 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.
✅ Deploy Preview for moadong ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
2 tasks
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/src/constants/notJoinedClubNames.ts (1)
1-32: 파일명과 export 이름 간의 불일치를 수정해주세요.파일명이
notJoinedClubNames.ts이지만 실제로 export하는 상수는joinedClubNames입니다. 이는 개발자에게 혼란을 줄 수 있습니다.파일명을
joinedClubNames.ts로 변경하거나, 더 명확하게clubMembership.ts같은 이름으로 변경하는 것을 고려해보세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
frontend/src/constants/notJoinedClubNames.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/notJoinedClubNames.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/**/*.{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 : 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} : 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 : 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 : 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/**/*.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 : Choose field-level or form-level cohesion based on form requirements.
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts (5)
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')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.
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 : Use component composition instead of props drilling.
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/**/*.{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 : 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/**/*.tsx : Break down broad state management into smaller, focused hooks or contexts.
🧬 Code Graph Analysis (2)
frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx (1)
frontend/src/constants/notJoinedClubNames.ts (1)
joinedClubNames(1-32)
frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx (1)
frontend/src/constants/notJoinedClubNames.ts (1)
joinedClubNames(1-32)
🔇 Additional comments (6)
frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx (2)
10-10: LGTM! 중앙화된 상수 사용이 적절합니다.중앙화된
joinedClubNames상수를 사용하여 코드 중복을 제거한 점이 좋습니다.
32-32: 클럽 이름 일치 여부 재검증 요청
joinedClubNames상수(frontend/src/constants/notJoinedClubNames.ts)에 정의된 문자열이 실제 백엔드에서 전달되는club.name값과 공백·대소문자·특수문자까지 완벽히 일치하는지 확인해주세요. 매칭 실패 가능성이 있으면 다음을 검토해보세요:
- 실제 API 응답 예시(샘플 데이터)와 상수 배열 비교
- 필요 시 매칭 전 문자열을
.trim(),.toLowerCase()등으로 표준화- 장기적으로는 사용자 입력 또는 DB 저장 방식과 일관된 네이밍 규칙 적용
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts (2)
6-6: 새로운 prop 추가가 적절합니다.
$isBlockedClubprop이 styled-components 컨벤션에 맞게 잘 추가되었습니다.
27-30: 조건부 hover 효과가 잘 구현되었습니다.비참여 동아리에 대해 hover 효과를 비활성화하고
not-allowed커서를 표시하는 로직이 명확하고 사용자 경험을 개선합니다.frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx (2)
16-16: 중앙화된 상수 사용으로 일관성이 개선되었습니다.기존 하드코딩된 배열을 중앙화된 상수로 교체하여 유지보수성이 향상되었습니다.
32-39: 로직 반전이 명확하고 적절합니다."참여하지 않은 클럽" 체크에서 "참여한 클럽" 체크로 로직을 반전시켜 더 직관적으로 개선되었습니다. 동일한 문자열 매칭 정확성 검증이 필요합니다.
seongwon030
deleted the
feature/#550-disable-hover-nonjoined-club-card-MOA-93
branch
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
2 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.
#️⃣연관된 이슈
📝작업 내용
참여동아리 리스트 변경이유
참여하지 않은 동아리인지 검사한다면
clubName만 검사하고, 유효하지 않은 문자열(ex.test, 최종전시회테스트)도 정상적으로 라우팅됩니다.참여동아리인지 검사하고 나머지는 모두 아닌 걸로 간주하도록 변경했습니다.
hover제거
$isBlockedClubprop추가boolean값 전달중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit