Merge pull request #159 from Room-Fit/fix#144

Fix#144: 프로필 등록 모달이 제대로 열리지 않는 현상 수정

Author: kimgho

src/shared/components/Modal/Modal.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { createPortal } from "react-dom";
 
 import { useModal } from "@/shared/components/Modal/useModal";
-import { useInitialStyle } from "@/shared/hooks";
+import { useOnMountAnimation } from "@/shared/hooks/useOnMountAnimation";
 import { cn } from "@/shared/lib";
 
 export interface ModalProps {
@@ -33,18 +33,18 @@ const Wrapper = ({ children }: { children?: React.ReactNode }) => {
 const Overlay = () => {
     const { closeModal } = useModal();
 
-    const { ref } = useInitialStyle<HTMLDivElement>({
-        opacity: "0",
-        transition: "all 200ms ease-in-out",
+    const { ref } = useOnMountAnimation<HTMLDivElement>({
+        initialStyles: {
+            opacity: "0",
+        },
+        animationStyles: {
+            opacity: "1",
+        },
+        duration: 200,
+        delay: 0,
+        timingFunction: "ease-in-out",
     });
 
-    useEffect(() => {
-        const element = ref.current;
-        if (!element) return;
-
-        element.style.opacity = "1";
-    }, [ref]);
-
     return (
         <div
             ref={ref}
@@ -55,27 +55,21 @@ const Overlay = () => {
 };
 
 const Container = ({ children }: { children?: React.ReactNode }) => {
-    const { isOpen } = useModal();
-
-    const { ref } = useInitialStyle<HTMLDivElement>({
-        opacity: "0",
-        transform: "scale(0.7)",
-    });
-
     const { closeModal } = useModal();
 
-    useEffect(() => {
-        const element = ref.current;
-        if (!element) return;
-
-        if (isOpen) {
-            element.style.opacity = "1";
-            element.style.transform = "scale(1)";
-        } else {
-            element.style.opacity = "0";
-            element.style.transform = "scale(0.7)";
-        }
-    }, [isOpen, ref]);
+    const { ref } = useOnMountAnimation<HTMLDivElement>({
+        initialStyles: {
+            opacity: "0",
+            transform: "scale(0.7)",
+        },
+        animationStyles: {
+            opacity: "1",
+            transform: "scale(1)",
+        },
+        duration: 200,
+        delay: 0,
+        timingFunction: "ease-in-out",
+    });
 
     return (
         <div

src/shared/hooks/useOnMountAnimation.ts

@@ -0,0 +1,52 @@
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
+
+export interface UseOnMountAnimationOption {
+    initialStyles: React.CSSProperties;
+    animationStyles: React.CSSProperties;
+
+    duration: number;
+    delay: number;
+    timingFunction: string;
+}
+
+export const useOnMountAnimation = <Element extends HTMLElement = HTMLDivElement>({
+    initialStyles,
+    animationStyles,
+
+    duration = 200,
+    delay = 0,
+    timingFunction = "ease-in-out",
+}: UseOnMountAnimationOption) => {
+    const ref = useRef<Element>(null);
+    const requestAnimationFrameRef = useRef<ReturnType<typeof requestAnimationFrame>>();
+
+    const animation = useCallback(() => {
+        const element = ref.current;
+        if (!element) throw new Error("[useOnMountAnimation] element 가 존재하지 않습니다.");
+
+        element.style.transition = `all ${duration}ms ${timingFunction} ${delay}ms`;
+        for (const [key, value] of Object.entries(animationStyles)) {
+            element.style.setProperty(key, value);
+        }
+    }, [animationStyles, delay, duration, timingFunction]);
+
+    useLayoutEffect(() => {
+        const element = ref.current;
+        if (!element) return;
+
+        for (const [key, value] of Object.entries(initialStyles)) {
+            element.style.setProperty(key, value);
+        }
+    }, [initialStyles]);
+
+    useEffect(() => {
+        requestAnimationFrameRef.current = requestAnimationFrame(animation);
+
+        return () => {
+            if (requestAnimationFrameRef.current)
+                cancelAnimationFrame(requestAnimationFrameRef.current);
+        };
+    }, [animation]);
+
+    return { ref };
+};