feature/#4-toast message (#15)

* #7 💄 버튼 컴포넌트 작성

* #7 💄 버튼 컴포넌트 수정

* #3 💄 Input, Textarea, Toast

* #6 💄 popup

* #6 💄 toast

* #4 🔧 transition vendor prifix 제거

Co-authored-by: seambark <run128@naver.com>

pages/index.tsx

@@ -1,5 +1,4 @@
-import { css } from "@emotion/react";
-import { ReactElement } from "react";
+import { ReactElement, useEffect } from "react";
 import tw from "twin.macro";
 import Image from "next/image";
 
@@ -11,6 +10,9 @@ 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";
 import Radio from "../src/components/Radio/Radio";
 
 function App() {
@@ -80,25 +82,37 @@ 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
-      css={[
-        tw`block`,
-        css`
-          display: block;
-        `,
-      ]}
-    >
+    <div>
       <ProjectList data={projectListData} />
 
-      <div css={[tw`mt-[30px]`, css``]} />
+      <div css={[tw`mt-[30px]`]} />
       <ToastMessage />
       {/* style 위치 찾아야 됨 */}
-      <div css={[tw`mt-[30px]`, css``]} />
+      <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">
@@ -108,6 +122,7 @@ function App() {
           버튼
         </Button>
         <Button as="button">버튼</Button>
+        <Button as="button">버튼</Button>
       </ButtonArea>
     </div>
   );

src/components/PopUp/PopUp.module.scss

@@ -0,0 +1,52 @@
+.overlay {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  left: 0;
+  top: 0;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.popup {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  background: rgb(0, 0, 0, 0.2);
+  height: 100vh;
+  width: 100vw;
+
+  &.on {
+    display: block;
+  }
+  &Inner {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    padding: 32px 20px;
+    border-radius: 16px 16px 0 0;
+    background: #fff;
+    text-align: center;
+    z-index: 100;
+  }
+  &Title {
+    display: block;
+    margin-bottom: 8px;
+    padding: 0 30px;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 26px;
+    color: #292929;
+  }
+  &Content {
+    text-align: center;
+    padding: 0 50px;
+    padding-bottom: 32px;
+    font-weight: 300;
+    font-size: 16px;
+    line-height: 24px;
+    color: #292929;
+  }
+}

src/components/PopUp/PopUp.tsx

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+import clsx from "clsx";
+
+import ButtonArea from "../Button/ButtonArea";
+import styles from "./PopUp.module.scss";
+
+interface PopUpProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  content?: string;
+  buttons: ReactNode | ReactNode[];
+}
+
+function PopUp({ isOpen, onClose, title, content, buttons }: PopUpProps) {
+  return (
+    <>
+      {isOpen && (
+        <div
+          id="overlay"
+          onClick={onClose}
+          className={clsx(styles.popup, isOpen && styles.on)}
+          role="presentation"
+        />
+      )}
+      <dialog open={isOpen} className={styles.popupInner}>
+        <strong className={styles.popupTitle}>{title}</strong>
+        <p className={styles.popupContent}>{content}</p>
+        <ButtonArea>{buttons}</ButtonArea>
+      </dialog>
+    </>
+  );
+}
+
+export default PopUp;

src/components/Toast/Toast.module.scss

@@ -0,0 +1,39 @@
+.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;
+    transition: visibility 1.5s ease 3s, opacity 1.5s ease 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;

src/hooks/useDisclosure.ts

@@ -0,0 +1,15 @@
+import { useState } from "react";
+
+function useDisclosure() {
+  const [isOpen, setIsOpen] = useState(false);
+  const onClose = () => {
+    setIsOpen(false);
+  };
+  const onOpen = () => {
+    setIsOpen(true);
+  };
+
+  return { isOpen, onOpen, onClose };
+}
+
+export default useDisclosure;