gahusb
f85e857bea
- 토정비결 페이지 구현 (연간/월별 운세) - 분야별 운세 (재물, 건강, 관운, 애정) - PDF 저장 기능 구현 (jsPDF + html2canvas) - 모든 결과 페이지에 PDF 다운로드 기능 추가 - PDFButton 재사용 가능한 컴포넌트 생성 - 홈페이지에 토정비결 링크 추가 - 페이지 간 네비게이션 링크 업데이트 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
'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>
|
|
);
|
|
}
|