diff --git a/src/components/ui/Toast/Toast.module.scss b/src/components/ui/Toast/Toast.module.scss index 5880167..df7fc7f 100644 --- a/src/components/ui/Toast/Toast.module.scss +++ b/src/components/ui/Toast/Toast.module.scss @@ -36,3 +36,30 @@ opacity: 1; transform: translateY(0); } + +.ToastRoot[data-state="open"] { + animation: slideUp 150ms cubic-bezier(0.16, 1, 0.3, 1); +} +.ToastRoot[data-state="closed"] { + animation: hide 100ms ease-in; +} + +@keyframes hide { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +@keyframes slideUp { + from { + transform: translateY(100%); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } +} diff --git a/src/components/ui/Toast/Toast.tsx b/src/components/ui/Toast/Toast.tsx index 6b9aebe..913e71b 100644 --- a/src/components/ui/Toast/Toast.tsx +++ b/src/components/ui/Toast/Toast.tsx @@ -1,5 +1,5 @@ import { forwardRef } from "react"; - +import * as Toast from "@radix-ui/react-toast"; import classNames from "classnames"; import Text from "@/components/ui/Text/Text"; @@ -7,14 +7,26 @@ import styles from "@/components/ui/Toast/Toast.module.scss"; export interface ToastProps extends React.HTMLAttributes { text: string; + isToast: boolean; } -const Toast = forwardRef(({ text, className, ...props }, ref) => { - return ( -
- {text} -
- ); -}); +const ToastComponent = forwardRef( + ({ text, isToast, className, ...props }, ref) => { + return ( + + + + {text} + + + + + ); + }, +); -export default Toast; +export default ToastComponent; diff --git a/src/pages/ReviewResultPage/ReviewResultPage.tsx b/src/pages/ReviewResultPage/ReviewResultPage.tsx index dfbb4f2..404c40d 100644 --- a/src/pages/ReviewResultPage/ReviewResultPage.tsx +++ b/src/pages/ReviewResultPage/ReviewResultPage.tsx @@ -95,9 +95,8 @@ export default function ReviewResultPage() { /> -
- {isToast && } + {}