웹 디자인 전면 개편

app/fortune/page.tsx

@@ -1,6 +1,8 @@
 import Link from 'next/link';
 import { calculateSaju } from '@/lib/saju-calculator';
 import PDFButton from '../components/PDFButton';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
 
 interface PageProps {
   searchParams: Promise<{
@@ -30,22 +32,27 @@ export default async function FortunePage({ searchParams }: PageProps) {
   const todayMonth = today.getMonth() + 1;
   const todayDay = today.getDate();
 
-  // 오늘의 간지 계산
-  const todayGanzi = calculateSaju(todayYear, todayMonth, todayDay, null, gender);
+  // 오늘의 간지 계산 (시간은 12시로 고정)
+  const todayGanzi = calculateSaju(todayYear, todayMonth, todayDay, 12, gender);
+
+  // 안전하게 stem 접근
+  const todayStem = todayGanzi?.day?.stem || '甲';
+  const todayBranch = todayGanzi?.day?.branch || '子';
+  const userStem = sajuData?.day?.stem || '甲';
 
   // 운세 점수 계산 (간단한 알고리즘)
   const calculateFortuneScore = (category: string): number => {
-    const seed = sajuData.day.stem.charCodeAt(0) + todayGanzi.day.stem.charCodeAt(0) + category.charCodeAt(0);
+    const seed = userStem.charCodeAt(0) + todayStem.charCodeAt(0) + category.charCodeAt(0);
     return 60 + (seed % 40);
   };
 
   const fortuneCategories = [
-    { name: '종합운', icon: '⭐', score: calculateFortuneScore('종합'), color: 'indigo' },
-    { name: '금전운', icon: '💰', score: calculateFortuneScore('금전'), color: 'green' },
-    { name: '애정운', icon: '💕', score: calculateFortuneScore('애정'), color: 'pink' },
-    { name: '건강운', icon: '🏥', score: calculateFortuneScore('건강'), color: 'red' },
-    { name: '직장운', icon: '💼', score: calculateFortuneScore('직장'), color: 'blue' },
-    { name: '학업운', icon: '📚', score: calculateFortuneScore('학업'), color: 'purple' },
+    { name: '종합운', icon: '⭐', score: calculateFortuneScore('종합'), color: 'bg-gradient-to-r from-[#173658] to-[#1e426a]' },
+    { name: '금전운', icon: '💰', score: calculateFortuneScore('금전'), color: 'bg-gradient-to-r from-green-600 to-emerald-600' },
+    { name: '애정운', icon: '💕', score: calculateFortuneScore('애정'), color: 'bg-gradient-to-r from-pink-600 to-rose-600' },
+    { name: '건강운', icon: '🏥', score: calculateFortuneScore('건강'), color: 'bg-gradient-to-r from-red-600 to-orange-600' },
+    { name: '직장운', icon: '💼', score: calculateFortuneScore('직장'), color: 'bg-gradient-to-r from-blue-600 to-cyan-600' },
+    { name: '학업운', icon: '📚', score: calculateFortuneScore('학업'), color: 'bg-gradient-to-r from-purple-600 to-indigo-600' },
   ];
 
   const getScoreText = (score: number): string => {
@@ -92,55 +99,32 @@ export default async function FortunePage({ searchParams }: PageProps) {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-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-indigo-600 to-purple-600 bg-clip-text text-transparent">
-              🔮 사주보기
-            </Link>
-            <div className="flex gap-4">
-              <Link
-                href={`/result?${new URLSearchParams(params as any).toString()}`}
-                className="text-gray-700 hover:text-indigo-600 transition font-medium"
-              >
-                사주팔자
-              </Link>
-              <Link
-                href="/"
-                className="text-gray-700 hover:text-indigo-600 transition font-medium"
-              >
-                처음으로
-              </Link>
-            </div>
-          </div>
-        </div>
-      </nav>
+    <div className="min-h-screen bg-[#F3E7E3]">
+      <Header />
 
       {/* Content */}
-      <div id="pdf-content" className="max-w-6xl mx-auto px-4 py-12">
+      <div id="pdf-content" className="container-custom pt-24 pb-12">
         {/* Header */}
         <div className="text-center mb-12">
-          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
+          <h1 className="text-3xl md:text-4xl font-bold text-[#173658] mb-4">
             오늘의 운세
           </h1>
-          <p className="text-xl text-gray-600">
-            {todayYear}년 {todayMonth}월 {todayDay}일 ({todayGanzi.day.stem}{todayGanzi.day.branch})
+          <p className="text-xl text-[#5d6d7e]">
+            {todayYear}년 {todayMonth}월 {todayDay}일 ({todayStem}{todayBranch})
           </p>
-          <p className="text-lg text-gray-500 mt-2">
+          <p className="text-lg text-[#5d6d7e] mt-2">
             {sajuData.birthDate.year}년생 {gender === 'male' ? '남성' : '여성'}의 오늘 운세
           </p>
         </div>
 
         {/* 운세 점수 카드들 */}
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
           {fortuneCategories.map((category) => (
-            <div key={category.name} className="bg-white rounded-2xl shadow-lg p-6 hover:shadow-xl transition">
+            <div key={category.name} className="glass-panel-light rounded-2xl p-6 card-hover">
               <div className="flex items-center justify-between mb-4">
                 <div className="flex items-center gap-3">
                   <span className="text-4xl">{category.icon}</span>
-                  <h3 className="text-xl font-bold text-gray-900">{category.name}</h3>
+                  <h3 className="text-xl font-bold text-[#173658]">{category.name}</h3>
                 </div>
                 <span className={`text-2xl font-bold ${getScoreColor(category.score)}`}>
                   {category.score}점
@@ -148,19 +132,19 @@ export default async function FortunePage({ searchParams }: PageProps) {
               </div>
               <div className="w-full bg-gray-200 rounded-full h-3 mb-2">
                 <div
-                  className={`bg-gradient-to-r from-${category.color}-400 to-${category.color}-600 h-3 rounded-full transition-all duration-500`}
+                  className={`${category.color} h-3 rounded-full transition-all duration-500`}
                   style={{ width: `${category.score}%` }}
                 ></div>
               </div>
-              <p className="text-sm text-gray-600 text-right">{getScoreText(category.score)}</p>
+              <p className="text-sm text-[#5d6d7e] text-right font-bold">{getScoreText(category.score)}</p>
             </div>
           ))}
         </div>
 
         {/* 오늘의 한마디 */}
-        <div className="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-3xl shadow-2xl p-8 md:p-12 mb-8 text-white">
-          <h2 className="text-3xl font-bold mb-6 text-center">💬 오늘의 한마디</h2>
-          <p className="text-xl leading-relaxed text-center">
+        <div className="bg-gradient-to-r from-[#173658] to-[#1e426a] rounded-2xl p-8 md:p-12 mb-8 text-white pattern-overlay">
+          <h2 className="text-2xl md:text-3xl font-bold mb-6 text-center">💬 오늘의 한마디</h2>
+          <p className="text-lg md:text-xl leading-relaxed text-center">
             {sajuData.day.element === '木' && '나무가 자라듯 꾸준히 노력하면 좋은 결과가 있을 것입니다. 새로운 시작에 좋은 날입니다.'}
             {sajuData.day.element === '火' && '활발한 기운이 가득한 날입니다. 적극적으로 행동하면 좋은 기회를 잡을 수 있습니다.'}
             {sajuData.day.element === '土' && '안정적인 하루가 될 것입니다. 차근차근 계획을 세우고 실행하면 좋습니다.'}
@@ -170,106 +154,92 @@ export default async function FortunePage({ searchParams }: PageProps) {
         </div>
 
         {/* 행운의 요소들 */}
-        <div className="grid md:grid-cols-3 gap-8 mb-8">
+        <div className="grid md:grid-cols-3 gap-6 mb-8">
           {/* 행운의 방향 */}
-          <div className="bg-white rounded-2xl shadow-lg p-8 text-center">
+          <div className="glass-panel-light rounded-2xl p-8 text-center card-hover">
             <div className="text-5xl mb-4">🧭</div>
-            <h3 className="text-2xl font-bold text-gray-900 mb-3">행운의 방향</h3>
-            <p className="text-3xl font-bold text-indigo-600">{getLuckyDirection(sajuData.day.stem)}</p>
-            <p className="text-sm text-gray-600 mt-2">이 방향으로 외출하면 좋습니다</p>
+            <h3 className="text-2xl font-bold text-[#173658] mb-3">행운의 방향</h3>
+            <p className="text-3xl font-bold text-[#d4af37]">{getLuckyDirection(userStem)}</p>
+            <p className="text-sm text-[#5d6d7e] mt-2">이 방향으로 외출하면 좋습니다</p>
           </div>
 
           {/* 행운의 색깔 */}
-          <div className="bg-white rounded-2xl shadow-lg p-8 text-center">
+          <div className="glass-panel-light rounded-2xl p-8 text-center card-hover">
             <div className="text-5xl mb-4">🎨</div>
-            <h3 className="text-2xl font-bold text-gray-900 mb-3">행운의 색깔</h3>
-            <p className="text-3xl font-bold text-purple-600">{getLuckyColor(sajuData.day.element)}</p>
-            <p className="text-sm text-gray-600 mt-2">이 색깔의 옷을 입으면 좋습니다</p>
+            <h3 className="text-2xl font-bold text-[#173658] mb-3">행운의 색깔</h3>
+            <p className="text-3xl font-bold text-[#d4af37]">{getLuckyColor(sajuData.day.element)}</p>
+            <p className="text-sm text-[#5d6d7e] mt-2">이 색깔의 옷을 입으면 좋습니다</p>
           </div>
 
           {/* 행운의 숫자 */}
-          <div className="bg-white rounded-2xl shadow-lg p-8 text-center">
+          <div className="glass-panel-light rounded-2xl p-8 text-center card-hover">
             <div className="text-5xl mb-4">🎲</div>
-            <h3 className="text-2xl font-bold text-gray-900 mb-3">행운의 숫자</h3>
-            <p className="text-3xl font-bold text-pink-600">{getLuckyNumber(sajuData.day.stem)}</p>
-            <p className="text-sm text-gray-600 mt-2">오늘의 행운을 가져다 줄 숫자</p>
+            <h3 className="text-2xl font-bold text-[#173658] mb-3">행운의 숫자</h3>
+            <p className="text-3xl font-bold text-[#d4af37]">{getLuckyNumber(userStem)}</p>
+            <p className="text-sm text-[#5d6d7e] mt-2">오늘의 행운을 가져다 줄 숫자</p>
           </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">
+        <div className="glass-panel-light rounded-2xl p-8 mb-8">
+          <h3 className="text-2xl font-bold text-[#173658] mb-6 flex items-center">
             <span className="text-3xl mr-3">⚠️</span>
             오늘 주의할 점
           </h3>
-          <ul className="space-y-3 text-gray-700">
+          <ul className="space-y-3 text-[#5d6d7e]">
             <li className="flex items-start">
-              <span className="text-indigo-600 mr-2">•</span>
+              <span className="text-[#d4af37] mr-2 font-bold">•</span>
               <span>중요한 결정은 오전보다 오후에 하는 것이 좋습니다.</span>
             </li>
             <li className="flex items-start">
-              <span className="text-indigo-600 mr-2">•</span>
+              <span className="text-[#d4af37] mr-2 font-bold">•</span>
               <span>감정적인 대화는 피하고 침착하게 대응하세요.</span>
             </li>
             <li className="flex items-start">
-              <span className="text-indigo-600 mr-2">•</span>
+              <span className="text-[#d4af37] mr-2 font-bold">•</span>
               <span>건강 관리에 신경 쓰고 무리하지 마세요.</span>
             </li>
           </ul>
         </div>
 
         {/* 다른 메뉴 */}
-        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
           <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"
+            className="glass-panel-light rounded-xl p-6 card-hover text-center"
           >
             <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>
+            <h3 className="text-lg font-bold text-[#173658] mb-1">사주팔자</h3>
+            <p className="text-[#5d6d7e] text-sm">내 사주 다시 보기</p>
           </Link>
 
           <Link
             href="/compatibility"
-            className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group"
+            className="glass-panel-light rounded-xl p-6 card-hover text-center"
           >
             <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>
+            <h3 className="text-lg font-bold text-[#173658] mb-1">궁합 보기</h3>
+            <p className="text-[#5d6d7e] text-sm">두 사람의 궁합 확인</p>
           </Link>
 
           <Link
             href="/tojeong"
-            className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group"
+            className="glass-panel-light rounded-xl p-6 card-hover text-center"
           >
             <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>
+            <h3 className="text-lg font-bold text-[#173658] mb-1">토정비결</h3>
+            <p className="text-[#5d6d7e] text-sm">한 해의 운세 보기</p>
           </Link>
 
           <PDFButton
             elementId="pdf-content"
             filename={`오늘의운세_${todayYear}${todayMonth}${todayDay}.pdf`}
-            buttonText="운세 PDF 저장"
+            buttonText="PDF 저장"
           />
         </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-indigo-400 to-purple-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-indigo-400">쟁승메이드</a></p>
-            <p className="mt-2">&copy; 2025 쟁승메이드. All rights reserved.</p>
-          </div>
-        </div>
-      </footer>
+      <Footer />
     </div>
   );
 }