feat: 음력 변환, 대운 계산, 소셜 공유 기능 추가

- 음력 변환 기능 구현
  - lunar-calendar 라이브러리 추가
  - 음력-양력 변환 유틸리티 생성
  - 모든 입력 폼에 양력/음력 선택 및 윤달 옵션 추가
  - SajuForm, CompatibilityForm에 음력 지원

- 대운(大運) 계산 기능 구현
  - 10년 단위 대운 계산 알고리즘
  - 현재 대운 표시 및 해석
  - 사주팔자 결과 페이지에 대운 섹션 추가
  - 8개 대운 (80년치) 표시

- 소셜 공유 기능 구현
  - ShareButtons 컴포넌트 생성
  - 카카오톡, 페이스북, 트위터 공유
  - 네이티브 공유 API 지원
  - 링크 복사 기능
  - 모든 결과 페이지에 공유 버튼 추가

- 메타데이터 개선
  - 사이트 제목 및 설명 최적화
  - 한국어(ko) 설정
  - 카카오 SDK 추가

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-02-11 23:57:53 +09:00
parent f85e857bea
commit affbdf1a44
11 changed files with 695 additions and 16 deletions

View File

@@ -1,6 +1,7 @@
import Link from 'next/link'; import Link from 'next/link';
import { calculateSaju, FIVE_ELEMENTS } from '@/lib/saju-calculator'; import { calculateSaju, FIVE_ELEMENTS } from '@/lib/saju-calculator';
import PDFButton from '../../components/PDFButton'; import PDFButton from '../../components/PDFButton';
import ShareButtons from '../../components/ShareButtons';
interface PageProps { interface PageProps {
searchParams: Promise<{ searchParams: Promise<{
@@ -349,7 +350,7 @@ export default async function CompatibilityResultPage({ searchParams }: PageProp
</div> </div>
{/* 다른 메뉴 */} {/* 다른 메뉴 */}
<div className="grid md:grid-cols-3 gap-6"> <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<Link <Link
href="/compatibility" href="/compatibility"
className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group" className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group"
@@ -374,6 +375,11 @@ export default async function CompatibilityResultPage({ searchParams }: PageProp
buttonText="궁합 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" 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>
</div> </div>

View File

@@ -2,6 +2,7 @@
import { useState } from 'react'; import { useState } from 'react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { lunarToSolar } from '@/lib/lunar-utils';
export default function CompatibilityForm() { export default function CompatibilityForm() {
const router = useRouter(); const router = useRouter();
@@ -12,6 +13,8 @@ export default function CompatibilityForm() {
const [day1, setDay1] = useState(''); const [day1, setDay1] = useState('');
const [hour1, setHour1] = useState(''); const [hour1, setHour1] = useState('');
const [gender1, setGender1] = useState<'male' | 'female'>('male'); const [gender1, setGender1] = useState<'male' | 'female'>('male');
const [calendarType1, setCalendarType1] = useState<'solar' | 'lunar'>('solar');
const [isLeapMonth1, setIsLeapMonth1] = useState(false);
// Person 2 // Person 2
const [year2, setYear2] = useState(''); const [year2, setYear2] = useState('');
@@ -19,6 +22,8 @@ export default function CompatibilityForm() {
const [day2, setDay2] = useState(''); const [day2, setDay2] = useState('');
const [hour2, setHour2] = useState(''); const [hour2, setHour2] = useState('');
const [gender2, setGender2] = useState<'male' | 'female'>('female'); const [gender2, setGender2] = useState<'male' | 'female'>('female');
const [calendarType2, setCalendarType2] = useState<'solar' | 'lunar'>('solar');
const [isLeapMonth2, setIsLeapMonth2] = useState(false);
const handleSubmit = (e: React.FormEvent) => { const handleSubmit = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
@@ -33,15 +38,33 @@ export default function CompatibilityForm() {
return; return;
} }
let finalYear1 = year1, finalMonth1 = month1, finalDay1 = day1;
let finalYear2 = year2, finalMonth2 = month2, finalDay2 = day2;
// 음력인 경우 양력으로 변환
if (calendarType1 === 'lunar') {
const solar = lunarToSolar(parseInt(year1), parseInt(month1), parseInt(day1), isLeapMonth1);
finalYear1 = solar.year.toString();
finalMonth1 = solar.month.toString();
finalDay1 = solar.day.toString();
}
if (calendarType2 === 'lunar') {
const solar = lunarToSolar(parseInt(year2), parseInt(month2), parseInt(day2), isLeapMonth2);
finalYear2 = solar.year.toString();
finalMonth2 = solar.month.toString();
finalDay2 = solar.day.toString();
}
// URL 파라미터로 전달 // URL 파라미터로 전달
const params = new URLSearchParams({ const params = new URLSearchParams({
year1, year1: finalYear1,
month1, month1: finalMonth1,
day1, day1: finalDay1,
gender1, gender1,
year2, year2: finalYear2,
month2, month2: finalMonth2,
day2, day2: finalDay2,
gender2, gender2,
}); });
@@ -126,6 +149,50 @@ export default function CompatibilityForm() {
</select> </select>
</div> </div>
{/* 양력/음력 선택 */}
<div>
<label className="block text-left text-sm font-semibold text-gray-700 mb-2">
</label>
<div className="grid grid-cols-2 gap-3">
<button
type="button"
onClick={() => setCalendarType1('solar')}
className={`px-6 py-3 rounded-xl font-semibold transition ${
calendarType1 === 'solar'
? 'bg-pink-600 text-white'
: 'bg-white border-2 border-gray-200 text-gray-700 hover:border-pink-500 hover:text-pink-600'
}`}
>
</button>
<button
type="button"
onClick={() => setCalendarType1('lunar')}
className={`px-6 py-3 rounded-xl font-semibold transition ${
calendarType1 === 'lunar'
? 'bg-pink-600 text-white'
: 'bg-white border-2 border-gray-200 text-gray-700 hover:border-pink-500 hover:text-pink-600'
}`}
>
</button>
</div>
{calendarType1 === 'lunar' && (
<div className="mt-3">
<label className="flex items-center justify-center gap-2 text-sm text-gray-600 cursor-pointer">
<input
type="checkbox"
checked={isLeapMonth1}
onChange={(e) => setIsLeapMonth1(e.target.checked)}
className="w-4 h-4 text-pink-600 border-gray-300 rounded focus:ring-pink-500"
/>
<span></span>
</label>
</div>
)}
</div>
{/* 성별 선택 */} {/* 성별 선택 */}
<div> <div>
<label className="block text-left text-sm font-semibold text-gray-700 mb-2"> <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
@@ -230,6 +297,50 @@ export default function CompatibilityForm() {
</select> </select>
</div> </div>
{/* 양력/음력 선택 */}
<div>
<label className="block text-left text-sm font-semibold text-gray-700 mb-2">
</label>
<div className="grid grid-cols-2 gap-3">
<button
type="button"
onClick={() => setCalendarType2('solar')}
className={`px-6 py-3 rounded-xl font-semibold transition ${
calendarType2 === 'solar'
? 'bg-purple-600 text-white'
: 'bg-white border-2 border-gray-200 text-gray-700 hover:border-purple-500 hover:text-purple-600'
}`}
>
</button>
<button
type="button"
onClick={() => setCalendarType2('lunar')}
className={`px-6 py-3 rounded-xl font-semibold transition ${
calendarType2 === 'lunar'
? 'bg-purple-600 text-white'
: 'bg-white border-2 border-gray-200 text-gray-700 hover:border-purple-500 hover:text-purple-600'
}`}
>
</button>
</div>
{calendarType2 === 'lunar' && (
<div className="mt-3">
<label className="flex items-center justify-center gap-2 text-sm text-gray-600 cursor-pointer">
<input
type="checkbox"
checked={isLeapMonth2}
onChange={(e) => setIsLeapMonth2(e.target.checked)}
className="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
/>
<span></span>
</label>
</div>
)}
</div>
{/* 성별 선택 */} {/* 성별 선택 */}
<div> <div>
<label className="block text-left text-sm font-semibold text-gray-700 mb-2"> <label className="block text-left text-sm font-semibold text-gray-700 mb-2">

View File

@@ -2,6 +2,7 @@
import { useState } from 'react'; import { useState } from 'react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { lunarToSolar } from '@/lib/lunar-utils';
export default function SajuForm() { export default function SajuForm() {
const router = useRouter(); const router = useRouter();
@@ -11,6 +12,7 @@ export default function SajuForm() {
const [hour, setHour] = useState(''); const [hour, setHour] = useState('');
const [calendarType, setCalendarType] = useState<'solar' | 'lunar'>('solar'); const [calendarType, setCalendarType] = useState<'solar' | 'lunar'>('solar');
const [gender, setGender] = useState<'male' | 'female'>('male'); const [gender, setGender] = useState<'male' | 'female'>('male');
const [isLeapMonth, setIsLeapMonth] = useState(false);
const handleSubmit = (e: React.FormEvent) => { const handleSubmit = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
@@ -20,19 +22,43 @@ export default function SajuForm() {
return; return;
} }
let finalYear = year;
let finalMonth = month;
let finalDay = day;
// 음력인 경우 양력으로 변환
if (calendarType === 'lunar') {
const solar = lunarToSolar(
parseInt(year),
parseInt(month),
parseInt(day),
isLeapMonth
);
finalYear = solar.year.toString();
finalMonth = solar.month.toString();
finalDay = solar.day.toString();
}
// URL 파라미터로 전달 // URL 파라미터로 전달
const params = new URLSearchParams({ const params = new URLSearchParams({
year, year: finalYear,
month, month: finalMonth,
day, day: finalDay,
gender, gender,
calendarType calendarType,
originalYear: year,
originalMonth: month,
originalDay: day,
}); });
if (hour) { if (hour) {
params.append('hour', hour); params.append('hour', hour);
} }
if (calendarType === 'lunar') {
params.append('isLeapMonth', isLeapMonth.toString());
}
router.push(`/result?${params.toString()}`); router.push(`/result?${params.toString()}`);
}; };
@@ -132,6 +158,19 @@ export default function SajuForm() {
</button> </button>
</div> </div>
{calendarType === 'lunar' && (
<div className="mt-3">
<label className="flex items-center justify-center gap-2 text-sm text-gray-600 cursor-pointer">
<input
type="checkbox"
checked={isLeapMonth}
onChange={(e) => setIsLeapMonth(e.target.checked)}
className="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
/>
<span></span>
</label>
</div>
)}
</div> </div>
{/* 성별 선택 */} {/* 성별 선택 */}

View File

@@ -0,0 +1,162 @@
'use client';
import { useState } from 'react';
interface ShareButtonsProps {
title: string;
description: string;
url?: string;
}
export default function ShareButtons({ title, description, url }: ShareButtonsProps) {
const [showShareMenu, setShowShareMenu] = useState(false);
const shareUrl = url || (typeof window !== 'undefined' ? window.location.href : '');
const handleKakaoShare = () => {
if (typeof window !== 'undefined' && (window as any).Kakao) {
(window as any).Kakao.Share.sendDefault({
objectType: 'feed',
content: {
title: title,
description: description,
imageUrl: 'https://developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png',
link: {
mobileWebUrl: shareUrl,
webUrl: shareUrl,
},
},
buttons: [
{
title: '자세히 보기',
link: {
mobileWebUrl: shareUrl,
webUrl: shareUrl,
},
},
],
});
} else {
alert('카카오톡 공유 기능을 사용할 수 없습니다.');
}
};
const handleFacebookShare = () => {
const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`;
window.open(facebookUrl, '_blank', 'width=600,height=400');
};
const handleTwitterShare = () => {
const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(shareUrl)}`;
window.open(twitterUrl, '_blank', 'width=600,height=400');
};
const handleCopyLink = async () => {
try {
await navigator.clipboard.writeText(shareUrl);
alert('링크가 복사되었습니다!');
setShowShareMenu(false);
} catch (err) {
alert('링크 복사에 실패했습니다.');
}
};
const handleNativeShare = async () => {
if (navigator.share) {
try {
await navigator.share({
title: title,
text: description,
url: shareUrl,
});
setShowShareMenu(false);
} catch (err) {
console.log('Share cancelled or failed', err);
}
} else {
setShowShareMenu(true);
}
};
return (
<div className="relative">
<button
onClick={handleNativeShare}
className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group w-full"
>
<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>
</button>
{/* 공유 메뉴 (모바일에서 네이티브 공유가 안 될 때) */}
{showShareMenu && (
<>
{/* 배경 오버레이 */}
<div
className="fixed inset-0 bg-black bg-opacity-50 z-40"
onClick={() => setShowShareMenu(false)}
></div>
{/* 공유 메뉴 */}
<div className="fixed bottom-0 left-0 right-0 bg-white rounded-t-3xl shadow-2xl z-50 p-6 animate-slide-up">
<div className="flex justify-between items-center mb-6">
<h3 className="text-xl font-bold text-gray-900"></h3>
<button
onClick={() => setShowShareMenu(false)}
className="text-gray-500 hover:text-gray-700 text-2xl"
>
</button>
</div>
<div className="grid grid-cols-4 gap-4 mb-4">
{/* 카카오톡 */}
<button
onClick={handleKakaoShare}
className="flex flex-col items-center gap-2 p-3 rounded-xl hover:bg-gray-50 transition"
>
<div className="w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center text-2xl">
💬
</div>
<span className="text-xs text-gray-700"></span>
</button>
{/* 페이스북 */}
<button
onClick={handleFacebookShare}
className="flex flex-col items-center gap-2 p-3 rounded-xl hover:bg-gray-50 transition"
>
<div className="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-2xl text-white">
f
</div>
<span className="text-xs text-gray-700"></span>
</button>
{/* 트위터 */}
<button
onClick={handleTwitterShare}
className="flex flex-col items-center gap-2 p-3 rounded-xl hover:bg-gray-50 transition"
>
<div className="w-12 h-12 bg-blue-400 rounded-full flex items-center justify-center text-2xl text-white">
𝕏
</div>
<span className="text-xs text-gray-700"></span>
</button>
{/* 링크 복사 */}
<button
onClick={handleCopyLink}
className="flex flex-col items-center gap-2 p-3 rounded-xl hover:bg-gray-50 transition"
>
<div className="w-12 h-12 bg-gray-600 rounded-full flex items-center justify-center text-2xl text-white">
🔗
</div>
<span className="text-xs text-gray-700"> </span>
</button>
</div>
</div>
</>
)}
</div>
);
}

View File

@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Create Next App", title: "사주보기 - 무료 사주팔자, 운세, 궁합, 토정비결",
description: "Generated by create next app", description: "생년월일로 무료로 사주팔자, 오늘의 운세, 궁합, 토정비결을 확인하세요. 쟁승메이드가 제공하는 정확한 사주 서비스입니다.",
}; };
export default function RootLayout({ export default function RootLayout({
@@ -23,7 +23,24 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="en"> <html lang="ko">
<head>
<script
src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.0/kakao.min.js"
integrity="sha384-l+xbElFSnPZ2rOaPrU//2FF5B4LB8FiX5q4fXYTlfcG4PGpMkE1vcL7kNXI6Cci0"
crossOrigin="anonymous"
async
></script>
<script
dangerouslySetInnerHTML={{
__html: `
if (typeof window !== 'undefined' && window.Kakao && !window.Kakao.isInitialized()) {
window.Kakao.init('YOUR_KAKAO_APP_KEY'); // 실제 카카오 앱 키로 교체 필요
}
`,
}}
/>
</head>
<body <body
className={`${geistSans.variable} ${geistMono.variable} antialiased`} className={`${geistSans.variable} ${geistMono.variable} antialiased`}
> >

View File

@@ -1,6 +1,8 @@
import { calculateSaju } from '@/lib/saju-calculator'; import { calculateSaju } from '@/lib/saju-calculator';
import Link from 'next/link'; import Link from 'next/link';
import PDFButton from '../components/PDFButton'; import PDFButton from '../components/PDFButton';
import ShareButtons from '../components/ShareButtons';
import { calculateDaeun, getCurrentDaeun, getDaeunDescription } from '@/lib/daeun-calculator';
interface PageProps { interface PageProps {
searchParams: Promise<{ searchParams: Promise<{
@@ -24,6 +26,18 @@ export default async function ResultPage({ searchParams }: PageProps) {
const sajuData = calculateSaju(yearNum, monthNum, dayNum, hourNum, gender); const sajuData = calculateSaju(yearNum, monthNum, dayNum, hourNum, gender);
// 대운 계산
const daeunList = calculateDaeun(
yearNum,
monthNum,
dayNum,
gender,
sajuData.month.stem,
sajuData.month.branch
);
const currentYear = new Date().getFullYear();
const currentDaeun = getCurrentDaeun(daeunList, currentYear);
return ( return (
<div className="min-h-screen bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50"> <div className="min-h-screen bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50">
{/* Navigation */} {/* Navigation */}
@@ -213,8 +227,85 @@ export default async function ResultPage({ searchParams }: PageProps) {
</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">
🔄 () - 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 className="mt-6 p-4 bg-indigo-50 rounded-xl">
<p className="text-sm text-gray-700">
<strong className="text-indigo-600">():</strong> 10 .
, .
</p>
</div>
</div>
{/* 추가 기능 버튼 */} {/* 추가 기능 버튼 */}
<div className="grid md:grid-cols-3 gap-6"> <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<Link <Link
href={`/fortune?${new URLSearchParams(params as any).toString()}`} href={`/fortune?${new URLSearchParams(params as any).toString()}`}
className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group" className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group"
@@ -238,6 +329,11 @@ export default async function ResultPage({ searchParams }: PageProps) {
filename={`사주팔자_${yearNum}${monthNum}${dayNum}.pdf`} filename={`사주팔자_${yearNum}${monthNum}${dayNum}.pdf`}
buttonText="사주 PDF 저장" buttonText="사주 PDF 저장"
/> />
<ShareButtons
title={`내 사주팔자 - ${yearNum}년생 ${gender === 'male' ? '남성' : '여성'}`}
description={`일간: ${sajuData.day.stem}(${sajuData.day.stemKr}) | ${sajuData.day.element}`}
/>
</div> </div>
</div> </div>

View File

@@ -1,6 +1,7 @@
import Link from 'next/link'; import Link from 'next/link';
import { calculateSaju } from '@/lib/saju-calculator'; import { calculateSaju } from '@/lib/saju-calculator';
import PDFButton from '../../components/PDFButton'; import PDFButton from '../../components/PDFButton';
import ShareButtons from '../../components/ShareButtons';
interface PageProps { interface PageProps {
searchParams: Promise<{ searchParams: Promise<{
@@ -284,7 +285,7 @@ export default async function TojeongResultPage({ searchParams }: PageProps) {
</div> </div>
{/* 다른 메뉴 */} {/* 다른 메뉴 */}
<div className="grid md:grid-cols-3 gap-6"> <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<Link <Link
href="/tojeong" href="/tojeong"
className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group" className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group"
@@ -309,6 +310,11 @@ export default async function TojeongResultPage({ searchParams }: PageProps) {
buttonText="토정비결 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" 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"
/> />
<ShareButtons
title={`${targetYear}년 토정비결 - ${birthYear}년생`}
description={`${averageScore}점 (${getScoreText(averageScore)}) - 한 해의 운세를 확인해보세요!`}
/>
</div> </div>
</div> </div>

135
lib/daeun-calculator.ts Normal file
View File

@@ -0,0 +1,135 @@
import { HEAVENLY_STEMS, EARTHLY_BRANCHES, HEAVENLY_STEMS_KR, EARTHLY_BRANCHES_KR } from './saju-calculator';
/**
* 대운 (大運) 정보
*/
export interface DaeunPillar {
age: number; // 시작 나이
startYear: number; // 시작 년도
endYear: number; // 끝 년도
stem: string; // 천간
branch: string; // 지지
stemKr: string; // 천간 한글
branchKr: string; // 지지 한글
}
/**
* 대운 계산
* @param birthYear 생년
* @param birthMonth 생월
* @param birthDay 생일
* @param gender 성별
* @param monthStem 월주 천간 인덱스
* @param monthBranch 월주 지지 인덱스
* @returns 대운 배열 (10년 단위)
*/
export function calculateDaeun(
birthYear: number,
birthMonth: number,
birthDay: number,
gender: 'male' | 'female',
monthStem: string,
monthBranch: string
): DaeunPillar[] {
const monthStemIndex = HEAVENLY_STEMS.indexOf(monthStem as any);
const monthBranchIndex = EARTHLY_BRANCHES.indexOf(monthBranch as any);
if (monthStemIndex === -1 || monthBranchIndex === -1) {
return [];
}
// 양남음녀(陽男陰女)는 순행, 음남양녀(陰男陽女)는 역행
const yearStemIndex = (birthYear - 1900 + 6) % 10;
const isYangYear = yearStemIndex % 2 === 0; // 양년
let isForward: boolean;
if (gender === 'male') {
isForward = isYangYear; // 양남: 순행, 음남: 역행
} else {
isForward = !isYangYear; // 양녀: 역행, 음녀: 순행
}
// 대운 시작 나이 계산 (간단화: 평균 8세로 설정)
// 실제로는 절입일부터 생일까지의 일수를 계산해야 하지만 복잡하므로 단순화
const startAge = 8;
const daeunList: DaeunPillar[] = [];
for (let i = 0; i < 8; i++) {
const age = startAge + (i * 10);
const startYear = birthYear + age;
const endYear = startYear + 9;
let stemIndex: number;
let branchIndex: number;
if (isForward) {
// 순행: 월주에서 증가
stemIndex = (monthStemIndex + i + 1) % 10;
branchIndex = (monthBranchIndex + i + 1) % 12;
} else {
// 역행: 월주에서 감소
stemIndex = (monthStemIndex - i - 1 + 100) % 10;
branchIndex = (monthBranchIndex - i - 1 + 120) % 12;
}
daeunList.push({
age,
startYear,
endYear,
stem: HEAVENLY_STEMS[stemIndex],
branch: EARTHLY_BRANCHES[branchIndex],
stemKr: HEAVENLY_STEMS_KR[stemIndex],
branchKr: EARTHLY_BRANCHES_KR[branchIndex]
});
}
return daeunList;
}
/**
* 현재 대운 찾기
* @param daeunList 대운 목록
* @param currentYear 현재 년도
*/
export function getCurrentDaeun(daeunList: DaeunPillar[], currentYear: number): DaeunPillar | null {
for (const daeun of daeunList) {
if (currentYear >= daeun.startYear && currentYear <= daeun.endYear) {
return daeun;
}
}
return null;
}
/**
* 대운 해석
* @param daeun 대운 정보
* @param dayStem 일간
*/
export function getDaeunDescription(daeun: DaeunPillar, dayStem: string): string {
const age = daeun.age;
const ganzi = `${daeun.stem}${daeun.branch}`;
let description = `${age}세부터 ${age + 9}세까지의 10년은 ${daeun.stemKr}${daeun.branchKr}(${ganzi}) 대운입니다. `;
// 대운 천간과 일간의 관계에 따른 기본 해석
const stemIndex = HEAVENLY_STEMS.indexOf(daeun.stem as any);
if (age < 20) {
description += '청소년기로 학업과 기초를 다지는 시기입니다. ';
} else if (age < 40) {
description += '성장과 발전의 시기로 사회활동이 왕성한 때입니다. ';
} else if (age < 60) {
description += '안정과 성숙의 시기로 경험이 쌓이는 때입니다. ';
} else {
description += '원숙한 시기로 인생의 지혜를 나누는 때입니다. ';
}
if (stemIndex % 2 === 0) {
description += '적극적이고 외향적인 활동이 유리합니다.';
} else {
description += '차분하고 내실을 다지는 것이 좋습니다.';
}
return description;
}

97
lib/lunar-utils.ts Normal file
View File

@@ -0,0 +1,97 @@
/**
* 음력-양력 변환 유틸리티
*/
interface LunarDate {
year: number;
month: number;
day: number;
isLeap: boolean;
}
interface SolarDate {
year: number;
month: number;
day: number;
}
/**
* 음력을 양력으로 변환
* @param lunarYear 음력 년
* @param lunarMonth 음력 월
* @param lunarDay 음력 일
* @param isLeapMonth 윤달 여부
*/
export function lunarToSolar(
lunarYear: number,
lunarMonth: number,
lunarDay: number,
isLeapMonth: boolean = false
): SolarDate {
try {
const lunar = require('lunar-calendar');
const result = lunar.lunarToSolar(lunarYear, lunarMonth, lunarDay, isLeapMonth);
return {
year: result.year,
month: result.month,
day: result.day
};
} catch (error) {
console.error('음력 변환 오류:', error);
// 변환 실패시 입력값 그대로 반환
return {
year: lunarYear,
month: lunarMonth,
day: lunarDay
};
}
}
/**
* 양력을 음력으로 변환
* @param solarYear 양력 년
* @param solarMonth 양력 월
* @param solarDay 양력 일
*/
export function solarToLunar(
solarYear: number,
solarMonth: number,
solarDay: number
): LunarDate {
try {
const lunar = require('lunar-calendar');
const result = lunar.solarToLunar(solarYear, solarMonth, solarDay);
return {
year: result.year,
month: result.month,
day: result.day,
isLeap: result.isLeap || false
};
} catch (error) {
console.error('양력 변환 오류:', error);
// 변환 실패시 입력값 그대로 반환
return {
year: solarYear,
month: solarMonth,
day: solarDay,
isLeap: false
};
}
}
/**
* 음력 날짜를 문자열로 변환
*/
export function formatLunarDate(lunar: LunarDate): string {
const leapText = lunar.isLeap ? '윤' : '';
return `음력 ${lunar.year}${leapText}${lunar.month}${lunar.day}`;
}
/**
* 양력 날짜를 문자열로 변환
*/
export function formatSolarDate(solar: SolarDate): string {
return `양력 ${solar.year}${solar.month}${solar.day}`;
}

9
package-lock.json generated
View File

@@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"html2canvas": "^1.4.1", "html2canvas": "^1.4.1",
"jspdf": "^4.1.0", "jspdf": "^4.1.0",
"lunar-calendar": "^0.1.4",
"next": "16.1.6", "next": "16.1.6",
"react": "19.2.3", "react": "19.2.3",
"react-dom": "19.2.3" "react-dom": "19.2.3"
@@ -4977,6 +4978,14 @@
"yallist": "^3.0.2" "yallist": "^3.0.2"
} }
}, },
"node_modules/lunar-calendar": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/lunar-calendar/-/lunar-calendar-0.1.4.tgz",
"integrity": "sha512-5r87vbg5yg56z/jkf3A+Ur+ZggUTiJw1VATT9P7RELQgWcTNhfJ+OLkNYroSna6r65bMqyaAgapo9vRN40L75A==",
"engines": {
"node": "*"
}
},
"node_modules/magic-string": { "node_modules/magic-string": {
"version": "0.30.21", "version": "0.30.21",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",

View File

@@ -11,6 +11,7 @@
"dependencies": { "dependencies": {
"html2canvas": "^1.4.1", "html2canvas": "^1.4.1",
"jspdf": "^4.1.0", "jspdf": "^4.1.0",
"lunar-calendar": "^0.1.4",
"next": "16.1.6", "next": "16.1.6",
"react": "19.2.3", "react": "19.2.3",
"react-dom": "19.2.3" "react-dom": "19.2.3"