[refactor] 마이페이지 관리자 진입 구조 정리#281
Conversation
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 48 minutes and 54 seconds. ⌛ 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 (3)
Walkthrough마이페이지에서 관리중인 동아리 목록을 직접 노출하기 위해 별도의 ManagedClubList 페이지와 라우트를 제거했다. Profile 헤더를 제거하고 Info 헤더로 통합하여 헤더 구조를 단순화했다. MyPageRows 컴포넌트를 신규 추가하여 행 UI 중복을 줄였고, useSmartBack의 라우팅 로직을 조정했다. Possibly related PRs
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 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}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
src/components/common/Card.tsx (1)
11-13:clsx + twMerge직접 사용 대신cn()유틸로 통일해주세요.현재 동작은 맞지만, 프로젝트 컨벤션상 Tailwind 클래스 병합은
cn()으로 일원화하는 것이 맞습니다.변경 제안
import type { HTMLAttributes, ReactNode } from 'react'; -import clsx from 'clsx'; -import { twMerge } from 'tailwind-merge'; +import { cn } from '@/utils/ts/cn'; @@ - className={twMerge(clsx('border-indigo-5 flex w-full flex-col gap-3 rounded-lg border bg-white p-3', className))} + className={cn('border-indigo-5 flex w-full flex-col gap-3 rounded-lg border bg-white p-3', className)}As per coding guidelines, "Use
cn()utility fromsrc/utils/ts/cn.tsto merge Tailwind CSS classes".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/common/Card.tsx` around lines 11 - 13, In the Card component, replace the combined use of clsx and twMerge for class merging with the project's cn() utility: import cn from the cn.ts module and use cn('border-indigo-5 flex w-full flex-col gap-3 rounded-lg border bg-white p-3', className) in place of twMerge(clsx(...)); ensure the spread {...props} and the className prop remain intact so external classes still merge via cn().src/pages/User/MyPage/components/MyPageRows.tsx (1)
46-47: 타이포그래피 토큰으로 통일해주세요.여기만
text-[13px],text-sm,leading-4같은 임의 조합을 써서 마이페이지 행 텍스트 스타일이 분산됩니다.text-sub*/text-body*토큰으로 맞추는 편이 좋겠습니다.As per coding guidelines, "Use typography tokens (
text-h1totext-h5,text-sub1totext-sub4,text-body1totext-body3,text-cap1totext-cap2) for consistent typography".Also applies to: 54-54
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/User/MyPage/components/MyPageRows.tsx` around lines 46 - 47, The row uses raw classes ("text-[13px]", "text-sm", "leading-4") which breaks typography tokens; update the JSX in MyPageRows (the rightSlot prop and labelClassName usage) to replace those ad-hoc classes with the proper typography tokens (e.g., text-sub*/text-body* and the corresponding leading token) so both the rightSlot wrapper and labelClassName use consistent tokens (pick the matching token for the visual size used currently) and remove the raw size/leading utilities.src/pages/User/MyPage/index.tsx (1)
14-14: 새 import는 alias로 맞춰주세요.추가된
MyPageRowsimport는 상대 경로 대신@/*alias를 쓰는 쪽이 이 레포 규칙과 일관됩니다.As per coding guidelines, "Use path alias `@/*` for imports instead of relative paths".예시 수정
-import { MyPageActionRow, MyPageInfoRow, MyPageLinkRow } from './components/MyPageRows'; +import { MyPageActionRow, MyPageInfoRow, MyPageLinkRow } from '@/pages/User/MyPage/components/MyPageRows';🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/User/MyPage/index.tsx` at line 14, Update the import for MyPageActionRow, MyPageInfoRow, and MyPageLinkRow to use the repository path alias instead of a relative path; replace the current relative import "import { MyPageActionRow, MyPageInfoRow, MyPageLinkRow } from './components/MyPageRows';" with the aliased form using `@/` (e.g., import from '@/pages/User/MyPage/components/MyPageRows' or the appropriate alias-based module path) so it matches the repo's alias convention.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/pages/User/MyPage/components/UserInfoCard.tsx`:
- Line 36: The clickable Card using the Card component with
onClick={handleCardClick} lacks keyboard accessibility; update the Card (or wrap
it) to be keyboard-focusable by either rendering it as a semantic interactive
element (button/Link) or by adding role="button", tabIndex={0}, and an onKeyDown
handler that invokes handleCardClick when Enter or Space is pressed; ensure the
same props (aria-label if needed) and any dynamic className logic remain
unchanged and that handleCardClick is idempotent for both click and key
activation.
In `@src/pages/User/MyPage/index.tsx`:
- Around line 50-53: The <img> using club.imageUrl currently has a generic alt
"Club Avatar"; change the alt handling in the JSX so decorative images use
alt="" and informative images use the club's name (e.g., alt={club.name}) so
each club is distinguishable by screen readers; update the <img> element where
club.imageUrl is used (reference the img tag and club.name) to set alt
conditionally or replace the static string with club.name as appropriate.
In `@src/utils/hooks/useSmartBack.ts`:
- Around line 80-81: The fallback targetPath in useSmartBack currently sets
'/mypage/manager', which isn't a valid route; update the fallback logic in the
useSmartBack hook so targetPath points to an existing page — for example use
'/mypage' as the default, or when a clubId is available construct the club
detail route (e.g., use the clubId to build the detail path) instead of
'/mypage/manager'; modify the branch that assigns targetPath to check for clubId
and fall back to '/mypage' to avoid navigating to a non-existent route.
---
Nitpick comments:
In `@src/components/common/Card.tsx`:
- Around line 11-13: In the Card component, replace the combined use of clsx and
twMerge for class merging with the project's cn() utility: import cn from the
cn.ts module and use cn('border-indigo-5 flex w-full flex-col gap-3 rounded-lg
border bg-white p-3', className) in place of twMerge(clsx(...)); ensure the
spread {...props} and the className prop remain intact so external classes still
merge via cn().
In `@src/pages/User/MyPage/components/MyPageRows.tsx`:
- Around line 46-47: The row uses raw classes ("text-[13px]", "text-sm",
"leading-4") which breaks typography tokens; update the JSX in MyPageRows (the
rightSlot prop and labelClassName usage) to replace those ad-hoc classes with
the proper typography tokens (e.g., text-sub*/text-body* and the corresponding
leading token) so both the rightSlot wrapper and labelClassName use consistent
tokens (pick the matching token for the visual size used currently) and remove
the raw size/leading utilities.
In `@src/pages/User/MyPage/index.tsx`:
- Line 14: Update the import for MyPageActionRow, MyPageInfoRow, and
MyPageLinkRow to use the repository path alias instead of a relative path;
replace the current relative import "import { MyPageActionRow, MyPageInfoRow,
MyPageLinkRow } from './components/MyPageRows';" with the aliased form using `@/`
(e.g., import from '@/pages/User/MyPage/components/MyPageRows' or the
appropriate alias-based module path) so it matches the repo's alias convention.
🪄 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: 44d357f2-c4ce-4bfb-8c3b-3a26a991d8b0
📒 Files selected for processing (11)
src/App.tsxsrc/components/common/Card.tsxsrc/components/layout/Header/components/ProfileHeader.tsxsrc/components/layout/Header/headerConfig.tssrc/components/layout/Header/index.tsxsrc/components/layout/Header/types.tssrc/pages/Manager/ManagedClubList/index.tsxsrc/pages/User/MyPage/components/MyPageRows.tsxsrc/pages/User/MyPage/components/UserInfoCard.tsxsrc/pages/User/MyPage/index.tsxsrc/utils/hooks/useSmartBack.ts
💤 Files with no reviewable changes (5)
- src/components/layout/Header/index.tsx
- src/components/layout/Header/components/ProfileHeader.tsx
- src/App.tsx
- src/components/layout/Header/types.ts
- src/pages/Manager/ManagedClubList/index.tsx
|
|
||
| return ( | ||
| <Card className="active:bg-indigo-5/50 cursor-pointer gap-0 p-3" onClick={handleCardClick}> | ||
| <Card className="active:bg-indigo-5/50 cursor-pointer gap-0 rounded-2xl p-3" onClick={handleCardClick}> |
There was a problem hiding this comment.
클릭 가능한 Card에 키보드 접근성 보완이 필요합니다.
현재 onClick만 사용하면 키보드 사용자에게는 진입이 막힐 수 있습니다. button/Link로 감싸거나 role="button", tabIndex, onKeyDown을 함께 처리해주세요.
간단한 보완 예시
- <Card className="active:bg-indigo-5/50 cursor-pointer gap-0 rounded-2xl p-3" onClick={handleCardClick}>
+ <Card
+ className="active:bg-indigo-5/50 cursor-pointer gap-0 rounded-2xl p-3"
+ role="button"
+ tabIndex={0}
+ onClick={handleCardClick}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') handleCardClick();
+ }}
+ >As per coding guidelines, "동적 className 조합, 접근성(aria-*, role, 키보드 탐색), Props 타입 일관성을 우선 확인하는지".
📝 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.
| <Card className="active:bg-indigo-5/50 cursor-pointer gap-0 rounded-2xl p-3" onClick={handleCardClick}> | |
| <Card | |
| className="active:bg-indigo-5/50 cursor-pointer gap-0 rounded-2xl p-3" | |
| role="button" | |
| tabIndex={0} | |
| onClick={handleCardClick} | |
| onKeyDown={(e) => { | |
| if (e.key === 'Enter' || e.key === ' ') handleCardClick(); | |
| }} | |
| > |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/User/MyPage/components/UserInfoCard.tsx` at line 36, The clickable
Card using the Card component with onClick={handleCardClick} lacks keyboard
accessibility; update the Card (or wrap it) to be keyboard-focusable by either
rendering it as a semantic interactive element (button/Link) or by adding
role="button", tabIndex={0}, and an onKeyDown handler that invokes
handleCardClick when Enter or Space is pressed; ensure the same props
(aria-label if needed) and any dynamic className logic remain unchanged and that
handleCardClick is idempotent for both click and key activation.
| <img | ||
| src={club.imageUrl} | ||
| alt="Club Avatar" | ||
| className="border-indigo-5 h-12 w-12 rounded-sm border object-cover" |
There was a problem hiding this comment.
대체 텍스트가 너무 일반적입니다.
지금은 모든 동아리 이미지가 스크린리더에서 동일하게 "Club Avatar"로 읽힙니다. 장식용이면 alt=""로 비우고, 정보용이면 club.name 기반으로 넣어 항목별로 구분되게 해주세요.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/User/MyPage/index.tsx` around lines 50 - 53, The <img> using
club.imageUrl currently has a generic alt "Club Avatar"; change the alt handling
in the JSX so decorative images use alt="" and informative images use the club's
name (e.g., alt={club.name}) so each club is distinguishable by screen readers;
update the <img> element where club.imageUrl is used (reference the img tag and
club.name) to set alt conditionally or replace the static string with club.name
as appropriate.
1 participant
✨ 요약
왜 변경했나요?
사용자 영향
/mypage/manager/:clubId에서 뒤로가기를 누르면/mypage로 이동합니다.검증
pnpm lintpnpm build😎 해결한 이슈
close #280
Summary by CodeRabbit
릴리스 노트
New Features
Changes