feat: add deco toast msg

boostcampwm2023 · Dec 12, 2023 · 4704bb5 · 4704bb5
1 parent e3d2e37
commit 4704bb5
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 0 deletions.
diff --git 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
@@ -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} />