From 2bfc8e8bdcdc223598276a3b4906d04fbb3d799f Mon Sep 17 00:00:00 2001
From: lybell-art <futireflugel@gmail.com>
Date: Mon, 12 Aug 2024 12:18:37 +0900
Subject: [PATCH] =?UTF-8?q?[fix]=20=EB=AA=A8=EB=8B=AC=20=EB=8B=AB=ED=9E=8C?=
 =?UTF-8?q?=20=EB=92=A4=20=EC=8A=A4=ED=81=AC=EB=A1=A4=EC=9D=B4=20=EC=95=88?=
 =?UTF-8?q?=20=EB=82=B4=EB=A0=A4=EA=B0=80=EB=8A=94=20=EB=B2=84=EA=B7=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/modal/modal.jsx                               | 9 ++++++---
 src/common/utils.js                                      | 4 ++++
 .../features/comment/modals/CommentNoUserModal.jsx       | 4 ++--
 src/mainPage/features/fcfs/modals/FcfsLoseModal.jsx      | 4 ++--
 .../features/interactions/modal/InteractionAnswer.jsx    | 4 ++--
 5 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/common/modal/modal.jsx b/src/common/modal/modal.jsx
index 52e8bf98..6cbd318b 100644
--- a/src/common/modal/modal.jsx
+++ b/src/common/modal/modal.jsx
@@ -1,5 +1,6 @@
 import { createContext, useCallback, useEffect, useState, useRef } from "react";
 import useModalStore, { closeModal } from "./store.js";
+import { delay } from "@common/utils.js";
 
 export const ModalCloseContext = createContext(() => {
   console.log("모달이 닫힙니다.");
@@ -9,10 +10,12 @@ function Modal({ layer }) {
   const timeoutRef = useRef(null);
   const child = useModalStore(layer);
   const [opacity, setOpacity] = useState(0);
-  const close = useCallback(() => {
+  const close = useCallback(async () => {
     setOpacity(0);
-    if (timeoutRef.current === null)
-      timeoutRef.current = setTimeout(() => closeModal(layer), 150);
+    if (timeoutRef.current === null) {
+      await delay(150);
+      closeModal(layer);
+    }
   }, [layer]);
 
   useEffect(() => {
diff --git a/src/common/utils.js b/src/common/utils.js
index 2be99fe6..7b80d1a6 100644
--- a/src/common/utils.js
+++ b/src/common/utils.js
@@ -26,3 +26,7 @@ export function convertSecondsToString(time) {
 
   return `${days > 0 ? days + " : " : ""}${[hours, minutes, seconds].map(padNumber).join(" : ")}`;
 }
+
+export function delay(ms) {
+  return new Promise( resolve=>setTimeout(resolve, ms) );
+}
diff --git a/src/mainPage/features/comment/modals/CommentNoUserModal.jsx b/src/mainPage/features/comment/modals/CommentNoUserModal.jsx
index 4caefd96..a24865ac 100644
--- a/src/mainPage/features/comment/modals/CommentNoUserModal.jsx
+++ b/src/mainPage/features/comment/modals/CommentNoUserModal.jsx
@@ -7,8 +7,8 @@ import { INTERACTION_SECTION } from "@main/scroll/constants.js";
 function CommentNoUserModal() {
   const close = useContext(ModalCloseContext);
 
-  function toMoveInteraction() {
-    close();
+  async function toMoveInteraction() {
+    await close();
     scrollTo(INTERACTION_SECTION);
   }
 
diff --git a/src/mainPage/features/fcfs/modals/FcfsLoseModal.jsx b/src/mainPage/features/fcfs/modals/FcfsLoseModal.jsx
index 829bcb04..7a4ffe21 100644
--- a/src/mainPage/features/fcfs/modals/FcfsLoseModal.jsx
+++ b/src/mainPage/features/fcfs/modals/FcfsLoseModal.jsx
@@ -8,8 +8,8 @@ function FcfsLoseModal() {
   const close = useContext(ModalCloseContext);
   const shouldInteraction = false; // 향후 통합 예정
 
-  function toMoveInteraction() {
-    close();
+  async function toMoveInteraction() {
+    await close();
     scrollTo(INTERACTION_SECTION);
   }
 
diff --git a/src/mainPage/features/interactions/modal/InteractionAnswer.jsx b/src/mainPage/features/interactions/modal/InteractionAnswer.jsx
index f45c3192..60b15e59 100644
--- a/src/mainPage/features/interactions/modal/InteractionAnswer.jsx
+++ b/src/mainPage/features/interactions/modal/InteractionAnswer.jsx
@@ -39,8 +39,8 @@ export default function InteractionAnswer({
     setIsJoined(false);
   }, []);
 
-  function onClickWrite() {
-    close();
+  async function onClickWrite() {
+    await close();
     scrollTo(COMMENT_SECTION);
   }