refactor: test

Nexters · Feb 21, 2025 · 1f64caf · 1f64caf
1 parent 18af294
commit 1f64caf
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/src/components/ui/Toast/Toast.module.scss b/src/components/ui/Toast/Toast.module.scss
@@ -67,13 +67,14 @@
 .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 {
@@ -115,3 +116,10 @@
     transform: translateY(-10px);
   }
 }
+
+.Toaster {
+  border-radius: 0.75rem;
+  background-color: var(--color-white);
+  width: 100%;
+  padding: 0.875rem 1.125rem;
+}
diff --git a/src/components/ui/Toast/Toast.stories.tsx b/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";
 

diff --git a/src/components/ui/Toast/Toaster.tsx b/src/components/ui/Toast/Toaster.tsx
@@ -1,4 +1,5 @@
-import { Toast, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/Toast/Toast";
+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 +8,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="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>}
+          링크가 복사되었어요.
+          {/* {title && <ToastTitle className="text-caption-1-bold text-black">{title}</ToastTitle>} */}
         </Toast>
       ))}
       <ToastViewport />