Add notification settings page

This commit adds a new page for configuring notification settings.

src/App.tsx

@@ -9,6 +9,7 @@ import Transactions from "./pages/Transactions";
 import Analytics from "./pages/Analytics";
 import Settings from "./pages/Settings";
 import ProfileManagement from "./pages/ProfileManagement";
+import NotificationSettings from "./pages/NotificationSettings";
 import NotFound from "./pages/NotFound";
 import Login from "./pages/Login";
 import Register from "./pages/Register";
@@ -28,6 +29,7 @@ const App = () => (
           <Route path="/analytics" element={<Analytics />} />
           <Route path="/settings" element={<Settings />} />
           <Route path="/profile-management" element={<ProfileManagement />} />
+          <Route path="/notification-settings" element={<NotificationSettings />} />
           <Route path="/login" element={<Login />} />
           <Route path="/register" element={<Register />} />
           <Route path="/forgot-password" element={<ForgotPassword />} />

src/pages/NotificationSettings.tsx

@@ -0,0 +1,159 @@
+
+import React, { useState } from 'react';
+import { ArrowLeft, Bell, BellOff, MessageCircle, Mail, Shield, Volume2 } from 'lucide-react';
+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';
+
+type NotificationSetting = {
+  id: string;
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  enabled: boolean;
+};
+
+const NotificationSettings = () => {
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  
+  const [settings, setSettings] = useState<NotificationSetting[]>([
+    {
+      id: 'transactions',
+      title: '거래 알림',
+      description: '입금 및 출금 시 알림을 받습니다.',
+      icon: <Bell size={20} />,
+      enabled: true,
+    },
+    {
+      id: 'budget',
+      title: '예산 알림',
+      description: '예산 초과 시 알림을 받습니다.',
+      icon: <BellOff size={20} />,
+      enabled: true,
+    },
+    {
+      id: 'messages',
+      title: '메시지 알림',
+      description: '새로운 메시지가 있을 때 알림을 받습니다.',
+      icon: <MessageCircle size={20} />,
+      enabled: false,
+    },
+    {
+      id: 'emails',
+      title: '이메일 알림',
+      description: '주요 업데이트 및 소식을 이메일로 받습니다.',
+      icon: <Mail size={20} />,
+      enabled: true,
+    },
+    {
+      id: 'security',
+      title: '보안 알림',
+      description: '계정 로그인 및 중요 변경사항에 대한 알림을 받습니다.',
+      icon: <Shield size={20} />,
+      enabled: true,
+    },
+    {
+      id: 'sound',
+      title: '알림 소리',
+      description: '알림 발생 시 소리를 재생합니다.',
+      icon: <Volume2 size={20} />,
+      enabled: false,
+    },
+  ]);
+
+  const handleToggle = (id: string) => {
+    setSettings(
+      settings.map((setting) =>
+        setting.id === id ? { ...setting, enabled: !setting.enabled } : setting
+      )
+    );
+    
+    // 토스트 메시지로 상태 변경 알림
+    const setting = settings.find(s => s.id === id);
+    if (setting) {
+      const newState = !setting.enabled;
+      toast({
+        title: `${setting.title}이(가) ${newState ? '활성화' : '비활성화'}되었습니다.`,
+        description: newState 
+          ? "이제 해당 알림을 받게 됩니다." 
+          : "더 이상 해당 알림을 받지 않습니다.",
+      });
+    }
+  };
+
+  const saveSettings = () => {
+    // 여기에 설정 저장 로직 추가
+    toast({
+      title: "알림 설정이 저장되었습니다.",
+      description: "변경사항이 성공적으로 적용되었습니다.",
+    });
+    navigate('/settings');
+  };
+
+  return (
+    <div className="min-h-screen bg-neuro-background pb-24">
+      <div className="max-w-md mx-auto px-6">
+        {/* Header */}
+        <header className="py-8">
+          <div className="flex items-center mb-6">
+            <Button 
+              variant="ghost" 
+              size="icon" 
+              onClick={() => navigate('/settings')}
+              className="mr-2"
+            >
+              <ArrowLeft size={20} />
+            </Button>
+            <h1 className="text-2xl font-bold neuro-text">알림 설정</h1>
+          </div>
+        </header>
+        
+        {/* Notification Settings */}
+        <div className="space-y-6 neuro-flat p-6 mb-8">
+          {settings.map((setting) => (
+            <div key={setting.id} className="flex items-center justify-between">
+              <div className="flex items-center space-x-4">
+                <div className="neuro-pressed p-3 rounded-full text-neuro-income">
+                  {setting.icon}
+                </div>
+                <div>
+                  <h3 className="font-medium">{setting.title}</h3>
+                  <p className="text-xs text-gray-500">{setting.description}</p>
+                </div>
+              </div>
+              <div className="flex items-center space-x-2">
+                <Switch
+                  id={`${setting.id}-switch`}
+                  checked={setting.enabled}
+                  onCheckedChange={() => handleToggle(setting.id)}
+                  className="data-[state=checked]:bg-neuro-income"
+                />
+                <Label
+                  htmlFor={`${setting.id}-switch`}
+                  className="sr-only"
+                >
+                  {setting.title}
+                </Label>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Save Button */}
+        <div className="px-6">
+          <Button 
+            onClick={saveSettings}
+            className="w-full bg-neuro-income text-white hover:bg-neuro-income/90"
+          >
+            저장하기
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NotificationSettings;

src/pages/Settings.tsx

@@ -77,6 +77,7 @@ const Settings = () => {
             icon={Bell} 
             label="알림 설정" 
             description="앱 알림 및 리마인더"
+            onClick={() => navigate('/notification-settings')}
           />
         </div>