diff --git a/ssh/src/components/Layout/Header/index.tsx b/ssh/src/components/Layout/Header/index.tsx index 35fcf8f..ba6e807 100644 --- a/ssh/src/components/Layout/Header/index.tsx +++ b/ssh/src/components/Layout/Header/index.tsx @@ -1,78 +1,76 @@ -import { useLocation, useNavigate } from "react-router-dom"; -import { Menubar, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar"; -import { Button } from "@/components/ui/button"; -import { ROUTING_PATH } from "@/routes/path.constants"; -import { MessageSquare, CircleUserRound } from "lucide-react"; +import { Link, useLocation } from 'react-router-dom'; +import { Menubar, MenubarMenu, MenubarTrigger } from '@/components/ui/menubar'; +import { Button } from '@/components/ui/button'; +import { ROUTING_PATH } from '@/routes/path.constants'; +import { MessageSquare, CircleUserRound } from 'lucide-react'; + +const toAbs = (seg: string) => (!seg ? '/' : seg.startsWith('/') ? seg : `/${seg}`); export default function Header() { const { pathname } = useLocation(); - const navigate = useNavigate(); const NAV = [ - { label: "홈페이지", seg: ROUTING_PATH.home }, - { label: "채팅하기", seg: ROUTING_PATH.chatbot }, - { label: "보이스피싱 진단", seg: ROUTING_PATH.voicephishing }, - { label: "주변 ATM 찾기", seg: ROUTING_PATH.atmmap }, - { label: "기부", seg: ROUTING_PATH.donation }, + { label: '홈페이지', seg: ROUTING_PATH.home }, + { label: '채팅하기', seg: ROUTING_PATH.chatbot }, + { label: '보이스피싱 진단', seg: ROUTING_PATH.voicephishing }, + { label: '주변 ATM 찾기', seg: ROUTING_PATH.atmmap }, + { label: '기부', seg: ROUTING_PATH.donation }, ] as const; - const toAbs = (seg: string) => (seg === "" ? "/" : `/${seg}`); - - const handleNav = (seg: string) => { - navigate(toAbs(seg)); - }; - const isActive = (seg: string) => { - if (seg === "") return pathname === "/"; - return pathname.startsWith(`/${seg}`); + const abs = toAbs(seg); + return abs === '/' ? pathname === '/' : pathname.startsWith(abs); }; - const loginActive = isActive(ROUTING_PATH.setting); - return (
- {NAV.map((item) => ( - - handleNav(item.seg)} - aria-current={isActive(item.seg) ? "page" : undefined} - className={[ - "cursor-pointer rounded-full px-4 py-2 text-sm font-medium transition-colors", - isActive(item.seg) - ? "bg-primary/10 text-primary" - : "text-muted-foreground hover:bg-muted", - ].join(" ")} - > - {item.label} - - - ))} + {NAV.map((item) => { + const href = toAbs(item.seg); + return ( + + + {item.label} + + + ); + })}
-
diff --git a/ssh/src/pages/Donation/components/fourthsection/index.tsx b/ssh/src/pages/Donation/components/fourthsection/index.tsx new file mode 100644 index 0000000..81c68c0 --- /dev/null +++ b/ssh/src/pages/Donation/components/fourthsection/index.tsx @@ -0,0 +1,109 @@ +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; +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; + icon: React.ComponentType>; +}; + +const STEPS: Step[] = [ + { + title: '본인 확인 및 동의', + desc: '전용 로그인으로 본인 확인 후, 사전기부 안내에 동의합니다.', + icon: ShieldCheck, + }, + { + title: '금액/비율 지정', + desc: '정액 또는 비율로 기부 범위를 설정합니다. 생전 언제든 수정·철회 가능합니다.', + icon: HandCoins, + }, + { + title: '은행 기부 기능 연동', + desc: 'KB국민은행 ‘공식 기부 기능’과 연동되어 안전하게 등록됩니다.', + icon: FileSignature, + }, + { + title: '기부처 선택', + desc: '병원·학교·비영리단체 등 은행에서 제공하는 원하는 곳을 고릅니다.', + icon: Building2, + }, + { + title: '등록 완료 · 사후 집행', + desc: '사후에 지정한 내용대로 기부가 집행되고, 영수증이 발급됩니다.', + icon: ReceiptText, + }, +]; + +export default function Steps() { + return ( +
+
+
+

+ 기부 신청 방법 (단계별 안내) +

+ +
    + {STEPS.map((s, idx) => { + const Icon = s.icon; + return ( +
  1. +
    + + {idx + 1} + + +
    +
    + +
    +

    {s.title}

    +

    {s.desc}

    +
    +
    +
    +
    2. + ); + })} +
+
+ +
+ + + 신청하기 + + +

+ 등록 내용은 생전 언제든 수정·철회할 수 있습니다. +

+

+ 기부금 영수증 발급 및 연말정산 연계가 가능합니다. +

+

+ 개인·계좌 정보는 은행 시스템에서 암호화되어 + 처리됩니다. +

+ +
+ + +
+ + +
+
+
+ ); +} diff --git a/ssh/src/pages/Donation/components/herosection/index.tsx b/ssh/src/pages/Donation/components/herosection/index.tsx new file mode 100644 index 0000000..94020e1 --- /dev/null +++ b/ssh/src/pages/Donation/components/herosection/index.tsx @@ -0,0 +1,16 @@ +export default function Hero() { + return ( +
+
+

+ 당신의 뜻, 사회에 이어집니다 +

+

+ 평생 모은 재산을 원하는 곳에 기부하세요. +
+ 복잡한 절차 없이, 사전에 간단히 등록하면 사후에도 안전하게 뜻이 전달됩니다. +

+
+
+ ); +} diff --git a/ssh/src/pages/Donation/components/secondsection/index.tsx b/ssh/src/pages/Donation/components/secondsection/index.tsx new file mode 100644 index 0000000..e63ad3d --- /dev/null +++ b/ssh/src/pages/Donation/components/secondsection/index.tsx @@ -0,0 +1,29 @@ +export default function Meaning() { + return ( +
+
+ {/* 이미지 교체 예정 */} +
+
+

+ 당신의 재산, 뜻깊은 나눔으로 이어집니다 +

+
+

+ 삶은 언제 끝날지 알 수 없지만, 그 뜻은 사라지지 않아야 합니다. 평생 모은 재산이 내 + 의도와 다르게 흘러가는 대신, 사회에 의미 있게 쓰이길 바라는 마음을 지켜드립니다. +

+

+ 이 서비스는 장기기증처럼{' '} + 생전에 미리 기부 의사를 등록하면, 사후에도{' '} + 안전하고 투명하게 나눔이 이어지도록 돕습니다. +

+

+ 모든 기부 절차는 은행에서 제공하는 공식 기부 기능과 연동되어 처리됩니다. +

+
+
+
+
+ ); +} diff --git a/ssh/src/pages/Donation/components/thirdsection/index.tsx b/ssh/src/pages/Donation/components/thirdsection/index.tsx new file mode 100644 index 0000000..8a4c02f --- /dev/null +++ b/ssh/src/pages/Donation/components/thirdsection/index.tsx @@ -0,0 +1,39 @@ +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; + +export default function BankServices() { + return ( +
+
+

은행에서 제공하는 기부 서비스

+ +
+ + + 고향사랑기부 · KB 국민은행 + + +

+ 고향과 지역사회를 응원하는 나눔. 거주지가 아닌 지역에도 기부할 수 있는 제도입니다. +

+

+ 세액공제 혜택과 답례품을 통해 기부의 기쁨을 두 배로 느껴보세요. +

+ + + + + + 학교사랑기부 · KB 국민은행 + + +

+ 작은 참여로 이어지는 큰 나눔. 걸음수·좋아요 미션으로 모은 성과가 학생들을 위한 + 장학금으로 전달됩니다. +

+ + +
+
+
+ ); +} diff --git a/ssh/src/pages/Donation/index.tsx b/ssh/src/pages/Donation/index.tsx index 97a8cbf..99a3d0d 100644 --- a/ssh/src/pages/Donation/index.tsx +++ b/ssh/src/pages/Donation/index.tsx @@ -1,5 +1,16 @@ +import Steps from './components/fourthsection'; +import Hero from './components/herosection'; +import Meaning from './components/secondsection'; +import BankServices from './components/thirdsection'; + const DonationPage = () => { - return

재산 기부 페이지

; + return ( +
+ + + + +
+ ); }; - export default DonationPage;