feat: 토정비결 및 PDF 저장 기능 추가
- 토정비결 페이지 구현 (연간/월별 운세) - 분야별 운세 (재물, 건강, 관운, 애정) - PDF 저장 기능 구현 (jsPDF + html2canvas) - 모든 결과 페이지에 PDF 다운로드 기능 추가 - PDFButton 재사용 가능한 컴포넌트 생성 - 홈페이지에 토정비결 링크 추가 - 페이지 간 네비게이션 링크 업데이트 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
47
app/components/PDFButton.tsx
Normal file
47
app/components/PDFButton.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user