feat: test

Author: sikkzz

src/components/ui/Toast/Toast.module.scss

@@ -19,61 +19,17 @@
   }
 }
 
-// .Toast {
-//   width: 100%;
-//   height: 3.25rem;
-//   z-index: 2;
-//   border-radius: 0.75rem;
-//   background-color: white;
-//   padding: 0.875rem 1.125rem;
-
-//   transition:
-//     opacity 0.3s,
-//     transform 0.3s;
-// }
-
-// .show {
-//   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;
-//   }
-// }
-
 .ToastViewport {
   position: fixed;
   left: 50%;
-  top: 0.75rem;
+  bottom: 7rem;
   z-index: 9999;
   width: fit-content;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   transform: translateX(-50%);
+  width: calc(100% - 2.5rem);
 }
 
 .Toast {
@@ -87,31 +43,42 @@
     transform: translateX(var(--radix-toast-swipe-move-x));
   }
   &[data-state="open"] {
-    animation: slide-in-from-top 0.3s ease-out forwards;
+    animation: slide-in-from-bottom 0.3s ease-out forwards;
   }
   &[data-state="closed"] {
-    animation: slide-out-to-top 0.3s ease-in forwards;
+    animation: slide-out-to-bottom 0.3s ease-in forwards;
   }
 }
 
-@keyframes slide-in-from-top {
+@keyframes slide-in-from-bottom {
   from {
     opacity: 0;
-    transform: translateY(-10px);
+    transform: translateY(10px);
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
 
-@keyframes slide-out-to-top {
+@keyframes slide-out-to-bottom {
   from {
     opacity: 1;
     transform: translateY(0);
   }
   to {
     opacity: 0;
-    transform: translateY(-10px);
+    transform: translateY(10px);
+  }
+}
+
+.Toaster {
+  border-radius: 0.75rem;
+  background-color: var(--color-white);
+  width: 100%;
+  padding: 0.875rem 1.125rem;
+
+  & > span {
+    line-height: 1.5rem;
   }
 }

src/components/ui/Toast/Toast.stories.tsx

@@ -1,4 +1,4 @@
-import Toast from "@/components/ui/Toast/Toast";
+import { Toast } from "@/components/ui/Toast/Toast";
 
 import type { Meta, StoryObj } from "@storybook/react";
 

src/components/ui/Toast/Toast.tsx

@@ -24,7 +24,12 @@ const Toast = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root>
 >(({ className, ...props }, ref) => {
   return (
-    <ToastPrimitives.Root ref={ref} className={classNames(styles.Toast, className)} {...props} />
+    <ToastPrimitives.Root
+      ref={ref}
+      duration={300}
+      className={classNames(styles.Toast, className)}
+      {...props}
+    />
   );
 });
 Toast.displayName = ToastPrimitives.Root.displayName;

src/components/ui/Toast/Toaster.tsx

@@ -1,4 +1,6 @@
-import { Toast, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/Toast/Toast";
+import Text from "@/components/ui/Text/Text";
+import { Toast, ToastProvider, ToastViewport } from "@/components/ui/Toast/Toast";
+import styles from "@/components/ui/Toast/Toast.module.scss";
 
 import { useToast } from "@/hooks/common/useToast";
 
@@ -7,15 +9,17 @@ export function Toaster() {
 
   return (
     <ToastProvider swipeDirection="right">
-      {toasts.map(({ id, title, duration }) => (
+      {toasts.map(({ id, duration }) => (
         <Toast
           key={id}
           open
           duration={duration}
           onOpenChange={(open) => !open && removeToast(id)}
-          className="flex items-center gap-3 rounded-3 bg-white px-3 py-2 shadow-1"
+          className={styles.Toaster}
         >
-          {title && <ToastTitle className="text-caption-1-bold text-black">{title}</ToastTitle>}
+          <Text color="primary" variant="bodyM">
+            링크가 복사되었어요.
+          </Text>
         </Toast>
       ))}
       <ToastViewport />