프리미엄 아이템 소장 리스트 UI 추가, 이미지 추가#16
Conversation
📝 WalkthroughWalkthrough마이페이지에 프리미엄 아이템 리스트 UI를 추가하고 섹션 순서를 조정했습니다. 새 컴포넌트 PremiumItemsList를 도입하여 마이페이지 상단에 렌더링하고, 기존 로그인 정보/구매 섹션의 번호를 재배치했습니다. 데이터 페치나 모달 로직 변경은 없습니다. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant MP as MyPage (page.tsx)
participant PL as PremiumItemsList
participant ID as Item Detail Page
U->>MP: 마이페이지 접속
MP->>PL: PremiumItemsList 렌더
PL-->>U: 프리미엄 아이템 가로 리스트 표시
U->>PL: 아이템 클릭
PL->>ID: 링크 이동 /items/{id}
ID-->>U: 아이템 상세 표시
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (7)
src/components/product/PremiumItemsList.tsx (6)
37-41: 이미지 최적화 및 CLS 방지:next/image로 교체 권장현재
<img>는 레이지 로드/리사이즈 최적화가 없어 성능/CLS 측면에서 아쉽습니다. 이미next/image가 import 되어 있으므로 교체를 추천합니다. 크기는 고정치가 있으니width/height를 명시해 레이아웃 점프를 막습니다.- <img - src={item.imageUrl} - alt={`Premium Item ${item.id}`} - className="w-[200px] h-[149px] object-fill" - /> + <Image + src={item.imageUrl} + alt={`프리미엄 아이템 ${item.id}`} + width={200} + height={149} + className="w-[200px] h-[149px] object-cover" + />
23-25: 해시 링크(#) 대신 실제 라우트로 연결 + 접근성 라벨 추가현재 "더보기"가
#로 연결되어 UX가 끊깁니다. 실제 리스트 화면 경로가 정해지면next/link로 바꾸고aria-label을 부여해 주세요.- <a href="#" className="text-[#9E9E9E] text-base font-bold my-2 mx-3 hover:underline"> - 더보기 - </a> + <Link + href="/mypage/items" + className="text-[#9E9E9E] text-base font-bold my-2 mx-3 hover:underline" + aria-label="프리미엄 아이템 더보기" + > + 더보기 + </Link>경로가 다르면 해당 URL로 교체 부탁드립니다.
32-33:passHref는 불필요합니다 (Next.js 13+).App Router의
Link는 내부적으로<a>를 렌더링하므로passHref가 필요 없습니다. 제거해도 동일하게 동작합니다.- <Link key={item.id} href={`/items/${item.id}`} passHref> + <Link key={item.id} href={`/items/${item.id}`}>
7-7: 컴포넌트/파일 네이밍 일관화 (PremiumItemList ↔ PremiumItemsList)
함수명(PremiumItemList)과 파일명/사용처(PremiumItemsList)가 달라 혼동을 유발합니다. 기본 익스포트는PremiumItemsList로 통일하고, 불필요한 네임드 익스포트는 제거하는 편이 명료합니다. 이 변경은 페이지 파일의 임포트 단순화와도 맞물립니다.-export default function PremiumItemList() { +export default function PremiumItemsList() {-export { PremiumItemList }; +// 네임드 익스포트 제거 (불필요)이 변경과 함께
src/app/(main)/mypage/page.tsx의 임포트를 기본 익스포트만 사용하도록 정리해 주세요(아래 해당 파일 코멘트 참조).Also applies to: 61-61
28-31: 수평 스크롤 리스트에 접근성 힌트 추가 제안리스트 성격이 명확하도록 컨테이너에
aria-label을 부여하면 스크린 리더에서 이해가 쉬워집니다.- <div className="flex flex-nowrap items-start py-3 px-4 gap-2 overflow-x-auto"> + <div + className="flex flex-nowrap items-start py-3 px-4 gap-2 overflow-x-auto" + aria-label="프리미엄 아이템 소장 목록" + >
8-13: 하드코딩된 목업 데이터 → props로 승격 고려지금은 UI 시연용으로 충분하나, 재사용/테스트 용이성을 위해 아이템 배열을 부모에서 주입 가능하도록 인터페이스를 노출하는 것이 좋습니다. 추후 백엔드 연동 시 교체 비용이 줄어듭니다.
-export default function PremiumItemsList() { - const premiumItems = [ +type PremiumItem = { id: number; imageUrl: string }; +export default function PremiumItemsList({ + items = [ { id: 1, imageUrl: '/images/sample.png' }, { id: 2, imageUrl: '/images/sample.png' }, { id: 3, imageUrl: '/images/sample.png' }, { id: 4, imageUrl: '/images/sample.png' }, - ]; + ], +}: { items?: PremiumItem[] }) {- {premiumItems.map(item => ( + {items.map(item => (src/app/(main)/mypage/page.tsx (1)
473-475: 마이페이지 내 섹션 배치 추가는 적절합니다.프로필/포인트 다음에 프리미엄 보유 리스트를 노출하는 흐름이 자연스럽습니다. 추후 실제 데이터가 준비되면
itemsprops(제안 반영 시)를 통해 서버/훅 데이터로 대체하면 됩니다.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (2)
public/images/primium.pngis excluded by!**/*.pngpublic/images/sample.pngis excluded by!**/*.png
📒 Files selected for processing (2)
src/app/(main)/mypage/page.tsx(4 hunks)src/components/product/PremiumItemsList.tsx(1 hunks)
🔇 Additional comments (2)
src/app/(main)/mypage/page.tsx (2)
492-492: 주석 변경만 확인 — 추가 액션 없음섹션 번호 변경에 따른 주석 업데이트로 보이며, 코드 영향은 없습니다.
9-10: 네이밍 통일 및 불필요 임포트 제거검증 스크립트 실행 결과,
PremiumItemList식별자는 해당 컴포넌트 파일 외부에 다른 사용처가 없음을 확인했습니다. 기본 익스포트만 유지하도록 아래와 같이 임포트를 간결하게 정리해주세요.• 변경 파일:
src/app/(main)/mypage/page.tsx
• 변경 라인: 9-import PremiumItemsList, { PremiumItemList } from "@/components/product/PremiumItemsList"; +import PremiumItemsList from "@/components/product/PremiumItemsList";
| <div className="flex items-center bg-black w-[84px] absolute top-0 left-0 py-[3px] px-2 gap-1"> | ||
| {/* ✅ 프리미엄 로고 샘플 이미지로 변경했습니다. */} | ||
| <img | ||
| src="uploaded:primium.png-6855c197-adae-4e15-93cf-0138a2f165a6" | ||
| alt="Premium Logo" | ||
| className="w-[18px] h-[18px] object-fill" | ||
| /> | ||
| <span className="flex-1 text-white text-xs font-bold text-center"> | ||
| Premium | ||
| </span> | ||
| </div> |
There was a problem hiding this comment.
프리미엄 로고 이미지 경로가 유효하지 않아 렌더링 실패합니다.
uploaded:primium.png-... 스킴은 브라우저/Next.js에서 해석되지 않습니다. 배포 시 로고가 깨집니다. public/ 하위 정적 자산으로 넣어 /images/premium.png처럼 참조하거나, 원격 이미지라면 next.config.js에 도메인 허용이 필요합니다. 아래처럼 정적 자산 + next/image 사용으로 교체를 권장합니다.
- <img
- src="uploaded:primium.png-6855c197-adae-4e15-93cf-0138a2f165a6"
- alt="Premium Logo"
- className="w-[18px] h-[18px] object-fill"
- />
+ <Image
+ src="/images/premium.png"
+ alt="프리미엄 로고"
+ width={18}
+ height={18}
+ className="w-[18px] h-[18px] object-contain"
+ />추가로 배지 텍스트가 영문 "Premium"으로 고정되어 있어 UI 언어(한글)와 혼재됩니다. 필요 시 아래처럼 현지화도 반영해 주세요.
- <span className="flex-1 text-white text-xs font-bold text-center">
- Premium
- </span>
+ <span className="flex-1 text-white text-xs font-bold text-center">
+ 프리미엄
+ </span>📝 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.
| <div className="flex items-center bg-black w-[84px] absolute top-0 left-0 py-[3px] px-2 gap-1"> | |
| {/* ✅ 프리미엄 로고 샘플 이미지로 변경했습니다. */} | |
| <img | |
| src="uploaded:primium.png-6855c197-adae-4e15-93cf-0138a2f165a6" | |
| alt="Premium Logo" | |
| className="w-[18px] h-[18px] object-fill" | |
| /> | |
| <span className="flex-1 text-white text-xs font-bold text-center"> | |
| Premium | |
| </span> | |
| </div> | |
| <div className="flex items-center bg-black w-[84px] absolute top-0 left-0 py-[3px] px-2 gap-1"> | |
| {/* ✅ 프리미엄 로고 샘플 이미지로 변경했습니다. */} | |
| - <img | |
| - src="uploaded:primium.png-6855c197-adae-4e15-93cf-0138a2f165a6" | |
| - alt="Premium Logo" | |
| - className="w-[18px] h-[18px] object-fill" | |
| <Image | |
| src="/images/premium.png" | |
| alt="프리미엄 로고" | |
| width={18} | |
| height={18} | |
| className="w-[18px] h-[18px] object-contain" | |
| /> | |
| - <span className="flex-1 text-white text-xs font-bold text-center"> | |
| - Premium | |
| <span className="flex-1 text-white text-xs font-bold text-center"> | |
| 프리미엄 | |
| </span> | |
| </div> |
1 participant
프리미엄 아이템 소장 리스트 추가
Summary by CodeRabbit
신규 기능
리팩터링