fix: toastMsg css fix

boostcampwm2023 · Dec 13, 2023 · 3a15e74 · 3a15e74
1 parent d9d1375
commit 3a15e74
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git 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
@@ -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 = () => {