feat: 모달에서 enter를 눌렀을 때 다음화면으로 넘어가도록 실행
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { FormEvent, useState } from 'react';
|
||||
|
||||
export function BoardingMissionForm({
|
||||
onDock,
|
||||
@@ -15,9 +15,19 @@ export function BoardingMissionForm({
|
||||
}) {
|
||||
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 (
|
||||
<div className={`flex flex-col ${compact ? 'gap-6' : 'space-y-8 flex-1'}`}>
|
||||
<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">
|
||||
이번 항해의 핵심 목표
|
||||
@@ -35,6 +45,7 @@ export function BoardingMissionForm({
|
||||
<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"
|
||||
>
|
||||
@@ -42,13 +53,13 @@ export function BoardingMissionForm({
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => onDock(trimmedMission)}
|
||||
disabled={!trimmedMission}
|
||||
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>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user