gahusb
affbdf1a44
- 음력 변환 기능 구현 - lunar-calendar 라이브러리 추가 - 음력-양력 변환 유틸리티 생성 - 모든 입력 폼에 양력/음력 선택 및 윤달 옵션 추가 - SajuForm, CompatibilityForm에 음력 지원 - 대운(大運) 계산 기능 구현 - 10년 단위 대운 계산 알고리즘 - 현재 대운 표시 및 해석 - 사주팔자 결과 페이지에 대운 섹션 추가 - 8개 대운 (80년치) 표시 - 소셜 공유 기능 구현 - ShareButtons 컴포넌트 생성 - 카카오톡, 페이스북, 트위터 공유 - 네이티브 공유 API 지원 - 링크 복사 기능 - 모든 결과 페이지에 공유 버튼 추가 - 메타데이터 개선 - 사이트 제목 및 설명 최적화 - 한국어(ko) 설정 - 카카오 SDK 추가 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
393 lines
15 KiB
TypeScript
393 lines
15 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { lunarToSolar } from '@/lib/lunar-utils';
|
|
|
|
export default function CompatibilityForm() {
|
|
const router = useRouter();
|
|
|
|
// Person 1
|
|
const [year1, setYear1] = useState('');
|
|
const [month1, setMonth1] = useState('');
|
|
const [day1, setDay1] = useState('');
|
|
const [hour1, setHour1] = useState('');
|
|
const [gender1, setGender1] = useState<'male' | 'female'>('male');
|
|
const [calendarType1, setCalendarType1] = useState<'solar' | 'lunar'>('solar');
|
|
const [isLeapMonth1, setIsLeapMonth1] = useState(false);
|
|
|
|
// Person 2
|
|
const [year2, setYear2] = useState('');
|
|
const [month2, setMonth2] = useState('');
|
|
const [day2, setDay2] = useState('');
|
|
const [hour2, setHour2] = useState('');
|
|
const [gender2, setGender2] = useState<'male' | 'female'>('female');
|
|
const [calendarType2, setCalendarType2] = useState<'solar' | 'lunar'>('solar');
|
|
const [isLeapMonth2, setIsLeapMonth2] = useState(false);
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!year1 || !month1 || !day1) {
|
|
alert('첫 번째 사람의 생년월일을 모두 입력해주세요.');
|
|
return;
|
|
}
|
|
|
|
if (!year2 || !month2 || !day2) {
|
|
alert('두 번째 사람의 생년월일을 모두 입력해주세요.');
|
|
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 파라미터로 전달
|
|
const params = new URLSearchParams({
|
|
year1: finalYear1,
|
|
month1: finalMonth1,
|
|
day1: finalDay1,
|
|
gender1,
|
|
year2: finalYear2,
|
|
month2: finalMonth2,
|
|
day2: finalDay2,
|
|
gender2,
|
|
});
|
|
|
|
if (hour1) params.append('hour1', hour1);
|
|
if (hour2) params.append('hour2', hour2);
|
|
|
|
router.push(`/compatibility/result?${params.toString()}`);
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="bg-white rounded-3xl shadow-2xl p-8 md:p-12">
|
|
<div className="grid md:grid-cols-2 gap-12">
|
|
{/* Person 1 */}
|
|
<div className="space-y-6">
|
|
<div className="text-center mb-6">
|
|
<h3 className="text-2xl font-bold text-pink-600 mb-2">👤 첫 번째 사람</h3>
|
|
<p className="text-sm text-gray-600">본인의 정보를 입력하세요</p>
|
|
</div>
|
|
|
|
{/* 생년월일 */}
|
|
<div>
|
|
<label className="block text-left text-sm font-semibold text-gray-700 mb-2">
|
|
생년월일
|
|
</label>
|
|
<div className="grid grid-cols-3 gap-3">
|
|
<input
|
|
type="number"
|
|
placeholder="년"
|
|
className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-pink-500 focus:outline-none transition"
|
|
min="1900"
|
|
max="2100"
|
|
value={year1}
|
|
onChange={(e) => setYear1(e.target.value)}
|
|
required
|
|
/>
|
|
<input
|
|
type="number"
|
|
placeholder="월"
|
|
className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-pink-500 focus:outline-none transition"
|
|
min="1"
|
|
max="12"
|
|
value={month1}
|
|
onChange={(e) => setMonth1(e.target.value)}
|
|
required
|
|
/>
|
|
<input
|
|
type="number"
|
|
placeholder="일"
|
|
className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-pink-500 focus:outline-none transition"
|
|
min="1"
|
|
max="31"
|
|
value={day1}
|
|
onChange={(e) => setDay1(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 태어난 시간 */}
|
|
<div>
|
|
<label className="block text-left text-sm font-semibold text-gray-700 mb-2">
|
|
태어난 시간 (선택)
|
|
</label>
|
|
<select
|
|
className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-pink-500 focus:outline-none transition"
|
|
value={hour1}
|
|
onChange={(e) => setHour1(e.target.value)}
|
|
>
|
|
<option value="">모름 / 선택 안함</option>
|
|
<option value="0">자시 (23:00-01:00)</option>
|
|
<option value="1">축시 (01:00-03:00)</option>
|
|
<option value="3">인시 (03:00-05:00)</option>
|
|
<option value="5">묘시 (05:00-07:00)</option>
|
|
<option value="7">진시 (07:00-09:00)</option>
|
|
<option value="9">사시 (09:00-11:00)</option>
|
|
<option value="11">오시 (11:00-13:00)</option>
|
|
<option value="13">미시 (13:00-15:00)</option>
|
|
<option value="15">신시 (15:00-17:00)</option>
|
|
<option value="17">유시 (17:00-19:00)</option>
|
|
<option value="19">술시 (19:00-21:00)</option>
|
|
<option value="21">해시 (21:00-23:00)</option>
|
|
</select>
|
|
</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>
|
|
<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={() => setGender1('male')}
|
|
className={`px-6 py-3 rounded-xl font-semibold transition ${
|
|
gender1 === 'male'
|
|
? '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={() => setGender1('female')}
|
|
className={`px-6 py-3 rounded-xl font-semibold transition ${
|
|
gender1 === 'female'
|
|
? '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>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Person 2 */}
|
|
<div className="space-y-6">
|
|
<div className="text-center mb-6">
|
|
<h3 className="text-2xl font-bold text-purple-600 mb-2">👤 두 번째 사람</h3>
|
|
<p className="text-sm text-gray-600">상대방의 정보를 입력하세요</p>
|
|
</div>
|
|
|
|
{/* 생년월일 */}
|
|
<div>
|
|
<label className="block text-left text-sm font-semibold text-gray-700 mb-2">
|
|
생년월일
|
|
</label>
|
|
<div className="grid grid-cols-3 gap-3">
|
|
<input
|
|
type="number"
|
|
placeholder="년"
|
|
className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition"
|
|
min="1900"
|
|
max="2100"
|
|
value={year2}
|
|
onChange={(e) => setYear2(e.target.value)}
|
|
required
|
|
/>
|
|
<input
|
|
type="number"
|
|
placeholder="월"
|
|
className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition"
|
|
min="1"
|
|
max="12"
|
|
value={month2}
|
|
onChange={(e) => setMonth2(e.target.value)}
|
|
required
|
|
/>
|
|
<input
|
|
type="number"
|
|
placeholder="일"
|
|
className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition"
|
|
min="1"
|
|
max="31"
|
|
value={day2}
|
|
onChange={(e) => setDay2(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 태어난 시간 */}
|
|
<div>
|
|
<label className="block text-left text-sm font-semibold text-gray-700 mb-2">
|
|
태어난 시간 (선택)
|
|
</label>
|
|
<select
|
|
className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition"
|
|
value={hour2}
|
|
onChange={(e) => setHour2(e.target.value)}
|
|
>
|
|
<option value="">모름 / 선택 안함</option>
|
|
<option value="0">자시 (23:00-01:00)</option>
|
|
<option value="1">축시 (01:00-03:00)</option>
|
|
<option value="3">인시 (03:00-05:00)</option>
|
|
<option value="5">묘시 (05:00-07:00)</option>
|
|
<option value="7">진시 (07:00-09:00)</option>
|
|
<option value="9">사시 (09:00-11:00)</option>
|
|
<option value="11">오시 (11:00-13:00)</option>
|
|
<option value="13">미시 (13:00-15:00)</option>
|
|
<option value="15">신시 (15:00-17:00)</option>
|
|
<option value="17">유시 (17:00-19:00)</option>
|
|
<option value="19">술시 (19:00-21:00)</option>
|
|
<option value="21">해시 (21:00-23:00)</option>
|
|
</select>
|
|
</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>
|
|
<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={() => setGender2('male')}
|
|
className={`px-6 py-3 rounded-xl font-semibold transition ${
|
|
gender2 === 'male'
|
|
? '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={() => setGender2('female')}
|
|
className={`px-6 py-3 rounded-xl font-semibold transition ${
|
|
gender2 === 'female'
|
|
? '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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 제출 버튼 */}
|
|
<div className="mt-8">
|
|
<button
|
|
type="submit"
|
|
className="w-full bg-gradient-to-r from-pink-600 to-purple-600 text-white py-4 rounded-xl text-lg font-bold hover:from-pink-700 hover:to-purple-700 transition shadow-lg hover:shadow-xl"
|
|
>
|
|
💕 궁합 확인하기 →
|
|
</button>
|
|
</div>
|
|
|
|
<p className="text-sm text-gray-500 text-center mt-4">
|
|
* 태어난 시간을 정확히 아시면 더 정확한 궁합을 확인할 수 있습니다.
|
|
</p>
|
|
</form>
|
|
);
|
|
}
|