diff --git a/src/components/Feed/Photo.tsx b/src/components/Feed/Photo.tsx
index dc7d46fa..e9729bd1 100644
--- a/src/components/Feed/Photo.tsx
+++ b/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 (
{imageKey && (
<>
-
-
+
setLoaded(true)}
+ />
+ {loaded && }
>
)}
diff --git a/src/components/Modal/PoseImage.tsx b/src/components/Modal/PoseImage.tsx
index e71407d1..e8601061 100644
--- a/src/components/Modal/PoseImage.tsx
+++ b/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)}