feat: Toast 컴포넌트 추가

app/_test/ToastTest.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { Button } from "#/components/button";
+import { toast } from "#/utils/toast";
+
+export const ToastTest = () => {
+	return (
+		<Button
+			onClick={() =>
+				toast.warning("이미 선택되었어요. 다른 메뉴를 골라주세요!")
+			}
+		>
+			Toast 테스트
+		</Button>
+	);
+};

app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata, Viewport } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { Toaster } from "#/components/toast";
 
 const geistSans = Geist({
 	variable: "--font-geist-sans",

app/page.tsx

@@ -2,6 +2,7 @@ import { BackwardButton } from "#/components/backwardButton";
 import { Layout } from "#/components/layout";
 import { StepHeader } from "#/components/stepHeader";
 import { colors } from "#/constants/color";
+import { ToastTest } from "./_test/ToastTest";
 
 export default function Home() {
 	return (
@@ -54,8 +55,8 @@ export default function Home() {
 				</div>
 			</Layout.Content>
 			<Layout.Footer>
-				<div className="ygi:flex ygi:h-layout-footer-height ygi:w-full ygi:items-center ygi:justify-center ygi:bg-surface-gray">
-					Footer
+				<div className="ygi:flex ygi:h-layout-footer-height ygi:w-full ygi:items-center ygi:justify-center ygi:gap-md ygi:bg-surface-gray">
+					<ToastTest />
 				</div>
 			</Layout.Footer>
 		</Layout.Root>

package.json

@@ -21,6 +21,7 @@
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "react-hook-form": "^7.71.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {

src/components/toast/Toaster.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import {
+	Toaster as SonnerToaster,
+	type ToasterProps as SonnerToasterProps,
+} from "sonner";
+
+export type ToasterProps = Pick<
+	SonnerToasterProps,
+	"offset" | "mobileOffset" | "gap" | "toastOptions"
+>;
+
+export const Toaster = ({ offset, mobileOffset, gap, toastOptions = { duration: 3000 } }: ToasterProps) => {
+	return (
+		<SonnerToaster
+			position="bottom-center"
+			offset={offset}
+			mobileOffset={mobileOffset}
+			gap={gap}
+			toastOptions={toastOptions}
+		/>
+	);
+};

src/components/toast/index.ts

@@ -0,0 +1 @@
+export { Toaster, type ToasterProps } from "./Toaster";

src/icons/alertCircleIcon/AlertCircleIcon.tsx

@@ -0,0 +1,24 @@
+import { IconBase, type IconBaseProps } from "../iconBase";
+
+export type AlertCircleIconProps = Omit<IconBaseProps, "children">;
+
+export const AlertCircleIcon = ({
+	size = 20,
+	...props
+}: AlertCircleIconProps) => {
+	return (
+		<IconBase size={size} viewBox="-1 -1 20 20" {...props}>
+			<path
+				d="M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M9 5V9"
+				stroke="#E5E7EB"
+				strokeWidth="2"
+				strokeLinecap="round"
+			/>
+			<circle cx="9" cy="13" r="1.5" fill="#E5E7EB" />
+		</IconBase>
+	);
+};

src/icons/alertCircleIcon/index.ts

@@ -0,0 +1 @@
+export { AlertCircleIcon, type AlertCircleIconProps } from "./AlertCircleIcon";

src/utils/toast.ts

@@ -0,0 +1,22 @@
+import { toast as sonnerToast } from "sonner";
+import { AlertCircleIcon } from "#/icons/alertCircleIcon";
+
+interface ToastOptions {
+	duration?: number;
+	className?: string;
+}
+
+export const toast = {
+	warning: (message: string, options?: ToastOptions) => {
+		sonnerToast(message, {
+			icon: AlertCircleIcon({
+				size: 20,
+				className: "ygi:text-palette-primary-500 ygi:mx-auto!",
+			}),
+			classNames: {
+				toast: "ygi:bg-button-primary! ygi:text-text-inverse! ygi:body-14-md! ygi:rounded-sm! ygi:py-3! ygi:pl-4! ygi:pr-5! ygi:gap-2! ygi:flex! ygi:items-center! ygi:border-none!",
+			},
+			duration: options?.duration,
+		});
+	},
+};