109 lines
3.8 KiB
TypeScript
109 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import { FormEvent, useEffect, useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { getCurrentVoyage, saveToHistory, saveCurrentVoyage } from '@/shared/lib/store';
|
|
import { Voyage, VoyageStatus } from '@/shared/types';
|
|
|
|
export default function DebriefPage() {
|
|
const router = useRouter();
|
|
const [voyage, setVoyage] = useState<Voyage | null>(null);
|
|
|
|
const [status, setStatus] = useState<VoyageStatus | null>(null);
|
|
const [progress, setProgress] = useState('');
|
|
|
|
useEffect(() => {
|
|
const current = getCurrentVoyage();
|
|
if (!current) {
|
|
router.replace('/');
|
|
return;
|
|
}
|
|
setVoyage(current);
|
|
}, [router]);
|
|
|
|
const handleSave = () => {
|
|
if (!voyage || !status) return;
|
|
|
|
const finalVoyage: Voyage = {
|
|
...voyage,
|
|
status: status,
|
|
debriefProgress: progress,
|
|
endedAt: voyage.endedAt || Date.now(), // Fallback if missed in flight
|
|
};
|
|
|
|
saveToHistory(finalVoyage);
|
|
saveCurrentVoyage(null);
|
|
router.push('/log');
|
|
};
|
|
|
|
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
handleSave();
|
|
};
|
|
|
|
if (!voyage) return null;
|
|
|
|
const statusOptions: { value: VoyageStatus; label: string; desc: string }[] = [
|
|
{ value: 'completed', label: '계획대로', desc: '목표를 달성했습니다' },
|
|
{ value: 'partial', label: '부분 진행', desc: '절반의 성공입니다' },
|
|
{ value: 'reoriented', label: '방향 재설정', desc: '새로운 발견을 했습니다' },
|
|
];
|
|
|
|
return (
|
|
<div className="flex flex-col flex-1 p-6 max-w-2xl mx-auto w-full animate-in zoom-in-95 duration-500">
|
|
<header className="mb-8 text-center">
|
|
<h1 className="text-2xl font-bold text-white mb-2">무사히 궤도에 도착했습니다</h1>
|
|
<p className="text-slate-400">이번 항해를 짧게 기록하고 마무리하세요.</p>
|
|
</header>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-8 flex-1">
|
|
{/* Question 1: Status */}
|
|
<section>
|
|
<label className="block text-sm font-medium text-slate-300 mb-3">
|
|
항해 결과
|
|
</label>
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
|
{statusOptions.map((opt) => (
|
|
<button
|
|
key={opt.value}
|
|
type="button"
|
|
onClick={() => setStatus(opt.value)}
|
|
className={`p-4 rounded-xl border text-left transition-all ${
|
|
status === opt.value
|
|
? 'bg-indigo-900/40 border-indigo-500 ring-1 ring-indigo-500'
|
|
: 'bg-slate-900/50 border-slate-800 hover:bg-slate-800'
|
|
}`}
|
|
>
|
|
<div className="font-bold text-slate-200 mb-1">{opt.label}</div>
|
|
<div className="text-xs text-slate-500">{opt.desc}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Question 2: Secured */}
|
|
<section>
|
|
<label className="block text-sm font-medium text-slate-300 mb-2">
|
|
이번 항해에서 확보한 것 (What)
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={progress}
|
|
onChange={(e) => setProgress(e.target.value)}
|
|
placeholder="예: 기획안 목차 구성 완료"
|
|
className="w-full bg-slate-900/30 border border-slate-800 rounded-lg px-4 py-3 text-slate-200 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none transition-all"
|
|
/>
|
|
</section>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={!status}
|
|
className="w-full mt-10 py-4 bg-indigo-600 hover:bg-indigo-500 disabled:bg-slate-800 disabled:text-slate-500 text-white font-bold rounded-xl transition-all shadow-lg shadow-indigo-900/20"
|
|
>
|
|
항해일지 저장
|
|
</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|