웹 디자인 전면 개편
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
|
||||
import { calculateSaju } from '@/lib/saju-calculator';
|
||||
import Link from 'next/link';
|
||||
import PDFButton from '../components/PDFButton';
|
||||
import ShareButtons from '../components/ShareButtons';
|
||||
import UserMenu from '@/components/UserMenu';
|
||||
import Header from '@/components/Header';
|
||||
import Footer from '@/components/Footer';
|
||||
import { calculateDaeun, getCurrentDaeun, getDaeunDescription } from '@/lib/daeun-calculator';
|
||||
import { getCurrentSolarTerm, getSolarTermName, getSolarTermMonthBranch } from '@/lib/solar-terms';
|
||||
import { EARTHLY_BRANCHES_KR, FIVE_ELEMENTS_KR, FIVE_ELEMENTS } from '@/lib/saju-calculator';
|
||||
@@ -63,482 +63,512 @@ export default async function ResultPage({ searchParams }: PageProps) {
|
||||
const currentYear = new Date().getFullYear();
|
||||
const currentDaeun = getCurrentDaeun(daeunList, currentYear);
|
||||
|
||||
// 오행 색상 매핑
|
||||
// 오행 색상 매핑 (새 디자인)
|
||||
const elementColors: { [key: string]: string } = {
|
||||
'木': 'text-green-600', '火': 'text-red-500', '土': 'text-yellow-600',
|
||||
'金': 'text-gray-500', '水': 'text-blue-600',
|
||||
'木': 'text-green-700', '火': 'text-red-600', '土': 'text-yellow-700',
|
||||
'金': 'text-[#d4af37]', '水': 'text-blue-700',
|
||||
};
|
||||
const elementBgColors: { [key: string]: string } = {
|
||||
'木': 'bg-green-100 border-green-300', '火': 'bg-red-100 border-red-300',
|
||||
'土': 'bg-yellow-100 border-yellow-300', '金': 'bg-gray-100 border-gray-300',
|
||||
'水': 'bg-blue-100 border-blue-300',
|
||||
'木': 'bg-green-50 border-green-400', '火': 'bg-red-50 border-red-400',
|
||||
'土': 'bg-yellow-50 border-yellow-400', '金': 'bg-[#F3E7E3] border-[#d4af37]',
|
||||
'水': 'bg-blue-50 border-blue-400',
|
||||
};
|
||||
|
||||
// 띠 계산
|
||||
const zodiacAnimals = ['쥐', '소', '호랑이', '토끼', '용', '뱀', '말', '양', '원숭이', '닭', '개', '돼지'];
|
||||
const zodiacIndex = (yearNum - 4) % 12;
|
||||
const zodiacAnimal = zodiacAnimals[zodiacIndex >= 0 ? zodiacIndex : zodiacIndex + 12];
|
||||
|
||||
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 items-center space-x-4">
|
||||
<Link href="/" className="text-gray-700 hover:text-indigo-600 transition font-medium">
|
||||
다시 보기
|
||||
</Link>
|
||||
<UserMenu />
|
||||
<div className="min-h-screen bg-[#F3E7E3]">
|
||||
<Header />
|
||||
|
||||
{/* 2컬럼 레이아웃 */}
|
||||
<div className="container-custom pt-24 pb-12">
|
||||
<div className="grid lg:grid-cols-[300px_1fr] gap-8">
|
||||
{/* 사이드바 - 입력 정보 */}
|
||||
<aside className="lg:sticky lg:top-24 h-fit">
|
||||
<div className="glass-panel rounded-2xl p-6 text-white">
|
||||
<h2 className="text-xl font-bold mb-6 text-center pb-4 border-b border-white/20">
|
||||
기본 정보
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="text-sm text-gray-300 mb-1">생년월일</div>
|
||||
<div className="font-bold">
|
||||
{isLunar ? (
|
||||
<div>
|
||||
<div className="text-lg">음력 {inputYear}.{inputMonth}.{inputDay}</div>
|
||||
{isLeap && <div className="text-xs text-[#d4af37]">(윤달)</div>}
|
||||
<div className="text-xs text-gray-300 mt-1">
|
||||
양력 {yearNum}.{monthNum}.{dayNum}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-lg">{yearNum}.{monthNum}.{dayNum}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{hourNum !== null && (
|
||||
<div>
|
||||
<div className="text-sm text-gray-300 mb-1">태어난 시간</div>
|
||||
<div className="font-bold text-lg">{hourNum}시</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<div className="text-sm text-gray-300 mb-1">성별</div>
|
||||
<div className="font-bold text-lg">{gender === 'male' ? '남성' : '여성'}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-sm text-gray-300 mb-1">띠</div>
|
||||
<div className="font-bold text-lg">{zodiacAnimal}띠</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-sm text-gray-300 mb-1">일간</div>
|
||||
<div className="font-bold text-2xl text-[#d4af37]">
|
||||
{sajuData.day.stem} ({sajuData.day.stemKr})
|
||||
</div>
|
||||
<div className="text-sm mt-1">{FIVE_ELEMENTS_KR[sajuData.day.element as keyof typeof FIVE_ELEMENTS_KR]}({sajuData.day.element})</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 빠른 액션 */}
|
||||
<div className="mt-6 pt-6 border-t border-white/20 space-y-3">
|
||||
<Link
|
||||
href="/"
|
||||
className="block w-full text-center bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white px-4 py-2 rounded-lg transition-all font-medium text-sm"
|
||||
>
|
||||
다시 보기
|
||||
</Link>
|
||||
<Link
|
||||
href="/compatibility"
|
||||
className="block w-full text-center bg-[#d4af37] hover:bg-[#F3E7E3] text-[#173658] px-4 py-2 rounded-lg transition-all font-medium text-sm"
|
||||
>
|
||||
궁합 확인
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
{/* Result 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">
|
||||
내 사주팔자
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600">
|
||||
{isLunar ? (
|
||||
<>
|
||||
음력 {inputYear}년 {inputMonth}월 {inputDay}일{isLeap && ' (윤달)'} {hourNum !== null && `${hourNum}시`}
|
||||
<br />
|
||||
<span className="text-base text-gray-500">
|
||||
(양력 {yearNum}년 {monthNum}월 {dayNum}일)
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{yearNum}년 {monthNum}월 {dayNum}일 {hourNum !== null && `${hourNum}시`}
|
||||
</>
|
||||
)}
|
||||
{gender === 'male' ? ' 남성' : ' 여성'}
|
||||
</p>
|
||||
</div>
|
||||
{/* 메인 콘텐츠 */}
|
||||
<main id="pdf-content">
|
||||
{/* 페이지 헤더 */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-[#173658] mb-3">
|
||||
사주팔자 감정서
|
||||
</h1>
|
||||
<p className="text-[#5d6d7e]">
|
||||
전통 명리학과 AI 기술의 만남
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 사주팔자 표 */}
|
||||
<div className="bg-white rounded-3xl shadow-2xl p-8 md:p-12 mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">사주팔자 (四柱八字)</h2>
|
||||
{/* 사주팔자 표 */}
|
||||
<div className="glass-panel-light rounded-2xl p-6 md:p-8 mb-6">
|
||||
<h2 className="text-2xl font-bold text-[#173658] mb-6 text-center">사주팔자 (四柱八字)</h2>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-gradient-to-r from-indigo-600 to-purple-600 text-white">
|
||||
<th className="py-4 px-6 text-center font-bold text-lg">구분</th>
|
||||
{sajuData.hour && <th className="py-4 px-6 text-center font-bold text-lg">시주 (時柱)</th>}
|
||||
<th className="py-4 px-6 text-center font-bold text-lg">일주 (日柱)</th>
|
||||
<th className="py-4 px-6 text-center font-bold text-lg">월주 (月柱)</th>
|
||||
<th className="py-4 px-6 text-center font-bold text-lg">년주 (年柱)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{/* 천간 */}
|
||||
<tr className="border-b border-gray-200 hover:bg-indigo-50 transition">
|
||||
<td className="py-4 px-6 text-center font-semibold text-gray-700">천간 (天干)</td>
|
||||
{sajuData.hour && (
|
||||
<td className="py-4 px-6 text-center">
|
||||
<div className="text-3xl font-bold text-indigo-600">{sajuData.hour.stem}</div>
|
||||
<div className="text-sm text-gray-600 mt-1">{sajuData.hour.stemKr}</div>
|
||||
</td>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-[#173658] text-white">
|
||||
<th className="py-3 px-4 text-center font-bold">구분</th>
|
||||
{sajuData.hour && <th className="py-3 px-4 text-center font-bold">시주</th>}
|
||||
<th className="py-3 px-4 text-center font-bold">일주</th>
|
||||
<th className="py-3 px-4 text-center font-bold">월주</th>
|
||||
<th className="py-3 px-4 text-center font-bold">년주</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{/* 천간 */}
|
||||
<tr className="border-b border-gray-200">
|
||||
<td className="py-3 px-4 text-center font-semibold text-[#173658] bg-[#F3E7E3]">천간</td>
|
||||
{sajuData.hour && (
|
||||
<td className="py-3 px-4 text-center">
|
||||
<div className="text-2xl font-bold text-[#173658]">{sajuData.hour.stem}</div>
|
||||
<div className="text-xs text-[#5d6d7e] mt-1">{sajuData.hour.stemKr}</div>
|
||||
</td>
|
||||
)}
|
||||
<td className="py-3 px-4 text-center bg-[#d4af37]/10">
|
||||
<div className="text-2xl font-bold text-[#173658]">{sajuData.day.stem}</div>
|
||||
<div className="text-xs text-[#5d6d7e] mt-1">{sajuData.day.stemKr}</div>
|
||||
<div className="text-xs text-[#d4af37] font-bold mt-1">일간</div>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-center">
|
||||
<div className="text-2xl font-bold text-[#173658]">{sajuData.month.stem}</div>
|
||||
<div className="text-xs text-[#5d6d7e] mt-1">{sajuData.month.stemKr}</div>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-center">
|
||||
<div className="text-2xl font-bold text-[#173658]">{sajuData.year.stem}</div>
|
||||
<div className="text-xs text-[#5d6d7e] mt-1">{sajuData.year.stemKr}</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/* 지지 */}
|
||||
<tr className="border-b border-gray-200">
|
||||
<td className="py-3 px-4 text-center font-semibold text-[#173658] bg-[#F3E7E3]">지지</td>
|
||||
{sajuData.hour && (
|
||||
<td className="py-3 px-4 text-center">
|
||||
<div className="text-2xl font-bold text-[#173658]">{sajuData.hour.branch}</div>
|
||||
<div className="text-xs text-[#5d6d7e] mt-1">{sajuData.hour.branchKr}</div>
|
||||
</td>
|
||||
)}
|
||||
<td className="py-3 px-4 text-center bg-[#d4af37]/10">
|
||||
<div className="text-2xl font-bold text-[#173658]">{sajuData.day.branch}</div>
|
||||
<div className="text-xs text-[#5d6d7e] mt-1">{sajuData.day.branchKr}</div>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-center">
|
||||
<div className="text-2xl font-bold text-[#173658]">{sajuData.month.branch}</div>
|
||||
<div className="text-xs text-[#5d6d7e] mt-1">{sajuData.month.branchKr}</div>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-center">
|
||||
<div className="text-2xl font-bold text-[#173658]">{sajuData.year.branch}</div>
|
||||
<div className="text-xs text-[#5d6d7e] mt-1">{sajuData.year.branchKr}</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/* 지장간 */}
|
||||
<tr className="border-b border-gray-200">
|
||||
<td className="py-3 px-4 text-center font-semibold text-[#173658] bg-[#F3E7E3]">
|
||||
<div>지장간</div>
|
||||
<div className="text-xs text-[#5d6d7e] font-normal">숨은 천간</div>
|
||||
</td>
|
||||
{(() => {
|
||||
const pillars = sajuData.hour
|
||||
? [analysis.hiddenStems.find(h => h.pillar === '시주'), analysis.hiddenStems.find(h => h.pillar === '일주'), analysis.hiddenStems.find(h => h.pillar === '월주'), analysis.hiddenStems.find(h => h.pillar === '년주')]
|
||||
: [analysis.hiddenStems.find(h => h.pillar === '일주'), analysis.hiddenStems.find(h => h.pillar === '월주'), analysis.hiddenStems.find(h => h.pillar === '년주')];
|
||||
return pillars.map((h, idx) => (
|
||||
<td key={idx} className={`py-2 px-2 text-center ${h?.pillar === '일주' ? 'bg-[#d4af37]/10' : ''}`}>
|
||||
{h && (
|
||||
<div className="flex flex-wrap justify-center gap-1">
|
||||
{h.stems.map((s, si) => (
|
||||
<span
|
||||
key={si}
|
||||
className={`inline-block px-2 py-0.5 rounded text-xs font-semibold border ${elementBgColors[s.element] || 'bg-gray-100'}`}
|
||||
title={s.role}
|
||||
>
|
||||
{s.stemKr}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
));
|
||||
})()}
|
||||
</tr>
|
||||
|
||||
{/* 십성 */}
|
||||
<tr className="border-b border-gray-200">
|
||||
<td className="py-3 px-4 text-center font-semibold text-[#173658] bg-[#F3E7E3]">십성</td>
|
||||
{sajuData.hour && (
|
||||
<td className="py-3 px-4 text-center">
|
||||
<div className="text-sm font-bold text-[#173658]">{sajuData.hour.tenGod}</div>
|
||||
</td>
|
||||
)}
|
||||
<td className="py-3 px-4 text-center bg-[#d4af37]/10">
|
||||
<div className="text-sm font-bold text-[#173658]">{sajuData.day.tenGod}</div>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-center">
|
||||
<div className="text-sm font-bold text-[#173658]">{sajuData.month.tenGod}</div>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-center">
|
||||
<div className="text-sm font-bold text-[#173658]">{sajuData.year.tenGod}</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/* 십이운성 */}
|
||||
<tr>
|
||||
<td className="py-3 px-4 text-center font-semibold text-[#173658] bg-[#F3E7E3]">십이운성</td>
|
||||
{sajuData.hour && (
|
||||
<td className="py-3 px-4 text-center">
|
||||
<div className="text-sm font-bold text-[#173658]">{sajuData.hour.fortune}</div>
|
||||
</td>
|
||||
)}
|
||||
<td className="py-3 px-4 text-center bg-[#d4af37]/10">
|
||||
<div className="text-sm font-bold text-[#173658]">{sajuData.day.fortune}</div>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-center">
|
||||
<div className="text-sm font-bold text-[#173658]">{sajuData.month.fortune}</div>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-center">
|
||||
<div className="text-sm font-bold text-[#173658]">{sajuData.year.fortune}</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 지지 상호작용 */}
|
||||
{analysis.branchInteractions.length > 0 && (
|
||||
<div className="mt-6 pt-6 border-t border-[#173658]/10">
|
||||
<h3 className="text-base font-bold text-[#173658] mb-3 text-center">
|
||||
지지 상호작용
|
||||
</h3>
|
||||
<div className="flex flex-wrap justify-center gap-2">
|
||||
{analysis.branchInteractions.map((inter, idx) => {
|
||||
const isPositive = inter.type.includes('합');
|
||||
const isNegative = inter.type.includes('충') || inter.type.includes('형');
|
||||
const colorClass = isPositive
|
||||
? 'bg-emerald-50 border-emerald-400 text-emerald-800'
|
||||
: isNegative
|
||||
? 'bg-red-50 border-red-400 text-red-800'
|
||||
: 'bg-amber-50 border-amber-400 text-amber-800';
|
||||
return (
|
||||
<span key={idx} className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-bold border ${colorClass}`}>
|
||||
{inter.type} {inter.branchesKr.join('')}
|
||||
{inter.resultElement && ` → ${FIVE_ELEMENTS_KR[inter.resultElement as keyof typeof FIVE_ELEMENTS_KR]}`}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 오행 균형 */}
|
||||
<div className="mt-6 pt-6 border-t border-[#173658]/10">
|
||||
<h3 className="text-base font-bold text-[#173658] mb-4 text-center">
|
||||
오행 균형
|
||||
</h3>
|
||||
<div className="grid grid-cols-5 gap-2">
|
||||
{Object.entries(elementScores).map(([element, score]) => (
|
||||
<div key={element} className="text-center">
|
||||
<div className={`text-xl font-bold mb-1 ${elementColors[element] || ''}`}>{element}</div>
|
||||
<div className="text-xs text-[#5d6d7e] mb-2">
|
||||
{FIVE_ELEMENTS_KR[element as keyof typeof FIVE_ELEMENTS_KR]}
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2 mb-1">
|
||||
<div
|
||||
className={`h-2 rounded-full transition-all ${element === sajuData.day.element
|
||||
? 'bg-gradient-to-r from-[#173658] to-[#d4af37]'
|
||||
: 'bg-gray-400'
|
||||
}`}
|
||||
style={{ width: `${Math.max(score, 5)}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<div className="text-xs font-bold text-[#173658]">{score}%</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 분석 카드 그리드 */}
|
||||
<div className="grid md:grid-cols-2 gap-6 mb-6">
|
||||
{/* 신강/신약 + 용신 카드 */}
|
||||
<div className="glass-panel-light rounded-2xl p-6">
|
||||
<h3 className="text-xl font-bold text-[#173658] mb-4">
|
||||
일간 세력 분석
|
||||
</h3>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<span className={`inline-block px-4 py-2 rounded-xl text-base font-bold ${
|
||||
analysis.dayMasterStrength.result === '신강'
|
||||
? 'bg-red-100 text-red-700 border-2 border-red-400'
|
||||
: analysis.dayMasterStrength.result === '신약'
|
||||
? 'bg-blue-100 text-blue-700 border-2 border-blue-400'
|
||||
: 'bg-green-100 text-green-700 border-2 border-green-400'
|
||||
}`}>
|
||||
{analysis.dayMasterStrength.result}
|
||||
</span>
|
||||
<span className="text-[#5d6d7e] text-sm">점수: {analysis.dayMasterStrength.score}</span>
|
||||
</div>
|
||||
<ul className="space-y-1 text-sm text-[#5d6d7e] mb-6">
|
||||
{analysis.dayMasterStrength.reasons.map((r, i) => (
|
||||
<li key={i} className="flex items-start">
|
||||
<span className="text-[#d4af37] mr-2">-</span>
|
||||
<span>{r}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div className="border-t border-[#173658]/10 pt-4">
|
||||
<h4 className="font-bold text-[#173658] mb-3">용신 / 희신 / 기신</h4>
|
||||
<div className="flex flex-wrap gap-2 mb-3">
|
||||
<span className={`px-3 py-1.5 rounded-lg text-xs font-bold border ${elementBgColors[analysis.yongShin.yongShin] || 'bg-gray-100'}`}>
|
||||
용신: {analysis.yongShin.yongShinKr}
|
||||
</span>
|
||||
<span className={`px-3 py-1.5 rounded-lg text-xs font-bold border ${elementBgColors[analysis.yongShin.heeShin] || 'bg-gray-100'}`}>
|
||||
희신: {analysis.yongShin.heeShinKr}
|
||||
</span>
|
||||
<span className="px-3 py-1.5 rounded-lg text-xs font-bold bg-gray-200 border border-gray-400 text-gray-700">
|
||||
기신: {analysis.yongShin.giShinKr}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-[#5d6d7e] leading-relaxed">{analysis.yongShin.explanation}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 신살 + 공망 카드 */}
|
||||
<div className="glass-panel-light rounded-2xl p-6">
|
||||
<h3 className="text-xl font-bold text-[#173658] mb-4">
|
||||
신살 (神煞)
|
||||
</h3>
|
||||
{analysis.shinsal.length > 0 ? (
|
||||
<div className="space-y-2 mb-6">
|
||||
{analysis.shinsal.map((s, i) => (
|
||||
<div key={i} className="flex items-start gap-2 p-3 rounded-xl bg-[#F3E7E3]">
|
||||
<span className="inline-block px-2 py-1 bg-[#173658] text-white rounded-lg text-xs font-bold whitespace-nowrap">
|
||||
{s.name}
|
||||
</span>
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-[#173658]">
|
||||
{s.pillar} {s.branchKr}
|
||||
</div>
|
||||
<div className="text-xs text-[#5d6d7e] mt-0.5">{s.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-[#5d6d7e] text-sm mb-6">특별한 신살이 발견되지 않았습니다.</p>
|
||||
)}
|
||||
|
||||
<div className="border-t border-[#173658]/10 pt-4">
|
||||
<h4 className="font-bold text-[#173658] mb-2">공망 (空亡)</h4>
|
||||
<div className="flex gap-2 mb-2">
|
||||
{analysis.gongmang.branchesKr.map((bk, i) => (
|
||||
<span key={i} className="px-3 py-1.5 bg-[#173658] text-white rounded-lg text-sm font-bold">
|
||||
{bk}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-[#5d6d7e] leading-relaxed">{analysis.gongmang.description}</p>
|
||||
</div>
|
||||
|
||||
{/* 세운 정보 */}
|
||||
<div className="border-t border-[#173658]/10 pt-4 mt-4">
|
||||
<h4 className="font-bold text-[#173658] mb-2">
|
||||
{analysis.seun.year}년 세운
|
||||
</h4>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className={`px-3 py-1.5 rounded-lg text-sm font-bold border ${elementBgColors[analysis.seun.element] || 'bg-gray-100'}`}>
|
||||
{analysis.seun.stemKr}{analysis.seun.branchKr}
|
||||
</span>
|
||||
<span className="text-sm text-[#5d6d7e]">{analysis.seun.elementKr} 기운</span>
|
||||
</div>
|
||||
{analysis.seun.interactions.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 mt-2">
|
||||
{analysis.seun.interactions.map((si, i) => (
|
||||
<span key={i} className={`text-xs px-2 py-1 rounded-full font-semibold ${
|
||||
si.type.includes('합') ? 'bg-emerald-50 text-emerald-700' : 'bg-red-50 text-red-700'
|
||||
}`}>
|
||||
{si.type} {si.branchesKr.join('')}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<td className="py-4 px-6 text-center bg-blue-50">
|
||||
<div className="text-3xl font-bold text-blue-600">{sajuData.day.stem}</div>
|
||||
<div className="text-sm text-gray-600 mt-1">{sajuData.day.stemKr}</div>
|
||||
<div className="text-xs text-blue-600 font-semibold mt-1">일간 (日干)</div>
|
||||
</td>
|
||||
<td className="py-4 px-6 text-center">
|
||||
<div className="text-3xl font-bold text-indigo-600">{sajuData.month.stem}</div>
|
||||
<div className="text-sm text-gray-600 mt-1">{sajuData.month.stemKr}</div>
|
||||
</td>
|
||||
<td className="py-4 px-6 text-center">
|
||||
<div className="text-3xl font-bold text-indigo-600">{sajuData.year.stem}</div>
|
||||
<div className="text-sm text-gray-600 mt-1">{sajuData.year.stemKr}</div>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 지지 */}
|
||||
<tr className="border-b border-gray-200 hover:bg-purple-50 transition">
|
||||
<td className="py-4 px-6 text-center font-semibold text-gray-700">지지 (地支)</td>
|
||||
{sajuData.hour && (
|
||||
<td className="py-4 px-6 text-center">
|
||||
<div className="text-3xl font-bold text-purple-600">{sajuData.hour.branch}</div>
|
||||
<div className="text-sm text-gray-600 mt-1">{sajuData.hour.branchKr}</div>
|
||||
</td>
|
||||
)}
|
||||
<td className="py-4 px-6 text-center bg-blue-50">
|
||||
<div className="text-3xl font-bold text-blue-600">{sajuData.day.branch}</div>
|
||||
<div className="text-sm text-gray-600 mt-1">{sajuData.day.branchKr}</div>
|
||||
</td>
|
||||
<td className="py-4 px-6 text-center">
|
||||
<div className="text-3xl font-bold text-purple-600">{sajuData.month.branch}</div>
|
||||
<div className="text-sm text-gray-600 mt-1">{sajuData.month.branchKr}</div>
|
||||
</td>
|
||||
<td className="py-4 px-6 text-center">
|
||||
<div className="text-3xl font-bold text-purple-600">{sajuData.year.branch}</div>
|
||||
<div className="text-sm text-gray-600 mt-1">{sajuData.year.branchKr}</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* AI 상세 해석 */}
|
||||
<AiInterpretationSection sajuData={sajuData} currentDaeun={currentDaeun} daeunList={daeunList} />
|
||||
|
||||
{/* 지장간 (NEW) */}
|
||||
<tr className="border-b border-gray-200 hover:bg-amber-50 transition">
|
||||
<td className="py-4 px-6 text-center font-semibold text-gray-700">
|
||||
지장간 (藏干)
|
||||
<div className="text-xs text-gray-400 mt-1">숨은 천간</div>
|
||||
</td>
|
||||
{(() => {
|
||||
const pillars = sajuData.hour
|
||||
? [analysis.hiddenStems.find(h => h.pillar === '시주'), analysis.hiddenStems.find(h => h.pillar === '일주'), analysis.hiddenStems.find(h => h.pillar === '월주'), analysis.hiddenStems.find(h => h.pillar === '년주')]
|
||||
: [analysis.hiddenStems.find(h => h.pillar === '일주'), analysis.hiddenStems.find(h => h.pillar === '월주'), analysis.hiddenStems.find(h => h.pillar === '년주')];
|
||||
return pillars.map((h, idx) => (
|
||||
<td key={idx} className={`py-3 px-4 text-center ${h?.pillar === '일주' ? 'bg-blue-50' : ''}`}>
|
||||
{h && (
|
||||
<div className="flex flex-wrap justify-center gap-1">
|
||||
{h.stems.map((s, si) => (
|
||||
<span
|
||||
key={si}
|
||||
className={`inline-block px-2 py-1 rounded text-xs font-semibold border ${elementBgColors[s.element] || 'bg-gray-100'}`}
|
||||
title={s.role}
|
||||
>
|
||||
{s.stemKr}({FIVE_ELEMENTS_KR[s.element as keyof typeof FIVE_ELEMENTS_KR]})
|
||||
</span>
|
||||
))}
|
||||
{/* 대운 (大運) */}
|
||||
<div className="glass-panel-light rounded-2xl p-6 md:p-8 mb-6">
|
||||
<h2 className="text-2xl font-bold text-[#173658] mb-6 text-center">
|
||||
대운 (大運) - 10년 주기 운세
|
||||
</h2>
|
||||
|
||||
{currentDaeun && (
|
||||
<div className="bg-gradient-to-r from-[#173658] to-[#1e426a] rounded-2xl p-6 mb-6 text-white">
|
||||
<h3 className="text-xl font-bold mb-4 text-center">현재 대운</h3>
|
||||
<div className="text-center mb-4">
|
||||
<div className="text-4xl font-bold mb-2">
|
||||
{currentDaeun.stem}{currentDaeun.branch}
|
||||
</div>
|
||||
<div className="text-lg mb-2">
|
||||
{currentDaeun.stemKr}{currentDaeun.branchKr}
|
||||
</div>
|
||||
<div className="text-base opacity-90">
|
||||
{currentDaeun.age}세 ~ {currentDaeun.age + 9}세 ({currentDaeun.startYear}년 ~ {currentDaeun.endYear}년)
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-center leading-relaxed text-sm">
|
||||
{getDaeunDescription(currentDaeun, sajuData.day.stem)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
{daeunList.map((daeun, index) => {
|
||||
const isCurrent = currentDaeun &&
|
||||
daeun.startYear === currentDaeun.startYear &&
|
||||
daeun.endYear === currentDaeun.endYear;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={`rounded-xl p-4 border-2 transition ${isCurrent
|
||||
? 'bg-[#d4af37]/20 border-[#d4af37]'
|
||||
: 'bg-white border-[#173658]/20'
|
||||
}`}
|
||||
>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-[#173658] mb-1">
|
||||
{daeun.stem}{daeun.branch}
|
||||
</div>
|
||||
<div className="text-sm text-[#5d6d7e] mb-2">
|
||||
{daeun.stemKr}{daeun.branchKr}
|
||||
</div>
|
||||
<div className="text-xs text-[#5d6d7e]">
|
||||
{daeun.age}세 ~ {daeun.age + 9}세
|
||||
</div>
|
||||
<div className="text-xs text-[#5d6d7e]">
|
||||
{daeun.startYear} ~ {daeun.endYear}
|
||||
</div>
|
||||
{isCurrent && (
|
||||
<div className="mt-2">
|
||||
<span className="inline-block bg-[#173658] text-white text-xs px-3 py-1 rounded-full font-semibold">
|
||||
현재
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
));
|
||||
})()}
|
||||
</tr>
|
||||
|
||||
{/* 십성 */}
|
||||
<tr className="border-b border-gray-200 hover:bg-emerald-50 transition">
|
||||
<td className="py-4 px-6 text-center font-semibold text-gray-700">십성 (十星)</td>
|
||||
{sajuData.hour && (
|
||||
<td className="py-4 px-6 text-center">
|
||||
<div className="text-lg font-semibold text-emerald-600">{sajuData.hour.tenGod}</div>
|
||||
</td>
|
||||
)}
|
||||
<td className="py-4 px-6 text-center bg-blue-50">
|
||||
<div className="text-lg font-semibold text-blue-600">{sajuData.day.tenGod}</div>
|
||||
</td>
|
||||
<td className="py-4 px-6 text-center">
|
||||
<div className="text-lg font-semibold text-emerald-600">{sajuData.month.tenGod}</div>
|
||||
</td>
|
||||
<td className="py-4 px-6 text-center">
|
||||
<div className="text-lg font-semibold text-emerald-600">{sajuData.year.tenGod}</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/* 십이운성 */}
|
||||
<tr className="hover:bg-pink-50 transition">
|
||||
<td className="py-4 px-6 text-center font-semibold text-gray-700">십이운성</td>
|
||||
{sajuData.hour && (
|
||||
<td className="py-4 px-6 text-center">
|
||||
<div className="text-lg font-semibold text-pink-600">{sajuData.hour.fortune}</div>
|
||||
</td>
|
||||
)}
|
||||
<td className="py-4 px-6 text-center bg-blue-50">
|
||||
<div className="text-lg font-semibold text-blue-600">{sajuData.day.fortune}</div>
|
||||
</td>
|
||||
<td className="py-4 px-6 text-center">
|
||||
<div className="text-lg font-semibold text-pink-600">{sajuData.month.fortune}</div>
|
||||
</td>
|
||||
<td className="py-4 px-6 text-center">
|
||||
<div className="text-lg font-semibold text-pink-600">{sajuData.year.fortune}</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 지지 상호작용 (합/충/형/파/해) */}
|
||||
{analysis.branchInteractions.length > 0 && (
|
||||
<div className="mt-6 pt-6 border-t border-gray-100">
|
||||
<h3 className="text-lg font-bold text-gray-900 mb-3 flex items-center justify-center">
|
||||
<span className="mr-2">🔗</span> 지지 상호작용
|
||||
</h3>
|
||||
<div className="flex flex-wrap justify-center gap-2">
|
||||
{analysis.branchInteractions.map((inter, idx) => {
|
||||
const isPositive = inter.type.includes('합');
|
||||
const isNegative = inter.type.includes('충') || inter.type.includes('형');
|
||||
const colorClass = isPositive
|
||||
? 'bg-emerald-50 border-emerald-300 text-emerald-800'
|
||||
: isNegative
|
||||
? 'bg-red-50 border-red-300 text-red-800'
|
||||
: 'bg-amber-50 border-amber-300 text-amber-800';
|
||||
return (
|
||||
<span key={idx} className={`inline-flex items-center px-3 py-1.5 rounded-full text-sm font-semibold border ${colorClass}`}>
|
||||
{inter.type} {inter.branchesKr.join('')}
|
||||
{inter.resultElement && ` → ${FIVE_ELEMENTS_KR[inter.resultElement as keyof typeof FIVE_ELEMENTS_KR]}`}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 오행 균형 시각화 */}
|
||||
<div className="mt-8 pt-8 border-t border-gray-100">
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center justify-center">
|
||||
<span className="text-2xl mr-2">⚖️</span>
|
||||
내 사주의 오행 균형
|
||||
<span className="text-sm font-normal text-gray-500 ml-2">(지장간 가중치 적용)</span>
|
||||
</h3>
|
||||
<div className="grid grid-cols-5 gap-3 max-w-2xl mx-auto">
|
||||
{Object.entries(elementScores).map(([element, score]) => (
|
||||
<div key={element} className="text-center">
|
||||
<div className={`text-2xl font-bold mb-1 ${elementColors[element] || ''}`}>{element}</div>
|
||||
<div className="text-sm text-gray-600 mb-2">
|
||||
{FIVE_ELEMENTS_KR[element as keyof typeof FIVE_ELEMENTS_KR]}
|
||||
<span className="text-xs text-gray-400 ml-1">
|
||||
({analysis.elementBalance[element as keyof typeof analysis.elementBalance]}점)
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-3 mb-1">
|
||||
<div
|
||||
className={`h-3 rounded-full transition-all ${element === sajuData.day.element
|
||||
? 'bg-gradient-to-r from-indigo-500 to-purple-500'
|
||||
: 'bg-gray-400'
|
||||
}`}
|
||||
style={{ width: `${Math.max(score, 5)}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<div className="text-xs font-semibold text-gray-700">{score}%</div>
|
||||
</div>
|
||||
))}
|
||||
{/* 추가 기능 버튼 */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<Link
|
||||
href={`/fortune?${new URLSearchParams(params as any).toString()}`}
|
||||
className="glass-panel-light rounded-xl p-6 card-hover text-center"
|
||||
>
|
||||
<div className="text-3xl mb-3">🌟</div>
|
||||
<h3 className="text-lg font-bold text-[#173658] mb-1">오늘의 운세</h3>
|
||||
<p className="text-[#5d6d7e] text-sm">오늘의 운을 확인하기</p>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/compatibility"
|
||||
className="glass-panel-light rounded-xl p-6 card-hover text-center"
|
||||
>
|
||||
<div className="text-3xl mb-3">💕</div>
|
||||
<h3 className="text-lg font-bold text-[#173658] mb-1">궁합 보기</h3>
|
||||
<p className="text-[#5d6d7e] text-sm">두 사람의 궁합 확인</p>
|
||||
</Link>
|
||||
|
||||
<PDFButton
|
||||
elementId="pdf-content"
|
||||
filename={`사주팔자_${yearNum}${monthNum}${dayNum}.pdf`}
|
||||
buttonText="PDF 저장"
|
||||
/>
|
||||
|
||||
<ShareButtons
|
||||
title={`내 사주팔자 - ${yearNum}년생 ${gender === 'male' ? '남성' : '여성'}`}
|
||||
description={`일간: ${sajuData.day.stem}(${sajuData.day.stemKr}) | ${sajuData.day.element}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 신강/신약 + 용신 + 신살 카드 */}
|
||||
<div className="grid md:grid-cols-2 gap-6 mb-8">
|
||||
{/* 신강/신약 + 용신 카드 */}
|
||||
<div className="bg-white rounded-3xl shadow-xl p-8 border border-gray-100">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-4 flex items-center">
|
||||
<span className="mr-2">⚡</span> 일간 세력 분석
|
||||
</h3>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<span className={`inline-block px-4 py-2 rounded-xl text-lg font-bold ${
|
||||
analysis.dayMasterStrength.result === '신강'
|
||||
? 'bg-red-100 text-red-700'
|
||||
: analysis.dayMasterStrength.result === '신약'
|
||||
? 'bg-blue-100 text-blue-700'
|
||||
: 'bg-green-100 text-green-700'
|
||||
}`}>
|
||||
{analysis.dayMasterStrength.result}
|
||||
</span>
|
||||
<span className="text-gray-500 text-sm">점수: {analysis.dayMasterStrength.score}</span>
|
||||
</div>
|
||||
<ul className="space-y-1.5 text-sm text-gray-600 mb-6">
|
||||
{analysis.dayMasterStrength.reasons.map((r, i) => (
|
||||
<li key={i} className="flex items-start">
|
||||
<span className="text-indigo-400 mr-2 mt-0.5">-</span>
|
||||
<span>{r}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div className="border-t border-gray-100 pt-4">
|
||||
<h4 className="font-bold text-gray-800 mb-3">용신 / 희신 / 기신</h4>
|
||||
<div className="flex flex-wrap gap-2 mb-3">
|
||||
<span className={`px-3 py-1.5 rounded-lg text-sm font-bold border ${elementBgColors[analysis.yongShin.yongShin] || 'bg-gray-100'}`}>
|
||||
용신: {analysis.yongShin.yongShinKr}({analysis.yongShin.yongShin})
|
||||
</span>
|
||||
<span className={`px-3 py-1.5 rounded-lg text-sm font-bold border ${elementBgColors[analysis.yongShin.heeShin] || 'bg-gray-100'}`}>
|
||||
희신: {analysis.yongShin.heeShinKr}({analysis.yongShin.heeShin})
|
||||
</span>
|
||||
<span className="px-3 py-1.5 rounded-lg text-sm font-bold bg-gray-200 border border-gray-400 text-gray-700">
|
||||
기신: {analysis.yongShin.giShinKr}({analysis.yongShin.giShin})
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 leading-relaxed">{analysis.yongShin.explanation}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 신살 + 공망 카드 */}
|
||||
<div className="bg-white rounded-3xl shadow-xl p-8 border border-gray-100">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-4 flex items-center">
|
||||
<span className="mr-2">🌟</span> 신살 (神煞)
|
||||
</h3>
|
||||
{analysis.shinsal.length > 0 ? (
|
||||
<div className="space-y-3 mb-6">
|
||||
{analysis.shinsal.map((s, i) => (
|
||||
<div key={i} className="flex items-start gap-3 p-3 rounded-xl bg-gray-50">
|
||||
<span className="inline-block px-2 py-1 bg-indigo-100 text-indigo-700 rounded-lg text-xs font-bold whitespace-nowrap">
|
||||
{s.name}
|
||||
</span>
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-gray-800">
|
||||
{s.pillar} {s.branchKr}({s.branch})
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-0.5">{s.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-500 text-sm mb-6">특별한 신살이 발견되지 않았습니다.</p>
|
||||
)}
|
||||
|
||||
<div className="border-t border-gray-100 pt-4">
|
||||
<h4 className="font-bold text-gray-800 mb-2 flex items-center">
|
||||
<span className="mr-2">🕳️</span> 공망 (空亡)
|
||||
</h4>
|
||||
<div className="flex gap-2 mb-2">
|
||||
{analysis.gongmang.branchesKr.map((bk, i) => (
|
||||
<span key={i} className="px-3 py-1.5 bg-gray-800 text-white rounded-lg text-sm font-bold">
|
||||
{bk}({analysis.gongmang.branches[i]})
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 leading-relaxed">{analysis.gongmang.description}</p>
|
||||
</div>
|
||||
|
||||
{/* 세운 정보 */}
|
||||
<div className="border-t border-gray-100 pt-4 mt-4">
|
||||
<h4 className="font-bold text-gray-800 mb-2 flex items-center">
|
||||
<span className="mr-2">📅</span> {analysis.seun.year}년 세운
|
||||
</h4>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className={`px-3 py-1.5 rounded-lg text-sm font-bold border ${elementBgColors[analysis.seun.element] || 'bg-gray-100'}`}>
|
||||
{analysis.seun.stemKr}{analysis.seun.branchKr} ({analysis.seun.stem}{analysis.seun.branch})
|
||||
</span>
|
||||
<span className="text-sm text-gray-500">{analysis.seun.elementKr}({analysis.seun.element}) 기운</span>
|
||||
</div>
|
||||
{analysis.seun.interactions.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 mt-2">
|
||||
{analysis.seun.interactions.map((si, i) => (
|
||||
<span key={i} className={`text-xs px-2 py-1 rounded-full font-semibold ${
|
||||
si.type.includes('합') ? 'bg-emerald-50 text-emerald-700' : 'bg-red-50 text-red-700'
|
||||
}`}>
|
||||
{si.type} {si.branchesKr.join('')}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* AI 상세 해석 */}
|
||||
<AiInterpretationSection sajuData={sajuData} currentDaeun={currentDaeun} daeunList={daeunList} />
|
||||
|
||||
{/* 대운 (大運) */}
|
||||
<div className="bg-white rounded-3xl shadow-2xl p-8 md:p-12 mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
|
||||
대운 (大運) - 10년 주기 운세
|
||||
</h2>
|
||||
|
||||
{currentDaeun && (
|
||||
<div className="bg-gradient-to-r from-indigo-500 to-purple-500 rounded-2xl p-6 mb-8 text-white">
|
||||
<h3 className="text-2xl font-bold mb-4 text-center">현재 대운</h3>
|
||||
<div className="text-center mb-4">
|
||||
<div className="text-5xl font-bold mb-2">
|
||||
{currentDaeun.stem}{currentDaeun.branch}
|
||||
</div>
|
||||
<div className="text-xl mb-2">
|
||||
{currentDaeun.stemKr}{currentDaeun.branchKr}
|
||||
</div>
|
||||
<div className="text-lg opacity-90">
|
||||
{currentDaeun.age}세 ~ {currentDaeun.age + 9}세 ({currentDaeun.startYear}년 ~ {currentDaeun.endYear}년)
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-center leading-relaxed">
|
||||
{getDaeunDescription(currentDaeun, sajuData.day.stem)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{daeunList.map((daeun, index) => {
|
||||
const isCurrent = currentDaeun &&
|
||||
daeun.startYear === currentDaeun.startYear &&
|
||||
daeun.endYear === currentDaeun.endYear;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={`rounded-xl p-4 border-2 transition ${isCurrent
|
||||
? 'bg-indigo-50 border-indigo-400'
|
||||
: 'bg-gray-50 border-gray-200 hover:border-indigo-300'
|
||||
}`}
|
||||
>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-gray-900 mb-1">
|
||||
{daeun.stem}{daeun.branch}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600 mb-2">
|
||||
{daeun.stemKr}{daeun.branchKr}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
{daeun.age}세 ~ {daeun.age + 9}세
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">
|
||||
{daeun.startYear} ~ {daeun.endYear}
|
||||
</div>
|
||||
{isCurrent && (
|
||||
<div className="mt-2">
|
||||
<span className="inline-block bg-indigo-600 text-white text-xs px-3 py-1 rounded-full font-semibold">
|
||||
현재
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 추가 기능 버튼 */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Link
|
||||
href={`/fortune?${new URLSearchParams(params as any).toString()}`}
|
||||
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="/compatibility"
|
||||
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={`사주팔자_${yearNum}${monthNum}${dayNum}.pdf`}
|
||||
buttonText="사주 PDF 저장"
|
||||
/>
|
||||
|
||||
<ShareButtons
|
||||
title={`내 사주팔자 - ${yearNum}년생 ${gender === 'male' ? '남성' : '여성'}`}
|
||||
description={`일간: ${sajuData.day.stem}(${sajuData.day.stemKr}) | ${sajuData.day.element}`}
|
||||
/>
|
||||
</main>
|
||||
</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">© 2025 쟁승메이드. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user