From eb2e0c71ea0cfd88c6e5fcf38bc7d5932d3e8ea5 Mon Sep 17 00:00:00 2001
From: 1ilsang <1ilsang@naver.com>
Date: Tue, 11 Jun 2024 16:16:51 +0900
Subject: [PATCH] feat(imageModal): Add fade-in

---
 .../shared/components/modal/ImageModal.tsx       |  2 +-
 .../shared/components/modal/useImageModal.tsx    |  2 +-
 src/features/styles/modal/image.scss             | 16 +++++++++++++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/features/shared/components/modal/ImageModal.tsx b/src/features/shared/components/modal/ImageModal.tsx
index c75d21b8..c5c18366 100644
--- a/src/features/shared/components/modal/ImageModal.tsx
+++ b/src/features/shared/components/modal/ImageModal.tsx
@@ -22,7 +22,7 @@ const ImageModal: FunctionComponent<ImageModalProps> = () => {
           </div>
         )}
         <img
-          className={classNames({ hidden: loading })}
+          className={classNames({ hidden: loading, 'fade-in': !loading })}
           src={imageSrc}
           ref={imageRef}
         />
diff --git a/src/features/shared/components/modal/useImageModal.tsx b/src/features/shared/components/modal/useImageModal.tsx
index 61b86368..fdaf1e28 100644
--- a/src/features/shared/components/modal/useImageModal.tsx
+++ b/src/features/shared/components/modal/useImageModal.tsx
@@ -18,7 +18,7 @@ export const useImageModal = () => {
     }).then(() => {
       setTimeout(() => {
         setLoading(false);
-      }, 700);
+      }, 150);
     });
   };
 
diff --git a/src/features/styles/modal/image.scss b/src/features/styles/modal/image.scss
index aa344d1c..085e7870 100644
--- a/src/features/styles/modal/image.scss
+++ b/src/features/styles/modal/image.scss
@@ -50,7 +50,7 @@
         height: 30%;
         animation:
           skeleton-gradient 1.8s infinite ease-in-out,
-          spin 1.8s infinite ease-in-out;
+          spin 1s infinite ease-in-out;
       }
     }
 
@@ -63,5 +63,19 @@
     .hidden {
       visibility: hidden;
     }
+
+    .fade-in {
+      @keyframes fade-in {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      animation: fade-in 0.4s;
+    }
   }
 }