Add payment method page

This commit adds a new page for managing payment methods.
2025-03-15 04:36:51 +00:00
parent b162b6def3
commit 5fb56d660f
3 changed files with 117 additions and 1 deletions
--- a/src/pages/PaymentMethods.tsx
+++ b/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;