⚡️ improve : img -> next/image & fix : 피드 로딩중일 때 북마크 버튼만 보이던 이슈

src/components/Feed/Photo.tsx

@@ -1,4 +1,8 @@
+'use client';
+
+import Image from 'next/image';
 import Link from 'next/link';
+import { useState } from 'react';
 
 import BookmarkButton from './BookmarkButton';
 
@@ -9,13 +13,28 @@ interface Photo {
 }
 
 export default function Photo({ imageKey, source, id }: Photo) {
+  const [loaded, setLoaded] = useState(false);
+
   return (
     <Link href={`detail/${id}`} scroll={false}>
       <div className="relative mb-16 inline-block h-fit w-full rounded-8">
         {imageKey && (
           <>
-            <img src={imageKey} alt={source || ''} className="rounded-8" />
-            <BookmarkButton />
+            <Image
+              src={imageKey}
+              alt={source || ''}
+              layout="responsive"
+              // placeholder="blur"
+              // blurDataURL={IMAGE.profile_default}
+              width={200}
+              height={0}
+              style={{
+                objectFit: 'contain',
+                borderRadius: 8,
+              }}
+              onLoad={() => setLoaded(true)}
+            />
+            {loaded && <BookmarkButton />}
           </>
         )}
       </div>

src/components/Modal/PoseImage.tsx

@@ -26,8 +26,9 @@ export default function PoseImage({ src, responsive = false, onLoad }: DetailedI
           src={src}
           alt="상세보기"
           layout="responsive"
+          priority
           width={400}
-          height={400}
+          height={0}
           onLoad={onLoad}
           className="cursor-pointer object-contain"
           onClick={() => setIsModalShow(true)}