56 lines
1.9 KiB
JavaScript
56 lines
1.9 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import './_shell/tokens.css';
|
|
import './_shell/shell.css';
|
|
import useViewportMode from './_shell/useViewportMode';
|
|
import BottomNav from './_shell/BottomNav';
|
|
import DesktopHeader from './_shell/DesktopHeader';
|
|
import MatchMobile from './views/match.mobile.jsx';
|
|
import MatchDesktop from './views/match.desktop.jsx';
|
|
import { compatInterpret } from '../../api';
|
|
|
|
const EMPTY_PERSON = {
|
|
name: '', year: '', month: '', day: '', hour: null,
|
|
gender: 'male', calendar_type: 'solar',
|
|
};
|
|
|
|
export default function Compatibility() {
|
|
const mode = useViewportMode();
|
|
const navigate = useNavigate();
|
|
const [personA, setPersonA] = useState({ ...EMPTY_PERSON });
|
|
const [personB, setPersonB] = useState({ ...EMPTY_PERSON });
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState(null);
|
|
|
|
const handleSubmit = async (e) => {
|
|
if (e && e.preventDefault) e.preventDefault();
|
|
setError(null);
|
|
if (!personA.year || !personA.month || !personA.day ||
|
|
!personB.year || !personB.month || !personB.day) {
|
|
setError('두 사람의 생년월일을 입력해주세요.');
|
|
return;
|
|
}
|
|
setLoading(true);
|
|
try {
|
|
const res = await compatInterpret({ person_a: personA, person_b: personB });
|
|
navigate(`/saju/compatibility/result?cid=${res.reading_id}`);
|
|
} catch (err) {
|
|
setError(err?.message || '궁합 풀이에 실패했어요.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const props = {
|
|
personA, personB, onChangeA: setPersonA, onChangeB: setPersonB,
|
|
onSubmit: handleSubmit, loading, error,
|
|
};
|
|
return (
|
|
<div className="saju-v2">
|
|
{mode === 'desktop' && <DesktopHeader />}
|
|
{mode === 'desktop' ? <MatchDesktop {...props} /> : <MatchMobile {...props} />}
|
|
{mode === 'mobile' && <BottomNav theme="ivory" />}
|
|
</div>
|
|
);
|
|
}
|