From a65f0dd5083e7e69fc700d2c8b772be21238792c Mon Sep 17 00:00:00 2001 From: smilevictory Date: Sat, 6 Sep 2025 18:46:10 +0900 Subject: [PATCH 1/2] =?UTF-8?q?bug:=20=EB=8B=A4=EB=A5=B8=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=ED=99=88=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EC=9D=B4=EB=8F=99=20=EB=B6=88?= =?UTF-8?q?=EA=B0=80=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssh/src/components/Layout/Header/index.tsx | 104 ++++++++++----------- 1 file changed, 51 insertions(+), 53 deletions(-) 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} + + + ); + })}
-
From cde49b979169c90466f15a953ad2830d86eaa215 Mon Sep 17 00:00:00 2001 From: smilevictory Date: Sun, 7 Sep 2025 00:55:01 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EC=9C=A0=EC=82=B0=20=EA=B8=B0?= =?UTF-8?q?=EB=B6=80=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/fourthsection/index.tsx | 109 ++++++++++++++++++ .../Donation/components/herosection/index.tsx | 16 +++ .../components/secondsection/index.tsx | 29 +++++ .../components/thirdsection/index.tsx | 39 +++++++ ssh/src/pages/Donation/index.tsx | 15 ++- 5 files changed, 206 insertions(+), 2 deletions(-) create mode 100644 ssh/src/pages/Donation/components/fourthsection/index.tsx create mode 100644 ssh/src/pages/Donation/components/herosection/index.tsx create mode 100644 ssh/src/pages/Donation/components/secondsection/index.tsx create mode 100644 ssh/src/pages/Donation/components/thirdsection/index.tsx 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;