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/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>
+  );
+}