Fix: Resolve Toast Type Error

The toast function was updated to correctly pass the 'id' property, resolving the TypeScript error.

src/components/profile/PasswordChangeForm.tsx

@@ -7,7 +7,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useToast } from '@/hooks/use-toast';
+import { useToast } from '@/hooks/useToast.wrapper';
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
 
 const passwordFormSchema = z.object({

src/components/profile/ProfileForm.tsx

@@ -6,7 +6,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useToast } from '@/hooks/use-toast';
+import { useToast } from '@/hooks/useToast.wrapper';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '@/contexts/auth';
 

src/components/security/SaveSettingsButton.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { Button } from '@/components/ui/button';
 import { useNavigate } from 'react-router-dom';
-import { useToast } from '@/hooks/use-toast';
+import { useToast } from '@/hooks/useToast.wrapper';
 
 type SaveSettingsButtonProps = {
   onSave?: () => void;

src/components/security/SecuritySettingsList.tsx

@@ -1,6 +1,6 @@
 
 import React from 'react';
-import { useToast } from '@/hooks/use-toast';
+import { useToast } from '@/hooks/useToast.wrapper';
 import SecuritySettingItem from './SecuritySettingItem';
 import { SecuritySetting } from './types';
 

src/hooks/use-toast.ts

@@ -2,7 +2,7 @@
 import * as React from "react"
 import { ToastProps } from "@/components/ui/toast"
 
-import { useToast as useToastStore } from "@/components/ui/use-toast"
+import { useToastStore } from "@/components/ui/use-toast"
 import { ToastActionElement } from "@/components/ui/toast"
 
 // 기본 지속 시간 늘리기 (기존 3000ms → 3500ms)
@@ -16,6 +16,7 @@ export type ToasterToast = ToastProps & {
   description?: React.ReactNode;
   action?: React.ReactNode;
   duration?: number;  // 지속 시간 추가
+  variant?: "default" | "destructive"; // variant 속성 추가
 };
 
 const actionTypes = ['default', 'cancel'] as const
@@ -69,7 +70,7 @@ export const useToast = () => {
     addToast,
     updateToast,
     dismissToast,
-    toast: (props: ToasterToast) => addToast(props), // toast 속성 추가
+    toast: (props: Omit<ToasterToast, "id">) => addToast(props),
   };
 };
 

src/pages/NotificationSettings.tsx

@@ -5,7 +5,7 @@ import { useNavigate } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
-import { useToast } from '@/hooks/use-toast';
+import { useToast } from '@/hooks/useToast.wrapper';
 
 type NotificationSetting = {
   id: string;

src/pages/PaymentMethods.tsx

@@ -3,18 +3,19 @@ import NavBar from '@/components/NavBar';
 import { ArrowLeft, CreditCard, PlusCircle } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
-import { useToast } from '@/hooks/use-toast';
+import { useToast } from '@/hooks/useToast.wrapper';
+
 const PaymentMethods = () => {
   const navigate = useNavigate();
-  const {
-    toast
-  } = useToast();
+  const { toast } = useToast();
+  
   const handleAddPayment = () => {
     toast({
       title: "알림",
       description: "이 결제 기능은 아직 지원하지 않습니다."
     });
   };
+  
   return <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
         {/* Header */}
@@ -57,4 +58,5 @@ const PaymentMethods = () => {
       <NavBar />
     </div>;
 };
-export default PaymentMethods;
+
+export default PaymentMethods;

src/pages/Settings.tsx

@@ -1,4 +1,3 @@
-
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import NavBar from '@/components/NavBar';
@@ -6,7 +5,7 @@ import SyncSettings from '@/components/SyncSettings';
 import { User, CreditCard, Bell, Lock, HelpCircle, LogOut, ChevronRight } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useAuth } from '@/contexts/auth';
-import { useToast } from '@/hooks/use-toast';
+import { useToast } from '@/hooks/useToast.wrapper';
 
 const SettingsOption = ({
   icon: Icon,

src/utils/auth/toastUtils.ts

@@ -12,6 +12,6 @@ export const showAuthToast = (
   toast({ 
     title, 
     description, 
-    ...(variant === 'destructive' ? { variant: 'destructive' } : {})
+    variant
   });
 };