+
+ );
+}
diff --git a/ssh/src/pages/Donation/sections/Features/Register/RegisterPage.tsx b/ssh/src/pages/Donation/sections/Features/Register/RegisterPage.tsx
new file mode 100644
index 0000000..2c4b0c3
--- /dev/null
+++ b/ssh/src/pages/Donation/sections/Features/Register/RegisterPage.tsx
@@ -0,0 +1,608 @@
+import { useMemo, useState, useRef, useEffect } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Switch } from '@/components/ui/switch';
+import { ShieldCheck, HandCoins, FileSignature, Building2, ReceiptText } from 'lucide-react';
+
+type AmountType = 'fixed' | 'ratio';
+
+export default function RegisterPage() {
+ const navigate = useNavigate();
+
+ const [agreed, setAgreed] = useState(false);
+ const [amountType, setAmountType] = useState은행 연동 안내
+여기에 은행 연동 설명을 넣으세요.
+
+ {n}
+
+ );
+
+ const StepHeader = ({
+ n,
+ icon: Icon,
+ title,
+ desc,
+ active,
+ }: {
+ n: number;
+ icon: any;
+ title: string;
+ desc: string;
+ active: boolean;
+ }) => (
+
+
+ );
+
+ const PRESET_AMOUNTS = [
+ { label: '만원', value: 10_000 },
+ { label: '십만원', value: 100_000 },
+ { label: '백만원', value: 1_000_000 },
+ { label: '천만원', value: 10_000_000 },
+ { label: '억원', value: 100_000_000 },
+ ];
+
+ const MAX_AMOUNT = 1_000_000_000_000;
+ const clamp = (n: number) => Math.max(0, Math.min(n, MAX_AMOUNT));
+ const toNum = (s: string) => Number(s || '0');
+ const fmt = (v: number) => v.toLocaleString('ko-KR') + '원';
+
+ function SignaturePad({
+ height = 200,
+ lineWidth = 3,
+ onSave,
+ }: {
+ height?: number;
+ lineWidth?: number;
+ onSave: (dataUrl: string) => void;
+ }) {
+ const containerRef = useRef
+
+
+
+ {title}
+{desc}
+
+
+ );
+ }
+
+ return (
+
+ 서명을 입력해 주세요.
+
+
+
+
+
+
+
+
+
+ 팁: 마우스/트랙패드/터치 모두 지원합니다.
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* STEP 2 */}
+ {step === 2 && (
+
+
+
+
+
+ setAmountType(v as AmountType)}
+ className="grid gap-4 md:grid-cols-2"
+ >
+
+
+
+
+ {amountType === 'fixed' ? (
+
+
+ )}
+
+ {/* STEP 3 */}
+ {step === 3 && (
+
+
+
+
+
+
+ )}
+
+ {/* STEP 4 */}
+ {step === 4 && (
+
+
+
+
+
+
+
+
+ )}
+
+ {/* STEP 5 */}
+ {step === 5 && (
+
+
+
+
+
+
+ )}
+
+
+ );
+}
diff --git a/ssh/src/pages/Donation/sections/Features/Steps/index.tsx b/ssh/src/pages/Donation/sections/Features/Steps/index.tsx
index 6a448b9..41e8701 100644
--- a/ssh/src/pages/Donation/sections/Features/Steps/index.tsx
+++ b/ssh/src/pages/Donation/sections/Features/Steps/index.tsx
@@ -3,9 +3,6 @@ import { Button } from '@/components/ui/button';
import { ShieldCheck, Building2, HandCoins, FileSignature, ReceiptText } from 'lucide-react';
import { Link } from 'react-router-dom';
-const REGISTER_PATH = '/donation/register';
-const BANK_LINK_PATH = '/donation/banks';
-
type Step = {
title: string;
desc: string;
@@ -95,10 +92,11 @@ export default function Steps() {
+
+
+ 기부 의사 등록
+ + ← 기부 소개로 돌아가기 + +
+ {[1, 2, 3, 4, 5].map((n) => (
+
+
+ {/* STEP 1 */}
+ {step === 1 && (
+
+
+
+ ))}
+ + 약관과 처리방침은{' '} + + 은행 연동 안내 + + 에서 확인할 수 있습니다. +
+
+
+
+
+ ) : (
+
+ {PRESET_AMOUNTS.map((p) => (
+
+ ))}
+
+
+ {
+ const raw = e.target.value.replace(/[^0-9]/g, '');
+ setFixedAmount(String(clamp(Number(raw))));
+ }}
+ />
+
+
+
+
+ 팁: 버튼을 누를 때마다 금액이 누적됩니다.
+
+
+
+ + 현재 금액: {fmt(toNum(fixedAmount))} +
+
+
+ setRatio(e.target.value.replace(/[^0-9]/g, ''))}
+ />
+
+ )}
+ 1–100 사이의 정수를 권장합니다.
+
+
+ + 실제 환경에서는 KB국민은행의 공식 연동 절차(로그인/전자서명)를 진행합니다. +
+ +
+
+ {bankLinked && ✔ 연결되었습니다.}
+
+
+
+
+
+ {esignOpen && (
+
+ {
+ setSignatureDataUrl(dataUrl);
+ }}
+ />
+
+ )}
+
+
+
+ {signatureDataUrl && (
+ <>
+ 
+
+
+ )}
+
+ + 자세한 절차는{' '} + + 은행 연동 안내 + + 를 참고하세요. +
+
+
+ setMemo(e.target.value)}
+ maxLength={120}
+ placeholder="예: ○○대학교 장학금, ○○병원 소아암센터 등"
+ className="
+ h-20 px-6
+ text-3xl md:text-4xl font-semibold tracking-tight leading-tight
+ placeholder:text-3xl md:placeholder:text-4xl placeholder:font-semibold placeholder:tracking-tight placeholder:leading-tight
+ "
+ />
+
+
+
+ 요약
+ -
+
- 동의 여부: {agreed ? '동의함' : '미동의'} +
- + 지정 방식:{' '} + {amountType === 'fixed' + ? `정액 ${Number(fixedAmount || 0).toLocaleString()}원` + : `비율 ${ratio || 0}%`} + +
- + 은행 연동: {bankLinked ? '완료' : '미완료'} ({sandboxMode ? '샌드박스' : '실거래'} + ) + +
- 기부처: {destinations.length ? destinations.join(', ') : '선택 없음'} +
- 메모: {memo || '미등록'} +
+ 제출 후에도 생전에는 언제든 수정·철회가 + 가능합니다. +
+
+
+
+
+ {step < maxStep ? (
+
+ ) : (
+
+ )}
+
+
+
diff --git a/ssh/src/routes/routing.tsx b/ssh/src/routes/routing.tsx
index 703fbe5..6089236 100644
--- a/ssh/src/routes/routing.tsx
+++ b/ssh/src/routes/routing.tsx
@@ -10,39 +10,23 @@ import SettingPage from '@/pages/Setting';
import DonationPage from '@/pages/Donation/DonationPage';
import RootLayout from '@/components/Layout/RootLayout';
+import RegisterPage from '@/pages/Donation/sections/Features/Register/RegisterPage';
+import BankLinkPage from '@/pages/Donation/sections/Features/Register/BankLinkPage';
+
export const routers = createBrowserRouter([
{
path: '/',
element: