feat: 모달에서 enter를 눌렀을 때 다음화면으로 넘어가도록 실행

This commit is contained in:
2026-02-13 15:52:44 +09:00
parent d60d4ccd9e
commit 99c996b20e
2 changed files with 32 additions and 16 deletions

View File

@@ -1,6 +1,6 @@
'use client'; 'use client';
import { useEffect, useState } from 'react'; import { FormEvent, useEffect, useState } from 'react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { getCurrentVoyage, saveToHistory, saveCurrentVoyage } from '@/shared/lib/store'; import { getCurrentVoyage, saveToHistory, saveCurrentVoyage } from '@/shared/lib/store';
import { Voyage, VoyageStatus } from '@/shared/types'; import { Voyage, VoyageStatus } from '@/shared/types';
@@ -38,6 +38,11 @@ export default function DebriefPage() {
router.push('/log'); router.push('/log');
}; };
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
handleSave();
};
if (!voyage) return null; if (!voyage) return null;
const statusOptions: { value: VoyageStatus; label: string; desc: string }[] = [ const statusOptions: { value: VoyageStatus; label: string; desc: string }[] = [
@@ -53,7 +58,7 @@ export default function DebriefPage() {
<p className="text-slate-400"> .</p> <p className="text-slate-400"> .</p>
</header> </header>
<div className="space-y-8 flex-1"> <form onSubmit={handleSubmit} className="space-y-8 flex-1">
{/* Question 1: Status */} {/* Question 1: Status */}
<section> <section>
<label className="block text-sm font-medium text-slate-300 mb-3"> <label className="block text-sm font-medium text-slate-300 mb-3">
@@ -63,6 +68,7 @@ export default function DebriefPage() {
{statusOptions.map((opt) => ( {statusOptions.map((opt) => (
<button <button
key={opt.value} key={opt.value}
type="button"
onClick={() => setStatus(opt.value)} onClick={() => setStatus(opt.value)}
className={`p-4 rounded-xl border text-left transition-all ${ className={`p-4 rounded-xl border text-left transition-all ${
status === opt.value status === opt.value
@@ -104,15 +110,14 @@ export default function DebriefPage() {
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" 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> </section>
</div> <button
type="submit"
<button disabled={!status}
onClick={handleSave} 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"
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>
</button>
</div> </div>
); );
} }

View File

@@ -1,6 +1,6 @@
'use client'; 'use client';
import { useState } from 'react'; import { FormEvent, useState } from 'react';
export function BoardingMissionForm({ export function BoardingMissionForm({
onDock, onDock,
@@ -15,9 +15,19 @@ export function BoardingMissionForm({
}) { }) {
const [mission, setMission] = useState(''); const [mission, setMission] = useState('');
const trimmedMission = mission.trim(); const trimmedMission = mission.trim();
const canSubmit = Boolean(trimmedMission);
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
if (!canSubmit) return;
onDock(trimmedMission);
};
return ( 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"> <div className="space-y-3">
<label className="block text-sm font-medium text-slate-300"> <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`}> <div className={`flex ${compact ? 'justify-end gap-3' : 'mt-8 flex-col gap-3'} w-full`}>
{onCancel && ( {onCancel && (
<button <button
type="button"
onClick={onCancel} 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" 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>
)} )}
<button <button
onClick={() => onDock(trimmedMission)} type="submit"
disabled={!trimmedMission} 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'}`} 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> </button>
</div> </div>
</div> </form>
); );
} }