feat: 예약 명령 처리 로직 개선 및 완료 콜백 추가

app/game-frontend/src/components/chief/ChiefCommandEditor.vue

@@ -9,6 +9,8 @@ import type {
     ReservedCommandRow,
 } from '../command/types';
 
+type ReservationCompletion = (success: boolean) => void;
+
 const props = defineProps<{
     officerLevelText: string;
     name: string | null;
@@ -26,10 +28,14 @@ const props = defineProps<{
 const commandRows = computed(() => props.rows.map((row) => ({ ...row, action: row.actionCode ?? row.action })));
 
 const emit = defineEmits<{
-    (event: 'reserve-bulk', entries: CommandPatternEntry[]): void;
+    (event: 'reserve-bulk', entries: CommandPatternEntry[], complete?: ReservationCompletion): void;
     (event: 'shift', amount: number): void;
     (event: 'repeat', amount: number): void;
 }>();
+
+const reserveBulk = (entries: CommandPatternEntry[], complete?: ReservationCompletion) => {
+    emit('reserve-bulk', entries, complete);
+};
 </script>
 
 <template>
@@ -47,7 +53,7 @@ const emit = defineEmits<{
         :current-time="props.rows[0]?.time"
         :map-data="props.mapData"
         :map-layout="props.mapLayout"
-        @reserve-bulk="emit('reserve-bulk', $event)"
+        @reserve-bulk="reserveBulk"
         @shift="emit('shift', $event)"
         @repeat="emit('repeat', $event)"
     />

app/game-frontend/src/components/command/ReservedCommandEditor.vue

@@ -56,7 +56,7 @@ const props = withDefaults(
 );
 
 const emit = defineEmits<{
-    (event: 'reserve-bulk', entries: CommandPatternEntry[]): void;
+    (event: 'reserve-bulk', entries: CommandPatternEntry[], complete?: (success: boolean) => void): void;
     (event: 'shift', amount: number): void;
     (event: 'repeat', amount: number): void;
 }>();
@@ -79,7 +79,9 @@ const commandArgs = ref<Record<string, unknown>>({});
 const commandArgsValid = ref(false);
 const expanded = ref(false);
 const menuRevision = ref(0);
-const pendingReservation = ref<CommandPatternEntry | null>(null);
+const pendingReservation = ref<{ requestId: number; entry: CommandPatternEntry } | null>(null);
+let reservationRequestId = 0;
+
 const editorElement = ref<HTMLElement | null>(null);
 const pickerElement = ref<HTMLElement | null>(null);
 const collapsedRowCount = 15;
@@ -109,24 +111,6 @@ watch([editMode, activeCategory], () => {
     if (editMode.value) quickTarget.value = null;
 });
 
-watch(
-    () => props.rows,
-    (rows) => {
-        const pending = pendingReservation.value;
-        if (!pending) return;
-        const saved = pending.turnList.every((index) => {
-            const row = rows[index];
-            return row?.action === pending.action && JSON.stringify(row.args ?? {}) === JSON.stringify(pending.args);
-        });
-        if (!saved) return;
-        storage.value?.pushRecent({ ...pending, turnList: [0] });
-        pendingReservation.value = null;
-        releaseSelection();
-        closePicker();
-    },
-    { deep: true }
-);
-
 const scopedTable = computed<CommandTable | null>(() => {
     if (!props.commandTable) return null;
     return {
@@ -276,11 +260,23 @@ const selectCommand = (commandKey: string) => {
 };
 const submitCommand = () => {
     const command = selectedCommand.value;
-    if (!command || !commandArgsValid.value) return;
+    if (!command || !commandArgsValid.value || pendingReservation.value) return;
     const turnList = quickTarget.value === null ? selectedIndices() : [quickTarget.value];
     const entry = { turnList, action: command.key, args: { ...commandArgs.value }, label: command.name };
-    emit('reserve-bulk', [entry]);
-    pendingReservation.value = entry;
+    const requestId = ++reservationRequestId;
+    pendingReservation.value = { requestId, entry };
+
+    emit('reserve-bulk', [entry], (success) => {
+        const pending = pendingReservation.value;
+        if (!pending || pending.requestId !== requestId) return;
+
+        pendingReservation.value = null;
+        if (!success) return;
+
+        storage.value?.pushRecent({ ...entry, turnList: [0] });
+        releaseSelection();
+        closePicker();
+    });
 };
 const returnToCommandList = () => {
     selectedCommand.value = null;

app/game-frontend/src/components/main/CommandListPanel.vue

@@ -14,6 +14,8 @@ import type {
     ReservedCommandRow,
 } from '../command/types';
 
+type ReservationCompletion = (success: boolean) => void;
+
 const props = defineProps<{
     commandTable: CommandTable | null;
     loading: boolean;
@@ -35,11 +37,15 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (event: 'set-general-turns', entries: CommandPatternEntry[]): void;
+    (event: 'set-general-turns', entries: CommandPatternEntry[], complete?: ReservationCompletion): void;
     (event: 'shift-general-turns', amount: number): void;
     (event: 'repeat-general-turns', amount: number): void;
 }>();
 
+const reserveBulk = (entries: CommandPatternEntry[], complete?: ReservationCompletion) => {
+    emit('set-general-turns', entries, complete);
+};
+
 const editModeStorageKey = generalTurnEditorModeStorageKey(
     gameFrontendRuntimeConfig.profile,
     gameFrontendRuntimeConfig.appBasePath
@@ -154,7 +160,7 @@ onUnmounted(() => {
         :autonomous-until="autonomousUntil"
         :mobile="props.mobile"
         :max-push-turn="12"
-        @reserve-bulk="emit('set-general-turns', $event)"
+        @reserve-bulk="reserveBulk"
         @shift="emit('shift-general-turns', $event)"
         @repeat="emit('repeat-general-turns', $event)"
     />