feat: 모달에서 enter를 눌렀을 때 다음화면으로 넘어가도록 실행
This commit is contained in:
@@ -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
|
<button
|
||||||
onClick={handleSave}
|
type="submit"
|
||||||
disabled={!status}
|
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"
|
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>
|
</button>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user