556 lines
28 KiB
TypeScript
556 lines
28 KiB
TypeScript
import Link from 'next/link';
|
|
import { calculateSaju, FIVE_ELEMENTS } from '@/lib/saju-calculator';
|
|
import PDFButton from '../../components/PDFButton';
|
|
import ShareButtons from '../../components/ShareButtons';
|
|
import CompatibilityDetailUnlock from './CompatibilityDetailUnlock';
|
|
|
|
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';
|
|
}>;
|
|
}
|
|
|
|
// 오행 한글 매핑
|
|
const elementKrMap: Record<string, string> = {
|
|
'木': '목', '火': '화', '土': '토', '金': '금', '水': '수'
|
|
};
|
|
|
|
// Deterministic hash for seeded score variation
|
|
function seededOffset(seed: string, index: number): number {
|
|
let hash = 0;
|
|
const str = seed + index.toString();
|
|
for (let i = 0; i < str.length; i++) {
|
|
hash = ((hash << 5) - hash) + str.charCodeAt(i);
|
|
hash |= 0;
|
|
}
|
|
return ((hash % 11) - 5); // -5 ~ +5
|
|
}
|
|
|
|
// 오행 관계 타입 판별
|
|
type ElementRelation = 'same' | 'produce' | 'produced' | 'overcome' | 'overcomed';
|
|
|
|
function getElementRelation(el1: string, el2: string): ElementRelation {
|
|
const produceMap: Record<string, string> = {
|
|
'木': '火', '火': '土', '土': '金', '金': '水', '水': '木'
|
|
};
|
|
if (el1 === el2) return 'same';
|
|
if (produceMap[el1] === el2) return 'produce';
|
|
if (produceMap[el2] === el1) return 'produced';
|
|
const overcomeMap: Record<string, string> = {
|
|
'木': '土', '火': '金', '土': '水', '金': '木', '水': '火'
|
|
};
|
|
if (overcomeMap[el1] === el2) return 'overcome';
|
|
return 'overcomed';
|
|
}
|
|
|
|
// 지지 관계 판별
|
|
function getBranchRelation(b1: string, b2: string): { sixHarmony: boolean; threeHarmony: boolean; conflict: boolean } {
|
|
const sixHarmony: Record<string, string> = {
|
|
'子': '丑', '丑': '子', '寅': '亥', '亥': '寅',
|
|
'卯': '戌', '戌': '卯', '辰': '酉', '酉': '辰',
|
|
'巳': '申', '申': '巳', '午': '未', '未': '午'
|
|
};
|
|
const threeHarmonyGroups = [
|
|
['申', '子', '辰'], ['寅', '午', '戌'],
|
|
['亥', '卯', '未'], ['巳', '酉', '丑']
|
|
];
|
|
const conflictMap: Record<string, string> = {
|
|
'子': '午', '午': '子', '丑': '未', '未': '丑',
|
|
'寅': '申', '申': '寅', '卯': '酉', '酉': '卯',
|
|
'辰': '戌', '戌': '辰', '巳': '亥', '亥': '巳'
|
|
};
|
|
|
|
const isThreeHarmony = threeHarmonyGroups.some(g => g.includes(b1) && g.includes(b2));
|
|
return {
|
|
sixHarmony: sixHarmony[b1] === b2,
|
|
threeHarmony: isThreeHarmony,
|
|
conflict: conflictMap[b1] === b2,
|
|
};
|
|
}
|
|
|
|
// 오행 관계별 상세 해석
|
|
function getElementInterpretation(el1: string, el2: string, relation: ElementRelation) {
|
|
const el1Kr = elementKrMap[el1];
|
|
const el2Kr = elementKrMap[el2];
|
|
|
|
const interpretations: Record<string, { pros: string[]; cons: string[]; advice: string }> = {
|
|
// 상생: el1이 el2를 생함
|
|
'木_火': {
|
|
pros: [
|
|
`${el1Kr}(나무)이 ${el2Kr}(불)을 키워주는 관계예요. 한 분이 자연스럽게 상대방에게 에너지를 전해주거든요.`,
|
|
'성장을 응원하고 지지해주는 따뜻한 관계가 될 수 있어요.',
|
|
'서로의 열정을 자극해서 함께 발전해 나갈 수 있는 좋은 조합이에요.',
|
|
'함께 있으면 자연스럽게 활력이 넘치고, 창의적인 아이디어가 샘솟을 거예요.',
|
|
],
|
|
cons: [
|
|
'한쪽이 너무 많이 희생하면 에너지가 소진될 수 있어요. 균형이 중요해요.',
|
|
'불꽃처럼 열정적인 만큼 감정 기복이 클 수 있으니 차분한 대화가 필요해요.',
|
|
'서로에 대한 기대가 커질 수 있어서, 적절한 거리감을 유지하는 것도 좋아요.',
|
|
],
|
|
advice: '서로의 에너지를 아낌없이 주되, 자기 자신도 잘 챙기는 게 이 관계의 핵심이에요.',
|
|
},
|
|
'火_土': {
|
|
pros: [
|
|
`${el1Kr}(불)이 ${el2Kr}(흙)을 따뜻하게 만들어주는 관계예요. 서로에게 안정감을 줄 수 있거든요.`,
|
|
'열정과 안정이 조화를 이루어 실질적인 성과를 만들어낼 수 있어요.',
|
|
'서로 다른 강점을 가지고 있어서 팀워크가 좋은 편이에요.',
|
|
'어려운 순간에도 든든하게 의지할 수 있는 관계가 될 거예요.',
|
|
],
|
|
cons: [
|
|
'급한 성격과 느긋한 성격이 부딪힐 수 있어요. 템포를 맞추는 연습이 필요해요.',
|
|
'때로는 답답함을 느낄 수 있지만, 그만큼 서로를 보완해주는 관계이기도 해요.',
|
|
'가끔은 서로의 속도 차이를 인정하고 기다려주는 여유가 필요하답니다.',
|
|
],
|
|
advice: '서로의 리듬을 존중하면서 함께 걸어가면, 오래오래 행복한 관계가 될 거예요.',
|
|
},
|
|
'土_金': {
|
|
pros: [
|
|
`${el1Kr}(흙)이 ${el2Kr}(쇠)를 품고 있는 관계예요. 안정 속에서 가치를 만들어내는 조합이에요.`,
|
|
'현실적이고 실용적인 면에서 잘 맞아서 함께 무언가를 이뤄내기 좋아요.',
|
|
'서로를 단단하게 만들어주는 든든한 파트너가 될 수 있어요.',
|
|
'물질적으로나 정서적으로 안정감 있는 관계를 만들어갈 수 있답니다.',
|
|
],
|
|
cons: [
|
|
'둘 다 고집이 있을 수 있어서 의견 충돌 시 양보하는 연습이 필요해요.',
|
|
'너무 현실적인 면만 추구하다 보면 로맨스가 부족해질 수 있어요.',
|
|
'변화를 두려워하기보다 함께 새로운 시도를 해보는 것도 좋겠어요.',
|
|
],
|
|
advice: '안정감 위에 가끔 달콤한 서프라이즈를 더하면 완벽한 관계가 될 거예요.',
|
|
},
|
|
'金_水': {
|
|
pros: [
|
|
`${el1Kr}(쇠)이 ${el2Kr}(물)을 만들어내는 관계예요. 깊은 지혜와 감성이 만나는 조합이에요.`,
|
|
'서로의 내면을 잘 이해하고, 깊은 대화를 나눌 수 있는 사이가 될 거예요.',
|
|
'원칙과 유연함이 조화를 이루어 균형 잡힌 관계를 만들 수 있어요.',
|
|
'서로에게 영감을 주고 정서적으로 풍요로운 관계가 될 수 있답니다.',
|
|
],
|
|
cons: [
|
|
'감정 표현 방식이 다를 수 있어요. 직접적으로 마음을 표현하는 연습을 해보세요.',
|
|
'때로는 너무 이성적이거나 너무 감성적인 면이 부딪힐 수 있어요.',
|
|
'서로의 감정 표현 스타일을 이해하고 존중하는 것이 중요해요.',
|
|
],
|
|
advice: '머리와 가슴의 균형, 이성과 감성의 조화가 이 관계의 매력 포인트예요.',
|
|
},
|
|
'水_木': {
|
|
pros: [
|
|
`${el2Kr}(물)이 ${el1Kr}(나무)를 키워주는 관계예요. 성장과 발전의 에너지가 넘치는 조합이에요.`,
|
|
'새로운 것을 시작하고 함께 성장해 나가기에 최적의 파트너예요.',
|
|
'서로에게 자양분이 되어 끊임없이 발전하는 관계가 될 수 있어요.',
|
|
'자유롭고 창의적인 에너지가 넘쳐서 함께하면 즐거울 거예요.',
|
|
],
|
|
cons: [
|
|
'방향성 없이 흘러갈 수 있으니 함께 목표를 세우는 것이 중요해요.',
|
|
'너무 자유로운 성향이 겹치면 책임감이 부족해질 수 있어요.',
|
|
'각자의 공간을 존중하되, 함께하는 시간도 소중히 여기세요.',
|
|
],
|
|
advice: '함께 성장하는 기쁨을 느끼면서, 때로는 뿌리를 내리는 안정감도 챙겨보세요.',
|
|
},
|
|
// 동일 오행
|
|
'same': {
|
|
pros: [
|
|
'같은 오행이라 기본적인 가치관과 성향이 비슷해요. 서로를 이해하기 쉬운 관계거든요.',
|
|
'말하지 않아도 통하는 부분이 많아서 편안한 관계를 유지할 수 있어요.',
|
|
'취미나 관심사가 비슷해서 함께 즐길 거리가 많을 거예요.',
|
|
'서로의 마음을 직감적으로 알아차릴 수 있는 특별한 케미가 있어요.',
|
|
],
|
|
cons: [
|
|
'너무 비슷해서 오히려 새로운 자극이 부족할 수 있어요.',
|
|
'같은 약점을 공유하기 때문에 함께 빠질 수 있는 함정이 있어요.',
|
|
'때로는 의도적으로 다른 관점을 찾아보는 노력이 필요해요.',
|
|
],
|
|
advice: '닮은 점을 즐기되, 각자만의 개성과 차이도 만들어가면 더 풍성한 관계가 될 거예요.',
|
|
},
|
|
// 상극
|
|
'木_土': {
|
|
pros: [
|
|
'긴장감이 있지만 그만큼 서로에게 강한 끌림을 느낄 수 있는 관계예요.',
|
|
'서로 다른 관점을 가지고 있어서 새로운 시각을 배울 수 있어요.',
|
|
'도전적인 관계이지만 극복할수록 더 단단해지는 사이가 될 거예요.',
|
|
],
|
|
cons: [
|
|
`${el1Kr}(나무)이 ${el2Kr}(흙)을 극하는 관계라 의견 충돌이 생기기 쉬워요.`,
|
|
'주도권 다툼이 일어날 수 있으니 서로 양보하는 자세가 중요해요.',
|
|
'상대방을 변화시키려 하기보다 있는 그대로 받아들이는 연습을 해보세요.',
|
|
'감정이 격해질 때는 일단 한 발 물러서서 냉각 시간을 갖는 것이 좋아요.',
|
|
],
|
|
advice: '부딪히는 만큼 성장할 수 있는 관계예요. 서로를 가르치려 하지 말고 배우려는 마음이 중요해요.',
|
|
},
|
|
'火_金': {
|
|
pros: [
|
|
'강렬한 에너지가 만나는 관계라 서로에게 깊은 인상을 남길 수 있어요.',
|
|
'서로의 강한 면을 인정하고 존중할 수 있다면 최강의 파트너가 될 수 있어요.',
|
|
'갈등을 극복한 뒤에는 누구보다 단단한 신뢰가 생기는 관계예요.',
|
|
],
|
|
cons: [
|
|
`${el1Kr}(불)이 ${el2Kr}(쇠)를 녹이는 관계라 갈등이 뜨거울 수 있어요.`,
|
|
'둘 다 자존심이 강해서 먼저 사과하기 어려울 수 있어요.',
|
|
'감정적으로 상처를 주기 쉬우니 말 한마디 한마디를 신중하게 하세요.',
|
|
'서로의 영역을 존중하고 간섭을 줄이는 것이 관계 유지의 비결이에요.',
|
|
],
|
|
advice: '불꽃이 튀는 관계이지만, 그 열기를 잘 다스리면 누구보다 강한 유대감을 만들 수 있어요.',
|
|
},
|
|
'土_水': {
|
|
pros: [
|
|
'서로 다른 성향이지만, 그래서 오히려 배울 점이 많은 관계예요.',
|
|
'현실적인 면과 유연한 면이 만나 균형을 찾을 수 있는 조합이에요.',
|
|
'서로의 부족한 점을 채워줄 수 있는 잠재력이 있는 관계거든요.',
|
|
],
|
|
cons: [
|
|
`${el1Kr}(흙)이 ${el2Kr}(물)을 막는 관계라 소통에 장벽이 생기기 쉬워요.`,
|
|
'고집과 유연함이 부딪히면서 답답함을 느낄 수 있어요.',
|
|
'서로의 방식을 존중하고, 중간 지점을 찾으려는 노력이 필요해요.',
|
|
'대화가 막힐 때는 글이나 편지로 마음을 전하는 것도 좋은 방법이에요.',
|
|
],
|
|
advice: '서로의 차이를 인정하고 존중하는 것이 이 관계의 가장 큰 과제이자 선물이에요.',
|
|
},
|
|
'金_木': {
|
|
pros: [
|
|
'서로에게 자극을 주는 관계라 성장의 계기가 될 수 있어요.',
|
|
'갈등을 잘 해결하면 오히려 더 깊은 이해와 공감이 생기는 사이예요.',
|
|
'상대방을 통해 자신의 새로운 면을 발견할 수 있는 관계거든요.',
|
|
],
|
|
cons: [
|
|
`${el1Kr}(쇠)이 ${el2Kr}(나무)를 자르는 관계라 비판적인 면이 나올 수 있어요.`,
|
|
'상대방의 약점을 지적하기보다 장점을 칭찬하는 습관을 들여보세요.',
|
|
'서로를 통제하려 하면 관계가 힘들어질 수 있으니 자유를 존중해주세요.',
|
|
'작은 것부터 서로 칭찬하고 감사하는 연습을 해보면 관계가 훨씬 좋아질 거예요.',
|
|
],
|
|
advice: '날카로운 면이 있지만, 서로를 다듬어가는 과정에서 보석 같은 관계가 될 수 있어요.',
|
|
},
|
|
'水_火': {
|
|
pros: [
|
|
'상반된 에너지가 만나서 강한 끌림을 느낄 수 있는 관계예요.',
|
|
'열정과 차분함이 만나 독특한 균형을 이룰 수 있는 조합이에요.',
|
|
'서로에게서 완전히 새로운 세계를 경험할 수 있는 흥미로운 관계거든요.',
|
|
],
|
|
cons: [
|
|
`${el1Kr}(물)이 ${el2Kr}(불)을 끄는 관계라 서로의 열정을 꺾을 수 있어요.`,
|
|
'한쪽이 너무 뜨겁고 한쪽이 너무 차가우면 갈등이 생기기 쉬워요.',
|
|
'감정의 온도차를 줄이기 위해 서로의 감정을 자주 확인하는 것이 중요해요.',
|
|
'큰 결정은 충분히 대화한 뒤에 함께 내리는 것이 좋아요.',
|
|
],
|
|
advice: '물과 불이 만나면 증기가 되듯, 서로의 에너지를 잘 합치면 엄청난 힘을 발휘할 수 있어요.',
|
|
},
|
|
};
|
|
|
|
// 상생 관계 매핑
|
|
if (relation === 'produce') {
|
|
return interpretations[`${el1}_${produceTarget(el1)}`] || interpretations['same'];
|
|
}
|
|
if (relation === 'produced') {
|
|
return interpretations[`${el2}_${produceTarget(el2)}`] || interpretations['same'];
|
|
}
|
|
if (relation === 'same') {
|
|
return interpretations['same'];
|
|
}
|
|
// 상극
|
|
const key = `${el1}_${overcomeTarget(el1)}`;
|
|
if (interpretations[key]) return interpretations[key];
|
|
const reverseKey = `${el2}_${overcomeTarget(el2)}`;
|
|
if (interpretations[reverseKey]) return interpretations[reverseKey];
|
|
return interpretations['same'];
|
|
}
|
|
|
|
function produceTarget(el: string): string {
|
|
const map: Record<string, string> = { '木': '火', '火': '土', '土': '金', '金': '水', '水': '木' };
|
|
return map[el] || '';
|
|
}
|
|
|
|
function overcomeTarget(el: string): string {
|
|
const map: Record<string, string> = { '木': '土', '火': '金', '土': '水', '金': '木', '水': '火' };
|
|
return map[el] || '';
|
|
}
|
|
|
|
// 지지 관계 추가 해석
|
|
function getBranchInterpretation(branchRel: { sixHarmony: boolean; threeHarmony: boolean; conflict: boolean }) {
|
|
const extraPros: string[] = [];
|
|
const extraCons: string[] = [];
|
|
|
|
if (branchRel.sixHarmony) {
|
|
extraPros.push('두 분의 일지가 육합(六合) 관계예요! 천생연분이라고 할 만큼 자연스럽게 잘 맞는 조합이에요.');
|
|
extraPros.push('만나면 왠지 편안하고 마음이 통하는 느낌을 받으실 거예요.');
|
|
}
|
|
if (branchRel.threeHarmony) {
|
|
extraPros.push('일지가 삼합(三合)에 속해 있어요. 함께 있으면 시너지가 나는 좋은 궁합이에요.');
|
|
}
|
|
if (branchRel.conflict) {
|
|
extraCons.push('일지가 충(沖) 관계에 있어요. 처음에는 강하게 끌리지만, 갈등도 생기기 쉬운 조합이에요.');
|
|
extraCons.push('충 관계는 변화와 자극이 많아서, 서로 인내하고 이해하려는 노력이 꼭 필요해요.');
|
|
}
|
|
|
|
return { extraPros, extraCons };
|
|
}
|
|
|
|
// 세부 항목별 한 줄 해석
|
|
function getDetailedComment(category: string, score: number): string {
|
|
if (category === '연애운') {
|
|
if (score >= 80) return '함께하면 설렘이 끊이지 않는 로맨틱한 관계가 될 거예요.';
|
|
if (score >= 65) return '서로에게 좋은 감정을 느끼며 자연스럽게 가까워질 수 있어요.';
|
|
return '처음에는 어색할 수 있지만, 시간이 지나면 깊은 정이 쌓일 거예요.';
|
|
}
|
|
if (category === '결혼운') {
|
|
if (score >= 80) return '결혼 후에도 서로를 존중하며 행복한 가정을 꾸릴 수 있어요.';
|
|
if (score >= 65) return '일상의 소소한 행복을 함께 나누며 안정적인 결혼생활이 가능해요.';
|
|
return '결혼생활에서는 서로의 역할 분담과 소통이 특히 중요한 커플이에요.';
|
|
}
|
|
if (category === '금전운') {
|
|
if (score >= 80) return '함께 재물을 모으고 불리는 데 시너지가 나는 조합이에요.';
|
|
if (score >= 65) return '경제적으로 안정적인 파트너십을 만들어갈 수 있어요.';
|
|
return '금전 문제에 대해 미리 충분히 대화하고 합의하는 것이 중요해요.';
|
|
}
|
|
// 사업운
|
|
if (score >= 80) return '비즈니스 파트너로도 훌륭한 조합이에요. 함께하면 성공 가능성이 높아요.';
|
|
if (score >= 65) return '각자의 강점을 살려 역할을 나누면 좋은 결과를 만들 수 있어요.';
|
|
return '사업적으로는 신중한 접근이 필요해요. 역할과 책임을 명확히 하세요.';
|
|
}
|
|
|
|
export default async function CompatibilityResultPage({ searchParams }: PageProps) {
|
|
const params = await searchParams;
|
|
const { year1, month1, day1, hour1, gender1, year2, month2, day2, hour2, gender2 } = params;
|
|
|
|
const saju1 = calculateSaju(parseInt(year1), parseInt(month1), parseInt(day1), hour1 ? parseInt(hour1) : null, gender1);
|
|
const saju2 = calculateSaju(parseInt(year2), parseInt(month2), parseInt(day2), hour2 ? parseInt(hour2) : null, gender2);
|
|
|
|
const element1 = saju1.day.element;
|
|
const element2 = saju2.day.element;
|
|
const branch1 = saju1.day.branch;
|
|
const branch2 = saju2.day.branch;
|
|
|
|
const elementRelation = getElementRelation(element1, element2);
|
|
const branchRel = getBranchRelation(branch1, branch2);
|
|
|
|
// 궁합 점수 계산
|
|
const calculateCompatibility = () => {
|
|
let score = 50;
|
|
if (element1 === element2) score += 10;
|
|
else if (elementRelation === 'produce' || elementRelation === 'produced') score += 25;
|
|
else score -= 10; // overcome/overcomed
|
|
|
|
if (branchRel.sixHarmony) score += 20;
|
|
if (branchRel.threeHarmony) score += 15;
|
|
if (branchRel.conflict) 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';
|
|
};
|
|
|
|
// Deterministic seed for detailed scores
|
|
const seed = `${year1}${month1}${day1}${year2}${month2}${day2}`;
|
|
const detailedScores = [
|
|
{ name: '연애운', score: compatibilityScore + seededOffset(seed, 1), icon: '💑' },
|
|
{ name: '결혼운', score: compatibilityScore + seededOffset(seed, 2), icon: '💍' },
|
|
{ name: '금전운', score: compatibilityScore + seededOffset(seed, 3), icon: '💰' },
|
|
{ name: '사업운', score: compatibilityScore + seededOffset(seed, 4), icon: '💼' },
|
|
].map(item => ({
|
|
...item,
|
|
score: Math.min(100, Math.max(0, item.score)),
|
|
comment: getDetailedComment(item.name, Math.min(100, Math.max(0, compatibilityScore + seededOffset(seed, ['연애운', '결혼운', '금전운', '사업운'].indexOf(item.name) + 1)))),
|
|
}));
|
|
|
|
// 오행 기반 상세 해석
|
|
const interp = getElementInterpretation(element1, element2, elementRelation);
|
|
const branchInterp = getBranchInterpretation(branchRel);
|
|
|
|
const allPros = [...interp.pros, ...branchInterp.extraPros];
|
|
const allCons = [...interp.cons, ...branchInterp.extraCons];
|
|
|
|
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 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">두 사람의 사주팔자를 비교한 결과입니다</p>
|
|
</div>
|
|
|
|
{/* 두 사람 정보 */}
|
|
<div className="grid md:grid-cols-2 gap-6 mb-12">
|
|
<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">
|
|
{element1} ({elementKrMap[element1] || ''})
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<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">
|
|
{element2} ({elementKrMap[element2] || ''})
|
|
</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 mb-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>
|
|
<p className="text-sm text-gray-600">{item.comment}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 궁합 상세 해석 - 블러 잠금 영역 */}
|
|
<CompatibilityDetailUnlock
|
|
allPros={allPros}
|
|
allCons={allCons}
|
|
advice={interp.advice}
|
|
element1={element1}
|
|
element2={element2}
|
|
element1Kr={elementKrMap[element1] || ''}
|
|
element2Kr={elementKrMap[element2] || ''}
|
|
/>
|
|
|
|
{/* 다른 메뉴 */}
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 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>
|
|
|
|
<PDFButton
|
|
elementId="pdf-content"
|
|
filename={`궁합_${year1}${month1}${day1}_${year2}${month2}${day2}.pdf`}
|
|
buttonText="궁합 PDF 저장"
|
|
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 w-full disabled:opacity-50 disabled:cursor-not-allowed"
|
|
/>
|
|
|
|
<ShareButtons
|
|
title={`두 사람의 궁합 결과 - ${compatibilityScore}점`}
|
|
description={`${getScoreText(compatibilityScore)} - 두 사람의 궁합을 확인해보세요!`}
|
|
/>
|
|
</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>
|
|
);
|
|
}
|