gahusb
08d6f71fd1
- 사주팔자 계산 라이브러리 구현 (천간, 지지, 십성, 십이운성) - 사주 결과 페이지 구현 (사주팔자 표 및 해석) - 오늘의 운세 페이지 구현 (일일 운세, 행운의 요소) - 궁합 보기 기능 구현 (두 사람 입력 폼) - 궁합 결과 페이지 구현 (종합 점수, 세부 분석) - 페이지 간 네비게이션 연결 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
396 lines
16 KiB
TypeScript
396 lines
16 KiB
TypeScript
import Link from 'next/link';
|
||
import { calculateSaju, FIVE_ELEMENTS } from '@/lib/saju-calculator';
|
||
|
||
interface PageProps {
|
||
searchParams: Promise<{
|
||
year1: string;
|
||
month1: string;
|
||
day1: string;
|
||
hour1?: string;
|
||
gender1: 'male' | 'female';
|
||
year2: string;
|
||
month2: string;
|
||
day2: string;
|
||
hour2?: string;
|
||
gender2: 'male' | 'female';
|
||
}>;
|
||
}
|
||
|
||
export default async function CompatibilityResultPage({ searchParams }: PageProps) {
|
||
const params = await searchParams;
|
||
const { year1, month1, day1, hour1, gender1, year2, month2, day2, hour2, gender2 } = params;
|
||
|
||
// Person 1 Saju
|
||
const saju1 = calculateSaju(
|
||
parseInt(year1),
|
||
parseInt(month1),
|
||
parseInt(day1),
|
||
hour1 ? parseInt(hour1) : null,
|
||
gender1
|
||
);
|
||
|
||
// Person 2 Saju
|
||
const saju2 = calculateSaju(
|
||
parseInt(year2),
|
||
parseInt(month2),
|
||
parseInt(day2),
|
||
hour2 ? parseInt(hour2) : null,
|
||
gender2
|
||
);
|
||
|
||
// 궁합 점수 계산
|
||
const calculateCompatibility = () => {
|
||
let score = 50; // 기본 점수
|
||
|
||
// 오행 상생/상극 관계
|
||
const element1 = saju1.day.element;
|
||
const element2 = saju2.day.element;
|
||
|
||
const produceMap: { [key: string]: string } = {
|
||
'木': '火', '火': '土', '土': '金', '金': '水', '水': '木'
|
||
};
|
||
const overcomeMap: { [key: string]: string } = {
|
||
'木': '土', '火': '金', '土': '水', '金': '木', '水': '火'
|
||
};
|
||
|
||
// 같은 오행: 보통
|
||
if (element1 === element2) {
|
||
score += 10;
|
||
}
|
||
// 상생 관계: 매우 좋음
|
||
else if (produceMap[element1] === element2 || produceMap[element2] === element1) {
|
||
score += 25;
|
||
}
|
||
// 상극 관계: 주의 필요
|
||
else if (overcomeMap[element1] === element2 || overcomeMap[element2] === element1) {
|
||
score -= 10;
|
||
}
|
||
|
||
// 지지 삼합/육합 관계 확인
|
||
const branch1 = saju1.day.branch;
|
||
const branch2 = saju2.day.branch;
|
||
|
||
// 육합 (六合) - 특별히 좋은 궁합
|
||
const sixHarmony: { [key: string]: string } = {
|
||
'子': '丑', '丑': '子',
|
||
'寅': '亥', '亥': '寅',
|
||
'卯': '戌', '戌': '卯',
|
||
'辰': '酉', '酉': '辰',
|
||
'巳': '申', '申': '巳',
|
||
'午': '未', '未': '午'
|
||
};
|
||
|
||
if (sixHarmony[branch1] === branch2) {
|
||
score += 20;
|
||
}
|
||
|
||
// 삼합 (三合) - 좋은 궁합
|
||
const threeHarmony = [
|
||
['申', '子', '辰'], // 수국
|
||
['寅', '午', '戌'], // 화국
|
||
['亥', '卯', '未'], // 목국
|
||
['巳', '酉', '丑'] // 금국
|
||
];
|
||
|
||
for (const harmony of threeHarmony) {
|
||
if (harmony.includes(branch1) && harmony.includes(branch2)) {
|
||
score += 15;
|
||
break;
|
||
}
|
||
}
|
||
|
||
// 충 (沖) - 나쁜 궁합
|
||
const conflict: { [key: string]: string } = {
|
||
'子': '午', '午': '子',
|
||
'丑': '未', '未': '丑',
|
||
'寅': '申', '申': '寅',
|
||
'卯': '酉', '酉': '卯',
|
||
'辰': '戌', '戌': '辰',
|
||
'巳': '亥', '亥': '巳'
|
||
};
|
||
|
||
if (conflict[branch1] === branch2) {
|
||
score -= 20;
|
||
}
|
||
|
||
return Math.min(100, Math.max(0, score));
|
||
};
|
||
|
||
const compatibilityScore = calculateCompatibility();
|
||
|
||
const getScoreGrade = (score: number): string => {
|
||
if (score >= 90) return 'S';
|
||
if (score >= 80) return 'A';
|
||
if (score >= 70) return 'B';
|
||
if (score >= 60) return 'C';
|
||
return 'D';
|
||
};
|
||
|
||
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 'from-pink-500 to-red-500';
|
||
if (score >= 80) return 'from-pink-400 to-purple-400';
|
||
if (score >= 70) return 'from-purple-400 to-indigo-400';
|
||
if (score >= 60) return 'from-indigo-400 to-blue-400';
|
||
return 'from-gray-400 to-gray-500';
|
||
};
|
||
|
||
// 세부 궁합 점수
|
||
const detailedScores = [
|
||
{ name: '연애운', score: compatibilityScore + Math.floor(Math.random() * 10 - 5), icon: '💑' },
|
||
{ name: '결혼운', score: compatibilityScore + Math.floor(Math.random() * 10 - 5), icon: '💍' },
|
||
{ name: '금전운', score: compatibilityScore + Math.floor(Math.random() * 10 - 5), icon: '💰' },
|
||
{ name: '사업운', score: compatibilityScore + Math.floor(Math.random() * 10 - 5), icon: '💼' },
|
||
].map(item => ({ ...item, score: Math.min(100, Math.max(0, item.score)) }));
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-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-pink-600 to-purple-600 bg-clip-text text-transparent">
|
||
🔮 사주보기
|
||
</Link>
|
||
<div className="flex gap-4">
|
||
<Link
|
||
href="/compatibility"
|
||
className="text-gray-700 hover:text-pink-600 transition font-medium"
|
||
>
|
||
다시 보기
|
||
</Link>
|
||
<Link
|
||
href="/"
|
||
className="text-gray-700 hover:text-pink-600 transition font-medium"
|
||
>
|
||
처음으로
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
{/* Result Content */}
|
||
<div 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">
|
||
두 사람의 사주팔자를 비교한 결과입니다
|
||
</p>
|
||
</div>
|
||
|
||
{/* 두 사람 정보 */}
|
||
<div className="grid md:grid-cols-2 gap-6 mb-12">
|
||
{/* Person 1 */}
|
||
<div className="bg-gradient-to-br from-pink-500 to-pink-600 rounded-2xl shadow-xl p-8 text-white">
|
||
<div className="text-center mb-6">
|
||
<div className="text-5xl mb-3">👤</div>
|
||
<h3 className="text-2xl font-bold">첫 번째 사람</h3>
|
||
<p className="text-pink-100 mt-2">
|
||
{saju1.birthDate.year}년 {saju1.birthDate.month}월 {saju1.birthDate.day}일
|
||
</p>
|
||
<p className="text-pink-100">
|
||
{gender1 === 'male' ? '남성' : '여성'}
|
||
</p>
|
||
</div>
|
||
<div className="bg-white/20 backdrop-blur-sm rounded-xl p-4">
|
||
<p className="text-center mb-2 font-semibold">일간 (日干)</p>
|
||
<div className="text-center">
|
||
<span className="text-4xl font-bold">{saju1.day.stem}</span>
|
||
<span className="text-2xl ml-2">({saju1.day.stemKr})</span>
|
||
</div>
|
||
<p className="text-center mt-2 text-pink-100">
|
||
{saju1.day.element} ({['木', '火', '土', '金', '水'].indexOf(saju1.day.element) >= 0
|
||
? ['목', '화', '토', '금', '수'][['木', '火', '土', '金', '水'].indexOf(saju1.day.element)]
|
||
: ''})
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Person 2 */}
|
||
<div className="bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl shadow-xl p-8 text-white">
|
||
<div className="text-center mb-6">
|
||
<div className="text-5xl mb-3">👤</div>
|
||
<h3 className="text-2xl font-bold">두 번째 사람</h3>
|
||
<p className="text-purple-100 mt-2">
|
||
{saju2.birthDate.year}년 {saju2.birthDate.month}월 {saju2.birthDate.day}일
|
||
</p>
|
||
<p className="text-purple-100">
|
||
{gender2 === 'male' ? '남성' : '여성'}
|
||
</p>
|
||
</div>
|
||
<div className="bg-white/20 backdrop-blur-sm rounded-xl p-4">
|
||
<p className="text-center mb-2 font-semibold">일간 (日干)</p>
|
||
<div className="text-center">
|
||
<span className="text-4xl font-bold">{saju2.day.stem}</span>
|
||
<span className="text-2xl ml-2">({saju2.day.stemKr})</span>
|
||
</div>
|
||
<p className="text-center mt-2 text-purple-100">
|
||
{saju2.day.element} ({['木', '火', '土', '金', '水'].indexOf(saju2.day.element) >= 0
|
||
? ['목', '화', '토', '금', '수'][['木', '火', '土', '金', '水'].indexOf(saju2.day.element)]
|
||
: ''})
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 총합 궁합 점수 */}
|
||
<div className={`bg-gradient-to-r ${getScoreColor(compatibilityScore)} rounded-3xl shadow-2xl p-12 mb-12 text-white`}>
|
||
<div className="text-center">
|
||
<h2 className="text-3xl font-bold mb-6">종합 궁합 점수</h2>
|
||
<div className="flex items-center justify-center gap-8 mb-6">
|
||
<div className="text-8xl font-bold">{compatibilityScore}</div>
|
||
<div className="text-left">
|
||
<div className="text-6xl font-bold mb-2">{getScoreGrade(compatibilityScore)}</div>
|
||
<div className="text-2xl">{getScoreText(compatibilityScore)}</div>
|
||
</div>
|
||
</div>
|
||
<div className="max-w-2xl mx-auto">
|
||
<div className="w-full bg-white/30 rounded-full h-4">
|
||
<div
|
||
className="bg-white h-4 rounded-full transition-all duration-1000"
|
||
style={{ width: `${compatibilityScore}%` }}
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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="grid md:grid-cols-2 gap-6">
|
||
{detailedScores.map((item) => (
|
||
<div key={item.name} className="bg-gray-50 rounded-xl p-6">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-3xl">{item.icon}</span>
|
||
<h3 className="text-xl font-bold text-gray-900">{item.name}</h3>
|
||
</div>
|
||
<span className="text-2xl font-bold text-pink-600">{item.score}점</span>
|
||
</div>
|
||
<div className="w-full bg-gray-200 rounded-full h-3">
|
||
<div
|
||
className="bg-gradient-to-r from-pink-500 to-purple-500 h-3 rounded-full transition-all duration-500"
|
||
style={{ width: `${item.score}%` }}
|
||
></div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 궁합 해석 */}
|
||
<div className="grid md:grid-cols-2 gap-8 mb-8">
|
||
{/* 장점 */}
|
||
<div className="bg-white rounded-2xl shadow-lg p-8">
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-4 flex items-center">
|
||
<span className="text-3xl mr-3">✅</span>
|
||
두 사람의 장점
|
||
</h3>
|
||
<ul className="space-y-3 text-gray-700">
|
||
<li className="flex items-start">
|
||
<span className="text-pink-600 mr-2">•</span>
|
||
<span>서로의 부족한 점을 잘 보완해줄 수 있습니다.</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-pink-600 mr-2">•</span>
|
||
<span>대화와 소통이 원활하게 이루어질 수 있습니다.</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-pink-600 mr-2">•</span>
|
||
<span>함께 있을 때 편안함을 느낄 수 있습니다.</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
{/* 주의점 */}
|
||
<div className="bg-white rounded-2xl shadow-lg p-8">
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-4 flex items-center">
|
||
<span className="text-3xl mr-3">⚠️</span>
|
||
주의할 점
|
||
</h3>
|
||
<ul className="space-y-3 text-gray-700">
|
||
<li className="flex items-start">
|
||
<span className="text-purple-600 mr-2">•</span>
|
||
<span>서로의 가치관 차이를 이해하려는 노력이 필요합니다.</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-purple-600 mr-2">•</span>
|
||
<span>감정적인 대화보다는 이성적인 대화를 나누세요.</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-purple-600 mr-2">•</span>
|
||
<span>작은 문제도 소통으로 해결하려는 자세가 중요합니다.</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 조언 */}
|
||
<div className="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl shadow-lg p-8 text-white mb-8">
|
||
<h3 className="text-2xl font-bold mb-4 text-center">💡 조언</h3>
|
||
<p className="text-lg leading-relaxed text-center">
|
||
궁합은 참고사항일 뿐입니다. 서로를 이해하고 존중하며 노력한다면
|
||
어떤 궁합이든 행복한 관계를 만들 수 있습니다.
|
||
사주는 가능성을 보여줄 뿐, 최종 결정은 두 사람의 마음과 노력에 달려있습니다.
|
||
</p>
|
||
</div>
|
||
|
||
{/* 다른 메뉴 */}
|
||
<div className="grid md:grid-cols-3 gap-6">
|
||
<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>
|
||
|
||
<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>
|
||
|
||
<button className="bg-gradient-to-r from-pink-600 to-purple-600 text-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 mb-2">PDF 저장</h3>
|
||
<p className="text-sm opacity-90">궁합 결과 저장하기</p>
|
||
</button>
|
||
</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-pink-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-pink-400">쟁승메이드</a></p>
|
||
<p className="mt-2">© 2025 쟁승메이드. All rights reserved.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
);
|
||
}
|