[Enhancement] 이미지 최적화 (lazy loading, 적절한 사이즈 처리)

[seorinn]

배경

현재 이미지 로딩에 lazy loading이 적용되어 있지 않고, 서버에서 받은 원본 이미지를 그대로 표시하여 성능에 영향을 미칩니다.

현재 문제

// 여러 컴포넌트에서
<img src={photographerInfo.profileImage.url} />
// - lazy loading 없음
// - 원본 이미지 크기 그대로 사용
// - srcSet, sizes 없음

개선 방향

1. Native lazy loading 추가 (즉시 적용 가능)

<img
  src={photographerInfo.profileImage.url}
  alt={photographerInfo.nickname}
  loading="lazy"
/>

2. 목록 페이지 이미지에 일관적용

리스트에서 보여주는 PhotographerBox, PromotionBox의 썸네일 이미지에 우선 적용

3. 장기: 이미지 리사이징

• S3/CloudFront에서 이미지 리사이징 지원 시 srcSet 활용
• 프로필 이미지는 작은 사이즈, 상세 페이지에서만 큰 사이즈 로드

관련 파일

• src/components/PhotographerBox/index.tsx
• src/components/PromotionBox/index.tsx
• src/pages/PhotographerDetail/index.tsx
• src/pages/EventDetail/ImageBox/index.tsx