fix(mypage): 마이페이지 UI 개선 - #105
Merged
Merged
Conversation
- 상점/고객문의 메뉴 클릭 시 페이지 이동 대신 토스트 메시지 표시 - 회원탈퇴 페이지 본문 폰트 색상을 text-secondary에서 text-primary로 변경 - 회원탈퇴 페이지 상단에 사용자 프로필(아바타, 이름, 이메일) 표시 Co-Authored-By: Claude <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
📝 WalkthroughWalkthrough마이페이지 메뉴에서 Changes마이페이지 준비중 메뉴 토스트 처리
탈퇴 페이지 프로필 UI 추가
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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: 1
🧹 Nitpick comments (1)
src/app/(page)/mypage/page.tsx (1)
71-88: 🧹 Nitpick | 🔵 Trivial | ⚡ Quick win준비중 버튼에 접근성 속성 추가를 권장합니다.
준비중 항목은
button으로 렌더링되지만 시각적으로Link와 동일하게 보입니다. 스크린 리더 사용자는 클릭하기 전까지 해당 항목이 탐색하지 않고 토스트를 표시한다는 것을 알 수 없습니다.
aria-label을 추가하여 준비중임을 명시하는 것이 좋습니다.♿ 접근성 개선 제안
isPreparing(item.key) ? ( <button key={item.key} type="button" className={styles.menu__item} onClick={() => showToast('준비중입니다.')} + aria-label={`${item.label} (준비중)`} > <span className={styles.menu__label}>{item.label}</span> <ChevronRightRoundedIcon className={styles.menu__arrow} /> </button>🤖 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 `@src/app/`(page)/mypage/page.tsx around lines 71 - 88, The button element rendered when isPreparing(item.key) is true lacks accessibility attributes that would inform screen reader users that this is a preparing/unavailable menu item, making it indistinguishable from regular navigation links. Add an aria-label attribute to the button element that clearly indicates the item is under preparation (e.g., "준비중인 메뉴" or similar), so screen reader users understand the button's purpose and disabled state before interacting with it.
🤖 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 `@src/app/`(page)/mypage/withdraw/page.tsx:
- Around line 106-114: The Avatar component in the profile section is missing
the `alt` attribute required for accessibility compliance. Add an `alt` prop to
the Avatar component (the one with size="l" and src={user?.profileImageUrl ??
undefined}) with a descriptive alternative text, such as using the displayName
variable or a fallback value like "User profile image", to ensure screen reader
users can understand the purpose of the image and meet WCAG accessibility
standards.
---
Nitpick comments:
In `@src/app/`(page)/mypage/page.tsx:
- Around line 71-88: The button element rendered when isPreparing(item.key) is
true lacks accessibility attributes that would inform screen reader users that
this is a preparing/unavailable menu item, making it indistinguishable from
regular navigation links. Add an aria-label attribute to the button element that
clearly indicates the item is under preparation (e.g., "준비중인 메뉴" or similar), so
screen reader users understand the button's purpose and disabled state before
interacting with it.
🪄 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: Repository UI (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 713f343a-517c-4c87-8d62-ee79f2ce613a
📒 Files selected for processing (3)
src/app/(page)/mypage/page.tsxsrc/app/(page)/mypage/withdraw/page.module.scsssrc/app/(page)/mypage/withdraw/page.tsx
Comment on lines
+106
to
+114
| <section className={styles.profile}> | ||
| <Avatar size="l" src={user?.profileImageUrl ?? undefined} /> | ||
| <div className={styles.profile__info}> | ||
| <span className={styles.profile__name}>{displayName}</span> | ||
| <span className={styles.profile__email}>{user?.email ?? ''}</span> | ||
| </div> | ||
| </section> | ||
| <div className={styles.terms}> | ||
| {WITHDRAW_TERMS.map(section => ( | ||
| {WITHDRAW_TERMS.map((section) => ( |
Contributor
There was a problem hiding this comment.
Avatar에 접근성을 위한 alt 속성을 추가해야 합니다.
스크린 리더 사용자를 위해 Avatar 컴포넌트에 대체 텍스트를 제공해야 합니다. 현재 alt 속성이 누락되어 있어 접근성 기준(WCAG)을 위반합니다.
♿ 접근성 개선 제안
- <section className={styles.profile}>
- <Avatar size="l" src={user?.profileImageUrl ?? undefined} />
+ <section className={styles.profile}>
+ <Avatar size="l" src={user?.profileImageUrl ?? undefined} alt={displayName || '사용자'} />
<div className={styles.profile__info}>🤖 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 `@src/app/`(page)/mypage/withdraw/page.tsx around lines 106 - 114, The Avatar
component in the profile section is missing the `alt` attribute required for
accessibility compliance. Add an `alt` prop to the Avatar component (the one
with size="l" and src={user?.profileImageUrl ?? undefined}) with a descriptive
alternative text, such as using the displayName variable or a fallback value
like "User profile image", to ensure screen reader users can understand the
purpose of the image and meet WCAG accessibility standards.
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
1 participant
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
text-secondary(회색)에서text-primary(검정)로 변경/api/user/me활용)Test plan
🤖 Generated with Claude Code
Summary by CodeRabbit
릴리스 노트
신규 기능
스타일