[feature] 비참여 동아리 상세페이지 접근 시 alert 처리

[seongwon030]

#️⃣연관된 이슈

ex) #547

📝작업 내용

• 비참여 동아리 정적 데이터 정의 1f33dea
• 비참여 동아리 리다이렉션 및 alert처리 b5d1343

고민한 부분

1. clubId리스트를 만들고 router에서 미리 걸러주기 
2. 상세페이지에서 clubName기준으로 리다이렉션

1번으로 하면 clubId를 상수로 관리해야 하는데 혹시 모를 보안문제가 생길 수도 있다고 판단했습니다.
추가로 커스텀 훅을 구현해야 하는 번거로움도 있을 것 같네요.

구현방식

1. clubName이 비참여 동아리인지 확인한다
2. 비참여 동아리라면 alert를 띄운다
3. 홈으로 리다이렉션을 한다

✔️ 로딩 상태가 필요한 이유

• clubDetailPage.tsx에서 렌더링 전에 (tanstack으로) clubDetail 값을 받기 떄문입니다.

발생하는 문제

(1) mount
↓
(2) fetch clubDetail
↓
(3) clubDetail 도착
↓
(4) 렌더링 발생
↓
(5) useEffect → alert → navigate('/')

=> 렌더링 후 다시 리다이렉션되기에 깜빡거림이 발생합니다.

로딩 상태 추가

 const [blockState, setBlockState] = useState<
    'checking' | 'blocked' | 'allowed'
  >('checking');

• clubDetail 도착 전 → 'checking' 상태 → 렌더링 안 함

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

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

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

논의하고 싶은 부분(선택)

논의하고 싶은 부분이 있다면 작성해주세요.

🫡 참고사항

Summary by CodeRabbit

• 신규 기능
  • 가입하지 않은 동아리의 상세 페이지 접근 시, 접근이 차단되고 홈 화면으로 자동 이동됩니다.
  • 차단된 동아리 접근 시 안내 알림이 표시됩니다.

[netlify]

✅ Deploy Preview for moadong ready!

Name	Link
🔨 Latest commit	b5d1343
🔍 Latest deploy log	https://app.netlify.com/projects/moadong/deploys/687a75d54967640008708b0f
😎 Deploy Preview	https://deploy-preview-548--moadong.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 38 Accessibility: 89 Best Practices: 92 SEO: 92 PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[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.
• 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

ClubDetailPage 컴포넌트에 클럽 상세 접근 시 클라이언트 측 접근 제어 로직이 추가되었습니다. 미가입 클럽 이름 목록을 기준으로 접근 시 alert를 띄우고, 홈으로 강제 이동하며, 렌더링을 차단하는 상태 관리와 useEffect 훅이 도입되었습니다.

Changes

파일/경로	변경 요약
frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx	미가입 클럽 이름 배열, blockState 상태, 접근 차단 useEffect, alert 및 홈 이동, 렌더 조건 수정 등 접근 제어 로직 추가

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant ClubDetailPage
    participant Router

    User->>ClubDetailPage: 상세페이지 접근
    ClubDetailPage->>ClubDetailPage: 클럽 정보 fetch
    ClubDetailPage->>ClubDetailPage: notJoinedClubNames 포함 여부 확인
    alt 미가입 클럽일 때
        ClubDetailPage->>User: alert("미가입 클럽입니다")
        ClubDetailPage->>Router: navigate('/')
        ClubDetailPage-->>User: 렌더링 차단(null 반환)
    else 가입 클럽일 때
        ClubDetailPage-->>User: 정상 렌더링
    end

Loading

Possibly related issues

• [feature] MOA-89 비참여 동아리 상세페이지 접근 시 alert 처리 #547: 미가입(비참여) 동아리 상세페이지 접근 시 alert 처리 및 라우팅 차단 요구와 본 PR의 클라이언트 차단 및 alert 로직이 직접적으로 일치합니다.

✨ 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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 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 @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in 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 pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere 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.

[coderabbitai]

Actionable comments posted: 1

🔭 Outside diff range comments (1)

frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx (1)

17-95: 전반적인 아키텍처 권장사항

현재 구현은 요구사항을 충족하지만, 프로덕션 환경을 위한 개선이 필요합니다:

1. 서버 사이드 접근 제어: 클라이언트 사이드 검증은 보안상 우회 가능
2. 동적 설정 관리: 하드코딩된 클럽 목록을 설정 파일이나 API로 관리
3. 에러 바운더리: 접근 제어 실패시 적절한 에러 처리
4. 로딩 UX: 접근 확인 중 로딩 인디케이터 표시

향후 개선 방향:

// 1. API에서 접근 권한 정보 포함
interface ClubDetail {
  // ... 기존 필드들
  isAccessible: boolean;
  accessDeniedReason?: string;
}

// 2. 커스텀 훅으로 접근 제어 로직 분리
const useClubAccessControl = (clubDetail: ClubDetail) => {
  // 접근 제어 로직
};

🧹 Nitpick comments (1)

frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx (1)

70-80: 접근 제어 로직은 올바르지만 UX 개선 필요

핵심 로직은 정확하고 의존성 배열도 적절합니다. 하지만 사용자 경험을 개선할 수 있습니다:

1. Alert 대신 모달이나 토스트 사용 권장
2. 사용자에게 더 친화적인 메시지 제공
3. 로딩 상태 표시 고려

// 개선안: 토스트 라이브러리 사용 예시
import { toast } from 'react-toastify';

// useEffect 내부에서
if (notJoinedClubNames.includes(clubDetail?.name || '')) {
  setBlockState('blocked');
  toast.warn('현재 참여하지 않는 동아리입니다.', {
    position: 'top-center',
    autoClose: 3000,
  });
  navigate('/', { replace: true });
}

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7259d0c and b5d1343.

📒 Files selected for processing (1)

• frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx (3 hunks)

🧰 Additional context used

🧠 Learnings (2)

📓 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')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.

frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx (4)

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-07T13:25:48.135Z
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-07T13:25:48.135Z
Learning: Applies to frontend/**/*.tsx : Break down broad state management into smaller, focused hooks or contexts.

Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-07T13:25:48.135Z
Learning: Applies to frontend/**/*.tsx : Colocate simple, localized logic or use inline definitions to reduce context switching.

🧬 Code Graph Analysis (1)

frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx (1)

frontend/src/hooks/queries/club/useGetClubDetail.ts (1)

• useGetClubDetail (6-20)

🔇 Additional comments (3)

frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx (3)

2-2: Import 추가 승인

useNavigate 훅 import는 접근 제어 로직에서 필요한 네비게이션 기능을 위해 적절히 추가되었습니다.

---

64-67: 상태 관리 구조 승인

blockState를 통한 3단계 상태 관리('checking', 'blocked', 'allowed')는 렌더링 플로우를 명확하게 제어하며, 비동기 데이터 로딩과 접근 제어를 적절히 처리합니다.

---

93-95: 렌더링 조건 로직 승인

blockState !== 'allowed' 조건을 포함한 렌더링 제어는 접근이 허용된 경우에만 컴포넌트가 렌더링되도록 적절히 구현되었습니다.

[Zepelown]

하드 코딩 고생하셨습니다..