feat: Toast 컴포넌트 및 유틸 함수 추가

- Toaster 컴포넌트: sonner Toaster 래퍼 (offset, mobileOffset, gap 지원)
- toast.warning() 유틸 함수: className 방식으로 Figma 디자인 적용
- layout.tsx에 Toaster 추가
- ToastTest 컴포넌트 추가

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: 2 people

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>

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/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,
+		});
+	},
+};