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

웹 디자인 전면 개편

Browse Source
This commit is contained in:
gahusb
2026-02-17 08:15:41 +09:00
parent 7042373448
commit 028bda551f
16 changed files with 1850 additions and 1050 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
app/components/SajuForm.tsx
View File

@@ -66,14 +66,14 @@ export default function SajuForm() {
<form onSubmit={handleSubmit} className="space-y-6">
{/* 생년월일 */}
<div>
<label className="block text-left text-sm font-semibold text-gray-700 mb-2">
<label className="block text-left text-sm font-bold text-[#173658] mb-3">
생년월일
</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"
className="px-4 py-3 border-2 border-[#173658]/20 rounded-xl focus:border-[#173658] focus:outline-none transition bg-white"
min="1900"
max="2100"
value={year}
@@ -83,7 +83,7 @@ export default function SajuForm() {
<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"
className="px-4 py-3 border-2 border-[#173658]/20 rounded-xl focus:border-[#173658] focus:outline-none transition bg-white"
min="1"
max="12"
value={month}
@@ -93,7 +93,7 @@ export default function SajuForm() {
<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"
className="px-4 py-3 border-2 border-[#173658]/20 rounded-xl focus:border-[#173658] focus:outline-none transition bg-white"
min="1"
max="31"
value={day}
@@ -105,11 +105,11 @@ export default function SajuForm() {
{/* 태어난 시간 */}
<div>
<label className="block text-left text-sm font-semibold text-gray-700 mb-2">
<label className="block text-left text-sm font-bold text-[#173658] mb-3">
태어난 시간 (선택)
</label>
<select
className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-indigo-500 focus:outline-none transition"
className="w-full px-4 py-3 border-2 border-[#173658]/20 rounded-xl focus:border-[#173658] focus:outline-none transition bg-white text-[#173658]"
value={hour}
onChange={(e) => setHour(e.target.value)}
>
@@ -131,17 +131,17 @@ export default function SajuForm() {
{/* 양력/음력 선택 */}
<div>
<label className="block text-left text-sm font-semibold text-gray-700 mb-2">
<label className="block text-left text-sm font-bold text-[#173658] mb-3">
생일 구분
</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 ${
className={`px-6 py-3 rounded-xl font-bold 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'
? 'bg-[#173658] text-white shadow-lg'
: 'bg-white border-2 border-[#173658]/20 text-[#173658] hover:border-[#173658] hover:bg-[#F3E7E3]'
}`}
>
양력
@@ -149,10 +149,10 @@ export default function SajuForm() {
<button
type="button"
onClick={() => setCalendarType('lunar')}
className={`px-6 py-3 rounded-xl font-semibold transition ${
className={`px-6 py-3 rounded-xl font-bold 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'
? 'bg-[#173658] text-white shadow-lg'
: 'bg-white border-2 border-[#173658]/20 text-[#173658] hover:border-[#173658] hover:bg-[#F3E7E3]'
}`}
>
음력
@@ -160,12 +160,12 @@ export default function SajuForm() {
</div>
{calendarType === 'lunar' && (
<div className="mt-3">
<label className="flex items-center justify-center gap-2 text-sm text-gray-600 cursor-pointer">
<label className="flex items-center justify-center gap-2 text-sm text-[#5d6d7e] 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"
className="w-4 h-4 text-[#173658] border-gray-300 rounded focus:ring-[#173658]"
/>
<span>윤달</span>
</label>
@@ -175,17 +175,17 @@ export default function SajuForm() {
{/* 성별 선택 */}
<div>
<label className="block text-left text-sm font-semibold text-gray-700 mb-2">
<label className="block text-left text-sm font-bold text-[#173658] mb-3">
성별
</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 ${
className={`px-6 py-3 rounded-xl font-bold 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'
? 'bg-[#173658] text-white shadow-lg'
: 'bg-white border-2 border-[#173658]/20 text-[#173658] hover:border-[#173658] hover:bg-[#F3E7E3]'
}`}
>
남성
@@ -193,10 +193,10 @@ export default function SajuForm() {
<button
type="button"
onClick={() => setGender('female')}
className={`px-6 py-3 rounded-xl font-semibold transition ${
className={`px-6 py-3 rounded-xl font-bold 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'
? 'bg-[#173658] text-white shadow-lg'
: 'bg-white border-2 border-[#173658]/20 text-[#173658] hover:border-[#173658] hover:bg-[#F3E7E3]'
}`}
>
여성
@@ -207,12 +207,12 @@ export default function SajuForm() {
{/* 제출 버튼 */}
<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"
className="w-full bg-[#173658] hover:bg-[#1e426a] text-white py-4 rounded-xl text-lg font-bold transition shadow-lg hover:shadow-xl hover:scale-[1.02]"
>
내 사주 보기 →
</button>
<p className="text-sm text-gray-500 text-center">
<p className="text-sm text-[#5d6d7e] text-center">
* 태어난 시간을 정확히 아시면 더 정확한 사주를 확인할 수 있습니다.
</p>
</form>