fix: 이미지 스크롤 버그

go-cham · Aug 3, 2023 · 147cc64 · 147cc64
1 parent 5630b26
commit 147cc64
Showing 1 changed file with 27 additions and 1 deletion.
diff --git 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',
             }}