refactor: 토스트 추가

Author: sikkzz

.pnp.cjs

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.5",
+    "@radix-ui/react-toast": "^1.2.6",
     "@radix-ui/react-visually-hidden": "^1.1.1",
     "@tanstack/react-query": "^5.64.2",
     "canvas-confetti": "^1.9.3",

.yarn/cache/@radix-ui-react-collection-npm-1.1.2-99cb65db59-8376aa0c0f.zip

@@ -19,20 +19,99 @@
   }
 }
 
+// .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;
+  z-index: 9999;
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  transform: translateX(-50%);
+}
+
 .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;
+  &[data-swipe="cancel"] {
+    transform: translateX(0);
+  }
+  &[data-swipe="end"] {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+  &[data-swipe="move"] {
+    transform: translateX(var(--radix-toast-swipe-move-x));
+  }
+  &[data-state="open"] {
+    animation: slide-in-from-top 0.3s ease-out forwards;
+  }
+  &[data-state="closed"] {
+    animation: slide-out-to-top 0.3s ease-in forwards;
+  }
+}
+
+@keyframes slide-in-from-top {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.show {
-  opacity: 1;
-  transform: translateY(0);
+@keyframes slide-out-to-top {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
 }