Fix navigation for logged-out users

Fixes a bug where clicking on Profile Management, Notification Settings, or Security & Privacy in Settings while logged out resulted in a 404 error.

src/pages/NotFound.tsx

@@ -1,24 +1,51 @@
-import { useLocation } from "react-router-dom";
+
+import { useLocation, useNavigate } from "react-router-dom";
 import { useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { FileQuestion, Home } from "lucide-react";
 
 const NotFound = () => {
   const location = useLocation();
+  const navigate = useNavigate();
 
   useEffect(() => {
     console.error(
-      "404 Error: User attempted to access non-existent route:",
+      "404 Error: 존재하지 않는 경로에 접근 시도:",
       location.pathname
     );
   }, [location.pathname]);
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-100">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold mb-4">404</h1>
-        <p className="text-xl text-gray-600 mb-4">Oops! Page not found</p>
-        <a href="/" className="text-blue-500 hover:text-blue-700 underline">
-          Return to Home
-        </a>
+    <div className="min-h-screen flex items-center justify-center bg-neuro-background">
+      <div className="text-center max-w-md px-6">
+        <div className="neuro-flat p-8 rounded-xl">
+          <div className="neuro-pressed p-5 rounded-full mx-auto w-20 h-20 flex items-center justify-center text-neuro-income mb-6">
+            <FileQuestion size={36} />
+          </div>
+          
+          <h1 className="text-3xl font-bold mb-4">페이지를 찾을 수 없습니다</h1>
+          <p className="text-gray-500 mb-6">
+            요청하신 페이지가 존재하지 않거나 접근 권한이 없습니다. 
+            이동하려는 주소가 올바른지 확인해주세요.
+          </p>
+          
+          <div className="flex flex-col space-y-3">
+            <Button 
+              onClick={() => navigate('/')}
+              className="bg-neuro-income hover:bg-neuro-income/90"
+            >
+              <Home size={18} className="mr-2" />
+              홈으로 돌아가기
+            </Button>
+            
+            <Button 
+              variant="outline" 
+              onClick={() => navigate(-1)}
+            >
+              이전 페이지로 돌아가기
+            </Button>
+          </div>
+        </div>
       </div>
     </div>
   );

src/pages/Settings.tsx

@@ -1,3 +1,4 @@
+
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import NavBar from '@/components/NavBar';
@@ -5,21 +6,30 @@ 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';
 
 const SettingsOption = ({
   icon: Icon,
   label,
   description,
   onClick,
-  color = "text-neuro-income"
+  color = "text-neuro-income",
+  disabled = false
 }: {
   icon: React.ElementType;
   label: string;
   description?: string;
   onClick?: () => void;
   color?: string;
+  disabled?: boolean;
 }) => {
-  return <div className="neuro-flat p-4 transition-all duration-300 hover:shadow-neuro-convex cursor-pointer" onClick={onClick}>
+  return <div 
+    className={cn(
+      "neuro-flat p-4 transition-all duration-300 hover:shadow-neuro-convex", 
+      disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
+    )} 
+    onClick={disabled ? undefined : onClick}
+  >
       <div className="flex items-center">
         <div className={cn("neuro-pressed p-3 rounded-full mr-4", color)}>
           <Icon size={20} />
@@ -36,12 +46,26 @@ const SettingsOption = ({
 const Settings = () => {
   const navigate = useNavigate();
   const { user, signOut } = useAuth();
+  const { toast } = useToast();
   
   const handleLogout = async () => {
     await signOut();
     navigate('/login');
   };
   
+  const handleProtectedRouteClick = (path: string, label: string) => {
+    if (!user) {
+      toast({
+        title: "로그인 필요",
+        description: `${label}에 접근하려면 로그인이 필요합니다.`,
+        variant: "destructive",
+      });
+      navigate('/login');
+    } else {
+      navigate(path);
+    }
+  };
+  
   return <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
         {/* Header */}
@@ -73,15 +97,40 @@ const Settings = () => {
         {/* Settings Options */}
         <div className="space-y-4 mb-8">
           <h2 className="text-sm font-medium text-gray-500 mb-2 px-2">계정</h2>
-          <SettingsOption icon={User} label="프로필 관리" description="프로필 및 비밀번호 설정" onClick={() => navigate('/profile-management')} />
-          <SettingsOption icon={CreditCard} label="결제 방법" description="카드 및 은행 계좌 관리" onClick={() => navigate('/payment-methods')} />
-          <SettingsOption icon={Bell} label="알림 설정" description="앱 알림 및 리마인더" onClick={() => navigate('/notification-settings')} />
+          <SettingsOption 
+            icon={User} 
+            label="프로필 관리" 
+            description="프로필 및 비밀번호 설정" 
+            onClick={() => handleProtectedRouteClick('/profile', '프로필 관리')} 
+          />
+          <SettingsOption 
+            icon={CreditCard} 
+            label="결제 방법" 
+            description="카드 및 은행 계좌 관리" 
+            onClick={() => handleProtectedRouteClick('/payment-methods', '결제 방법')} 
+          />
+          <SettingsOption 
+            icon={Bell} 
+            label="알림 설정" 
+            description="앱 알림 및 리마인더" 
+            onClick={() => handleProtectedRouteClick('/notifications', '알림 설정')} 
+          />
         </div>
         
         <div className="space-y-4 mb-8">
           <h2 className="text-sm font-medium text-gray-500 mb-2 px-2">앱 설정</h2>
-          <SettingsOption icon={Lock} label="보안 및 개인정보" description="보안 및 데이터 설정" onClick={() => navigate('/security-privacy-settings')} />
-          <SettingsOption icon={HelpCircle} label="도움말 및 지원" description="FAQ 및 고객 지원" onClick={() => navigate('/help-support')} />
+          <SettingsOption 
+            icon={Lock} 
+            label="보안 및 개인정보" 
+            description="보안 및 데이터 설정" 
+            onClick={() => handleProtectedRouteClick('/security-privacy', '보안 및 개인정보')} 
+          />
+          <SettingsOption 
+            icon={HelpCircle} 
+            label="도움말 및 지원" 
+            description="FAQ 및 고객 지원" 
+            onClick={() => navigate('/help-support')} 
+          />
         </div>
         
         <div className="mt-8">