feat: 토정비결 및 PDF 저장 기능 추가

- 토정비결 페이지 구현 (연간/월별 운세) - 분야별 운세 (재물, 건강, 관운, 애정) - PDF 저장 기능 구현 (jsPDF + html2canvas) - 모든 결과 페이지에 PDF 다운로드 기능 추가 - PDFButton 재사용 가능한 컴포넌트 생성 - 홈페이지에 토정비결 링크 추가 - 페이지 간 네비게이션 링크 업데이트 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-02-11 23:44:55 +09:00
parent 08d6f71fd1
commit f85e857bea
11 changed files with 950 additions and 17 deletions
--- a/app/compatibility/result/page.tsx
+++ b/app/compatibility/result/page.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { calculateSaju, FIVE_ELEMENTS } from '@/lib/saju-calculator';
+import PDFButton from '../../components/PDFButton';

 interface PageProps {
  searchParams: Promise<{
@@ -178,7 +179,7 @@ export default async function CompatibilityResultPage({ searchParams }: PageProp
      </nav>

      {/* Result Content */}
-      <div className="max-w-6xl mx-auto px-4 py-12">
+      <div id="pdf-content" className="max-w-6xl mx-auto px-4 py-12">
        {/* Header */}
        <div className="text-center mb-12">
          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
@@ -367,11 +368,12 @@ export default async function CompatibilityResultPage({ searchParams }: PageProp
            <p className="text-gray-600 text-sm">내 사주 확인하기</p>
          </Link>

-          <button className="bg-gradient-to-r from-pink-600 to-purple-600 text-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group">
-            <div className="text-4xl mb-3">📥</div>
-            <h3 className="text-xl font-bold mb-2">PDF 저장</h3>
-            <p className="text-sm opacity-90">궁합 결과 저장하기</p>
-          </button>
+          <PDFButton
+            elementId="pdf-content"
+            filename={`궁합_${year1}${month1}${day1}_${year2}${month2}${day2}.pdf`}
+            buttonText="궁합 PDF 저장"
+            className="bg-gradient-to-r from-pink-600 to-purple-600 text-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group w-full disabled:opacity-50 disabled:cursor-not-allowed"
+          />
        </div>
      </div>

--- a/app/components/PDFButton.tsx
+++ b/app/components/PDFButton.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { useState } from 'react';
+import { downloadPDF } from '@/lib/pdf-utils';
+
+interface PDFButtonProps {
+  elementId: string;
+  filename: string;
+  buttonText?: string;
+  className?: string;
+}
+
+export default function PDFButton({
+  elementId,
+  filename,
+  buttonText = 'PDF 저장',
+  className = ''
+}: PDFButtonProps) {
+  const [isGenerating, setIsGenerating] = useState(false);
+
+  const handleDownload = async () => {
+    setIsGenerating(true);
+    try {
+      await downloadPDF(elementId, filename);
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  return (
+    <button
+      onClick={handleDownload}
+      disabled={isGenerating}
+      className={className || "bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group w-full disabled:opacity-50 disabled:cursor-not-allowed"}
+    >
+      <div className="text-4xl mb-3">
+        {isGenerating ? '⏳' : '📥'}
+      </div>
+      <h3 className="text-xl font-bold mb-2">
+        {isGenerating ? 'PDF 생성 중...' : buttonText}
+      </h3>
+      <p className="text-sm opacity-90">
+        {isGenerating ? '잠시만 기다려주세요' : '결과를 PDF로 저장하기'}
+      </p>
+    </button>
+  );
+}
--- a/app/components/TojeongForm.tsx
+++ b/app/components/TojeongForm.tsx
@@ -0,0 +1,139 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+export default function TojeongForm() {
+  const router = useRouter();
+  const [year, setYear] = useState('');
+  const [month, setMonth] = useState('');
+  const [day, setDay] = useState('');
+  const [gender, setGender] = useState<'male' | 'female'>('male');
+  const [targetYear, setTargetYear] = useState(new Date().getFullYear().toString());
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!year || !month || !day) {
+      alert('생년월일을 모두 입력해주세요.');
+      return;
+    }
+
+    // URL 파라미터로 전달
+    const params = new URLSearchParams({
+      year,
+      month,
+      day,
+      gender,
+      targetYear
+    });
+
+    router.push(`/tojeong/result?${params.toString()}`);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="bg-white rounded-3xl shadow-2xl p-8 md:p-12">
+      <h2 className="text-2xl font-bold text-gray-900 mb-8 text-center">생년월일 입력</h2>
+
+      <div className="space-y-6">
+        {/* 생년월일 */}
+        <div>
+          <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
+            생년월일
+          </label>
+          <div className="grid grid-cols-3 gap-3">
+            <input
+              type="number"
+              placeholder="년 (예: 1990)"
+              className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-amber-500 focus:outline-none transition"
+              min="1900"
+              max="2100"
+              value={year}
+              onChange={(e) => setYear(e.target.value)}
+              required
+            />
+            <input
+              type="number"
+              placeholder="월 (1-12)"
+              className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-amber-500 focus:outline-none transition"
+              min="1"
+              max="12"
+              value={month}
+              onChange={(e) => setMonth(e.target.value)}
+              required
+            />
+            <input
+              type="number"
+              placeholder="일 (1-31)"
+              className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-amber-500 focus:outline-none transition"
+              min="1"
+              max="31"
+              value={day}
+              onChange={(e) => setDay(e.target.value)}
+              required
+            />
+          </div>
+        </div>
+
+        {/* 성별 선택 */}
+        <div>
+          <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
+            성별
+          </label>
+          <div className="grid grid-cols-2 gap-3">
+            <button
+              type="button"
+              onClick={() => setGender('male')}
+              className={`px-6 py-3 rounded-xl font-semibold transition ${
+                gender === 'male'
+                  ? 'bg-amber-600 text-white'
+                  : 'bg-white border-2 border-gray-200 text-gray-700 hover:border-amber-500 hover:text-amber-600'
+              }`}
+            >
+              남성
+            </button>
+            <button
+              type="button"
+              onClick={() => setGender('female')}
+              className={`px-6 py-3 rounded-xl font-semibold transition ${
+                gender === 'female'
+                  ? 'bg-amber-600 text-white'
+                  : 'bg-white border-2 border-gray-200 text-gray-700 hover:border-amber-500 hover:text-amber-600'
+              }`}
+            >
+              여성
+            </button>
+          </div>
+        </div>
+
+        {/* 확인할 년도 */}
+        <div>
+          <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
+            확인할 년도
+          </label>
+          <select
+            className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-amber-500 focus:outline-none transition"
+            value={targetYear}
+            onChange={(e) => setTargetYear(e.target.value)}
+          >
+            <option value={new Date().getFullYear() - 1}>{new Date().getFullYear() - 1}년</option>
+            <option value={new Date().getFullYear()}>{new Date().getFullYear()}년 (올해)</option>
+            <option value={new Date().getFullYear() + 1}>{new Date().getFullYear() + 1}년 (내년)</option>
+          </select>
+        </div>
+      </div>
+
+      {/* 제출 버튼 */}
+      <button
+        type="submit"
+        className="w-full mt-8 bg-gradient-to-r from-amber-600 to-orange-600 text-white py-4 rounded-xl text-lg font-bold hover:from-amber-700 hover:to-orange-700 transition shadow-lg hover:shadow-xl"
+      >
+        🎋 토정비결 확인하기 →
+      </button>
+
+      <p className="text-sm text-gray-500 text-center mt-4">
+        * 토정비결은 음력 생일을 기준으로 합니다.
+      </p>
+    </form>
+  );
+}
--- a/app/fortune/page.tsx
+++ b/app/fortune/page.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { calculateSaju } from '@/lib/saju-calculator';
+import PDFButton from '../components/PDFButton';

 interface PageProps {
  searchParams: Promise<{
@@ -118,7 +119,7 @@ export default async function FortunePage({ searchParams }: PageProps) {
      </nav>

      {/* Content */}
-      <div className="max-w-6xl mx-auto px-4 py-12">
+      <div id="pdf-content" className="max-w-6xl mx-auto px-4 py-12">
        {/* Header */}
        <div className="text-center mb-12">
          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
@@ -218,7 +219,7 @@ export default async function FortunePage({ searchParams }: PageProps) {
        </div>

        {/* 다른 메뉴 */}
-        <div className="grid md:grid-cols-3 gap-6">
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          <Link
            href={`/result?${new URLSearchParams(params as any).toString()}`}
            className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group"
@@ -229,7 +230,7 @@ export default async function FortunePage({ searchParams }: PageProps) {
          </Link>

          <Link
-            href="/"
+            href="/compatibility"
            className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group"
          >
            <div className="text-4xl mb-3">💕</div>
@@ -238,13 +239,19 @@ export default async function FortunePage({ searchParams }: PageProps) {
          </Link>

          <Link
-            href="/"
+            href="/tojeong"
            className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group"
          >
            <div className="text-4xl mb-3">🎋</div>
            <h3 className="text-xl font-bold text-gray-900 mb-2">토정비결</h3>
            <p className="text-gray-600 text-sm">한 해의 운세 보기</p>
          </Link>
+
+          <PDFButton
+            elementId="pdf-content"
+            filename={`오늘의운세_${todayYear}${todayMonth}${todayDay}.pdf`}
+            buttonText="운세 PDF 저장"
+          />
        </div>
      </div>

--- a/app/page.tsx
+++ b/app/page.tsx
@@ -148,7 +148,7 @@ export default function Home() {
            <p className="text-xl text-gray-600">다양한 사주 정보를 한 번에 확인하세요</p>
          </div>

-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {/* Feature 1 */}
            <div className="text-center p-6 rounded-2xl hover:bg-indigo-50 transition">
              <div className="text-5xl mb-4">📜</div>
@@ -175,6 +175,15 @@ export default function Home() {
                두 사람의 사주를 비교하여 궁합을 확인하세요.
              </p>
            </Link>
+
+            {/* Feature 4 */}
+            <Link href="/tojeong" className="text-center p-6 rounded-2xl hover:bg-amber-50 transition block">
+              <div className="text-5xl mb-4">🎋</div>
+              <h3 className="text-xl font-bold text-gray-900 mb-3">토정비결</h3>
+              <p className="text-gray-600">
+                한 해의 운세를 미리 확인하고 준비하세요.
+              </p>
+            </Link>
          </div>
        </div>
      </section>
--- a/app/result/page.tsx
+++ b/app/result/page.tsx
@@ -1,5 +1,6 @@
 import { calculateSaju } from '@/lib/saju-calculator';
 import Link from 'next/link';
+import PDFButton from '../components/PDFButton';

 interface PageProps {
  searchParams: Promise<{
@@ -43,7 +44,7 @@ export default async function ResultPage({ searchParams }: PageProps) {
      </nav>

      {/* Result Content */}
-      <div className="max-w-6xl mx-auto px-4 py-12">
+      <div id="pdf-content" className="max-w-6xl mx-auto px-4 py-12">
        {/* Header */}
        <div className="text-center mb-12">
          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
@@ -232,11 +233,11 @@ export default async function ResultPage({ searchParams }: PageProps) {
            <p className="text-gray-600 text-sm">두 사람의 궁합 확인</p>
          </Link>

-          <button className="bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group">
-            <div className="text-4xl mb-3">📥</div>
-            <h3 className="text-xl font-bold mb-2">PDF 저장</h3>
-            <p className="text-sm opacity-90">내 사주 저장하기</p>
-          </button>
+          <PDFButton
+            elementId="pdf-content"
+            filename={`사주팔자_${yearNum}${monthNum}${dayNum}.pdf`}
+            buttonText="사주 PDF 저장"
+          />
        </div>
      </div>

--- a/app/tojeong/page.tsx
+++ b/app/tojeong/page.tsx
@@ -0,0 +1,100 @@
+import Link from 'next/link';
+import TojeongForm from '../components/TojeongForm';
+
+export default function TojeongPage() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50">
+      {/* Navigation */}
+      <nav className="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            <Link href="/" className="text-2xl font-bold bg-gradient-to-r from-amber-600 to-orange-600 bg-clip-text text-transparent">
+              🔮 사주보기
+            </Link>
+            <Link
+              href="/"
+              className="text-gray-700 hover:text-amber-600 transition font-medium"
+            >
+              처음으로
+            </Link>
+          </div>
+        </div>
+      </nav>
+
+      {/* Hero Section */}
+      <section className="pt-20 pb-32 px-4">
+        <div className="max-w-4xl mx-auto text-center mb-12">
+          <div className="inline-block mb-6 px-6 py-2 bg-white/50 backdrop-blur-sm rounded-full text-amber-700 font-semibold border border-amber-200">
+            한 해의 운세를 미리 확인하세요
+          </div>
+
+          <h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-6 leading-tight">
+            🎋 <span className="bg-gradient-to-r from-amber-600 to-orange-600 bg-clip-text text-transparent">토정비결</span>
+          </h1>
+
+          <p className="text-xl text-gray-600 mb-12 max-w-2xl mx-auto">
+            조선시대 토정 이지함 선생이 창안한 역술서로,
+            한 해 동안의 운세를 월별로 확인할 수 있습니다.
+          </p>
+        </div>
+
+        {/* Input Form */}
+        <div className="max-w-2xl mx-auto">
+          <TojeongForm />
+        </div>
+      </section>
+
+      {/* 토정비결 소개 */}
+      <section className="py-20 px-4 bg-white">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">토정비결이란?</h2>
+            <p className="text-xl text-gray-600">조선시대부터 전해 내려오는 전통 운세</p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            <div className="text-center p-6 rounded-2xl hover:bg-amber-50 transition">
+              <div className="text-5xl mb-4">📅</div>
+              <h3 className="text-xl font-bold text-gray-900 mb-3">한 해 운세</h3>
+              <p className="text-gray-600">
+                새해부터 연말까지 전체적인 운의 흐름을 미리 파악할 수 있습니다.
+              </p>
+            </div>
+
+            <div className="text-center p-6 rounded-2xl hover:bg-orange-50 transition">
+              <div className="text-5xl mb-4">📆</div>
+              <h3 className="text-xl font-bold text-gray-900 mb-3">월별 운세</h3>
+              <p className="text-gray-600">
+                12개월 각각의 운세를 확인하여 중요한 결정을 내리는 데 참고하세요.
+              </p>
+            </div>
+
+            <div className="text-center p-6 rounded-2xl hover:bg-yellow-50 transition">
+              <div className="text-5xl mb-4">🎯</div>
+              <h3 className="text-xl font-bold text-gray-900 mb-3">분야별 운세</h3>
+              <p className="text-gray-600">
+                재물, 건강, 관운 등 분야별로 세분화된 운세 정보를 제공합니다.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="bg-gray-900 text-white py-12 px-4">
+        <div className="max-w-7xl mx-auto text-center">
+          <div className="text-2xl font-bold mb-4 bg-gradient-to-r from-amber-400 to-orange-400 bg-clip-text text-transparent">
+            🔮 사주보기
+          </div>
+          <p className="text-gray-400 mb-6">
+            쟁승메이드가 제공하는 무료 사주 서비스
+          </p>
+          <div className="text-sm text-gray-500">
+            <p>문의: bgg8988@gmail.com | <a href="https://jaengseung-made.com" target="_blank" rel="noopener noreferrer" className="hover:text-amber-400">쟁승메이드</a></p>
+            <p className="mt-2">&copy; 2025 쟁승메이드. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}
--- a/app/tojeong/result/page.tsx
+++ b/app/tojeong/result/page.tsx
@@ -0,0 +1,332 @@
+import Link from 'next/link';
+import { calculateSaju } from '@/lib/saju-calculator';
+import PDFButton from '../../components/PDFButton';
+
+interface PageProps {
+  searchParams: Promise<{
+    year: string;
+    month: string;
+    day: string;
+    gender: 'male' | 'female';
+    targetYear: string;
+  }>;
+}
+
+export default async function TojeongResultPage({ searchParams }: PageProps) {
+  const params = await searchParams;
+  const { year, month, day, gender, targetYear } = params;
+
+  const birthYear = parseInt(year);
+  const birthMonth = parseInt(month);
+  const birthDay = parseInt(day);
+  const targetYearNum = parseInt(targetYear);
+
+  // 사주 계산
+  const sajuData = calculateSaju(birthYear, birthMonth, birthDay, null, gender);
+
+  // 토정비결 점수 계산 (간단한 알고리즘)
+  const calculateTojeongScore = (monthIndex: number): number => {
+    const seed = sajuData.day.stem.charCodeAt(0) +
+                 sajuData.day.branch.charCodeAt(0) +
+                 targetYearNum +
+                 monthIndex;
+    return 60 + (seed % 35);
+  };
+
+  const months = [
+    '1월', '2월', '3월', '4월', '5월', '6월',
+    '7월', '8월', '9월', '10월', '11월', '12월'
+  ];
+
+  const monthlyFortunes = months.map((month, index) => ({
+    month,
+    score: calculateTojeongScore(index + 1),
+    wealth: calculateTojeongScore(index + 100),
+    health: calculateTojeongScore(index + 200),
+    career: calculateTojeongScore(index + 300),
+  }));
+
+  const getScoreText = (score: number): string => {
+    if (score >= 90) return '대길 (大吉)';
+    if (score >= 80) return '길 (吉)';
+    if (score >= 70) return '중길 (中吉)';
+    if (score >= 60) return '소길 (小吉)';
+    return '평 (平)';
+  };
+
+  const getScoreColor = (score: number): string => {
+    if (score >= 90) return 'text-red-600';
+    if (score >= 80) return 'text-orange-600';
+    if (score >= 70) return 'text-yellow-600';
+    if (score >= 60) return 'text-green-600';
+    return 'text-gray-600';
+  };
+
+  const getScoreBgColor = (score: number): string => {
+    if (score >= 90) return 'bg-red-50';
+    if (score >= 80) return 'bg-orange-50';
+    if (score >= 70) return 'bg-yellow-50';
+    if (score >= 60) return 'bg-green-50';
+    return 'bg-gray-50';
+  };
+
+  // 전체 운세 평균
+  const averageScore = Math.round(
+    monthlyFortunes.reduce((sum, f) => sum + f.score, 0) / 12
+  );
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50">
+      {/* Navigation */}
+      <nav className="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            <Link href="/" className="text-2xl font-bold bg-gradient-to-r from-amber-600 to-orange-600 bg-clip-text text-transparent">
+              🔮 사주보기
+            </Link>
+            <div className="flex gap-4">
+              <Link
+                href="/tojeong"
+                className="text-gray-700 hover:text-amber-600 transition font-medium"
+              >
+                다시 보기
+              </Link>
+              <Link
+                href="/"
+                className="text-gray-700 hover:text-amber-600 transition font-medium"
+              >
+                처음으로
+              </Link>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      {/* Content */}
+      <div id="pdf-content" className="max-w-6xl mx-auto px-4 py-12">
+        {/* Header */}
+        <div className="text-center mb-12">
+          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
+            🎋 {targetYear}년 토정비결
+          </h1>
+          <p className="text-xl text-gray-600">
+            {birthYear}년 {birthMonth}월 {birthDay}일생 {gender === 'male' ? '남성' : '여성'}
+          </p>
+          <p className="text-lg text-gray-500 mt-2">
+            일간: {sajuData.day.stem}({sajuData.day.stemKr}) | {sajuData.day.element}
+          </p>
+        </div>
+
+        {/* 연간 종합 운세 */}
+        <div className="bg-gradient-to-r from-amber-600 to-orange-600 rounded-3xl shadow-2xl p-8 md:p-12 mb-12 text-white">
+          <h2 className="text-3xl font-bold mb-6 text-center">📅 연간 종합 운세</h2>
+          <div className="text-center mb-6">
+            <div className="text-6xl font-bold mb-2">{averageScore}점</div>
+            <div className="text-2xl">{getScoreText(averageScore)}</div>
+          </div>
+          <p className="text-lg leading-relaxed text-center max-w-3xl mx-auto">
+            {averageScore >= 85 && `${targetYear}년은 매우 좋은 한 해가 될 것입니다. 하고자 하는 일에 적극적으로 도전하세요.`}
+            {averageScore >= 75 && averageScore < 85 && `${targetYear}년은 전반적으로 좋은 운이 함께합니다. 꾸준히 노력하면 좋은 결과가 있을 것입니다.`}
+            {averageScore >= 65 && averageScore < 75 && `${targetYear}년은 안정적인 한 해입니다. 무리하지 말고 차근차근 진행하세요.`}
+            {averageScore < 65 && `${targetYear}년은 신중함이 필요한 해입니다. 중요한 결정은 충분히 고민한 후 진행하세요.`}
+          </p>
+        </div>
+
+        {/* 분야별 연간 운세 */}
+        <div className="bg-white rounded-3xl shadow-2xl p-8 md:p-12 mb-12">
+          <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">분야별 연간 운세</h2>
+
+          <div className="grid md:grid-cols-2 gap-6">
+            {/* 재물운 */}
+            <div className="bg-gradient-to-br from-yellow-50 to-amber-50 rounded-2xl p-6">
+              <div className="flex items-center gap-3 mb-4">
+                <span className="text-4xl">💰</span>
+                <div>
+                  <h3 className="text-xl font-bold text-gray-900">재물운</h3>
+                  <p className="text-sm text-gray-600">財物運</p>
+                </div>
+              </div>
+              <div className="text-3xl font-bold text-amber-600 mb-2">
+                {Math.round(monthlyFortunes.reduce((sum, f) => sum + f.wealth, 0) / 12)}점
+              </div>
+              <p className="text-gray-700">
+                {sajuData.day.element === '金' && '금전적으로 안정된 한 해입니다. 저축과 투자에 좋습니다.'}
+                {sajuData.day.element === '木' && '새로운 수입원이 생길 수 있습니다. 적극적으로 기회를 찾으세요.'}
+                {sajuData.day.element === '水' && '재물의 흐름이 좋습니다. 계획적인 지출이 중요합니다.'}
+                {sajuData.day.element === '火' && '투자보다는 안정적인 재테크가 좋습니다.'}
+                {sajuData.day.element === '土' && '꾸준한 노력으로 재물이 쌓이는 해입니다.'}
+              </p>
+            </div>
+
+            {/* 건강운 */}
+            <div className="bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl p-6">
+              <div className="flex items-center gap-3 mb-4">
+                <span className="text-4xl">🏥</span>
+                <div>
+                  <h3 className="text-xl font-bold text-gray-900">건강운</h3>
+                  <p className="text-sm text-gray-600">健康運</p>
+                </div>
+              </div>
+              <div className="text-3xl font-bold text-green-600 mb-2">
+                {Math.round(monthlyFortunes.reduce((sum, f) => sum + f.health, 0) / 12)}점
+              </div>
+              <p className="text-gray-700">
+                전반적으로 건강한 한 해입니다. 규칙적인 운동과 식습관 관리로 더욱 좋은 건강을 유지하세요.
+              </p>
+            </div>
+
+            {/* 관운 (직장/사업) */}
+            <div className="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl p-6">
+              <div className="flex items-center gap-3 mb-4">
+                <span className="text-4xl">💼</span>
+                <div>
+                  <h3 className="text-xl font-bold text-gray-900">관운</h3>
+                  <p className="text-sm text-gray-600">官運 (직장/사업)</p>
+                </div>
+              </div>
+              <div className="text-3xl font-bold text-blue-600 mb-2">
+                {Math.round(monthlyFortunes.reduce((sum, f) => sum + f.career, 0) / 12)}점
+              </div>
+              <p className="text-gray-700">
+                {sajuData.day.tenGod === '정관' && '승진이나 좋은 기회가 올 수 있습니다.'}
+                {sajuData.day.tenGod === '편관' && '새로운 도전이 기다리고 있습니다.'}
+                {sajuData.day.tenGod === '정재' && '안정적인 직장생활이 예상됩니다.'}
+                {sajuData.day.tenGod === '편재' && '새로운 사업 기회를 잘 살펴보세요.'}
+                열심히 노력하면 좋은 결과가 있을 것입니다.
+              </p>
+            </div>
+
+            {/* 애정운 */}
+            <div className="bg-gradient-to-br from-pink-50 to-rose-50 rounded-2xl p-6">
+              <div className="flex items-center gap-3 mb-4">
+                <span className="text-4xl">💕</span>
+                <div>
+                  <h3 className="text-xl font-bold text-gray-900">애정운</h3>
+                  <p className="text-sm text-gray-600">愛情運</p>
+                </div>
+              </div>
+              <div className="text-3xl font-bold text-pink-600 mb-2">
+                {Math.round((monthlyFortunes.reduce((sum, f) => sum + f.score, 0) / 12 +
+                            monthlyFortunes.reduce((sum, f) => sum + f.wealth, 0) / 12) / 2)}점
+              </div>
+              <p className="text-gray-700">
+                {gender === 'male' ? '좋은 인연을 만날 기회가 있습니다.' : '따뜻한 사랑이 함께하는 해입니다.'}
+                진심으로 상대를 대하면 좋은 관계를 유지할 수 있습니다.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* 월별 운세 */}
+        <div className="bg-white rounded-3xl shadow-2xl p-8 md:p-12 mb-12">
+          <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">📆 월별 운세</h2>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {monthlyFortunes.map((fortune, index) => (
+              <div
+                key={index}
+                className={`${getScoreBgColor(fortune.score)} rounded-xl p-6 border-2 ${
+                  fortune.score >= 80 ? 'border-orange-200' : 'border-gray-200'
+                }`}
+              >
+                <div className="flex justify-between items-center mb-3">
+                  <h3 className="text-xl font-bold text-gray-900">{fortune.month}</h3>
+                  <span className={`text-2xl font-bold ${getScoreColor(fortune.score)}`}>
+                    {fortune.score}
+                  </span>
+                </div>
+                <div className="text-sm font-semibold mb-2 text-gray-700">
+                  {getScoreText(fortune.score)}
+                </div>
+                <div className="space-y-1 text-sm text-gray-600">
+                  <div className="flex justify-between">
+                    <span>💰 재물:</span>
+                    <span className="font-semibold">{fortune.wealth}점</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span>🏥 건강:</span>
+                    <span className="font-semibold">{fortune.health}점</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span>💼 직장:</span>
+                    <span className="font-semibold">{fortune.career}점</span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* 조언 */}
+        <div className="bg-white rounded-2xl shadow-lg p-8 mb-8">
+          <h3 className="text-2xl font-bold text-gray-900 mb-6 flex items-center">
+            <span className="text-3xl mr-3">💡</span>
+            {targetYear}년 한 해를 위한 조언
+          </h3>
+          <ul className="space-y-3 text-gray-700">
+            <li className="flex items-start">
+              <span className="text-amber-600 mr-2">•</span>
+              <span>운이 좋은 달에는 적극적으로 새로운 일을 시작하세요.</span>
+            </li>
+            <li className="flex items-start">
+              <span className="text-amber-600 mr-2">•</span>
+              <span>운이 낮은 달에는 무리하지 말고 현상 유지에 집중하세요.</span>
+            </li>
+            <li className="flex items-start">
+              <span className="text-amber-600 mr-2">•</span>
+              <span>매사에 감사하는 마음을 가지고 긍정적으로 생활하세요.</span>
+            </li>
+            <li className="flex items-start">
+              <span className="text-amber-600 mr-2">•</span>
+              <span>토정비결은 참고사항이며, 자신의 노력이 가장 중요합니다.</span>
+            </li>
+          </ul>
+        </div>
+
+        {/* 다른 메뉴 */}
+        <div className="grid md:grid-cols-3 gap-6">
+          <Link
+            href="/tojeong"
+            className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group"
+          >
+            <div className="text-4xl mb-3">🎋</div>
+            <h3 className="text-xl font-bold text-gray-900 mb-2">다시 보기</h3>
+            <p className="text-gray-600 text-sm">다른 년도 확인하기</p>
+          </Link>
+
+          <Link
+            href="/"
+            className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group"
+          >
+            <div className="text-4xl mb-3">📜</div>
+            <h3 className="text-xl font-bold text-gray-900 mb-2">사주 보기</h3>
+            <p className="text-gray-600 text-sm">내 사주 확인하기</p>
+          </Link>
+
+          <PDFButton
+            elementId="pdf-content"
+            filename={`토정비결_${targetYear}년_${birthYear}${birthMonth}${birthDay}.pdf`}
+            buttonText="토정비결 PDF 저장"
+            className="bg-gradient-to-r from-amber-600 to-orange-600 text-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group w-full disabled:opacity-50 disabled:cursor-not-allowed"
+          />
+        </div>
+      </div>
+
+      {/* Footer */}
+      <footer className="bg-gray-900 text-white py-12 px-4 mt-20">
+        <div className="max-w-7xl mx-auto text-center">
+          <div className="text-2xl font-bold mb-4 bg-gradient-to-r from-amber-400 to-orange-400 bg-clip-text text-transparent">
+            🔮 사주보기
+          </div>
+          <p className="text-gray-400 mb-6">
+            쟁승메이드가 제공하는 무료 사주 서비스
+          </p>
+          <div className="text-sm text-gray-500">
+            <p>문의: bgg8988@gmail.com | <a href="https://jaengseung-made.com" target="_blank" rel="noopener noreferrer" className="hover:text-amber-400">쟁승메이드</a></p>
+            <p className="mt-2">&copy; 2025 쟁승메이드. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}
--- a/lib/pdf-utils.ts
+++ b/lib/pdf-utils.ts
@@ -0,0 +1,72 @@
+import jsPDF from 'jspdf';
+import html2canvas from 'html2canvas';
+
+/**
+ * HTML 요소를 PDF로 변환하여 다운로드
+ * @param elementId - PDF로 변환할 HTML 요소의 ID
+ * @param filename - 다운로드될 PDF 파일명
+ */
+export async function downloadPDF(elementId: string, filename: string) {
+  try {
+    const element = document.getElementById(elementId);
+    if (!element) {
+      throw new Error(`Element with id "${elementId}" not found`);
+    }
+
+    // 로딩 표시
+    const originalContent = element.innerHTML;
+
+    // HTML을 캔버스로 변환
+    const canvas = await html2canvas(element, {
+      scale: 2, // 해상도 향상
+      useCORS: true,
+      logging: false,
+      backgroundColor: '#ffffff'
+    });
+
+    // 캔버스를 이미지로 변환
+    const imgData = canvas.toDataURL('image/png');
+
+    // PDF 생성
+    const pdf = new jsPDF({
+      orientation: 'portrait',
+      unit: 'mm',
+      format: 'a4'
+    });
+
+    const imgWidth = 210; // A4 width in mm
+    const pageHeight = 297; // A4 height in mm
+    const imgHeight = (canvas.height * imgWidth) / canvas.width;
+    let heightLeft = imgHeight;
+    let position = 0;
+
+    // 첫 페이지 추가
+    pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
+    heightLeft -= pageHeight;
+
+    // 여러 페이지가 필요한 경우
+    while (heightLeft > 0) {
+      position = heightLeft - imgHeight;
+      pdf.addPage();
+      pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
+      heightLeft -= pageHeight;
+    }
+
+    // PDF 다운로드
+    pdf.save(filename);
+
+    return true;
+  } catch (error) {
+    console.error('PDF 생성 중 오류 발생:', error);
+    alert('PDF 생성에 실패했습니다. 다시 시도해주세요.');
+    return false;
+  }
+}
+
+/**
+ * 현재 페이지를 PDF로 다운로드
+ * @param filename - 다운로드될 PDF 파일명
+ */
+export async function downloadCurrentPageAsPDF(filename: string) {
+  return downloadPDF('pdf-content', filename);
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
      "name": "saju-web",
      "version": "0.1.0",
      "dependencies": {
+        "html2canvas": "^1.4.1",
+        "jspdf": "^4.1.0",
        "next": "16.1.6",
        "react": "19.2.3",
        "react-dom": "19.2.3"
@@ -228,6 +230,15 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
    "node_modules/@babel/template": {
      "version": "7.28.6",
      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
@@ -1555,6 +1566,19 @@
        "undici-types": "~6.21.0"
      }
    },
+    "node_modules/@types/pako": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.4.tgz",
+      "integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/@types/react": {
      "version": "19.2.14",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
@@ -1575,6 +1599,13 @@
        "@types/react": "^19.2.0"
      }
    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/@typescript-eslint/eslint-plugin": {
      "version": "8.55.0",
      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.55.0.tgz",
@@ -2406,6 +2437,15 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
    "node_modules/baseline-browser-mapping": {
      "version": "2.9.19",
      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.19.tgz",
@@ -2553,6 +2593,26 @@
      ],
      "license": "CC-BY-4.0"
    },
+    "node_modules/canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
    "node_modules/chalk": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -2610,6 +2670,18 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/core-js": {
+      "version": "3.48.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.48.0.tgz",
+      "integrity": "sha512-zpEHTy1fjTMZCKLHUZoVeylt9XrzaIN2rbPXEt0k+q7JE5CkCZdo6bNq55bn24a69CH7ErAVLKijxJja4fw+UQ==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
    "node_modules/cross-spawn": {
      "version": "7.0.6",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2625,6 +2697,15 @@
        "node": ">= 8"
      }
    },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
    "node_modules/csstype": {
      "version": "3.2.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -2777,6 +2858,16 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/dompurify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.1.tgz",
+      "integrity": "sha512-qkdCKzLNtrgPFP1Vo+98FRzJnBRGe4ffyCea9IwHB1fyxPOeNTHpLKYGd4Uk9xvNoH0ZoOjwZxNptyMwqrId1Q==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
    "node_modules/dunder-proto": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -3495,6 +3586,17 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/fast-png": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/fast-png/-/fast-png-6.4.0.tgz",
+      "integrity": "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/pako": "^2.0.3",
+        "iobuffer": "^5.3.2",
+        "pako": "^2.1.0"
+      }
+    },
    "node_modules/fastq": {
      "version": "1.20.1",
      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
@@ -3505,6 +3607,12 @@
        "reusify": "^1.0.4"
      }
    },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
    "node_modules/file-entry-cache": {
      "version": "8.0.0",
      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -3890,6 +3998,19 @@
        "hermes-estree": "0.25.1"
      }
    },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
    "node_modules/ignore": {
      "version": "5.3.2",
      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3942,6 +4063,12 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/iobuffer": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz",
+      "integrity": "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==",
+      "license": "MIT"
+    },
    "node_modules/is-array-buffer": {
      "version": "3.0.5",
      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -4466,6 +4593,23 @@
        "node": ">=6"
      }
    },
+    "node_modules/jspdf": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-4.1.0.tgz",
+      "integrity": "sha512-xd1d/XRkwqnsq6FP3zH1Q+Ejqn2ULIJeDZ+FTKpaabVpZREjsJKRJwuokTNgdqOU+fl55KgbvgZ1pRTSWCP2kQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "fast-png": "^6.2.0",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.11",
+        "core-js": "^3.6.0",
+        "dompurify": "^3.3.1",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
    "node_modules/jsx-ast-utils": {
      "version": "3.3.5",
      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -5227,6 +5371,12 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "license": "(MIT AND Zlib)"
+    },
    "node_modules/parent-module": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -5267,6 +5417,13 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/picocolors": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -5378,6 +5535,16 @@
      ],
      "license": "MIT"
    },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
    "node_modules/react": {
      "version": "19.2.3",
      "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
@@ -5429,6 +5596,13 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/regexp.prototype.flags": {
      "version": "1.5.4",
      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
@@ -5502,6 +5676,16 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
    "node_modules/run-parallel": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -5819,6 +6003,16 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
    "node_modules/stop-iteration-iterator": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
@@ -6018,6 +6212,16 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
    "node_modules/tailwindcss": {
      "version": "4.1.18",
      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
@@ -6039,6 +6243,15 @@
        "url": "https://opencollective.com/webpack"
      }
    },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
    "node_modules/tinyglobby": {
      "version": "0.2.15",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -6376,6 +6589,15 @@
        "punycode": "^2.1.0"
      }
    },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
    "node_modules/which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -9,6 +9,8 @@
    "lint": "eslint"
  },
  "dependencies": {
+    "html2canvas": "^1.4.1",
+    "jspdf": "^4.1.0",
    "next": "16.1.6",
    "react": "19.2.3",
    "react-dom": "19.2.3"