refactor: 위시에서 가져오기 화면 개선 (+ 공유 위시 카드 개편) - #356
Merged
Conversation
soyeong0115
added
feature
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Discord 스레드 연동용 메타데이터입니다. discord-pr-bot 워크플로가 자동 생성하며, 수정·삭제하면 PR 과 Discord 알림 연동이 끊깁니다. |
📝 WalkthroughWalkthrough위시 데이터에 Changes위시 출처 플랫폼 표시
Estimated code review effort: 2 (Simple) | ~10 minutes Sequence Diagram(s)sequenceDiagram
participant getWishlist
participant ByWishContent
participant WishSelectCard
participant WishGrid
participant WishCard
getWishlist->>ByWishContent: sourcePlatform이 포함된 위시 항목
getWishlist->>WishGrid: sourcePlatform이 포함된 위시 항목
ByWishContent->>WishSelectCard: sourcePlatform 전달
WishSelectCard->>WishCard: sourcePlatform 전달
WishGrid->>WishCard: sourcePlatform 전달
WishCard-->>ByWishContent: 플랫폼 칩 렌더링
WishCard-->>WishGrid: 플랫폼 칩 렌더링
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web/src/components/common/wish-card/index.tsx (1)
14-23: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winSkeleton 로딩 폴백의 라운드 코너가 카드 컨테이너 변경과 불일치합니다.
카드 컨테이너에서
rounded-2xl이 제거되었지만, Skeleton 폴백에는 여전히rounded-t-2xl rounded-b-none이 남아 있습니다. 로딩 중에는 둥근 상단 코너가 보이고 이미지 로드 후에는 각진 코너로 전환되어 매 카드 로드 시마다 시각적 불일치가 발생합니다.🔧 제안 수정
- loadingFallback={<Skeleton className="absolute inset-0 rounded-t-2xl rounded-b-none" />} + loadingFallback={<Skeleton className="absolute inset-0" />}🤖 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/components/common/wish-card/index.tsx` around lines 14 - 23, Update the Skeleton passed to BaseImage via loadingFallback in the wish card so it no longer applies rounded-t-2xl or rounded-b-none, matching the current non-rounded card container and keeping loading and loaded states visually consistent.
🧹 Nitpick comments (1)
apps/web/src/app/tournament/[id]/create/by-wish/_components/WishSelectHeader.tsx (1)
19-36: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value하드코�된 색상값 대신 디자인 토큰 사용을 고려해보세요.
text-[#737373]는 하드코�된 색상입니다. 프로젝트에text-text-neutral-tertiary등의 토큰이 존재한다면, 일관성을 위해 토큰을 사용하는 것이 좋습니다. 디자인 스펙상 정확한 색상이 필요하다면 의도된 것으로 무시하셔도 됩니다.🤖 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/app/tournament/`[id]/create/by-wish/_components/WishSelectHeader.tsx around lines 19 - 36, Update the selected-count suffix in the component’s return markup to use the existing design-token class for the neutral tertiary text color instead of the hard-coded text-[`#737373`] value; keep the selectedCount accent styling unchanged.
🤖 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/app/tournament/`[id]/create/by-wish/_components/ByWishContent.tsx:
- Line 62: HeaderIcon name="BACK" in ByWishContent must receive an onClick
handler that invokes the existing history.back() behavior. Pass the handler to
the header icon while preserving the current bottom “뒤로” button behavior.
---
Outside diff comments:
In `@apps/web/src/components/common/wish-card/index.tsx`:
- Around line 14-23: Update the Skeleton passed to BaseImage via loadingFallback
in the wish card so it no longer applies rounded-t-2xl or rounded-b-none,
matching the current non-rounded card container and keeping loading and loaded
states visually consistent.
---
Nitpick comments:
In
`@apps/web/src/app/tournament/`[id]/create/by-wish/_components/WishSelectHeader.tsx:
- Around line 19-36: Update the selected-count suffix in the component’s return
markup to use the existing design-token class for the neutral tertiary text
color instead of the hard-coded text-[`#737373`] value; keep the selectedCount
accent styling unchanged.
🪄 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
Review profile: CHILL
Plan: Pro Plus
Run ID: 36548f78-b504-4ae1-b175-6ab2f01307ee
📒 Files selected for processing (7)
apps/web/src/app/archive/_common/_components/ArchivePageLayout.tsxapps/web/src/app/archive/wish/_components/WishlistList.tsxapps/web/src/app/archive/wish/_components/wish-grid/index.tsxapps/web/src/app/tournament/[id]/create/by-wish/_components/ByWishContent.tsxapps/web/src/app/tournament/[id]/create/by-wish/_components/WishSelectCard.tsxapps/web/src/app/tournament/[id]/create/by-wish/_components/WishSelectHeader.tsxapps/web/src/components/common/wish-card/index.tsx
This was referenced Jul 19, 2026
iOdiO89
reviewed
Jul 21, 2026
Comment on lines
+10
to
+11
| <div className="flex min-h-dvh flex-col bg-bg-layer-basement"> | ||
| <div className="sticky top-0 z-20 inline-flex w-full flex-col items-start gap-5 bg-bg-layer-basement px-5 pt-padding-top pb-6"> |
Contributor
Author
There was a problem hiding this comment.
피그마에 다 bg/layer/basement 이렇게 되어 있는데 뭐지?!
| <p className="line-clamp-2 self-stretch body-2-medium text-text-neutral-primary">{name}</p> | ||
| <p className="body-2-semibold text-text-neutral-primary">{price.toLocaleString()}원</p> | ||
| </div> | ||
| {/* TODO: 커머스칩 — 백엔드에 sourceName 필드 추가 후 구현 (WishItemT.sourceName) */} |
added 2 commits
July 21, 2026 21:35
…eet/PIKI-Client into refactor/338-wish-card-ui
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web/src/components/common/wish-card/index.tsx (1)
15-17: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win로딩 스켈레톤의 라운딩도 새 카드 스펙에 맞춰 주세요.
카드 루트의
rounded-2xl은 제거됐지만loadingFallback에는rounded-t-2xl rounded-b-none이 남아 있어 로딩 중에만 상단 모서리가 둥글게 표시됩니다. fallback의 라운딩을 제거하거나 최종 카드와 동일하게 맞춰 주세요.🤖 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/components/common/wish-card/index.tsx` around lines 15 - 17, Update the loadingFallback styling in the wish-card component to remove its remaining rounded-t-2xl and rounded-b-none classes, matching the card root’s non-rounded styling during loading.
🧹 Nitpick comments (1)
apps/web/src/components/common/wish-card/index.tsx (1)
45-49: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
sourcePlatform추가로 발생한 긴 TypeScript/JSX 라인을 100자 이하로 정리해 주세요.세 변경 지점이 모두 print width 100을 초과합니다. As per coding guidelines, TypeScript 파일은 print width 100을 사용해야 합니다.
apps/web/src/components/common/wish-card/index.tsx#L45-L49: 칩<span>선언을 줄바꿈합니다.apps/web/src/app/archive/wish/_components/wish-grid/index.tsx#L41-L41: 삭제 모드WishCardprops를 여러 줄로 나눕니다.apps/web/src/app/tournament/[id]/create/by-wish/_components/WishSelectCard.tsx#L13-L21: 함수 시그니처와WishCard호출을 여러 줄로 나눕니다.🤖 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/components/common/wish-card/index.tsx` around lines 45 - 49, Ensure all three TypeScript/JSX sites stay within the 100-character print width: in apps/web/src/components/common/wish-card/index.tsx lines 45-49, wrap the sourcePlatform chip span declaration; in apps/web/src/app/archive/wish/_components/wish-grid/index.tsx line 41, split the delete-mode WishCard props across lines; and in apps/web/src/app/tournament/[id]/create/by-wish/_components/WishSelectCard.tsx lines 13-21, wrap the function signature and WishCard invocation. Preserve the existing behavior and props.Source: Coding guidelines
🤖 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.
Outside diff comments:
In `@apps/web/src/components/common/wish-card/index.tsx`:
- Around line 15-17: Update the loadingFallback styling in the wish-card
component to remove its remaining rounded-t-2xl and rounded-b-none classes,
matching the card root’s non-rounded styling during loading.
---
Nitpick comments:
In `@apps/web/src/components/common/wish-card/index.tsx`:
- Around line 45-49: Ensure all three TypeScript/JSX sites stay within the
100-character print width: in apps/web/src/components/common/wish-card/index.tsx
lines 45-49, wrap the sourcePlatform chip span declaration; in
apps/web/src/app/archive/wish/_components/wish-grid/index.tsx line 41, split the
delete-mode WishCard props across lines; and in
apps/web/src/app/tournament/[id]/create/by-wish/_components/WishSelectCard.tsx
lines 13-21, wrap the function signature and WishCard invocation. Preserve the
existing behavior and props.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 68b2cef5-c8cc-4927-bcbc-2b724ebdeb70
📒 Files selected for processing (7)
apps/web/src/apis/getWishlist.tsapps/web/src/app/archive/wish/_components/wish-grid/index.tsxapps/web/src/app/tournament/[id]/create/by-wish/_components/ByWishContent.tsxapps/web/src/app/tournament/[id]/create/by-wish/_components/WishSelectCard.tsxapps/web/src/components/common/wish-card/index.tsxapps/web/src/types/item.tsapps/web/src/types/wish.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/web/src/app/tournament/[id]/create/by-wish/_components/ByWishContent.tsx
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web/src/components/common/wish-card/index.tsx (1)
17-17: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win이미지 영역을 166px 고정 높이로 맞춰 주세요.
aspect-[201/166]은 카드 너비에 따라 이미지 높이를 변경하므로, PR 스펙의 고정 166px과 어긋납니다. 삭제 모드 오버레이도 같은 기준으로 고정해야 이미지와 정확히 겹칩니다.
apps/web/src/components/common/wish-card/index.tsx#L17-L17: 이미지 래퍼를h-[166px] w-full로 변경하세요.apps/web/src/app/archive/wish/_components/wish-grid/index.tsx#L42-L42: 오버레이를h-[166px]로 변경하세요.수정 예시
-<div className="relative aspect-[201/166] w-full bg-bg-layer-basement"> +<div className="relative h-[166px] w-full bg-bg-layer-basement"> -<div className={`pointer-events-none absolute top-0 left-0 right-0 z-[11] aspect-[201/166] ...`} /> +<div className={`pointer-events-none absolute top-0 left-0 right-0 z-[11] h-[166px] ...`} />🤖 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/components/common/wish-card/index.tsx` at line 17, 이미지 영역을 카드 너비에 따른 비율이 아닌 166px 고정 높이로 변경하세요. apps/web/src/components/common/wish-card/index.tsx 17-17의 이미지 래퍼는 h-[166px] w-full을 사용하고, apps/web/src/app/archive/wish/_components/wish-grid/index.tsx 42-42의 삭제 모드 오버레이도 h-[166px]로 맞추세요.
🤖 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.
Outside diff comments:
In `@apps/web/src/components/common/wish-card/index.tsx`:
- Line 17: 이미지 영역을 카드 너비에 따른 비율이 아닌 166px 고정 높이로 변경하세요.
apps/web/src/components/common/wish-card/index.tsx 17-17의 이미지 래퍼는 h-[166px]
w-full을 사용하고, apps/web/src/app/archive/wish/_components/wish-grid/index.tsx
42-42의 삭제 모드 오버레이도 h-[166px]로 맞추세요.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 6217e9ab-d36c-4b0e-bcd9-3a0f331f8e79
📒 Files selected for processing (4)
apps/web/src/app/archive/wish/_components/wish-grid/index.tsxapps/web/src/app/tournament/[id]/create/by-wish/_components/ByWishContent.tsxapps/web/src/app/tournament/[id]/create/by-wish/_components/WishSelectCard.tsxapps/web/src/components/common/wish-card/index.tsx
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.
작업 요약
작업 세부 내용
위시 카드 (공유 컴포넌트)
rounded-2xl,aspect-ratio제거 → 카드 간 여백 없이 그리드에 꽉 참body-2-medium, 가격body-2-semibold타이포 적용sourcePlatform필드 연동,caption-1-regular / gray-75 배경스타일 적용위시에서 가져오기 화면
Header컴포넌트 및 뒤로가기 아이콘 적용 (heading-1타이포)WishSelectHeader: 서브타이틀 문구 변경, 카운트 표기N/N개 선택 중→N/N개 선택border-[1.4px] border-white bg-black/[0.08]CSS 구현scale-[1.334]로 20×20 크기 일치, 흰 배경으로 체크마크 표시레이아웃 패딩
ArchivePageLayout:px-5를 sticky 헤더 영역으로만 적용 → 위시 그리드 풀블리드ByWishContent:px-5를 Header + WishSelectHeader 영역으로만 적용스크린샷
연관 이슈
closes #338
Summary by CodeRabbit
새로운 기능
개선 사항