Implement payment method placeholder

- Added placeholder card payment methods.
- Added a message indicating that the payment feature is not yet supported.
- Grayed out the "Add New Payment Method" button.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-15 04:38:19 +00:00
parent 5fb56d660f
commit 1347321ce0

View File

@@ -4,6 +4,7 @@ import NavBar from '@/components/NavBar';
import { ArrowLeft, CreditCard, PlusCircle } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { useToast } from '@/hooks/use-toast';
const PaymentMethodCard = ({
type,
@@ -46,6 +47,14 @@ const PaymentMethodCard = ({
const PaymentMethods = () => {
const navigate = useNavigate();
const { toast } = useToast();
const handleAddPayment = () => {
toast({
title: "알림",
description: "이 결제 기능은 아직 지원하지 않습니다.",
});
};
return (
<div className="min-h-screen bg-neuro-background pb-24">
@@ -85,20 +94,18 @@ const PaymentMethods = () => {
/>
</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"
/>
{/* Notice */}
<div className="mb-8 p-4 bg-amber-50 rounded-md border border-amber-200">
<p className="text-amber-700 text-sm text-center">
.
</p>
</div>
{/* Add Payment Method Button */}
<div className="mt-8">
<Button
className="w-full bg-neuro-income hover:bg-neuro-income/90 text-white"
className="w-full bg-gray-400 hover:bg-gray-400/90 text-white cursor-not-allowed"
onClick={handleAddPayment}
>
<PlusCircle size={16} className="mr-2" />