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 (
- {wishes.map(({ wish, item }, index) => {
+ {wishes.map(({ wish, item, winnerTournamentIds }, index) => {
const card = (
0}
preload={index < PRELOAD_COUNT}
/>
);
diff --git a/apps/web/src/app/wish/_common/_consts/wishMock.ts b/apps/web/src/app/wish/_common/_consts/wishMock.ts
index 44a3a394..37444d88 100644
--- a/apps/web/src/app/wish/_common/_consts/wishMock.ts
+++ b/apps/web/src/app/wish/_common/_consts/wishMock.ts
@@ -21,6 +21,7 @@ export const MOCK_WISHES: WishListItemT[] = Array.from({ length: 12 }, (_, index
},
refreshNeeded: null,
reused: null,
+ winnerTournamentIds: index % 4 === 0 ? [index + 100] : [],
}));
export const MOCK_FOLDERS: WishFolderT[] = [
diff --git a/apps/web/src/components/common/wish-card/WishReadyCard.tsx b/apps/web/src/components/common/wish-card/WishReadyCard.tsx
index 8876a683..fae38993 100644
--- a/apps/web/src/components/common/wish-card/WishReadyCard.tsx
+++ b/apps/web/src/components/common/wish-card/WishReadyCard.tsx
@@ -1,14 +1,17 @@
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';
-/** READY 위시 카드 — 이미지·상품명·가격·커머스 칩 */
+/** READY 위시 카드 — 이미지·우승 칩·상품명·가격·커머스 칩 */
type WishReadyCardProps = {
name: string | null;
price: number | null;
imageUrl: string | null;
sourcePlatform?: string | null;
+ /** 내가 플레이한 토너먼트에서 우승한 적 있는지 */
+ isWinner?: boolean;
preload?: boolean;
};
@@ -17,6 +20,7 @@ function WishReadyCard({
price,
imageUrl,
sourcePlatform,
+ isWinner = false,
preload = false,
}: WishReadyCardProps) {
return (
@@ -42,6 +46,14 @@ function WishReadyCard({
)}
+ {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 = {