Conversation
Walkthrough마이페이지 관련 여러 컴포넌트의 UI/스타일 전면 변경입니다. 전반적으로 테두리 색상을 회색에서 검은색으로 통일하고, 타이포그래피와 패딩/마진을 증대했으며 일부 컴포넌트에서 Next.js Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 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: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
src/components/mypage/quick-menu-section.tsx (1)
37-41: 🛠️ Refactor suggestion | 🟠 Major
img대신next/image의Image컴포넌트를 사용하세요.동일 PR 내
payment-section.tsx,my-shopping-section.tsx에서는 같은 아이콘 렌더링 패턴에Image를 사용하고 있습니다. 일관성과 이미지 최적화를 위해 통일이 필요합니다.♻️ 제안
파일 상단에 import 추가:
import Link from 'next/link'; +import Image from 'next/image';
img→Image교체:- <img + <Image src={`/${item.icon}`} alt={item.label} className="h-full w-full" + width={48} + height={48} />src/app/me/page.tsx (1)
46-48:⚠️ Potential issue | 🟡 Minor하단 네비게이션 바에
max-w-2xl이 적용되지 않아 넓은 화면에서 레이아웃이 깨질 수 있습니다.
main에는max-w-2xl이 있지만,fixed bottom-0 w-full인 네비게이션에는 해당 제약이 없습니다.♻️ 제안
- <div className="fixed bottom-0 w-full"> + <div className="fixed bottom-0 w-full max-w-2xl">src/components/mypage/customer-service-section.tsx (1)
37-42:⚠️ Potential issue | 🟡 Minor
alt텍스트에\n포함 — a11y 주의
item.label이'자주 묻는\n질문'인 경우,alt속성에 리터럴 개행 문자가 들어갑니다. 스크린 리더가 개행을 무시하거나 예상치 못하게 읽을 수 있으므로, alt 전용 필드를 분리하거나replace(/\n/g, ' ')로 공백 치환하는 것이 좋습니다.♿ 제안
<Image src={`/${item.icon}`} - alt={item.label} + alt={item.label.replace(/\n/g, ' ')} width={48} height={48} />
🤖 Fix all issues with AI agents
In `@src/app/me/page.tsx`:
- Around line 15-18: The header's h1 has a top margin that can push the text out
of the centered 64px tall header; remove the `mt-6` from the h1 (the element
with class "mt-6 text-3xl leading-normal font-semibold") or alternatively
increase the header height on the containing element (the header with classes
"sticky top-0 z-20 flex h-16 items-center justify-center bg-white") so the
vertical space matches the h1; update whichever you choose to keep visual center
alignment without overflow.
In `@src/components/mypage/review-request-card.tsx`:
- Around line 27-32: The Link element rendering the button (Link with href using
reviewId) is currently an inline element so py-2 may not affect layout; update
the Link's className to include either inline-block or inline-flex (e.g., add
"inline-flex" or "inline-block") so vertical padding is applied, and remove the
unnecessary inner <span> child to simplify markup (target the Link that builds
href={reviewId ? `/review/write/${reviewId}` : '/review/write'}).
🧹 Nitpick comments (6)
src/components/mypage/profile-section.tsx (1)
25-30: Link를 버튼처럼 스타일링할 때role또는 시맨틱 요소 고려.
Link에 버튼 스타일(bg-ongil-teal,rounded-md등)을 적용하고 있는데, 이 경우 네비게이션 의도이므로 현재Link사용이 적절합니다. 다만, 내부<span>은 불필요한 래퍼입니다.♻️ 불필요한 span 제거
- <span>내 정보 수정</span> + 내 정보 수정src/components/mypage/my-shopping-section.tsx (1)
24-24:gap-[122px]매직 넘버 — 반응형 대응이 되지 않습니다.고정 픽셀 gap은 다양한 화면 크기에서 레이아웃이 깨질 수 있습니다.
justify-around또는justify-evenly를 사용하면 컨테이너 크기에 맞게 자동으로 간격이 조정됩니다.♻️ 제안
- <div className="flex items-center justify-center gap-[122px]"> + <div className="flex items-center justify-evenly">src/components/mypage/payment-section.tsx (1)
22-27: 헤더 보더 스타일 불일치:border-yvsborder-b.
payment-section은border-y(상하 보더)를,my-shopping-section은border-b(하단만)를 사용합니다. 의도된 디자인이 아니라면 통일이 필요합니다.src/components/mypage/customer-service-section.tsx (1)
30-48:settings-section.tsx와 아이콘+라벨 렌더링 패턴 중복두 섹션 모두
Image(48×48)+<span>라벨을 flex-col로 배치하는 동일한 패턴을 사용합니다. 공통IconLabelItem컴포넌트로 추출하면 유지보수가 편해집니다. 지금 당장은 아니더라도 참고해 주세요.src/components/mypage/settings-section.tsx (2)
7-31:item.href!비-null 단언 제거 가능 — 타입 안전성 개선
settingsItems배열이 단일 타입으로 추론되어href가 optional이 됩니다. discriminated union으로 타입을 분리하면!없이도 안전하게 접근할 수 있습니다.🛡️ 타입 개선 제안
-const settingsItems = [ - { - icon: 'icons/notification.svg', - label: '알림 받기', - href: '/me/notifications', - type: 'link' as const, - }, - ... - { - icon: 'icons/logout.svg', - label: '로그아웃', - type: 'logout' as const, - }, - ... -]; +type SettingsLinkItem = { + icon: string; + label: string; + href: string; + type: 'link'; +}; + +type SettingsLogoutItem = { + icon: string; + label: string; + type: 'logout'; +}; + +type SettingsItem = SettingsLinkItem | SettingsLogoutItem; + +const settingsItems: SettingsItem[] = [ + { icon: 'icons/notification.svg', label: '알림 받기', href: '/me/notifications', type: 'link' }, + { icon: 'icons/my-edit.svg', label: '내 정보 수정', href: '/me/edit', type: 'link' }, + { icon: 'icons/logout.svg', label: '로그아웃', type: 'logout' }, + { icon: 'icons/people-delete.svg', label: '회원 탈퇴', href: '/me/withdraw', type: 'link' }, +];그러면
item.type !== 'logout'분기에서item.href가string으로 자동 추론되어!단언이 불필요해집니다:- href={item.href!} + href={item.href}Also applies to: 66-68
45-84: button/Link 내부 콘텐츠 중복
<div className="flex h-12 w-12 ..."><Image .../></div>+<span>블록이 button과 Link에서 동일하게 반복됩니다. 내부 콘텐츠를 변수나 헬퍼로 추출하면 유지보수가 쉬워집니다.♻️ 예시
const ItemContent = ({ icon, label }: { icon: string; label: string }) => ( <> <div className="flex h-12 w-12 items-center justify-center"> <Image src={`/${icon}`} alt={label} className="h-full w-full" width={48} height={48} /> </div> <span className="text-center text-lg leading-normal font-normal">{label}</span> </> );
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/components/mypage/review-request-card.tsx`:
- Line 28: The ternary for the href treats reviewId as falsy (so 0 falls back
incorrectly); change the conditional to explicitly check for undefined/null
(e.g., use reviewId != null or reviewId !== undefined) when building the path so
a valid 0 ID is preserved—update the expression where href is set (the ternary
using reviewId) in the review-request-card component to use an explicit
null/undefined check.
| 받으러 가실까요? | ||
| </p> | ||
| <Link | ||
| href={reviewId ? `/review/write/${reviewId}` : '/review/write'} |
There was a problem hiding this comment.
reviewId가 0일 때 falsy로 평가되어 fallback 경로로 빠집니다.
reviewId?: number이므로 0이 유효한 ID라면 조건문이 의도와 다르게 동작합니다. 실제 ID 체계에서 0이 불가능하다면 무시해도 됩니다.
🛡️ 엄격한 undefined 체크
- href={reviewId ? `/review/write/${reviewId}` : '/review/write'}
+ href={reviewId !== undefined ? `/review/write/${reviewId}` : '/review/write'}📝 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.
| href={reviewId ? `/review/write/${reviewId}` : '/review/write'} | |
| href={reviewId !== undefined ? `/review/write/${reviewId}` : '/review/write'} |
🤖 Prompt for AI Agents
In `@src/components/mypage/review-request-card.tsx` at line 28, The ternary for
the href treats reviewId as falsy (so 0 falls back incorrectly); change the
conditional to explicitly check for undefined/null (e.g., use reviewId != null
or reviewId !== undefined) when building the path so a valid 0 ID is
preserved—update the expression where href is set (the ternary using reviewId)
in the review-request-card component to use an explicit null/undefined check.
1 participant
📝 개요
🚀 주요 변경 사항
📸 스크린샷 (선택)
✅ 체크리스트
이슈 해결 여부
PR 본문에 Closes #이슈번호 이라고 적으면, PR이 머지될 때 해당 이슈가 자동으로 닫힙니다