From 4704bb532f7eb25bf5d72b4519100a704ea3f60a Mon Sep 17 00:00:00 2001
From: kcwww <cwkim0321@gmail.com>
Date: Tue, 12 Dec 2023 15:44:56 +0900
Subject: [PATCH] feat: add deco toast msg

---
 .../pages/Make/Snowball/MainDeco/Steps.tsx    | 25 +++++++++++++++++++
 front/src/pages/Visit/Deco/Steps.tsx          | 25 +++++++++++++++++++
 2 files changed, 50 insertions(+)

diff --git a/front/src/pages/Make/Snowball/MainDeco/Steps.tsx b/front/src/pages/Make/Snowball/MainDeco/Steps.tsx
index 0414d6e..ad24db9 100644
--- a/front/src/pages/Make/Snowball/MainDeco/Steps.tsx
+++ b/front/src/pages/Make/Snowball/MainDeco/Steps.tsx
@@ -86,6 +86,19 @@ const ButtonBox = styled.div`
   justify-content: center;
 `;
 
+const ToastMsg = styled.div`
+  position: fixed;
+  top: 70%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  font: ${props => props.theme.font['--normal-button-font']};
+  background-color: ${props => props.theme.colors['--sub-text']};
+  border-radius: 1rem;
+  text-align: center;
+  padding: 1rem;
+`;
+
 const Steps = () => {
   const [step, setStep] = useState<number>(0);
   const [lastBox, setLastBox] = useState(false);
@@ -171,6 +184,17 @@ const Steps = () => {
     };
   }, [isDecoBoxClicked]);
 
+  const [toast, setToast] = useState(false);
+
+  useEffect(() => {
+    if (step === selectDeco) {
+      setToast(true);
+      setTimeout(() => {
+        setToast(false);
+      }, 1500);
+    }
+  }, [step]);
+
   useEffect(() => {
     if (alert === good) setStep(step + 1);
     else if (alert === returnPrev) setStep(step - 1);
@@ -191,6 +215,7 @@ const Steps = () => {
 
   return (
     <>
+      {toast ? <ToastMsg>드래그를 하여 여러 장식을 확인해보세요 !</ToastMsg> : null }
       <Container>
         <HeaderText Ref={null} userName={userData.nickname} />
 
diff --git a/front/src/pages/Visit/Deco/Steps.tsx b/front/src/pages/Visit/Deco/Steps.tsx
index bf48f8c..975488c 100644
--- a/front/src/pages/Visit/Deco/Steps.tsx
+++ b/front/src/pages/Visit/Deco/Steps.tsx
@@ -84,6 +84,19 @@ const ButtonBox = styled.div`
   justify-content: center;
 `;
 
+const ToastMsg = styled.div`
+  position: fixed;
+  top: 70%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  font: ${props => props.theme.font['--normal-button-font']};
+  background-color: ${props => props.theme.colors['--sub-text']};
+  border-radius: 1rem;
+  text-align: center;
+  padding: 1rem;
+`;
+
 const Steps = () => {
   const [step, setStep] = useState(0);
   const [lastBox, setLastBox] = useState(false);
@@ -161,6 +174,17 @@ const Steps = () => {
     };
   }, [isDecoBoxClicked]);
 
+  const [toast, setToast] = useState(false);
+
+  useEffect(() => {
+    if (step === selectDeco || step === selectMsgColor) {
+      setToast(true);
+      setTimeout(() => {
+        setToast(false);
+      }, 1500);
+    }
+  }, [step]);
+
   const renderStateBoxes = () => {
     const boxes = [];
     for (let i = 0; i <= step; i++) {
@@ -176,6 +200,7 @@ const Steps = () => {
 
   return (
     <>
+      {toast ? <ToastMsg>{step === selectDeco ? '드래그를 하여 여러 장식을 확인해보세요 !' : '드래그를 하여 여러 색깔을 확인해보세요 !'}</ToastMsg> : null }
       <Container>
         <HeaderText Ref={null} userName={userData.nickname} />