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

@@ -2,6 +2,7 @@
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { lunarToSolar } from '@/lib/lunar-utils';
export default function SajuForm() {
const router = useRouter();
@@ -11,6 +12,7 @@ export default function SajuForm() {
const [hour, setHour] = useState('');
const [calendarType, setCalendarType] = useState<'solar' | 'lunar'>('solar');
const [gender, setGender] = useState<'male' | 'female'>('male');
const [isLeapMonth, setIsLeapMonth] = useState(false);
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
@@ -20,19 +22,43 @@ export default function SajuForm() {
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 파라미터로 전달
const params = new URLSearchParams({
year,
month,
day,
year: finalYear,
month: finalMonth,
day: finalDay,
gender,
calendarType
calendarType,
originalYear: year,
originalMonth: month,
originalDay: day,
});
if (hour) {
params.append('hour', hour);
}
if (calendarType === 'lunar') {
params.append('isLeapMonth', isLeapMonth.toString());
}
router.push(`/result?${params.toString()}`);
};
@@ -132,6 +158,19 @@ export default function SajuForm() {
</button>
</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>
{/* 성별 선택 */}