Add payment method page

This commit adds a new page for managing payment methods.

src/App.tsx

@@ -12,6 +12,7 @@ import ProfileManagement from "./pages/ProfileManagement";
 import NotificationSettings from "./pages/NotificationSettings";
 import SecurityPrivacySettings from "./pages/SecurityPrivacySettings";
 import HelpSupport from "./pages/HelpSupport";
+import PaymentMethods from "./pages/PaymentMethods";
 import NotFound from "./pages/NotFound";
 import Login from "./pages/Login";
 import Register from "./pages/Register";
@@ -34,6 +35,7 @@ const App = () => (
           <Route path="/notification-settings" element={<NotificationSettings />} />
           <Route path="/security-privacy-settings" element={<SecurityPrivacySettings />} />
           <Route path="/help-support" element={<HelpSupport />} />
+          <Route path="/payment-methods" element={<PaymentMethods />} />
           <Route path="/login" element={<Login />} />
           <Route path="/register" element={<Register />} />
           <Route path="/forgot-password" element={<ForgotPassword />} />

src/pages/PaymentMethods.tsx

@@ -0,0 +1,114 @@
+
+import React from 'react';
+import NavBar from '@/components/NavBar';
+import { ArrowLeft, CreditCard, PlusCircle } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+
+const PaymentMethodCard = ({ 
+  type, 
+  label, 
+  lastDigits, 
+  expiry, 
+  isDefault 
+}: { 
+  type: 'card' | 'bank', 
+  label: string, 
+  lastDigits: string, 
+  expiry?: string, 
+  isDefault?: boolean 
+}) => {
+  return (
+    <div className="neuro-flat p-4 mb-4">
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-3">
+          <div className="neuro-pressed p-2 rounded-full text-neuro-income">
+            <CreditCard size={20} />
+          </div>
+          <div>
+            <h3 className="font-medium">{label}</h3>
+            <p className="text-sm text-gray-500">
+              {type === 'card' ? '•••• •••• •••• ' : ''}
+              {lastDigits}
+              {expiry ? ` · ${expiry}` : ''}
+            </p>
+          </div>
+        </div>
+        {isDefault && (
+          <span className="text-xs bg-neuro-income/10 text-neuro-income px-2 py-1 rounded-full">
+            기본
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const PaymentMethods = () => {
+  const navigate = useNavigate();
+
+  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>
+
+        {/* Payment Methods List */}
+        <div className="mb-8">
+          <h2 className="text-sm font-medium text-gray-500 mb-4 px-2">신용카드</h2>
+          
+          <PaymentMethodCard 
+            type="card"
+            label="신한카드"
+            lastDigits="1234"
+            expiry="12/25"
+            isDefault
+          />
+          
+          <PaymentMethodCard 
+            type="card"
+            label="국민카드"
+            lastDigits="5678"
+            expiry="09/26"
+          />
+        </div>
+
+        <div className="mb-8">
+          <h2 className="text-sm font-medium text-gray-500 mb-4 px-2">은행 계좌</h2>
+          
+          <PaymentMethodCard 
+            type="bank"
+            label="국민은행"
+            lastDigits="9876-54-321098"
+          />
+        </div>
+
+        {/* Add Payment Method Button */}
+        <div className="mt-8">
+          <Button 
+            className="w-full bg-neuro-income hover:bg-neuro-income/90 text-white"
+          >
+            <PlusCircle size={16} className="mr-2" />
+            새 결제 수단 추가
+          </Button>
+        </div>
+      </div>
+
+      <NavBar />
+    </div>
+  );
+};
+
+export default PaymentMethods;

src/pages/Settings.tsx

@@ -56,7 +56,7 @@ const Settings = () => {
         <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="카드 및 은행 계좌 관리" />
+          <SettingsOption icon={CreditCard} label="결제 방법" description="카드 및 은행 계좌 관리" onClick={() => navigate('/payment-methods')} />
           <SettingsOption icon={Bell} label="알림 설정" description="앱 알림 및 리마인더" onClick={() => navigate('/notification-settings')} />
         </div>