From 147cc64a2a7a755cf54a2a91402a83f86f3fbd8d Mon Sep 17 00:00:00 2001
From: Jihoo Kim <jihoo94@gmail.com>
Date: Fri, 4 Aug 2023 07:13:36 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EB=B2=84=EA=B7=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/feed/PostDetail/PostDetail.tsx | 28 +++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/pages/feed/PostDetail/PostDetail.tsx b/src/pages/feed/PostDetail/PostDetail.tsx
index 6a9c3e74..6cf46a4c 100644
--- a/src/pages/feed/PostDetail/PostDetail.tsx
+++ b/src/pages/feed/PostDetail/PostDetail.tsx
@@ -250,6 +250,31 @@ export function PostDetailContent({
   images?: string[] | null;
 }) {
   const [zoomedImageIndex, setZoomedImageIndex] = useState<number | null>(null);
+  const multipleImagesRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!multipleImagesRef.current) return;
+
+    const allImages =
+      multipleImagesRef.current?.querySelectorAll<HTMLImageElement>('img');
+    Promise.all(
+      Array.from(allImages)
+        .filter((img) => !img.complete)
+        .map(
+          (img) =>
+            new Promise((resolve) => {
+              img.onload = img.onerror = resolve;
+            })
+        )
+    ).then(() => {
+      if (multipleImagesRef.current) {
+        multipleImagesRef.current.scrollTo({
+          left: 0,
+        });
+        multipleImagesRef.current.style.opacity = '1';
+      }
+    });
+  }, [multipleImagesRef.current]);
 
   return (
     <div>
@@ -276,7 +301,8 @@ export function PostDetailContent({
         )}
         {images && images.length > 1 && (
           <div
-            className="flex space-x-[1.3rem] overflow-x-auto px-[1.5rem]"
+            ref={multipleImagesRef}
+            className="flex space-x-[1.3rem] overflow-x-auto px-[1.5rem] opacity-0"
             style={{
               scrollSnapType: 'x mandatory',
             }}