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

- 토정비결 페이지 구현 (연간/월별 운세)
- 분야별 운세 (재물, 건강, 관운, 애정)
- PDF 저장 기능 구현 (jsPDF + html2canvas)
- 모든 결과 페이지에 PDF 다운로드 기능 추가
- PDFButton 재사용 가능한 컴포넌트 생성
- 홈페이지에 토정비결 링크 추가
- 페이지 간 네비게이션 링크 업데이트

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-02-11 23:44:55 +09:00
parent 08d6f71fd1
commit f85e857bea
11 changed files with 950 additions and 17 deletions

View File

@@ -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>