66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import { FormEvent, useState } from 'react';
|
|
|
|
export function BoardingMissionForm({
|
|
onDock,
|
|
onCancel,
|
|
autoFocus = false,
|
|
compact = false,
|
|
}: {
|
|
onDock: (mission: string) => void;
|
|
onCancel?: () => void;
|
|
autoFocus?: boolean;
|
|
compact?: boolean;
|
|
}) {
|
|
const [mission, setMission] = useState('');
|
|
const trimmedMission = mission.trim();
|
|
const canSubmit = Boolean(trimmedMission);
|
|
|
|
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
if (!canSubmit) return;
|
|
onDock(trimmedMission);
|
|
};
|
|
|
|
return (
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
className={`flex flex-col ${compact ? 'gap-6' : 'space-y-8 flex-1'}`}
|
|
>
|
|
<div className="space-y-3">
|
|
<label className="block text-sm font-medium text-slate-300">
|
|
이번 항해의 핵심 목표
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={mission}
|
|
onChange={(event) => setMission(event.target.value)}
|
|
placeholder="예: 서론 3문단 완성하기"
|
|
className="w-full border-b-2 border-slate-700 bg-slate-900/50 px-0 py-3 text-lg outline-none transition-colors placeholder:text-slate-600 focus:border-indigo-500"
|
|
autoFocus={autoFocus}
|
|
/>
|
|
</div>
|
|
|
|
<div className={`flex ${compact ? 'justify-end gap-3' : 'mt-8 flex-col gap-3'} w-full`}>
|
|
{onCancel && (
|
|
<button
|
|
type="button"
|
|
onClick={onCancel}
|
|
className="rounded-xl border border-slate-700 bg-transparent px-4 py-2 font-semibold text-slate-300 transition-colors hover:bg-slate-900/60 hover:text-white"
|
|
>
|
|
취소
|
|
</button>
|
|
)}
|
|
<button
|
|
type="submit"
|
|
disabled={!canSubmit}
|
|
className={`rounded-xl bg-indigo-600 font-bold text-white transition-all shadow-lg shadow-indigo-900/30 hover:bg-indigo-500 disabled:bg-slate-800 disabled:text-slate-500 ${compact ? 'px-6 py-2' : 'w-full py-4 text-lg'}`}
|
|
>
|
|
도킹 완료 (출항)
|
|
</button>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|