From 3a15e745e5276fbbf4e9525aa4b1bdc45d24e299 Mon Sep 17 00:00:00 2001
From: kcwww <cwkim0321@gmail.com>
Date: Wed, 13 Dec 2023 11:57:55 +0900
Subject: [PATCH] fix: toastMsg css fix

---
 front/src/pages/Make/Snowball/MainDeco/Steps.tsx | 15 ++++++++++++---
 front/src/pages/Visit/Deco/Steps.tsx             | 15 ++++++++++++---
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/front/src/pages/Make/Snowball/MainDeco/Steps.tsx b/front/src/pages/Make/Snowball/MainDeco/Steps.tsx
index a9ac8a2..36d2fbd 100644
--- a/front/src/pages/Make/Snowball/MainDeco/Steps.tsx
+++ b/front/src/pages/Make/Snowball/MainDeco/Steps.tsx
@@ -88,7 +88,7 @@ const ButtonBox = styled.div`
 
 const ToastMsg = styled.div`
   position: fixed;
-  top: 70%;
+  top: 55%;
   left: 50%;
   transform: translate(-50%, -50%);
 
@@ -97,6 +97,7 @@ const ToastMsg = styled.div`
   border-radius: 1rem;
   text-align: center;
   padding: 1rem;
+  font-size: 1rem;
 `;
 
 const Steps = () => {
@@ -186,13 +187,21 @@ const Steps = () => {
 
   const [toast, setToast] = useState(false);
 
-  useEffect(() => {
+  const timer = useRef<number | null>(null);
+  const setToastMsg = () => {
+    if (timer.current) clearTimeout(timer.current);
     if (step === selectDeco) {
       setToast(true);
-      setTimeout(() => {
+      timer.current = setTimeout(() => {
         setToast(false);
       }, 1500);
+    } else {
+      setToast(false);
     }
+  };
+
+  useEffect(() => {
+    setToastMsg();
   }, [step]);
 
   useEffect(() => {
diff --git a/front/src/pages/Visit/Deco/Steps.tsx b/front/src/pages/Visit/Deco/Steps.tsx
index 4ad2384..55bc0d8 100644
--- a/front/src/pages/Visit/Deco/Steps.tsx
+++ b/front/src/pages/Visit/Deco/Steps.tsx
@@ -86,7 +86,7 @@ const ButtonBox = styled.div`
 
 const ToastMsg = styled.div`
   position: fixed;
-  top: 70%;
+  top: 55%;
   left: 50%;
   transform: translate(-50%, -50%);
 
@@ -95,6 +95,7 @@ const ToastMsg = styled.div`
   border-radius: 1rem;
   text-align: center;
   padding: 1rem;
+  font-size: 1rem;
 `;
 
 const Steps = () => {
@@ -176,13 +177,21 @@ const Steps = () => {
 
   const [toast, setToast] = useState(false);
 
-  useEffect(() => {
+  const timer = useRef<number | null>(null);
+  const setToastMsg = () => {
+    if (timer.current) clearTimeout(timer.current);
     if (step === selectDeco || step === selectMsgColor) {
       setToast(true);
-      setTimeout(() => {
+      timer.current = setTimeout(() => {
         setToast(false);
       }, 1500);
+    } else {
+      setToast(false);
     }
+  };
+
+  useEffect(() => {
+    setToastMsg();
   }, [step]);
 
   const renderStateBoxes = () => {