Repository navigation
위시 카드 우승 칩 추가 #747
Copy link
Copy link
Labels
Description
상위 Epic
#727
구현할 기능
위시 카드에 우승 칩 표시
- 대상:
/wish위시 카드,/archive/wish위시 카드 - 내가 플레이한 토너먼트의 결승에서 고른 상품의 카드에
1위칩 표시 - 참조: 서버 계약 위시 목록에 우승 칩 표시 core#1237
응답 계약
- 위시 목록 조회 응답 항목에
winnerTournamentIds: number[]추가- 위치는
reused·refreshNeeded와 같은 최상위 - 빈 배열이면 우승 이력 없음
- 위치는
- 최신 우승이 배열 앞에 옴
- 여러 판에서 이긴 상품은 토너먼트 id 전부 포함
- 토너먼트를 삭제하면 그 id 가 빠짐
- 조건: 판정 기준은 그룹 합산 순위가 아니라 내 플레이 결과
- 결과: 같은 소셜 토너먼트라도 참여자마다 값이 다름
디자인
| 대상 | 시안 | 칩 내용 | 칩 위치 |
|---|---|---|---|
/archive/wish 카드 |
184:1602 | 우승템 텍스트 |
이미지 좌하단 (좌 7px · 하 9px) |
/wish 카드 |
184:1461 | badge 아이콘 12px · 1위 텍스트 |
이미지 좌하단. 이미지 영역과 정보 영역 경계에 맞춤 |
/wish 칩 스펙 (1위)
| 항목 | 값 | 프로젝트 대응 |
|---|---|---|
| 배경 | bg/neutral/primary (#2d3037) |
bg-bg-neutral-primary |
| 여백 | 좌 4px · 우 6px · 상하 2px · gap 2px | pl-1 pr-1.5 py-0.5 gap-0.5 |
| 아이콘 | badge 12px | BadgeIconFill (@/assets/icons) |
| 텍스트 | Pretendard Medium 10px · 행간 18px · 자간 -0.4px · white | caption-2-medium (신규) · text-text-neutral-inverse |
| 모서리 | 직각 | rounded 없음 |
/archive/wish 칩 스펙 (우승템)
| 항목 | 값 | 프로젝트 대응 |
|---|---|---|
| 배경 | #404040 | bg-[#404040] (대응 토큰 없음) |
| 여백 | 좌우 6px · 상하 1px (높이 20px) | px-1.5 py-px — 너비는 내용에 맞춤 |
| 텍스트 | Pretendard Medium 12px · 행간 18px · 자간 -0.4px · white | caption-1-medium (신규) · text-text-neutral-inverse |
| 모서리 | 4px | rounded-[4px] |
작업 상세 내용
-
src/types/wish.ts의GetWishlistResponseT에winnerTournamentIds: number[]추가 -
app/wish/_common/_consts/wishMock.ts의MOCK_WISHES일부 항목에 우승 id 채움- 우승 칩이 붙은 카드와 붙지 않은 카드가 섞여 보이게 함
-
WishCard에 우승 여부 prop 추가WishGrid가winnerTournamentIds.length > 0으로 판정해 넘김
-
WishCard이미지 영역 좌하단에 우승 칩 렌더링- z-index 는
Z_INDEX상수 사용 - 조건: 편집 모드 체크박스(우상단)와 겹치지 않음
- z-index 는
- 폴더 상세(
/wish/folder/[folderId])도WishGrid를 쓰므로 같은 칩이 뜨는지 확인 -
/archive/wish카드(components/common/wish-card)에우승템칩 렌더링WishReadyCard에 우승 여부 prop 추가, archiveWishGrid가winnerTournamentIds.length > 0으로 판정해 넘김- 조건: 삭제 모드 체크박스(좌상단)와 겹치지 않음
-
typography.css에caption-1-medium(12px)·caption-2-medium(10px) 유틸 추가
범위
제외
- 위시 상세 페이지(
/archive/wish/[id]) 우승 표시/archive/wish목록 카드는 범위에 포함- 원인: 시안 없음
- 서버는 상세 응답에도 같은 필드를 내려줌
- 실제 API 연동
- 원인: /wish 는 아직
MOCK_WISHES기반 - 후속: 위시·폴더 화면 실제 API 전환 #733 API 전환 때 응답 필드 그대로 사용
- 원인: /wish 는 아직
Reactions are currently unavailable
Activity