[Fix/#197] 행사 상세·카드에 실제 사진 보여주기

src/features/events/components/EventsApplicationCard.tsx

@@ -1,5 +1,6 @@
 import { Button, ContentBadge, Typography } from "@wanteddev/wds";
 
+import LazyImage from "@/components/ui/LazyImage";
 import { EVENTS_APPLICATION_STATUS_BADGES } from "@/features/events/constants/events";
 import { formatDateTime } from "@/lib/date";
 import type { MyEventApplicationListItem } from "@/shared/entities/events/eventsTypes";
@@ -29,8 +30,16 @@ function EventsApplicationCard({
   return (
     <div className="flex flex-col gap-4 px-5">
       <div className="flex items-center gap-3">
-        {/* 썸네일(thumbnailUrl)을 그리기 전까지는 행사 목록 카드와 같은 단색 자리 */}
-        <div className="size-17.5 shrink-0 rounded-xl bg-thumbnail-placeholder" />
+        {/* 썸네일이 없으면 행사 목록 카드와 같은 단색 자리 */}
+        {application.thumbnailUrl ? (
+          <LazyImage
+            alt=""
+            className="size-17.5 shrink-0 rounded-xl"
+            src={application.thumbnailUrl}
+          />
+        ) : (
+          <div className="size-17.5 shrink-0 rounded-xl bg-thumbnail-placeholder" />
+        )}
         <div className="flex min-w-0 flex-1 flex-col items-start gap-1">
           <ContentBadge
             accentColor={`semantic.accent.foreground.${badge.color}`}

src/features/events/components/EventsCard.tsx

@@ -1,4 +1,5 @@
 import { Button, Typography } from "@wanteddev/wds";
+import LazyImage from "@/components/ui/LazyImage";
 import EventsStatusBadge from "@/features/events/components/EventsStatusBadge";
 import {
   getEventActionLabel,
@@ -22,19 +23,23 @@ interface EventsCardProps {
 // disabled 상태 색(label.assistive + interaction.disable)도 모집예정/모집종료 스펙과 그대로 일치한다
 // (button/style.js의 &[aria-disabled='true'] 블록 확인). 그래서 sx 없이 disabled prop만 쓴다.
 function EventsCard({ event, onApply, onSelect }: EventsCardProps) {
-  const { title, recruitStatus } = event;
+  const { title, recruitStatus, thumbnailUrl } = event;
   const isOpen = recruitStatus === "OPEN";
 
   return (
     <div className="flex items-center gap-3 px-5">
-      {/* 썸네일(thumbnailUrl)을 그리기 전까지는 Figma와 같은 단색 placeholder.
+      {/* 썸네일이 없으면 Figma와 같은 단색 placeholder.
           CTA 버튼 안에 버튼을 중첩할 수 없어서, 상세 진입은 썸네일과 텍스트 블록에만 건다. */}
       <button
         aria-label={`${title} 상세 보기`}
-        className="size-28 shrink-0 rounded-xl bg-thumbnail-placeholder"
+        className="size-28 shrink-0 overflow-hidden rounded-xl bg-thumbnail-placeholder"
         onClick={onSelect}
         type="button"
-      />
+      >
+        {thumbnailUrl && (
+          <LazyImage alt="" className="size-full" src={thumbnailUrl} />
+        )}
+      </button>
 
       {/* Figma에서 오른쪽 칼럼은 썸네일과 같은 높이(112)에 justify-between이라 뱃지는 위, 버튼은 아래 끝에 붙는다 */}
       <div className="flex h-28 min-w-px flex-1 flex-col justify-between">

src/features/events/components/EventsDetailContent.tsx

@@ -100,8 +100,7 @@ function EventsDetailContent({
     // Action Area 위에서 끝나 버려서, 글이 그 아래로 흘러 들어가며 사라지는 효과가 안 난다.
     <div className="relative flex-1 overflow-hidden bg-background-normal">
       <div className="scrollbar-hidden h-full overflow-y-auto">
-        {/* Hero — 행사 사진(images)을 그리기 전까지 장수만 맞춘 Figma와 같은 단색 placeholder.
-            Figma는 375×375 정사각이라 폭이 유동인 지금 레이아웃에서는 aspect-square로 둔다.
+        {/* Hero — 행사 사진(images). Figma는 375×375 정사각이라 폭이 유동인 지금 레이아웃에서는 aspect-square로 둔다.
             이미지가 여러 장이면 가로 스크롤 스냅으로 한 장씩 넘긴다(공지 상세와 같은 PhotoGallery). */}
         {photoCount > 0 && (
           <PhotoGallery
@@ -120,7 +119,10 @@ function EventsDetailContent({
                 </TopNavigationButton>
               </div>
             }
-            photoCount={photoCount}
+            photos={event.images.map((image, index) => ({
+              alt: `${event.title} 사진 ${index + 1}`,
+              src: image.fileUrl,
+            }))}
             showCounter={photoCount > 1}
             slideClassName="aspect-square"
           />