gahusb/saju-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 사주 웹사이트 핵심 기능 구현

Browse Source 
- 사주팔자 계산 라이브러리 구현 (천간, 지지, 십성, 십이운성)
- 사주 결과 페이지 구현 (사주팔자 표 및 해석)
- 오늘의 운세 페이지 구현 (일일 운세, 행운의 요소)
- 궁합 보기 기능 구현 (두 사람 입력 폼)
- 궁합 결과 페이지 구현 (종합 점수, 세부 분석)
- 페이지 간 네비게이션 연결

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
gahusb
2026-02-11 23:36:22 +09:00
parent f4dbacccad
commit 08d6f71fd1
8 changed files with 1957 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

281
app/components/CompatibilityForm.tsx Normal file
View File

@@ -0,0 +1,281 @@
'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
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');
// 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 handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (!year1 || !month1 || !day1) {
alert('첫 번째 사람의 생년월일을 모두 입력해주세요.');
return;
}
if (!year2 || !month2 || !day2) {
alert('두 번째 사람의 생년월일을 모두 입력해주세요.');
return;
}
// URL 파라미터로 전달
const params = new URLSearchParams({
year1,
month1,
day1,
gender1,
year2,
month2,
day2,
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={() => 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={() => 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>
);
}

181
app/components/SajuForm.tsx Normal file
View File

@@ -0,0 +1,181 @@
'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
export default function SajuForm() {
const router = useRouter();
const [year, setYear] = useState('');
const [month, setMonth] = useState('');
const [day, setDay] = useState('');
const [hour, setHour] = useState('');
const [calendarType, setCalendarType] = useState<'solar' | 'lunar'>('solar');
const [gender, setGender] = useState<'male' | 'female'>('male');
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (!year || !month || !day) {
alert('생년월일을 모두 입력해주세요.');
return;
}
// URL 파라미터로 전달
const params = new URLSearchParams({
year,
month,
day,
gender,
calendarType
});
if (hour) {
params.append('hour', hour);
}
router.push(`/result?${params.toString()}`);
};
return (
<form onSubmit={handleSubmit} className="space-y-6">
{/* 생년월일 */}
<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="년 (예: 1990)"
className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-indigo-500 focus:outline-none transition"
min="1900"
max="2100"
value={year}
onChange={(e) => setYear(e.target.value)}
required
/>
<input
type="number"
placeholder="월 (1-12)"
className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-indigo-500 focus:outline-none transition"
min="1"
max="12"
value={month}
onChange={(e) => setMonth(e.target.value)}
required
/>
<input
type="number"
placeholder="일 (1-31)"
className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-indigo-500 focus:outline-none transition"
min="1"
max="31"
value={day}
onChange={(e) => setDay(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-indigo-500 focus:outline-none transition"
value={hour}
onChange={(e) => setHour(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={() => setCalendarType('solar')}
className={`px-6 py-3 rounded-xl font-semibold transition ${
calendarType === 'solar'
? 'bg-indigo-600 text-white'
: 'bg-white border-2 border-gray-200 text-gray-700 hover:border-indigo-500 hover:text-indigo-600'
}`}
>
양력
</button>
<button
type="button"
onClick={() => setCalendarType('lunar')}
className={`px-6 py-3 rounded-xl font-semibold transition ${
calendarType === 'lunar'
? 'bg-indigo-600 text-white'
: 'bg-white border-2 border-gray-200 text-gray-700 hover:border-indigo-500 hover:text-indigo-600'
}`}
>
음력
</button>
</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={() => setGender('male')}
className={`px-6 py-3 rounded-xl font-semibold transition ${
gender === 'male'
? 'bg-indigo-600 text-white'
: 'bg-white border-2 border-gray-200 text-gray-700 hover:border-indigo-500 hover:text-indigo-600'
}`}
>
남성
</button>
<button
type="button"
onClick={() => setGender('female')}
className={`px-6 py-3 rounded-xl font-semibold transition ${
gender === 'female'
? 'bg-indigo-600 text-white'
: 'bg-white border-2 border-gray-200 text-gray-700 hover:border-indigo-500 hover:text-indigo-600'
}`}
>
여성
</button>
</div>
</div>
{/* 제출 버튼 */}
<button
type="submit"
className="w-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-4 rounded-xl text-lg font-bold hover:from-indigo-700 hover:to-purple-700 transition shadow-lg hover:shadow-xl"
>
내 사주 보기 →
</button>
<p className="text-sm text-gray-500 text-center">
* 태어난 시간을 정확히 아시면 더 정확한 사주를 확인할 수 있습니다.
</p>
</form>
);
}