feat:동아리 상세페이지 구현#309
Merged
Hidden character warning
The head ref may contain hidden characters: "308-feat-\ub3d9\uc544\ub9ac-\uc0c1\uc138\ud398\uc774\uc9c0-\uad6c\ud604"
Merged
Conversation
Closed
Contributor
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
Walkthrough이 PR은 동아리 상세 페이지 기능을 전체적으로 구현합니다. ClubDetail API 계약(ClubCategory, ClubDetailResponse, Recruitment)을 정의하고, React Query 쿼리 키와 옵션을 설정합니다. 신규 ClubDetail 페이지 컴포넌트는 대학/동아리 정보, 모집 상태, 소개 콘텐츠를 렌더링하며, CATEGORY_TEXT_COLORS 상수로 카테고리 색상을 적용합니다. App.tsx에 Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (4)
apps/web/src/apis/clubDetail/entity.ts (1)
1-1: ⚡ Quick win내부 import는
@/*별칭으로 통일해주세요.상대 경로 대신 앱 내부 별칭을 쓰는 편이 유지보수에 유리합니다.
♻️ 제안 수정
-import type { UniversitySummary } from '../universityClub/entity'; +import type { UniversitySummary } from '`@/apis/universityClub/entity`';As per coding guidelines,
**/*.{ts,tsx}: Use path alias@/*for internal app imports (preferred over relative paths).🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/web/src/apis/clubDetail/entity.ts` at line 1, Replace the relative import for UniversitySummary with the app alias import: change the existing import of UniversitySummary from '../universityClub/entity' to use the internal path alias (e.g. import type { UniversitySummary } from '`@/apis/universityClub/entity`') so all internal imports use the `@/*` convention; update the import statement that references UniversitySummary in the clubDetail entity module accordingly.apps/web/src/pages/ClubDetail/index.tsx (1)
15-25: ⚡ Quick win임의값 유틸리티 대신 디자인 토큰/시맨틱 타이포 클래스로 정리해주세요.
bg-[#F8FAFC],text-[20px]같은 값은 토큰 기반 스타일링 원칙과 맞지 않습니다.As per coding guidelines,
**/*.{ts,tsx,css}: Use CSS export from@konect/design-tokensfor design tokens, prioritized over inline values. As per coding guidelines,**/*.{ts,tsx}: Prioritize semantic typography utilities (e.g.,text-h1,text-body1) over generic utilities.Also applies to: 108-113
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/web/src/pages/ClubDetail/index.tsx` around lines 15 - 25, Replace hard-coded utility values in the ClubDetail sections (the two <section> blocks that render AddPhoto and AddMov) with design-token classes and semantic typography utilities: remove bg-[`#F8FAFC`] and text-[20px] (and any other arbitrary numeric utilities in those blocks and at lines 108-113) and use the CSS exports from `@konect/design-tokens` for background colors and borders, and swap the raw font-size utility for a semantic typography class such as text-body1 or text-hX per the token map; update the className strings on the section elements and the span elements that render "활동 사진" and "소개 영상" to use the token-based bg/border classes and the semantic text-* class instead of inline bracketed values.apps/web/src/constants/club.ts (1)
8-8: ⚡ Quick win카테고리 색상은 하드코딩 HEX 대신 디자인 토큰 클래스를 사용해주세요.
text-[#cd3bf6]는 토큰 일관성을 깨서 테마/브랜딩 변경 시 유지보수가 어려워집니다.As per coding guidelines,
**/*.{ts,tsx,css}: Use CSS export from@konect/design-tokensfor design tokens, prioritized over inline values.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/web/src/constants/club.ts` at line 8, The PERFORMANCE category color is hardcoded as 'text-[`#cd3bf6`]'—replace it with the appropriate design-token class from the CSS export in `@konect/design-tokens` to keep theming consistent: update the exported constant where PERFORMANCE is defined (the key named PERFORMANCE in the constants object) to use the token classname instead, and add/import the CSS tokens from '`@konect/design-tokens`' (prefer the provided token name that maps to the purple color) rather than an inline HEX value.apps/web/src/apis/clubDetail/index.ts (1)
1-2: ⚡ Quick winAPI 레이어 import도
@/*별칭으로 맞춰주세요.현재 상대 경로 import가 섞여 있어 컨벤션 일관성이 깨집니다.
♻️ 제안 수정
-import { apiClient } from '../client'; -import type { ClubDetailResponse } from './entity'; +import { apiClient } from '`@/apis/client`'; +import type { ClubDetailResponse } from '`@/apis/clubDetail/entity`';As per coding guidelines,
**/*.{ts,tsx}: Use path alias@/*for internal app imports (preferred over relative paths).🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/web/src/apis/clubDetail/index.ts` around lines 1 - 2, Replace the relative imports for apiClient and ClubDetailResponse with the project path-alias form (use `@/`*) so imports are consistent with the app convention; update the import statements that currently reference '../client' and './entity' to their equivalent '`@/`...' alias imports (ensuring the symbols apiClient and ClubDetailResponse are imported), and adjust any affected import paths or tsconfig path mappings if necessary.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/web/src/pages/ClubDetail/index.tsx`:
- Line 79: The UI displays clubDetail.university.clubCount directly which can
render "undefined개 동아리" if clubCount is optional; update the rendering in the
ClubDetail component to use a safe fallback (e.g.,
clubDetail.university?.clubCount ?? 0 or String(clubDetail.university?.clubCount
?? 0)) so the text always shows a valid number like "0개 동아리" and avoid breaking
UX when clubCount is missing.
- Line 66: The breadcrumb Link in the ClubDetail component is hardcoded to
"/universities/1/clubs"; replace that static path with a dynamic path derived
from the university id available in this component (for example use the route
params via useParams() or the club data's universityId/university.id) so the
Link navigates to `/universities/${universityId}/clubs` (or use
generatePath/route helper if available); update the Link rendering in ClubDetail
(index.tsx) to reference the dynamic variable instead of the literal string.
In `@apps/web/src/pages/UniversityClubList/index.tsx`:
- Line 92: The root div className in the UniversityClubList component (the JSX
line containing "mx-auto flex w-full max-w-369.5 flex-col px-5 pt-12 pb-20
sm:px-8 lg:pt-25.5 xl:px-0") and the other listed locations use hardcoded
Tailwind arbitrary values (e.g., max-w-369.5, rounded-[40px], h-19.5,
size-17.5); replace each arbitrary class with the corresponding shared
design-token utility from `@konect/design-tokens` (import the CSS tokens export if
not already imported) so e.g., swap max-w-369.5 → the token-based max-width
class, rounded-[40px] → token rounded class, h-19.5 → token height class,
size-17.5 → token font-size class; apply the same replacements at the other
occurrences you noted (lines 109, 119, 146, 203, 207, 226) to ensure consistent
token-based styling across the UniversityClubList component.
- Line 205: Replace the card click handlers that call useNavigate/onClick with
semantic links: in the components RecentClubCard and ClubCard, remove the
onClick={() => navigate(`/clubs/${club.id}`)} handlers and wrap the card (or its
interactive container) with a React Router <Link to={`/clubs/${club.id}`}> so
the target URL is used for navigation; ensure any button role or keyboard
handlers are removed or adjusted and that the Link preserves styling and props
previously applied to the clickable card element to retain visuals and
accessibility.
---
Nitpick comments:
In `@apps/web/src/apis/clubDetail/entity.ts`:
- Line 1: Replace the relative import for UniversitySummary with the app alias
import: change the existing import of UniversitySummary from
'../universityClub/entity' to use the internal path alias (e.g. import type {
UniversitySummary } from '`@/apis/universityClub/entity`') so all internal imports
use the `@/*` convention; update the import statement that references
UniversitySummary in the clubDetail entity module accordingly.
In `@apps/web/src/apis/clubDetail/index.ts`:
- Around line 1-2: Replace the relative imports for apiClient and
ClubDetailResponse with the project path-alias form (use `@/`*) so imports are
consistent with the app convention; update the import statements that currently
reference '../client' and './entity' to their equivalent '`@/`...' alias imports
(ensuring the symbols apiClient and ClubDetailResponse are imported), and adjust
any affected import paths or tsconfig path mappings if necessary.
In `@apps/web/src/constants/club.ts`:
- Line 8: The PERFORMANCE category color is hardcoded as
'text-[`#cd3bf6`]'—replace it with the appropriate design-token class from the CSS
export in `@konect/design-tokens` to keep theming consistent: update the exported
constant where PERFORMANCE is defined (the key named PERFORMANCE in the
constants object) to use the token classname instead, and add/import the CSS
tokens from '`@konect/design-tokens`' (prefer the provided token name that maps to
the purple color) rather than an inline HEX value.
In `@apps/web/src/pages/ClubDetail/index.tsx`:
- Around line 15-25: Replace hard-coded utility values in the ClubDetail
sections (the two <section> blocks that render AddPhoto and AddMov) with
design-token classes and semantic typography utilities: remove bg-[`#F8FAFC`] and
text-[20px] (and any other arbitrary numeric utilities in those blocks and at
lines 108-113) and use the CSS exports from `@konect/design-tokens` for background
colors and borders, and swap the raw font-size utility for a semantic typography
class such as text-body1 or text-hX per the token map; update the className
strings on the section elements and the span elements that render "활동 사진" and
"소개 영상" to use the token-based bg/border classes and the semantic text-* class
instead of inline bracketed values.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 6241cb60-cba5-4172-bb0b-595464620a2a
⛔ Files ignored due to path filters (3)
apps/web/src/assets/None-image.pngis excluded by!**/*.png,!apps/*/src/assets/**and included by**apps/web/src/assets/add-mov.svgis excluded by!**/*.svg,!apps/*/src/assets/**and included by**apps/web/src/assets/add-photo.svgis excluded by!**/*.svg,!apps/*/src/assets/**and included by**
📒 Files selected for processing (8)
apps/web/src/App.tsxapps/web/src/apis/clubDetail/entity.tsapps/web/src/apis/clubDetail/index.tsapps/web/src/apis/clubDetail/queries.tsapps/web/src/apis/universityClub/entity.tsapps/web/src/constants/club.tsapps/web/src/pages/ClubDetail/index.tsxapps/web/src/pages/UniversityClubList/index.tsx
| return ( | ||
| <main className="bg-web-background min-h-screen text-black"> | ||
| <div className="mx-auto flex w-full max-w-[1478px] flex-col px-5 pt-12 pb-20 sm:px-8 lg:pt-[102px] xl:px-0"> | ||
| <div className="mx-auto flex w-full max-w-369.5 flex-col px-5 pt-12 pb-20 sm:px-8 lg:pt-25.5 xl:px-0"> |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major | 🏗️ Heavy lift
하드코딩된 Tailwind 임의값 대신 디자인 토큰 클래스로 통일해주세요.
변경된 구간에 max-w-369.5, rounded-[40px], h-19.5, size-17.5 같은 임의값 클래스가 섞여 있어 토큰 기반 스타일 일관성이 깨집니다. 공용 토큰(또는 토큰 기반 유틸 클래스)으로 치환하는 쪽이 안전합니다.
As per coding guidelines, "**/*.{ts,tsx,css}: Use Tailwind CSS v4 with shared design tokens from @konect/design-tokens / Use CSS export from @konect/design-tokens for design tokens, prioritized over inline values".
Also applies to: 109-109, 119-119, 146-146, 203-203, 207-207, 226-226
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/web/src/pages/UniversityClubList/index.tsx` at line 92, The root div
className in the UniversityClubList component (the JSX line containing "mx-auto
flex w-full max-w-369.5 flex-col px-5 pt-12 pb-20 sm:px-8 lg:pt-25.5 xl:px-0")
and the other listed locations use hardcoded Tailwind arbitrary values (e.g.,
max-w-369.5, rounded-[40px], h-19.5, size-17.5); replace each arbitrary class
with the corresponding shared design-token utility from `@konect/design-tokens`
(import the CSS tokens export if not already imported) so e.g., swap max-w-369.5
→ the token-based max-width class, rounded-[40px] → token rounded class, h-19.5
→ token height class, size-17.5 → token font-size class; apply the same
replacements at the other occurrences you noted (lines 109, 119, 146, 203, 207,
226) to ensure consistent token-based styling across the UniversityClubList
component.
This was referenced May 25, 2026
Merged
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.
✨ 요약
😎 해결한 이슈
Summary by CodeRabbit
새로운 기능 및 개선 사항
새로운 기능
개선 사항