refactor: 위시에서 가져오기 화면 개선 (+ 공유 위시 카드 개편)

apps/web/src/apis/getWishlist.ts

@@ -33,6 +33,7 @@ const mapWishlist = (entries: WishlistEntryT[]): WishItemT[] =>
     name: item.name ?? '',
     price: item.currentPrice ?? 0,
     imageUrl: item.imageUrl ?? null,
+    sourcePlatform: item.sourcePlatform ?? null,
   }));
 
 export const getWishlist = async (cursor: string | null = null): Promise<WishlistPageT> => {

apps/web/src/app/archive/wish/_components/wish-grid/index.tsx

@@ -38,7 +38,7 @@ function WishGrid({ items, isDeleteMode = false, selectedIds, onToggleSelect }:
               aria-pressed={isSelected}
               className="relative cursor-pointer text-left transition-opacity active:opacity-80"
             >
-              <WishCard name={item.name} price={item.price} imageUrl={item.imageUrl} />
+              <WishCard name={item.name} price={item.price} imageUrl={item.imageUrl} sourcePlatform={item.sourcePlatform} />
               <div className={`pointer-events-none absolute top-0 left-0 right-0 z-[11] aspect-[201/166] bg-black/20 transition-opacity duration-200 ${isSelected ? 'opacity-100' : 'opacity-0'}`} />
               <span className="pointer-events-none absolute top-3 left-3 z-[12] block size-5">
                 {isSelected ? (
@@ -57,6 +57,7 @@ function WishGrid({ items, isDeleteMode = false, selectedIds, onToggleSelect }:
               name={item.name}
               price={item.price}
               imageUrl={item.imageUrl}
+              sourcePlatform={item.sourcePlatform}
               preload={index < 4}
             />
           </Link>

apps/web/src/app/tournament/[id]/create/by-wish/_components/ByWishContent.tsx

@@ -78,6 +78,7 @@ function ByWishContent({ tournamentId }: ByWishContentProps) {
               name={item.name}
               price={item.price}
               imageUrl={item.imageUrl}
+              sourcePlatform={item.sourcePlatform}
               isSelected={selectedIds.includes(item.id)}
               onSelect={() => handleSelect(item.id)}
             />

apps/web/src/app/tournament/[id]/create/by-wish/_components/WishSelectCard.tsx

@@ -5,19 +5,20 @@ type WishSelectCardProps = {
   name: string;
   price: number;
   imageUrl: string | null;
+  sourcePlatform?: string | null;
   isSelected: boolean;
   onSelect: () => void;
 };
 
-function WishSelectCard({ name, price, imageUrl, isSelected, onSelect }: WishSelectCardProps) {
+function WishSelectCard({ name, price, imageUrl, sourcePlatform, isSelected, onSelect }: WishSelectCardProps) {
   return (
     <button
       type="button"
       onClick={onSelect}
       aria-pressed={isSelected}
       className="relative h-full w-full cursor-pointer text-left"
     >
-      <WishCard name={name} price={price} imageUrl={imageUrl} />
+      <WishCard name={name} price={price} imageUrl={imageUrl} sourcePlatform={sourcePlatform} />
       <span className="pointer-events-none absolute top-3 left-3 z-10 block size-5">
         {isSelected ? (
           <CheckboxSelectedIconFill className="size-5 text-uac-light" />

apps/web/src/components/common/wish-card/index.tsx

@@ -6,10 +6,11 @@ type WishCardProps = {
   name: string;
   price: number;
   imageUrl: string | null;
+  sourcePlatform?: string | null;
   preload?: boolean;
 };
 
-function WishCard({ name, price, imageUrl, preload = false }: WishCardProps) {
+function WishCard({ name, price, imageUrl, sourcePlatform, preload = false }: WishCardProps) {
   return (
     <div className="flex flex-col overflow-hidden bg-bg-layer-basement">
       {/* 이미지 */}
@@ -41,7 +42,11 @@ function WishCard({ name, price, imageUrl, preload = false }: WishCardProps) {
           <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) */}
+        {sourcePlatform && (
+          <span className="flex h-5 items-center rounded-[4px] bg-gray-75 px-1.5 caption-1-regular text-text-neutral-secondary">
+            {sourcePlatform}
+          </span>
+        )}
       </div>
     </div>
   );

apps/web/src/types/item.ts

@@ -10,6 +10,7 @@ export type ItemT = {
   currency: string | null;
   imageUrl: string | null;
   sourceUrl: string | null;
+  sourcePlatform: string | null;
 };
 
 export type ItemStatusT = (typeof ITEM_STATUS)[keyof typeof ITEM_STATUS];

apps/web/src/types/wish.ts

@@ -22,4 +22,5 @@ export type WishItemT = {
   price: number;
   imageUrl: string | null;
   status: ItemStatusT;
+  sourcePlatform: string | null;
 };