diff --git a/apps/web/e2e/mocks/wish.ts b/apps/web/e2e/mocks/wish.ts index ac8f9a33..991d2969 100644 --- a/apps/web/e2e/mocks/wish.ts +++ b/apps/web/e2e/mocks/wish.ts @@ -23,6 +23,7 @@ export const MOCK_WISHLIST_ENTRIES: GetWishlistResponseT[] = MOCK_TOURNAMENT_ITE }, reused: null, refreshNeeded: null, + winnerTournamentIds: [], }) ); diff --git a/apps/web/e2e/specs/archive/wishAddByLink.spec.ts b/apps/web/e2e/specs/archive/wishAddByLink.spec.ts index a816179c..4d325f31 100644 --- a/apps/web/e2e/specs/archive/wishAddByLink.spec.ts +++ b/apps/web/e2e/specs/archive/wishAddByLink.spec.ts @@ -30,7 +30,10 @@ test('링크를 입력해 담으면 다이얼로그가 닫히고 목록에 추 await page.getByLabel('링크 URL').fill(ADDED_URL); api.post(ENDPOINTS.WISHLISTS, MOCK_WISH_ADDED_BY_LINK); - api.getPage(ENDPOINTS.WISHLISTS, [...MOCK_WISHLIST_ENTRIES, MOCK_WISH_ADDED_BY_LINK]); + api.getPage(ENDPOINTS.WISHLISTS, [ + ...MOCK_WISHLIST_ENTRIES, + { ...MOCK_WISH_ADDED_BY_LINK, winnerTournamentIds: [] }, + ]); const postRequest = page.waitForRequest( request => request.method() === 'POST' && request.url().includes(ENDPOINTS.WISHLISTS) diff --git a/apps/web/src/app/archive/wish/_components/wish-grid/index.tsx b/apps/web/src/app/archive/wish/_components/wish-grid/index.tsx index f8209181..31083f23 100644 --- a/apps/web/src/app/archive/wish/_components/wish-grid/index.tsx +++ b/apps/web/src/app/archive/wish/_components/wish-grid/index.tsx @@ -26,7 +26,7 @@ function WishGrid({ items, isDeleteMode = false, selectedIds, onToggleSelect }: return (
- {items.map(({ wish, item }, index) => { + {items.map(({ wish, item, winnerTournamentIds }, index) => { const card = ( 0} preload={index < 4} /> ); diff --git a/apps/web/src/app/wish/_common/_components/WishCard.tsx b/apps/web/src/app/wish/_common/_components/WishCard.tsx index ca183896..b5d5cfbf 100644 --- a/apps/web/src/app/wish/_common/_components/WishCard.tsx +++ b/apps/web/src/app/wish/_common/_components/WishCard.tsx @@ -1,6 +1,8 @@ +import { BadgeIconFill } from '@/assets/icons'; import ImageIconOutline from '@/assets/icons/outline/image.svg'; import BaseImage from '@/components/base-image'; import Skeleton from '@/components/skeleton'; +import { Z_INDEX } from '@/consts/zIndex'; import formatPrice from '@/utils/formatPrice'; type WishCardProps = { @@ -9,6 +11,8 @@ type WishCardProps = { imageUrl: string | null; sourcePlatform: string | null; discountRate: number | null; + /** 내가 플레이한 토너먼트에서 우승한 적 있는지 */ + isWinner?: boolean; preload?: boolean; }; @@ -18,13 +22,14 @@ const imageFallback = (
); -/** 3열 그리드용 위시 카드 — 이미지·상품명·할인율·가격·커머스 칩 */ +/** 3열 그리드용 위시 카드 */ function WishCard({ name, price, imageUrl, sourcePlatform, discountRate, + isWinner = false, preload = false, }: WishCardProps) { return ( @@ -43,6 +48,15 @@ function WishCard({ ) : ( imageFallback )} + {isWinner && ( + + + 1위 + + )}
diff --git a/apps/web/src/app/wish/_common/_components/WishGrid.tsx b/apps/web/src/app/wish/_common/_components/WishGrid.tsx index 766d35db..d684aa7f 100644 --- a/apps/web/src/app/wish/_common/_components/WishGrid.tsx +++ b/apps/web/src/app/wish/_common/_components/WishGrid.tsx @@ -17,7 +17,7 @@ const PRELOAD_COUNT = 6; function WishGrid({ wishes, selectedWishIds, onToggleSelect }: WishGridProps) { return (
)} + {isWinner && ( + + 우승템 + + )} {/* 상품명 + 가격 + 커머스칩 */} diff --git a/apps/web/src/components/common/wish-card/index.tsx b/apps/web/src/components/common/wish-card/index.tsx index eefc1201..e213db78 100644 --- a/apps/web/src/components/common/wish-card/index.tsx +++ b/apps/web/src/components/common/wish-card/index.tsx @@ -12,6 +12,7 @@ type WishCardProps = { price: number | null; imageUrl: string | null; sourcePlatform?: string | null; + isWinner?: boolean; preload?: boolean; }; diff --git a/apps/web/src/styles/typography.css b/apps/web/src/styles/typography.css index 602af2a8..fb105e99 100644 --- a/apps/web/src/styles/typography.css +++ b/apps/web/src/styles/typography.css @@ -82,9 +82,23 @@ font-weight: 600; } +@utility caption-1-medium { + font-size: 12px; + line-height: 18px; + letter-spacing: -0.4px; + font-weight: 500; +} + @utility caption-1-regular { font-size: 12px; line-height: 18px; letter-spacing: -0.4px; font-weight: 400; } + +@utility caption-2-medium { + font-size: 10px; + line-height: 18px; + letter-spacing: -0.4px; + font-weight: 500; +} diff --git a/apps/web/src/types/wish.ts b/apps/web/src/types/wish.ts index 25347ff4..96b1389e 100644 --- a/apps/web/src/types/wish.ts +++ b/apps/web/src/types/wish.ts @@ -21,6 +21,10 @@ export type GetWishlistResponseT = { * - 링크로 등록한 경우: boolean */ reused: boolean | null; + /** + * 내가 플레이한 토너먼트 중 이 위시가 우승한 토너먼트 id 목록 + */ + winnerTournamentIds: number[]; }; export type PostWishLinkResponseT = {