diff --git a/ssh/src/assets/donationImage.png b/ssh/src/assets/donationImage.png new file mode 100644 index 0000000..fb854fd Binary files /dev/null and b/ssh/src/assets/donationImage.png differ diff --git a/ssh/src/index.css b/ssh/src/index.css index 752d697..199be88 100644 --- a/ssh/src/index.css +++ b/ssh/src/index.css @@ -33,30 +33,6 @@ body { min-height: 100vh; } -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - @media (prefers-color-scheme: light) { :root { color: #213547; @@ -65,9 +41,6 @@ button:focus-visible { a:hover { color: #747bff; } - button { - background-color: #f9f9f9; - } } @layer base { diff --git a/ssh/src/pages/Donation/DonationPage.tsx b/ssh/src/pages/Donation/DonationPage.tsx new file mode 100644 index 0000000..50e010e --- /dev/null +++ b/ssh/src/pages/Donation/DonationPage.tsx @@ -0,0 +1,16 @@ +import Steps from './sections/Features/Steps'; +import Hero from './sections/Hero/Hero'; +import Meaning from './sections/Features/Meaning'; +import BankServices from './sections/Features/BankServices'; + +const DonationPage = () => { + return ( +
+ + + + +
+ ); +}; +export default DonationPage; diff --git a/ssh/src/pages/Donation/components/thirdsection/index.tsx b/ssh/src/pages/Donation/components/thirdsection/index.tsx deleted file mode 100644 index 8a4c02f..0000000 --- a/ssh/src/pages/Donation/components/thirdsection/index.tsx +++ /dev/null @@ -1,39 +0,0 @@ -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 deleted file mode 100644 index 99a3d0d..0000000 --- a/ssh/src/pages/Donation/index.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import Steps from './components/fourthsection'; -import Hero from './components/herosection'; -import Meaning from './components/secondsection'; -import BankServices from './components/thirdsection'; - -const DonationPage = () => { - return ( -
- - - - -
- ); -}; -export default DonationPage; diff --git a/ssh/src/pages/Donation/sections/Features/BankServices/index.tsx b/ssh/src/pages/Donation/sections/Features/BankServices/index.tsx new file mode 100644 index 0000000..332acd3 --- /dev/null +++ b/ssh/src/pages/Donation/sections/Features/BankServices/index.tsx @@ -0,0 +1,43 @@ +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; + +export default function BankServices() { + return ( +
+
+

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

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

+ 고향과 지역사회를 응원하는 나눔.
+ 거주지가 아닌 지역에도 기부할 수 있는 제도입니다. +
+ 세액공제 혜택과 답례품을 통해 기부의 기쁨을 두 배로 느껴보세요. +

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

+ 작은 참여로 이어지는 큰 나눔. +

걸음수·좋아요 미션으로 모은 성과가 학생들을 위한 장학금으로 전달됩니다. +

+ + +
+
+
+ ); +} diff --git a/ssh/src/pages/Donation/components/secondsection/index.tsx b/ssh/src/pages/Donation/sections/Features/Meaning/index.tsx similarity index 78% rename from ssh/src/pages/Donation/components/secondsection/index.tsx rename to ssh/src/pages/Donation/sections/Features/Meaning/index.tsx index e63ad3d..c4285b3 100644 --- a/ssh/src/pages/Donation/components/secondsection/index.tsx +++ b/ssh/src/pages/Donation/sections/Features/Meaning/index.tsx @@ -1,14 +1,15 @@ +import donationImage from '@/assets/donationImage.png'; + export default function Meaning() { return (
- {/* 이미지 교체 예정 */} -
+ 기부 의미 이미지
-

+

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

-
+

삶은 언제 끝날지 알 수 없지만, 그 뜻은 사라지지 않아야 합니다. 평생 모은 재산이 내 의도와 다르게 흘러가는 대신, 사회에 의미 있게 쓰이길 바라는 마음을 지켜드립니다. diff --git a/ssh/src/pages/Donation/components/fourthsection/index.tsx b/ssh/src/pages/Donation/sections/Features/Steps/index.tsx similarity index 69% rename from ssh/src/pages/Donation/components/fourthsection/index.tsx rename to ssh/src/pages/Donation/sections/Features/Steps/index.tsx index 81c68c0..6a448b9 100644 --- a/ssh/src/pages/Donation/components/fourthsection/index.tsx +++ b/ssh/src/pages/Donation/sections/Features/Steps/index.tsx @@ -3,7 +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'; @@ -44,28 +43,30 @@ const STEPS: Step[] = [ export default function Steps() { return (

-
+
-

+

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

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

      {s.title}

      -

      {s.desc}

      +

      {s.title}

      +

      + {s.desc} +

      @@ -76,11 +77,11 @@ export default function Steps() {
      - - - 신청하기 + + + 신청하기 - +

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

      @@ -92,11 +93,11 @@ export default function Steps() { 처리됩니다.

      -
      - -
      diff --git a/ssh/src/pages/Donation/components/herosection/index.tsx b/ssh/src/pages/Donation/sections/Hero/Hero.tsx similarity index 67% rename from ssh/src/pages/Donation/components/herosection/index.tsx rename to ssh/src/pages/Donation/sections/Hero/Hero.tsx index 94020e1..cfff7d9 100644 --- a/ssh/src/pages/Donation/components/herosection/index.tsx +++ b/ssh/src/pages/Donation/sections/Hero/Hero.tsx @@ -1,11 +1,12 @@ export default function Hero() { return ( -
      -
      -

      +
      +
      +

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

      -

      + +

      평생 모은 재산을 원하는 곳에 기부하세요.
      복잡한 절차 없이, 사전에 간단히 등록하면 사후에도 안전하게 뜻이 전달됩니다. diff --git a/ssh/src/routes/routing.tsx b/ssh/src/routes/routing.tsx index b1399bf..703fbe5 100644 --- a/ssh/src/routes/routing.tsx +++ b/ssh/src/routes/routing.tsx @@ -7,7 +7,7 @@ import AtmMapPage from '@/pages/AtmMap'; import VoicephishingPage from '@/pages/Voicephishing'; import ChatbotPage from '@/pages/Chatbot'; import SettingPage from '@/pages/Setting'; -import DonationPage from '@/pages/Donation'; +import DonationPage from '@/pages/Donation/DonationPage'; import RootLayout from '@/components/Layout/RootLayout'; export const routers = createBrowserRouter([ diff --git a/ssh/tailwind.config.js b/ssh/tailwind.config.js index e36377e..3e265a8 100644 --- a/ssh/tailwind.config.js +++ b/ssh/tailwind.config.js @@ -1,80 +1,92 @@ /** @type {import('tailwindcss').Config} */ import animate from 'tailwindcss-animate'; + export default { darkMode: ['class'], content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], theme: { - extend: { - borderRadius: { - lg: 'var(--radius)', - md: 'calc(var(--radius) - 2px)', - sm: 'calc(var(--radius) - 4px)' - }, - colors: { - background: 'hsl(var(--background))', - foreground: 'hsl(var(--foreground))', - card: { - DEFAULT: 'hsl(var(--card))', - foreground: 'hsl(var(--card-foreground))' - }, - popover: { - DEFAULT: 'hsl(var(--popover))', - foreground: 'hsl(var(--popover-foreground))' - }, - primary: { - DEFAULT: 'hsl(var(--primary))', - foreground: 'hsl(var(--primary-foreground))' - }, - secondary: { - DEFAULT: 'hsl(var(--secondary))', - foreground: 'hsl(var(--secondary-foreground))' - }, - muted: { - DEFAULT: 'hsl(var(--muted))', - foreground: 'hsl(var(--muted-foreground))' - }, - accent: { - DEFAULT: 'hsl(var(--accent))', - foreground: 'hsl(var(--accent-foreground))' - }, - destructive: { - DEFAULT: 'hsl(var(--destructive))', - foreground: 'hsl(var(--destructive-foreground))' - }, - border: 'hsl(var(--border))', - input: 'hsl(var(--input))', - ring: 'hsl(var(--ring))', - chart: { - '1': 'hsl(var(--chart-1))', - '2': 'hsl(var(--chart-2))', - '3': 'hsl(var(--chart-3))', - '4': 'hsl(var(--chart-4))', - '5': 'hsl(var(--chart-5))' - }, - brand: { - DEFAULT: 'hsl(var(--brand))', - foreground: 'hsl(var(--brand-foreground))' - }, - success: { - DEFAULT: 'hsl(var(--success))', - foreground: 'hsl(var(--success-foreground))' - }, - warning: { - DEFAULT: 'hsl(var(--warning))', - foreground: 'hsl(var(--warning-foreground))' - }, - sidebar: { - DEFAULT: 'hsl(var(--sidebar-background))', - foreground: 'hsl(var(--sidebar-foreground))', - primary: 'hsl(var(--sidebar-primary))', - 'primary-foreground': 'hsl(var(--sidebar-primary-foreground))', - accent: 'hsl(var(--sidebar-accent))', - 'accent-foreground': 'hsl(var(--sidebar-accent-foreground))', - border: 'hsl(var(--sidebar-border))', - ring: 'hsl(var(--sidebar-ring))' - } - } - } + extend: { + borderRadius: { + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)', + sm: 'calc(var(--radius) - 4px)', + }, + fontSize: { + display: ['3rem', { lineHeight: '1.2', fontWeight: '700' }], + heading: ['2rem', { lineHeight: '1.3', fontWeight: '600' }], + }, + transitionTimingFunction: { + 'in-expo': 'cubic-bezier(0.95, 0.05, 0.795, 0.035)', + 'out-expo': 'cubic-bezier(0.19, 1, 0.22, 1)', + }, + zIndex: { + max: '9999', + }, + colors: { + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', + card: { + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))', + }, + popover: { + DEFAULT: 'hsl(var(--popover))', + foreground: 'hsl(var(--popover-foreground))', + }, + primary: { + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))', + }, + secondary: { + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))', + }, + muted: { + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))', + }, + accent: { + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))', + }, + destructive: { + DEFAULT: 'hsl(var(--destructive))', + foreground: 'hsl(var(--destructive-foreground))', + }, + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + chart: { + 1: 'hsl(var(--chart-1))', + 2: 'hsl(var(--chart-2))', + 3: 'hsl(var(--chart-3))', + 4: 'hsl(var(--chart-4))', + 5: 'hsl(var(--chart-5))', + }, + brand: { + DEFAULT: 'hsl(var(--brand))', + foreground: 'hsl(var(--brand-foreground))', + }, + success: { + DEFAULT: 'hsl(var(--success))', + foreground: 'hsl(var(--success-foreground))', + }, + warning: { + DEFAULT: 'hsl(var(--warning))', + foreground: 'hsl(var(--warning-foreground))', + }, + sidebar: { + DEFAULT: 'hsl(var(--sidebar-background))', + foreground: 'hsl(var(--sidebar-foreground))', + primary: 'hsl(var(--sidebar-primary))', + 'primary-foreground': 'hsl(var(--sidebar-primary-foreground))', + accent: 'hsl(var(--sidebar-accent))', + 'accent-foreground': 'hsl(var(--sidebar-accent-foreground))', + border: 'hsl(var(--sidebar-border))', + ring: 'hsl(var(--sidebar-ring))', + }, + }, + }, }, plugins: [animate], };