#6 💄 toast

pages/index.tsx

@@ -1,17 +1,16 @@
-import { css } from "@emotion/react";
-import { ReactElement } from "react";
+import { ReactElement, useEffect } from "react";
 import tw from "twin.macro";
 
 import BottomSheet from "../src/components/BottomSheet/BottomSheet";
 import Input from "../src/components/Input/Input";
 import CommonLayout from "../src/components/Layout/CommonLayout";
 import ProjectList from "../src/components/ProjectList/ProjectList";
 import LimitedTextarea from "../src/components/Textarea/LimitedTextarea";
-import ToastMessage from "../src/components/Toast/ToastMessage";
 import Button from "../src/components/Button/Button";
 import ButtonArea from "../src/components/Button/ButtonArea";
 import PopUp from "../src/components/PopUp/PopUp";
 import useDisclosure from "../src/hooks/useDisclosure";
+import Toast from "../src/components/Toast/Toast";
 
 function App() {
   const projectListData = [
@@ -80,21 +79,31 @@ function App() {
     },
   ];
 
+  // usePopup
   const {
     isOpen: isOpenPopUp,
     onOpen: onOpenPopUp,
     onClose: onClosePopUp,
   } = useDisclosure();
 
+  // useToast
+  const {
+    isOpen: isOpenToast,
+    onOpen: onOpenToast,
+    onClose: onCloseToast,
+  } = useDisclosure();
+  useEffect(() => {
+    setTimeout(() => {
+      onCloseToast();
+    }, 3000);
+  });
+
   return (
     <div>
       <ProjectList data={projectListData} />
 
-      <div css={[tw`mt-[30px]`, css``]} />
-      <ToastMessage />
-
       {/* popup */}
-      <div css={[tw`mt-[30px]`, css``]} />
+      <div css={[tw`mt-[30px]`]} />
       <Button as="button" type="button" onClick={onOpenPopUp}>
         <span>[팝업버튼]알림 방식을 선택하세요.</span>
       </Button>
@@ -119,13 +128,19 @@ function App() {
         ]}
       />
 
-      <div css={[tw`mt-[30px]`, css``]} />
+      <div css={[tw`mt-[30px]`]} />
+      <Button as="button" type="button" onClick={onOpenToast}>
+        <span>[토스트버튼]duration:3000</span>
+      </Button>
+      <Toast show={isOpenToast} title="본캐 홍길동 어쩌고 저쩌고 했습니다." />
+
+      <div css={[tw`mt-[30px]`]} />
       <BottomSheet />
 
-      <div css={[tw`mt-[30px]`, css``]} />
+      <div css={[tw`mt-[30px]`]} />
       <Input />
 
-      <div css={[tw`mt-[30px]`, css``]} />
+      <div css={[tw`mt-[30px]`]} />
       <LimitedTextarea minInput={10} maxInput={1000} />
       <ButtonArea>
         <Button theme="secondary" as="a" href="www.google.com">

src/components/Toast/Toast.module.scss

@@ -0,0 +1,48 @@
+.toast {
+  position: fixed;
+  bottom: 24px;
+  padding: 3px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  flex-direction: column-reverse;
+  z-index: 50;
+
+  &Inner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin-top: 6px;
+    height: 48px;
+    width: calc(100vw - 40px);
+    border-radius: 12px;
+    overflow: hidden;
+    opacity: 0.8;
+    background: #292929;
+    color: #fff;
+    &.hide {
+      display: none;
+    }
+  }
+  &Title {
+    text-align: center;
+  }
+
+  &.fadeOut {
+    display: block;
+    visibility: hidden;
+    opacity: 0;
+    -webkit-transition: visibility 1.5s, opacity 1.5s;
+    -moz-transition: visibility 1.5s, opacity 1.5s;
+    -ms-transition: visibility 1.5s, opacity 1.5s;
+    -o-transition: visibility 1.5s, opacity 1.5s;
+    transition: visibility 1.5s, opacity 1.5s;
+    -webkit-transition-delay: 3s;
+    -moz-transition-delay: 3s;
+    -ms-transition-delay: 3s;
+    -o-transition-delay: 3s;
+    transition-delay: 3s;
+  }
+}

src/components/Toast/Toast.tsx

@@ -0,0 +1,20 @@
+import clsx from "clsx";
+
+import styles from "./Toast.module.scss";
+
+export interface ToastMessageParams {
+  show?: boolean;
+  title?: string;
+}
+
+function ToastMessage({ show = false, title }: ToastMessageParams) {
+  return (
+    <div className={clsx(styles.toast, show && styles.fadeOut)}>
+      <div className={clsx(styles.toastInner, !show && styles.hide)}>
+        <p className={styles.toastTitle}>{title}</p>
+      </div>
+    </div>
+  );
+}
+
+export default ToastMessage;