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/App.tsx

@@ -1,4 +1,3 @@
-
 import React from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import './App.css';
@@ -19,6 +18,7 @@ import Analytics from './pages/Analytics';
 import PaymentMethods from './pages/PaymentMethods';
 import Settings from './pages/Settings';
 import { BudgetProvider } from './contexts/BudgetContext';
+import PrivateRoute from './components/auth/PrivateRoute';
 
 // 전역 오류 핸들러
 const handleError = (error: any) => {
@@ -83,15 +83,39 @@ function App() {
                   <Route path="/" element={<Index />} />
                   <Route path="/login" element={<Login />} />
                   <Route path="/register" element={<Register />} />
-                  <Route path="/profile" element={<ProfileManagement />} />
+                  <Route path="/profile" element={
+                    <PrivateRoute>
+                      <ProfileManagement />
+                    </PrivateRoute>
+                  } />
                   <Route path="/settings" element={<Settings />} />
-                  <Route path="/transactions" element={<Transactions />} />
+                  <Route path="/transactions" element={
-                  <Route path="/security-privacy" element={<SecurityPrivacySettings />} />
+                    <PrivateRoute>
-                  <Route path="/notifications" element={<NotificationSettings />} />
+                      <Transactions />
+                    </PrivateRoute>
+                  } />
+                  <Route path="/security-privacy" element={
+                    <PrivateRoute>
+                      <SecurityPrivacySettings />
+                    </PrivateRoute>
+                  } />
+                  <Route path="/notifications" element={
+                    <PrivateRoute>
+                      <NotificationSettings />
+                    </PrivateRoute>
+                  } />
                   <Route path="/help-support" element={<HelpSupport />} />
                   <Route path="/forgot-password" element={<ForgotPassword />} />
-                  <Route path="/analytics" element={<Analytics />} />
+                  <Route path="/analytics" element={
-                  <Route path="/payment-methods" element={<PaymentMethods />} />
+                    <PrivateRoute>
+                      <Analytics />
+                    </PrivateRoute>
+                  } />
+                  <Route path="/payment-methods" element={
+                    <PrivateRoute>
+                      <PaymentMethods />
+                    </PrivateRoute>
+                  } />
                   <Route path="*" element={<NotFound />} />
                 </Routes>
               </div>

src/components/auth/PrivateRoute.tsx

@@ -0,0 +1,40 @@
+
+import { ReactNode, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '@/contexts/auth';
+import { useToast } from '@/hooks/useToast.wrapper';
+
+interface PrivateRouteProps {
+  children: ReactNode;
+  requireAuth?: boolean;
+}
+
+/**
+ * 인증이 필요한 라우트를 보호하는 컴포넌트
+ */
+const PrivateRoute = ({ children, requireAuth = true }: PrivateRouteProps) => {
+  const { user, loading } = useAuth();
+  const navigate = useNavigate();
+  const { toast } = useToast();
+
+  useEffect(() => {
+    // 로딩 중이 아니고, 인증이 필요한데 사용자가 로그인되어 있지 않은 경우
+    if (!loading && requireAuth && !user) {
+      toast({
+        title: "로그인 필요",
+        description: "이 페이지에 접근하려면 로그인이 필요합니다.",
+        variant: "destructive",
+      });
+      navigate('/login', { replace: true });
+    }
+  }, [user, loading, navigate, requireAuth, toast]);
+
+  // 로딩 중이거나 인증이 필요하지만 사용자가 로그인되어 있지 않은 경우 아무것도 렌더링하지 않음
+  if (loading || (requireAuth && !user)) {
+    return null;
+  }
+
+  return <>{children}</>;
+};
+
+export default PrivateRoute;

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="min-h-screen flex items-center justify-center bg-neuro-background">
-      <div className="text-center">
+      <div className="text-center max-w-md px-6">
-        <h1 className="text-4xl font-bold mb-4">404</h1>
+        <div className="neuro-flat p-8 rounded-xl">
-        <p className="text-xl text-gray-600 mb-4">Oops! Page not found</p>
+          <div className="neuro-pressed p-5 rounded-full mx-auto w-20 h-20 flex items-center justify-center text-neuro-income mb-6">
-        <a href="/" className="text-blue-500 hover:text-blue-700 underline">
+            <FileQuestion size={36} />
-          Return to Home
+          </div>
-        </a>
+          
+          <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 
-          <SettingsOption icon={CreditCard} label="결제 방법" description="카드 및 은행 계좌 관리" onClick={() => navigate('/payment-methods')} />
+            icon={User} 
-          <SettingsOption icon={Bell} label="알림 설정" description="앱 알림 및 리마인더" onClick={() => navigate('/notification-settings')} />
+            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 
-          <SettingsOption icon={HelpCircle} label="도움말 및 지원" description="FAQ 및 고객 지원" onClick={() => navigate('/help-support')} />
+            icon={Lock} 
+            label="보안 및 개인정보" 
+            description="보안 및 데이터 설정" 
+            onClick={() => handleProtectedRouteClick('/security-privacy', '보안 및 개인정보')} 
+          />
+          <SettingsOption 
+            icon={HelpCircle} 
+            label="도움말 및 지원" 
+            description="FAQ 및 고객 지원" 
+            onClick={() => navigate('/help-support')} 
+          />
         </div>
         
         <div className="mt-8">