Merge pull request #316 from prgrms-web-devcourse-final-project/feature/spotify-image-optimization

[feat] Spotify 이미지 로딩 로직 최적화 및 ImageKit 적용

Author: kangsuyeong

src/components/ImageKitImg.tsx

@@ -0,0 +1,31 @@
+import defaultImage from '@assets/images/default.png';
+interface ImageKitImgProps {
+  src: string; // Spotify 이미지 URL
+  width: number;
+  height: number;
+  alt?: string;
+  className?: string;
+}
+
+export default function ImageKitImg({
+  src,
+  width,
+  height,
+  alt = '앨범 이미지',
+  className = '',
+}: ImageKitImgProps) {
+  const imagePath = src?.split('/image/')[1];
+
+  return (
+    <img
+      className={className}
+      src={`https://ik.imagekit.io/${import.meta.env.VITE_IMAGEKIT_ID}/${imagePath}?tr=w-${width},h-${height}`}
+      onError={(e) => {
+        const target = e.target as HTMLImageElement;
+        target.onerror = null; // 무한 루프 방지
+        target.src = defaultImage; // 고정 기본 이미지
+      }}
+      alt={alt}
+    />
+  );
+}

src/components/index.ts

@@ -5,6 +5,7 @@ import EmotionRecordCard from './user/EmotionRecordCard';
 import UserProfileCard from './user/UserProfileCard';
 import EmotionRecordSection from './user/EmotionRecordSection';
 import EmotionRecordCardList from './user/EmotionRecordCardList';
+import ImageKitImg from './ImageKitImg';
 
 export {
   InfoMessage,
@@ -14,4 +15,5 @@ export {
   MusicCard,
   EmotionRecordSection,
   EmotionRecordCardList,
+  ImageKitImg,
 };

src/components/user/EmotionRecordCard.tsx

@@ -1,6 +1,5 @@
-import { EmotionBadge } from '@/components';
+import { EmotionBadge, ImageKitImg } from '@/components';
 import { formatDate } from '@/utils/formatDate';
-import defaultImage from '@assets/images/default.png';
 
 interface EmotionRecordCardProps {
   record: EmotionRecord;
@@ -22,14 +21,10 @@ function EmotionRecordCard({ record, onClick }: EmotionRecordCardProps) {
       {/* 감정 뱃지 */}
       <div className="flex flex-col gap-1.5">
         <EmotionBadge size="small" emotion={emotion} />
-        <img
+        <ImageKitImg
           src={albumImage}
-          alt="앨범 이미지"
-          onError={(e) => {
-            const target = e.target as HTMLImageElement;
-            target.onerror = null; // 무한 루프 방지
-            target.src = defaultImage; // 기본 이미지로 변경
-          }}
+          height={232}
+          width={232}
           className="object-cover w-full rounded-lg aspect-square"
         />
       </div>

src/pages/home/components/MainCard.tsx

@@ -1,6 +1,6 @@
+import { ImageKitImg } from '@/components';
 import EmotionBadge from '@/components/EmotionBadge';
 import { formatDate } from '@/utils/formatDate';
-import defaultImage from '@assets/images/default.png';
 import { Link } from 'react-router';
 
 interface MainCardProps {
@@ -25,15 +25,11 @@ export default function MainCard({ record }: MainCardProps) {
       <div className="flex gap-2">
         {/* 앨범커버 */}
         <div className="flex-shrink-0 w-16 h-16 overflow-hidden rounded-lg">
-          <img
+          <ImageKitImg
+            src={record.spotifyMusic.albumImage}
+            width={160}
+            height={160}
             className="object-cover w-full h-full"
-            src={record.spotifyMusic.albumImage || defaultImage}
-            onError={(e) => {
-              const target = e.target as HTMLImageElement;
-              target.onerror = null; // 무한 루프 방지
-              target.src = defaultImage; // 기본 이미지로 변경
-            }}
-            alt="앨범이미지"
           />
         </div>
         {/* 정보 */}