toast 추가

package.json

@@ -22,9 +22,10 @@
 		"js-cookie": "^3.0.5",
 		"react": "19.0.0-beta-26f2496093-20240514",
 		"react-dom": "19.0.0-beta-26f2496093-20240514",
+		"sonner": "^1.5.0",
+		"tailwind-merge": "^2.3.0",
 		"tailwind-variants": "^0.2.1",
-		"use-ripple-hook": "^1.0.24",
-		"tailwind-merge": "^2.3.0"
+		"use-ripple-hook": "^1.0.24"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.8.1",

src/components/common/Toast.tsx

@@ -0,0 +1,42 @@
+import LeftArrow from "@/assets/LeftArrow.svg?react";
+import UpFinger from "@/assets/UpFinger.svg?react";
+import { toast } from "sonner";
+
+function ToastUI({
+  message,
+  onAction,
+}: { message: string; onAction: () => void }) {
+  return (
+    <button
+      onClick={onAction}
+      type="button"
+      className="text-offWhite010 flex items-center justify-between p-3 rounded-8 bg-gray084 active:bg-gray064 transition-colors duration-300 w-full"
+    >
+      <div className="flex space-x-2 items-center">
+        <div>
+          <UpFinger width={32} height={32} />
+        </div>
+        <span className="t-c1-sb-13 line-clamp-2 text-ellipsis text-left">
+          {message}
+        </span>
+      </div>
+      <div className="t-c1-sb-13 ml-4 flex items-center whitespace-nowrap">
+        확인하기 <LeftArrow />
+      </div>
+    </button>
+  );
+}
+
+export const Toast = {
+  alert: (message: string, onAction: () => void) => {
+    toast.custom((t) => (
+      <ToastUI
+        message={message}
+        onAction={() => {
+          onAction();
+          toast.dismiss(t);
+        }}
+      />
+    ));
+  },
+};

src/routes/__root.tsx

@@ -1,15 +1,22 @@
 import { Outlet, createRootRoute } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/router-devtools";
+import { Toaster } from "sonner";
 
 export const Route = createRootRoute({
-	component: RootComponent,
+  component: RootComponent,
 });
 
 function RootComponent() {
-	return (
-		<>
-			<Outlet />
-			<TanStackRouterDevtools position="bottom-right" />
-		</>
-	);
+  return (
+    <>
+      <Outlet />
+      <Toaster
+        position="top-center"
+        expand={false}
+        offset={8}
+        visibleToasts={1}
+      />
+      <TanStackRouterDevtools position="bottom-right" />
+    </>
+  );
 }

src/routes/vote.tsx

@@ -1,5 +1,6 @@
 import ShuffleSvg from "@/assets/Shuffle.svg?react";
 import { Header, HeaderLogo } from "@/components/common/Header";
+import { Toast } from "@/components/common/Toast";
 import { getGradientBg } from "@/utils/getGradientBg";
 import { createFileRoute } from "@tanstack/react-router";
 import clsx from "clsx";
@@ -38,7 +39,14 @@ function VotePage() {
             <AnswerCard
               key={i}
               selected={selection === i}
-              onClick={() => setTimeout(() => setSelection(i), 200)}
+              onClick={() => {
+                setTimeout(() => setSelection(i), 200);
+                // NOTE: This is a fake toast for demonstration purposes
+                Toast.alert(
+                  "방금 14기 ***님이 낭은영님을 Pick 했어요!",
+                  () => {},
+                );
+              }}
               name={`Answer ${i}`}
               imgSrc="https://via.placeholder.com/150"
               description="Description"