refactor: 토스트 radix-ui적용

Author: 리니_이경린

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;
+  }
+}

src/components/ui/Toast/Toast.tsx

@@ -1,20 +1,32 @@
 import { forwardRef } from "react";
-
+import * as Toast from "@radix-ui/react-toast";
 import classNames from "classnames";
 
 import Text from "@/components/ui/Text/Text";
 import styles from "@/components/ui/Toast/Toast.module.scss";
 
-export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ToastProps extends React.HTMLAttributes<HTMLLIElement> {
   text: string;
+  isToast: boolean;
 }
 
-const Toast = forwardRef<HTMLDivElement, ToastProps>(({ text, className, ...props }, ref) => {
-  return (
-    <div ref={ref} className={classNames(styles.Toast, className)} {...props}>
-      <Text variant="bodyM">{text}</Text>
-    </div>
-  );
-});
+const ToastComponent = forwardRef<HTMLLIElement, ToastProps>(
+  ({ text, isToast, className }, ref) => {
+    return (
+      <Toast.Provider swipeDirection="right">
+          <Toast.Root
+            ref={ref}
+            className={styles.ToastRoot}
+            open={isToast}
+          >
+            <Toast.Title className={classNames(styles.Toast, className)}>
+              <Text variant="bodyM">{text}</Text>
+            </Toast.Title>
+          </Toast.Root>
+        <Toast.Viewport className={styles.ToastViewport} />
+      </Toast.Provider>
+    );
+  },
+);
 
-export default Toast;
+export default ToastComponent;

src/pages/ReviewResultPage/ReviewResultPage.tsx

@@ -95,9 +95,8 @@ export default function ReviewResultPage() {
           />
         </div>
       </div>
-
       <div className={styles.Bottom}>
-        {isToast && <Toast text="리뷰가 복사되었어요." />}
+        {<Toast text="리뷰가 복사되었어요." isToast={isToast}/>}
         <div className={styles.ButtonBox}>
           <Button text="다시생성" variant="secondary" onClick={handleRetryCreateReview} />
           <Button text="홈으로 가기" onClick={handleOpen} />