[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Image from "next/image" import Banner from "@/components/banner" import ProductList from "@/components/product-list" import Header from "@/components/header" export default function Home() { return (

{/* Banner */} {/* Fundraising Section */}

모금중인 동물 후원

{/* Participating Organizations Section */}

함께하는 단체

행복한 꼬리 보호소

보호중인 강아지: 28마리

서울시 강남구

사랑나눔 동물센터

보호중인 강아지: 42마리

경기도 고양시

희망의 발자국

보호중인 강아지: 35마리

부산시 해운대구

) } [V0_FILE]typescriptreact:file="components/banner.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useCallback } from "react" const bannerData = [ { id: 1, title: "[나눔프로젝트X애니멀돌고] 유기동물 구출하기 지원 후기가 도착했어요", image: "/placeholder.svg?height=100&width=200", }, { id: 2, title: "겨울철 길고양이 급식소 설치 프로젝트에 참여해주세요", image: "/placeholder.svg?height=100&width=200", }, ] export default function Banner() { const [currentSlide, setCurrentSlide] = useState(0) const totalSlides = bannerData.length const nextSlide = useCallback(() => { setCurrentSlide((prev) => (prev + 1) % totalSlides) }, [totalSlides]) const prevSlide = () => { setCurrentSlide((prev) => (prev - 1 + totalSlides) % totalSlides) } useEffect(() => { const interval = setInterval(() => { nextSlide() }, 5000) return () => clearInterval(interval) }, [nextSlide]) return (

안녕하세요, 김동물님!

동물 사랑을 실천해주셔서 감사합니다

총 기부 금액

1,250,000원

이번 달 기부

150,000원

) } [V0_FILE]typescriptreact:file="components/product-list.tsx" isEdit="true" isMerged="true" import Image from "next/image" interface Product { id: number image: string category: string title: string organization: string price: string period: string } interface ProductListProps { products: Product[] } export default function ProductList({ products }: ProductListProps) { return (

{products.map((product) => (

{product.category}

{product.title}

{product.organization}

{product.period} {product.price}

))}

) } [V0_FILE]typescriptreact:file="components/bottom-navigation.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { HomeIcon, LayoutGridIcon, PiggyBankIcon, UserIcon, BuildingIcon } from "lucide-react" import Link from "next/link" export default function BottomNavigation() { return (

펀딩 후원 홈 단체 마이

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import BottomNavigation from "@/components/bottom-navigation" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "애니멀 돌고 - 동물 후원 플랫폼", description: "동물 후원 및 기부 플랫폼", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 0, 0, 0; --background-rgb: 245, 245, 245; --primary-color: #4aadde; --secondary-color: #fff9c4; } body { color: rgb(var(--foreground-rgb)); background: rgb(var(--background-rgb)); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "#4AADDE", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "#FFF9C4", foreground: "hsl(var(--secondary-foreground))", }, }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/header.tsx" isMerged="true" import { BellIcon } from "lucide-react" import Link from "next/link" export default function Header() { return (

유후

) } [V0_FILE]typescriptreact:file="app/donation/donation-step/page.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import Link from "next/link" import { EyeIcon, EyeOffIcon } from "lucide-react" export default function DonationStep() { const [showPassword, setShowPassword] = useState(false) const [rememberMe, setRememberMe] = useState(false) return (

회원가입 비밀번호 찾기

간편 계정으로 로그인하시나요?

*페이스북 계정으로 서비스를 이용하실 수 있습니다.
간편 로그인 시 개인정보 제공에 동의하게 됩니다.

) } [V0_FILE]typescriptreact:file="app/user/profile/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Header from "@/components/header" import Image from "next/image" import { UserIcon, SettingsIcon, ReceiptIcon, FilterIcon, ChevronRightIcon, CalendarIcon } from "lucide-react" import { AreaChart, Area, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip as ChartTooltip, Legend, ResponsiveContainer, } from "recharts" import { ChartContainer } from "@/components/ui/chart" // Sample data for demonstration const DONATION_HISTORY = [ { id: 1, target: "유기견 보호소 지원", amount: 50000, date: "2025.02.15", type: "일시" }, { id: 2, target: "길고양이 급식소 설치", amount: 30000, date: "2025.01.20", type: "일시" }, { id: 3, target: "유기견 보호소 지원", amount: 50000, date: "2025.01.15", type: "정기" }, { id: 4, target: "유기견 보호소 지원", amount: 50000, date: "2024.12.15", type: "정기" }, { id: 5, target: "야생동물 구조 센터", amount: 100000, date: "2024.11.10", type: "일시" }, ] const SPONSORED_DOGS = [ { id: 1, name: "초코", image: "/placeholder.svg?height=60&width=60", date: "2025.02.15" }, { id: 2, name: "몽이", image: "/placeholder.svg?height=60&width=60", date: "2025.01.20" }, { id: 3, name: "해피", image: "/placeholder.svg?height=60&width=60", date: "2024.12.10" }, { id: 4, name: "루시", image: "/placeholder.svg?height=60&width=60", date: "2024.11.05" }, { id: 5, name: "콩이", image: "/placeholder.svg?height=60&width=60", date: "2024.10.22" }, { id: 6, name: "바둑이", image: "/placeholder.svg?height=60&width=60", date: "2024.09.15" }, ] export default function UserProfile() { const [activeTab, setActiveTab] = useState<"history" | "dogs" | "certificate" | "receipt">("history") const [filterOpen, setFilterOpen] = useState(false) // Calculate totals const totalDonated = DONATION_HISTORY.reduce((sum, item) => sum + item.amount, 0) const totalCount = DONATION_HISTORY.length return (

{/* User Info */}

김동물님

user@example.com

총 기부 금액

{totalDonated.toLocaleString()}원

기부 횟수

{totalCount}회

{/* Navigation Tabs */}

{/* Tab Content */}

{/* Donation History Tab */} {activeTab === "history" && (

기부 내역

{filterOpen && (

시작일

종료일

)} {/* Donation Statistics */}

총 후원 횟수

{DONATION_HISTORY.length}회

후원 단체 수

3개

후원 강아지 수

6마리

{/* Monthly Donation Chart */}

월별 후원 금액

{ const date = new Date(value) return `${date.getMonth() + 1}월` }} /> `${value / 10000}만원`} /> { if (active && payload && payload.length) { const data = payload[0].payload const value = data.donations !== null ? data.donations : data.predicted const isPredicted = data.donations === null return (

{`${new Date(data.month).getMonth() + 1}월`}

{isPredicted ? "예상 금액: " : "후원 금액: "} {value.toLocaleString()}원

) } return null }} />

실제 후원

예상 후원

{/* Organization Donation Chart */}

단체별 후원 비율

{ if (active && payload && payload.length) { const data = payload[0].payload return (

{data.name}

후원 금액:{" "} {data.value.toLocaleString()}원

) } return null }} /> { return {value} }} />

최근 후원 내역

{DONATION_HISTORY.map((donation) => (

{donation.target} {donation.amount.toLocaleString()}원

{donation.date} {donation.type}

))}

)} {/* Sponsored Dogs Tab */} {activeTab === "dogs" && (

내가 후원한 강아지

{[ { id: 1, name: "초코", image: "/placeholder.svg?height=150&width=150", gender: "남아", organization: "행복한 꼬리 보호소", totalDonation: 120000, }, { id: 2, name: "몽이", image: "/placeholder.svg?height=150&width=150", gender: "여아", organization: "사랑나눔 동물센터", totalDonation: 85000, }, { id: 3, name: "해피", image: "/placeholder.svg?height=150&width=150", gender: "남아", organization: "희망의 발자국", totalDonation: 50000, }, { id: 4, name: "루시", image: "/placeholder.svg?height=150&width=150", gender: "여아", organization: "행복한 꼬리 보호소", totalDonation: 75000, }, { id: 5, name: "콩이", image: "/placeholder.svg?height=150&width=150", gender: "남아", organization: "사랑나눔 동물센터", totalDonation: 60000, }, { id: 6, name: "바둑이", image: "/placeholder.svg?height=150&width=150", gender: "남아", organization: "희망의 발자국", totalDonation: 90000, }, ].map((dog) => (

{/* Hover overlay */}

{dog.name}

{dog.gender}

{dog.organization}

총 후원금액: {dog.totalDonation.toLocaleString()}원

))}

더 많은 강아지들이 당신의 도움을 기다리고 있어요

)} {/* Certificate Tab */} {activeTab === "certificate" && (

기부 증서 발급

기부 증서

Certificate of Donation

이 증서는

김동물님

께서

총 기부금액

280,000원

을 기부해 주셨음을 증명합니다.

2025년 2월 28일

유후~❤️

기부 증서는 언제든지 다운로드하고 공유할 수 있습니다.

증서에는 귀하의 소중한 기부 내역이 담겨있으며, 기부에 대한 감사의 의미를 담고 있습니다.

)} {/* Receipt Tab */} {activeTab === "receipt" && (

기부금 영수증 신청

기부금 영수증

연말정산을 위한 기부금 영수증을 발급받으세요

2024년 기부금 영수증

발급 가능 기간: 2025.01.01 ~ 2025.03.31

2023년 기부금 영수증

발급 완료: 2024.01.15

영수증 발급 안내

기부금 영수증은 실명으로 발급됩니다.
국세청 연말정산 간소화 서비스에 자동 등록됩니다.
발급 신청 후 최대 3일 이내 처리됩니다.

)}

) } [V0_FILE]typescriptreact:file="app/collection/intro/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import Image from "next/image" import { PawPrintIcon, HeartIcon, DogIcon, CatIcon, BirdIcon, UserIcon } from "lucide-react" // 샘플 펀딩 데이터 const FUNDING_ITEMS = [ { id: 1, title: "유기견 보호소 지원 프로젝트", image: "/placeholder.svg?height=200&width=350", organization: "행복한 꼬리 보호소", currentAmount: 1594000, targetAmount: 3000000, daysLeft: 20, status: "진행중", }, { id: 2, title: "길고양이 급식소 설치 및 관리", image: "/placeholder.svg?height=200&width=350", organization: "사랑나눔 동물센터", currentAmount: 2887200, targetAmount: 3000000, daysLeft: 15, status: "진행중", }, { id: 3, title: "야생동물 구조 및 치료 지원", image: "/placeholder.svg?height=200&width=350", organization: "희망의 발자국", currentAmount: 3244200, targetAmount: 3000000, daysLeft: 0, status: "완료", }, { id: 4, title: "유기견 의료비 지원 프로젝트", image: "/placeholder.svg?height=200&width=350", organization: "행복한 꼬리 보호소", currentAmount: 0, targetAmount: 5000000, daysLeft: 30, status: "시작전", }, { id: 5, title: "동물 보호소 시설 개선 사업", image: "/placeholder.svg?height=200&width=350", organization: "사랑나눔 동물센터", currentAmount: 4500000, targetAmount: 4000000, daysLeft: 0, status: "완료", }, { id: 6, title: "유기견 입양 캠페인", image: "/placeholder.svg?height=200&width=350", organization: "희망의 발자국", currentAmount: 1200000, targetAmount: 2500000, daysLeft: 25, status: "진행중", }, ] export default function CollectionIntro() { const [activeFilter, setActiveFilter] = useState<"전체" | "진행중" | "완료" | "시작전">("전체") // 필터링된 펀딩 아이템 const filteredItems = activeFilter === "전체" ? FUNDING_ITEMS : FUNDING_ITEMS.filter((item) => item.status === activeFilter) return (

펀딩 리스트

{/* 필터링 버튼 */}

{/* 펀딩 리스트 */}

{filteredItems.map((item) => (

{item.status}

{item.title}

{item.organization}

{Math.round((item.currentAmount / item.targetAmount) * 100)}% {item.currentAmount.toLocaleString()}원 {item.daysLeft > 0 && {item.daysLeft}일 남음}

))}

) } [V0_FILE]typescriptreact:file="app/funding/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import Link from "next/link" import { ArrowLeft, Home, Share2, Heart } from "lucide-react" import { useParams } from "next/navigation" // 샘플 펀딩 상세 데이터 const FUNDING_DETAILS = [ { id: 1, title: "유기견 보호소 지원 프로젝트", image: "/placeholder.svg?height=300&width=500", organization: "행복한 꼬리 보호소", currentAmount: 1594000, targetAmount: 3000000, daysLeft: 20, status: "진행중", description: "이 프로젝트는 서울시 강남구에 위치한 행복한 꼬리 보호소의 유기견들을 위한 지원 프로젝트입니다. 현재 28마리의 강아지들이 보호 중이며, 이들의 사료, 의약품, 그리고 보호소 시설 개선을 위한 자금이 필요합니다.", plan: [ "1단계: 보호소 내 노후화된 케이지 교체 (500만원)", "2단계: 겨울철 난방 시설 개선 (800만원)", "3단계: 3개월 분량의 사료 및 의약품 구매 (1,200만원)", "4단계: 유기견 건강검진 및 예방접종 (500만원)", ], }, ] export default function FundingDetail() { const params = useParams() const id = Number(params.id) // 실제 구현에서는 API 호출로 데이터를 가져와야 함 const fundingDetail = FUNDING_DETAILS.find((item) => item.id === id) || FUNDING_DETAILS[0] const [activeTab, setActiveTab] = useState<"intro" | "plan">("intro") return (

{/* Header */}

펀딩 상세

{/* Main Image */}

{fundingDetail.status}

{/* Funding Info */}

{fundingDetail.title}

{fundingDetail.organization}

모인 금액

{fundingDetail.currentAmount.toLocaleString()}원

달성률

{Math.round((fundingDetail.currentAmount / fundingDetail.targetAmount) * 100)}%

목표 금액

{fundingDetail.targetAmount.toLocaleString()}원

남은 기간

{fundingDetail.daysLeft}일

{/* Tabs */}

{/* Tab Content */}

{activeTab === "intro" && (

프로젝트 소개

{fundingDetail.description}

유기견들은 따뜻한 보금자리와 정기적인 건강관리가 필요합니다. 여러분의 후원으로 이 아이들에게 더 나은 환경을 제공할 수 있습니다.

후원금은 투명하게 사용되며, 정기적으로 사용 내역을 공개할 예정입니다. 여러분의 소중한 후원이 큰 변화를 만듭니다.

)} {activeTab === "plan" && (

펀딩 계획

{fundingDetail.plan.map((step, index) => (

{index + 1}

{step}

))}

펀딩 일정

펀딩 시작일 2025.01.15

펀딩 종료일 2025.03.15

결과 발표 2025.03.20

프로젝트 시작 2025.04.01

)}

{/* Donation Button */}

) } [V0_FILE]typescriptreact:file="app/payment/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { ArrowLeft, Home, CreditCard, ChevronDown, AlertCircle } from "lucide-react" import { useParams, useRouter } from "next/navigation" // 샘플 펀딩 데이터 const FUNDING_DETAILS = [ { id: 1, title: "유기견 보호소 지원 프로젝트", organization: "행복한 꼬리 보호소", accountNumber: "123-456-789012", bankName: "행복은행", }, ] // 샘플 사용자 계좌 정보 const USER_ACCOUNTS = [ { id: 1, bankName: "신한은행", accountNumber: "110-123-456789", balance: 1500000, isMain: true, }, { id: 2, bankName: "국민은행", accountNumber: "123-12-123456", balance: 850000, isMain: false, }, ] export default function PaymentPage() { const params = useParams() const router = useRouter() const id = Number(params.id) const [hasAccount, setHasAccount] = useState(null) const [selectedAccount, setSelectedAccount] = useState(null) const [amount, setAmount] = useState(10000) const [showAccountSelector, setShowAccountSelector] = useState(false) const [isLoading, setIsLoading] = useState(false) // 펀딩 정보 가져오기 const fundingDetail = FUNDING_DETAILS.find((item) => item.id === id) || FUNDING_DETAILS[0] // 계좌 정보 가져오기 (실제로는 API 호출) useEffect(() => { // 실제 구현에서는 API 호출로 사용자 계좌 정보를 가져옴 const fetchUserAccounts = async () => { // 계좌가 있는지 확인 (샘플 데이터 사용) setTimeout(() => { setHasAccount(USER_ACCOUNTS.length > 0) if (USER_ACCOUNTS.length > 0) { const mainAccount = USER_ACCOUNTS.find((acc) => acc.isMain) || USER_ACCOUNTS[0] setSelectedAccount(mainAccount.id) } }, 500) } fetchUserAccounts() }, []) // 결제 처리 const handlePayment = () => { if (!selectedAccount) { alert("계좌를 선택해주세요.") return } if (amount <= 0) { alert("금액을 입력해주세요.") return } setIsLoading(true) // 실제 구현에서는 API 호출로 결제 처리 setTimeout(() => { setIsLoading(false) // 결제 완료 페이지로 이동 router.push(`/payment/complete/${id}?amount=${amount}`) }, 1500) } // 계좌 선택 const handleSelectAccount = (accountId: number) => { setSelectedAccount(accountId) setShowAccountSelector(false) } // 금액 선택 const predefinedAmounts = [5000, 10000, 30000, 50000, 100000] if (hasAccount === null) { return (

) } return (

{/* Header */}

후원하기

{/* 펀딩 정보 */}

{fundingDetail.title}

{fundingDetail.organization}

{hasAccount ? ( <> {/* 계좌 선택 */}

출금 계좌

{showAccountSelector && (

{USER_ACCOUNTS.map((account) => ( ))}

)}

{/* 입금 계좌 정보 */}

입금 계좌

{fundingDetail.bankName}

{fundingDetail.accountNumber}

{/* 금액 선택 */}

후원 금액

{predefinedAmounts.map((value) => ( ))}

setAmount(Number(e.target.value))} className="w-full p-3 border rounded-lg text-right pr-12" placeholder="금액 입력" /> 원

{/* 결제 버튼 */} ) : (

등록된 계좌가 없습니다

후원을 위해 계좌를 등록해주세요. 등록된 계좌 정보는 안전하게 보호됩니다.

)}

) } [V0_FILE]typescriptreact:file="app/account/register/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { ArrowLeft, Home, CreditCard, Check } from "lucide-react" import { useRouter } from "next/navigation" // 은행 목록 const BANKS = [ { id: 1, name: "신한은행", code: "088" }, { id: 2, name: "국민은행", code: "004" }, { id: 3, name: "우리은행", code: "020" }, { id: 4, name: "하나은행", code: "081" }, { id: 5, name: "농협은행", code: "011" }, { id: 6, name: "SC제일은행", code: "023" }, { id: 7, name: "카카오뱅크", code: "090" }, { id: 8, name: "토스뱅크", code: "092" }, ] export default function AccountRegisterPage() { const router = useRouter() const [step, setStep] = useState(1) const [selectedBank, setSelectedBank] = useState(null) const [accountNumber, setAccountNumber] = useState("") const [accountHolder, setAccountHolder] = useState("") const [isMain, setIsMain] = useState(true) const [isLoading, setIsLoading] = useState(false) const [isSuccess, setIsSuccess] = useState(false) // 계좌 등록 처리 const handleRegister = () => { if (!selectedBank) { alert("은행을 선택해주세요.") return } if (!accountNumber) { alert("계좌번호를 입력해주세요.") return } if (!accountHolder) { alert("예금주명을 입력해주세요.") return } setIsLoading(true) // 실제 구현에서는 API 호출로 계좌 등록 처리 setTimeout(() => { setIsLoading(false) setIsSuccess(true) // 3초 후 이전 페이지로 이동 setTimeout(() => { router.back() }, 3000) }, 1500) } return (

{/* Header */}

계좌 등록

{isSuccess ? (

계좌 등록 완료

계좌가 성공적으로 등록되었습니다.

잠시 후 이전 페이지로 이동합니다...

) : ( <> {/* 진행 상태 표시 */}

= 1 ? "bg-blue-500" : "bg-gray-200"}`}>

= 2 ? "bg-blue-500" : "bg-gray-200"}`}>

= 2 ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-500"}`} > 2

= 3 ? "bg-blue-500" : "bg-gray-200"}`}>

{step === 1 && (

은행 선택

{BANKS.map((bank) => ( ))}

)} {step === 2 && (

계좌 정보 입력

은행

{BANKS.find((bank) => bank.id === selectedBank)?.name}

계좌번호 setAccountNumber(e.target.value)} placeholder="'-' 없이 입력해주세요" className="w-full p-3 border rounded-lg" />

예금주명 setAccountHolder(e.target.value)} placeholder="예금주명을 입력해주세요" className="w-full p-3 border rounded-lg" />

setIsMain(e.target.checked)} className="h-4 w-4 text-blue-500 border-gray-300 rounded" /> 기본 계좌로 설정

)} )}

) } [V0_FILE]typescriptreact:file="app/payment/complete/[id]/page.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import Link from "next/link" import { Home, CheckCircle, ArrowRight } from "lucide-react" import { useParams, useSearchParams } from "next/navigation" import confetti from "canvas-confetti" // 샘플 펀딩 데이터 const FUNDING_DETAILS = [ { id: 1, title: "유기견 보호소 지원 프로젝트", organization: "행복한 꼬리 보호소", }, ] export default function PaymentCompletePage() { const params = useParams() const searchParams = useSearchParams() const id = Number(params.id) const amount = Number(searchParams.get("amount") || 0) const [showConfetti, setShowConfetti] = useState(false) // 펀딩 정보 가져오기 const fundingDetail = FUNDING_DETAILS.find((item) => item.id === id) || FUNDING_DETAILS[0] // 컨페티 효과 useEffect(() => { if (!showConfetti) { setShowConfetti(true) const duration = 3 * 1000 const animationEnd = Date.now() + duration const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 } function randomInRange(min: number, max: number) { return Math.random() * (max - min) + min } const interval: NodeJS.Timeout = setInterval(() => { const timeLeft = animationEnd - Date.now() if (timeLeft <= 0) { return clearInterval(interval) } const particleCount = 50 * (timeLeft / duration) // 왼쪽에서 발사 confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 }, }) // 오른쪽에서 발사 confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 }, }) }, 250) } }, [showConfetti]) return (

{/* Header */}

후원 완료

후원이 완료되었습니다

소중한 후원에 감사드립니다

후원 프로젝트 {fundingDetail.title}

후원 단체 {fundingDetail.organization}

후원 금액 {amount.toLocaleString()}원

후원 일시 {new Date().toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", })}

후원 내역은 마이페이지에서 확인하실 수 있습니다.

) } [V0_FILE]typescriptreact:file="app/payment/complete/[id]/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/registAccount/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import Image from "next/image" import { ArrowLeft, Home, Check, ChevronRight, Shield, Lock, FileText } from "lucide-react" import { useRouter } from "next/navigation" // 은행 목록 const BANKS = [ { id: 1, name: "신한은행", code: "088", logo: "/placeholder.svg?height=40&width=40" }, { id: 2, name: "국민은행", code: "004", logo: "/placeholder.svg?height=40&width=40" }, { id: 3, name: "우리은행", code: "020", logo: "/placeholder.svg?height=40&width=40" }, { id: 4, name: "하나은행", code: "081", logo: "/placeholder.svg?height=40&width=40" }, { id: 5, name: "농협은행", code: "011", logo: "/placeholder.svg?height=40&width=40" }, { id: 6, name: "SC제일은행", code: "023", logo: "/placeholder.svg?height=40&width=40" }, { id: 7, name: "카카오뱅크", code: "090", logo: "/placeholder.svg?height=40&width=40" }, { id: 8, name: "토스뱅크", code: "092", logo: "/placeholder.svg?height=40&width=40" }, ] export default function RegisterAccountPage() { const router = useRouter() const [step, setStep] = useState(1) const [selectedBank, setSelectedBank] = useState(null) const [accountNumber, setAccountNumber] = useState("") const [accountHolder, setAccountHolder] = useState("") const [birthdate, setBirthdate] = useState("") const [phoneNumber, setPhoneNumber] = useState("") const [isMain, setIsMain] = useState(true) const [isLoading, setIsLoading] = useState(false) const [isSuccess, setIsSuccess] = useState(false) const [verificationCode, setVerificationCode] = useState("") const [isVerifying, setIsVerifying] = useState(false) const [isVerified, setIsVerified] = useState(false) const [agreements, setAgreements] = useState({ terms: false, privacy: false, thirdParty: false, marketing: false, }) // 모든 필수 약관에 동의했는지 확인 const allRequiredAgreed = agreements.terms && agreements.privacy && agreements.thirdParty // 전체 동의 처리 const handleAgreeAll = (checked: boolean) => { setAgreements({ terms: checked, privacy: checked, thirdParty: checked, marketing: checked, }) } // 인증번호 요청 const requestVerificationCode = () => { if (!phoneNumber) { alert("휴대폰 번호를 입력해주세요.") return } setIsVerifying(true) // 실제 구현에서는 API 호출로 인증번호 요청 setTimeout(() => { setIsVerifying(false) alert("인증번호가 발송되었습니다.") }, 1500) } // 인증번호 확인 const verifyCode = () => { if (!verificationCode) { alert("인증번호를 입력해주세요.") return } setIsVerifying(true) // 실제 구현에서는 API 호출로 인증번호 확인 setTimeout(() => { setIsVerifying(false) setIsVerified(true) alert("인증이 완료되었습니다.") }, 1500) } // 계좌 등록 처리 const handleRegister = () => { if (!selectedBank) { alert("은행을 선택해주세요.") return } if (!accountNumber) { alert("계좌번호를 입력해주세요.") return } if (!accountHolder) { alert("예금주명을 입력해주세요.") return } if (!isVerified) { alert("본인 인증이 필요합니다.") return } if (!allRequiredAgreed) { alert("필수 약관에 동의해주세요.") return } setIsLoading(true) // 실제 구현에서는 API 호출로 계좌 등록 처리 setTimeout(() => { setIsLoading(false) setIsSuccess(true) // 3초 후 결제 페이지로 이동 setTimeout(() => { router.back() }, 3000) }, 1500) } // 단계별 진행 상태 표시 const renderProgressBar = () => { return (

= 1 ? "bg-blue-500" : "bg-gray-200"}`}>

= 1 ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-500"}`} > 1

= 2 ? "bg-blue-500" : "bg-gray-200"}`}>

= 2 ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-500"}`} > 2

= 3 ? "bg-blue-500" : "bg-gray-200"}`}>

= 3 ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-500"}`} > 3

= 4 ? "bg-blue-500" : "bg-gray-200"}`}>

) } return (

{/* Header */}

계좌 등록

{isSuccess ? (

계좌 등록 완료

계좌가 성공적으로 등록되었습니다.
이제 후원을 진행하실 수 있습니다.

은행 {BANKS.find((bank) => bank.id === selectedBank)?.name}

계좌번호 {accountNumber}

예금주 {accountHolder}

잠시 후 이전 페이지로 이동합니다...

) : ( <> {renderProgressBar()} {step === 1 && (

은행 선택

후원금을 출금할 은행을 선택해주세요.

{BANKS.map((bank) => ( ))}

계좌 정보는 안전하게 보호되며, 후원 목적으로만 사용됩니다. 개인정보 보호를 위해 암호화되어 저장됩니다.

)} {step === 2 && (

계좌 정보 입력

은행

bank.id === selectedBank)?.logo || "/placeholder.svg"} alt={BANKS.find((bank) => bank.id === selectedBank)?.name || ""} width={24} height={24} className="object-cover" />

{BANKS.find((bank) => bank.id === selectedBank)?.name}

계좌번호 setAccountNumber(e.target.value)} placeholder="'-' 없이 입력해주세요" className="w-full p-3 border rounded-lg" />

예금주명 setAccountHolder(e.target.value)} placeholder="예금주명을 입력해주세요" className="w-full p-3 border rounded-lg" />

생년월일 setBirthdate(e.target.value)} placeholder="예: 19900101" className="w-full p-3 border rounded-lg" maxLength={8} />

setIsMain(e.target.checked)} className="h-4 w-4 text-blue-500 border-gray-300 rounded" /> 기본 계좌로 설정

)} {step === 3 && (

본인 인증

계좌 등록을 위해 본인 인증이 필요합니다.

휴대폰 번호

setPhoneNumber(e.target.value)} placeholder="'-' 없이 입력해주세요" className="flex-1 p-3 border rounded-lg" disabled={isVerified} />

{(isVerifying || verificationCode || isVerified) && (

인증번호

setVerificationCode(e.target.value)} placeholder="인증번호 6자리" className="flex-1 p-3 border rounded-lg" disabled={isVerified} maxLength={6} />

{isVerified &&

인증이 완료되었습니다.

}

)}

본인 인증 정보는 계좌 소유자 확인을 위해서만 사용되며, 인증 후 안전하게 보호됩니다.

)} {step === 4 && (

약관 동의

v)} onChange={(e) => handleAgreeAll(e.target.checked)} className="h-4 w-4 text-blue-500 border-gray-300 rounded" /> 전체 동의

setAgreements({ ...agreements, terms: e.target.checked })} className="h-4 w-4 text-blue-500 border-gray-300 rounded" /> (필수) 서비스 이용약관 동의

setAgreements({ ...agreements, privacy: e.target.checked })} className="h-4 w-4 text-blue-500 border-gray-300 rounded" /> (필수) 개인정보 수집 및 이용 동의

setAgreements({ ...agreements, thirdParty: e.target.checked })} className="h-4 w-4 text-blue-500 border-gray-300 rounded" /> (필수) 제3자 정보제공 동의

setAgreements({ ...agreements, marketing: e.target.checked })} className="h-4 w-4 text-blue-500 border-gray-300 rounded" /> (선택) 마케팅 정보 수신 동의

계좌 등록을 위해 필수 약관에 동의해주세요. 약관 내용은 각 항목을 클릭하여 확인하실 수 있습니다.

)} )}

) } [V0_FILE]typescriptreact:file="app/organization/page.tsx" "use client" import { useState } from "react" import Image from "next/image" import { useRouter } from "next/navigation" import { MapPinIcon, CalendarIcon, PhoneIcon, MailIcon, PawPrintIcon } from "lucide-react" import Header from "@/components/header" import { BarChart, Bar, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip as ChartTooltip, Legend, ResponsiveContainer, } from "recharts" import { ChartContainer } from "@/components/ui/chart" // 샘플 단체 데이터 const ORGANIZATION = { id: 1, name: "행복한 꼬리 보호소", logo: "/placeholder.svg?height=80&width=80", location: "서울시 강남구 테헤란로 123", foundedYear: 2018, dogCount: 28, description: `행복한 꼬리 보호소는 2018년에 설립된 비영리 동물 보호 단체입니다. 저희는 유기견들에게 임시 보호소를 제공하고, 새로운 가정을 찾아주는 것을 목표로 하고 있습니다. 버려지거나 학대받은 강아지들을 구조하여 의료 지원, 행동 교정, 그리고 사회화 훈련을 제공합니다. 모든 강아지들은 건강 검진을 받고 예방 접종과 중성화 수술을 받습니다. 저희 보호소는 자원봉사자들의 도움과 후원자들의 기부로 운영되고 있습니다. 여러분의 소중한 후원은 더 많은 강아지들을 구조하고 보살피는 데 큰 도움이 됩니다.`, mission: "모든 유기견들이 사랑받는 가정을 찾을 수 있도록 돕는 것", vision: "유기견이 없는 사회를 만들기 위한 인식 개선과 책임감 있는 반려동물 문화 조성", phone: "02-123-4567", email: "info@happytail.org", website: "www.happytail.org", } // 샘플 강아지 데이터 const DOGS = [ { id: 1, name: "초코", image: "/placeholder.svg?height=150&width=150", breed: "믹스견", age: "3살", gender: "남아", weight: "8kg", neutered: true, personality: "활발하고 사람을 좋아하는 성격입니다. 다른 강아지들과도 잘 어울립니다.", healthStatus: "건강 양호, 예방접종 완료", rescueDate: "2023년 5월", }, { id: 2, name: "몽이", image: "/placeholder.svg?height=150&width=150", breed: "말티즈", age: "2살", gender: "여아", weight: "4kg", neutered: true, personality: "조용하고 온순한 성격입니다. 사람 무릎 위에 앉아있는 것을 좋아합니다.", healthStatus: "건강 양호, 예방접종 완료", rescueDate: "2023년 8월", }, { id: 3, name: "해피", image: "/placeholder.svg?height=150&width=150", breed: "비숑 프리제", age: "1살", gender: "남아", weight: "5kg", neutered: true, personality: "호기심이 많고 장난기 넘치는 성격입니다. 산책을 매우 좋아합니다.", healthStatus: "건강 양호, 예방접종 완료", rescueDate: "2024년 1월", }, { id: 4, name: "루시", image: "/placeholder.svg?height=150&width=150", breed: "포메라니안", age: "4살", gender: "여아", weight: "3kg", neutered: true, personality: "경계심이 있지만 친해지면 매우 애교가 많습니다. 조용한 환경을 선호합니다.", healthStatus: "건강 양호, 예방접종 완료, 치과 치료 이력 있음", rescueDate: "2022년 11월", }, ] // 샘플 후원금 사용 데이터 - 월간 const MONTHLY_EXPENSES = [ { name: "1월", 사료식품: 450000, 의료비: 780000, 시설유지비: 320000, 인건비: 1200000, 기타: 150000 }, { name: "2월", 사료식품: 480000, 의료비: 650000, 시설유지비: 350000, 인건비: 1200000, 기타: 180000 }, { name: "3월", 사료식품: 520000, 의료비: 820000, 시설유지비: 300000, 인건비: 1200000, 기타: 160000 }, { name: "4월", 사료식품: 490000, 의료비: 750000, 시설유지비: 380000, 인건비: 1200000, 기타: 170000 }, { name: "5월", 사료식품: 510000, 의료비: 900000, 시설유지비: 340000, 인건비: 1200000, 기타: 190000 }, { name: "6월", 사료식품: 530000, 의료비: 680000, 시설유지비: 360000, 인건비: 1200000, 기타: 140000 }, ] // 샘플 후원금 사용 데이터 - 분기별 const QUARTERLY_EXPENSES = [ { name: "1분기", 사료식품: 1450000, 의료비: 2250000, 시설유지비: 970000, 인건비: 3600000, 기타: 490000 }, { name: "2분기", 사료식품: 1530000, 의료비: 2330000, 시설유지비: 1080000, 인건비: 3600000, 기타: 500000 }, { name: "3분기", 사료식품: 1490000, 의료비: 2180000, 시설유지비: 1020000, 인건비: 3600000, 기타: 510000 }, { name: "4분기", 사료식품: 1580000, 의료비: 2420000, 시설유지비: 1050000, 인건비: 3600000, 기타: 480000 }, ] // 샘플 후원금 사용 데이터 - 연간 const YEARLY_EXPENSES = [ { name: "2021년", 사료식품: 5200000, 의료비: 8500000, 시설유지비: 3800000, 인건비: 14400000, 기타: 1800000 }, { name: "2022년", 사료식품: 5800000, 의료비: 9200000, 시설유지비: 4100000, 인건비: 14400000, 기타: 1900000 }, { name: "2023년", 사료식품: 6050000, 의료비: 9180000, 시설유지비: 4120000, 인건비: 14400000, 기타: 1980000 }, ] // 샘플 후원금 분배 데이터 (파이 차트용) const EXPENSE_DISTRIBUTION = [ { name: "사료/식품", value: 6050000, color: "#FF8042" }, { name: "의료비", value: 9180000, color: "#0088FE" }, { name: "시설유지비", value: 4120000, color: "#00C49F" }, { name: "인건비", value: 14400000, color: "#FFBB28" }, { name: "기타", value: 1980000, color: "#FF6B6B" }, ] export default function OrganizationPage() { const router = useRouter() const [activeTab, setActiveTab] = useState<"intro" | "dogs" | "chart">("intro") const [chartPeriod, setChartPeriod] = useState<"monthly" | "quarterly" | "yearly">("monthly") // 후원하기 버튼 클릭 핸들러 const handleDonateClick = () => { // 실제 구현에서는 URL 파라미터나 쿼리 파라미터를 통해 선택된 단체와 후원 타입을 전달 // 예: /donation?org=1&type=monthly router.push(`/donation?org=${ORGANIZATION.id}&type=monthly`) } // 차트 데이터 선택 const getChartData = () => { switch (chartPeriod) { case "monthly": return MONTHLY_EXPENSES case "quarterly": return QUARTERLY_EXPENSES case "yearly": return YEARLY_EXPENSES default: return MONTHLY_EXPENSES } } return (

{/* 단체 배너 */}

{ORGANIZATION.name}

{ORGANIZATION.location}

설립 {ORGANIZATION.foundedYear}년

보호중인 강아지: {ORGANIZATION.dogCount}마리

{/* 탭 네비게이션 */}

{/* 탭 콘텐츠 */}

{/* 소개 탭 */} {activeTab === "intro" && (

단체 소개

미션

{ORGANIZATION.mission}

비전

{ORGANIZATION.vision}

상세 소개

{ORGANIZATION.description}

단체 정보

{ORGANIZATION.location}

{ORGANIZATION.phone}

{ORGANIZATION.email}

{ORGANIZATION.website}

)} {/* 강아지 탭 */} {activeTab === "dogs" && (

보호중인 강아지

현재 {ORGANIZATION.name}에서 보호중인 강아지들입니다. 입양 문의는 전화 또는 이메일로 연락주세요.

{DOGS.map((dog) => (

{dog.name}

{dog.gender}

품종: {dog.breed}

나이: {dog.age}

체중: {dog.weight}

중성화: {dog.neutered ? "완료" : "미완료"}

성격

{dog.personality}

건강상태

{dog.healthStatus}

구조일: {dog.rescueDate}

))}

)} {/* 후원금 탭 */} {activeTab === "chart" && (

후원금 사용 현황

{/* 기간 선택 */}

{/* 막대 그래프 */}

{chartPeriod === "monthly" ? "월별 후원금 사용 내역" : chartPeriod === "quarterly" ? "분기별 후원금 사용 내역" : "연간 후원금 사용 내역"}

`${value / 10000}만원`} /> [`${value.toLocaleString()}원`, ""]} />

{/* 파이 차트 */}

2023년 후원금 분배 비율

`${name} ${(percent * 100).toFixed(0)}%`} > {EXPENSE_DISTRIBUTION.map((entry, index) => ( ))} `${value.toLocaleString()}원`} />

{/* 후원금 사용 설명 */}

후원금 사용 안내

여러분의 소중한 후원금은 보호소의 강아지들을 위해 다음과 같이 사용됩니다:

사료/식품: 강아지들의 영양 균형을 위한 사료와 간식
의료비: 예방접종, 중성화 수술, 질병 치료 등 의료 서비스
시설유지비: 보호소 시설 관리, 청소, 난방, 냉방 등
인건비: 강아지들을 돌보는 직원들의 급여
기타: 교육 프로그램, 입양 행사, 홍보 활동 등

)}

{/* 후원하기 버튼 */}

) } [V0_FILE]typescriptreact:file="app/donation/page.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { ArrowLeft, Home, CalendarIcon, HeartIcon, BuildingIcon, PawPrintIcon, CreditCard, ChevronDown, } from "lucide-react" import Link from "next/link" import Image from "next/image" import { useSearchParams } from "next/navigation" export default function DonationPage() { const searchParams = useSearchParams() const orgId = searchParams.get("org") const donationType = searchParams.get("type") === "monthly" ? "monthly" : "once" const [selectedOrganization, setSelectedOrganization] = useState(null) const [selectedDonationType, setSelectedDonationType] = useState<"monthly" | "once">("once") const [donationTarget, setDonationTarget] = useState<"organization" | "dog">("organization") const [selectedDog, setSelectedDog] = useState(null) const [amount, setAmount] = useState(0) const [additionalAmount, setAdditionalAmount] = useState(0) const [comment, setComment] = useState("") const [selectedAccount, setSelectedAccount] = useState(1) // Default to first account const [showAccountSelector, setShowAccountSelector] = useState(false) // URL 파라미터에서 초기값 설정 useEffect(() => { if (orgId) { setSelectedOrganization(Number(orgId)) } if (donationType) { setSelectedDonationType(donationType as "monthly" | "once") } }, [orgId, donationType]) // Sample user accounts data const USER_ACCOUNTS = [ { id: 1, bankName: "신한은행", accountNumber: "110-123-456789", balance: 1500000, isMain: true, }, { id: 2, bankName: "국민은행", accountNumber: "123-12-123456", balance: 850000, isMain: false, }, ] // Account selection handler const handleSelectAccount = (accountId: number) => { setSelectedAccount(accountId) setShowAccountSelector(false) } const calculateTotal = () => { return amount + additionalAmount } // Payment handler const handlePayment = () => { if (!selectedAccount) { alert("계좌를 선택해주세요.") return } if (amount <= 0) { alert("금액을 입력해주세요.") return } // In a real implementation, this would make an API call to process the payment alert(`${amount.toLocaleString()}원 후원이 완료되었습니다. 감사합니다!`) // Navigate to completion page // router.push(`/payment/complete/${selectedOrganization}?amount=${amount}`) } return (

{/* Header */}

기부하기

{/* Step 1: Organization Selection */}

1. 후원할 단체 선택

{[ { id: 1, name: "행복한 꼬리 보호소", location: "서울시 강남구", dogCount: 28 }, { id: 2, name: "사랑나눔 동물센터", location: "경기도 고양시", dogCount: 42 }, { id: 3, name: "희망의 발자국", location: "부산시 해운대구", dogCount: 35 }, ].map((org) => ( ))}

{/* Step 2: Donation Type */}

2. 후원 방식 선택

{/* Step 3: One-time Donation Options (Slides down when one-time is selected) */} {selectedDonationType === "once" && (

3. 후원 대상 선택

{/* Dog Selection (Shows when dog-specific donation is selected) */} {donationTarget === "dog" && selectedOrganization && (

후원할 강아지를 선택해주세요

{[ { id: 1, name: "초코", gender: "남아", age: "3살", image: "/placeholder.svg?height=120&width=120" }, { id: 2, name: "몽이", gender: "여아", age: "2살", image: "/placeholder.svg?height=120&width=120" }, { id: 3, name: "해피", gender: "남아", age: "1살", image: "/placeholder.svg?height=120&width=120" }, { id: 4, name: "루시", gender: "여아", age: "4살", image: "/placeholder.svg?height=120&width=120" }, ].map((dog) => (

setSelectedDog(dog.id)} >

{dog.name}

{dog.gender} / {dog.age}

{selectedDog === dog.id && (

)}

))}

)} {/* Comment Section */}

응원 메시지 (선택사항)

)} {/* Step 4: Account Selection and Payment */}

{selectedDonationType === "monthly" ? "3" : "4"}. 출금 계좌

{/* Source Account Selection */}

{showAccountSelector && (

{USER_ACCOUNTS.map((account) => ( ))}

)}

{/* Destination Account Information */}

{selectedDonationType === "monthly" ? "4" : "5"}. 입금 계좌

{selectedOrganization ? (

{selectedOrganization === 1 ? "행복은행" : selectedOrganization === 2 ? "사랑은행" : "희망은행"}

{selectedOrganization === 1 ? "123-456-789012" : selectedOrganization === 2 ? "234-567-890123" : "345-678-901234"}

) : (

단체를 선택하면 계좌 정보가 표시됩니다

)}

{/* Amount Selection */}

{selectedDonationType === "monthly" ? "5" : "6"}. 후원 금액

{[5000, 10000, 30000, 50000, 100000].map((value) => ( ))}

setAmount(Number(e.target.value))} className="w-full p-3 border rounded-lg text-right pr-12" placeholder="금액 입력" /> 원

{/* Total Amount & Submit */}

총 결제금액

(기부금 {amount.toLocaleString()}원 🐾)

{calculateTotal().toLocaleString()}원

{selectedDonationType === "monthly" ? "첫 결제 후 매월 같은 날짜에 자동으로 결제됩니다." : ""}

{/* Add padding at the bottom for better spacing */}

) }

About

About