feat: 사령부 턴 입력기에도 일반, 고급 모드 적용

2022-03-26 21:37:04 +09:00
parent 7f815baeb5
commit 6cd937c1cb
9 changed files with 939 additions and 542 deletions
@@ -0,0 +1,76 @@
+<?php
+
+namespace sammo\API\NationCommand;
+
+use sammo\Session;
+use DateTimeInterface;
+use sammo\GameConst;
+use sammo\Util;
+use sammo\Validator;
+
+use function sammo\setNationCommand;
+
+class ReserveBulkCommand extends \sammo\BaseAPI
+{
+    public function validateArgs(): ?string
+    {
+        foreach ($this->args as $idx => $turn) {
+            $v = new Validator($turn);
+            $v->rule('required', [
+                'action',
+                'turnList'
+            ])
+                ->rule('lengthMin', 'action', 1)
+                ->rule('integerArray', 'turnList');
+
+            if (!$v->validate()) {
+                return "{$idx}:{$v->errorStr()}";
+            }
+        }
+
+        return null;
+    }
+
+    public function getRequiredSessionMode(): int
+    {
+        return static::REQ_GAME_LOGIN | static::REQ_READ_ONLY;
+    }
+
+    public function launch(Session $session, ?DateTimeInterface $modifiedSince, ?string $reqEtag)
+    {
+        $briefList = [];
+        foreach ($this->args as $idx => $turn) {
+            $action = $turn['action'];
+            $turnList = $turn['turnList'];
+            $arg = $turn['arg'] ?? [];
+
+            if (!$turnList) {
+                return "{$idx}: 턴이 입력되지 않았습니다";
+            }
+
+            if (!in_array($action, Util::array_flatten(GameConst::$availableChiefCommand))) {
+                return "{$idx}: 사용할 수 없는 커맨드입니다.";
+            }
+
+            if (!is_array($arg)) {
+                return "{$idx}: 올바른 arg 형태가 아닙니다.";
+            }
+            $partialResult = setNationCommand($session->generalID, $turnList, $action, $arg);
+            if(!$partialResult['result']){
+                return [
+                    'result' => false,
+                    'briefList' => $briefList,
+                    'errorIdx' => $idx,
+                    'reason' => $partialResult['reason']
+                ];
+            }
+            $briefList[$idx] = $partialResult['brief'];
+        }
+
+        return [
+            'result' => true,
+            'briefList' => $briefList,
+            'reason' => 'success'
+        ];
+    }
+}
@@ -109,7 +109,6 @@ $modcolor2: color.adjust($nbase2color, $lightness: -5%);
        width: 500px;
        height: 460px;
        margin: auto;
-        overflow: hidden;
    }

    #mainTable {
@@ -38,13 +38,13 @@
 </template>
 <script lang="ts">
 import { getNpcColor } from "@/common_legacy";
-import { ChiefResponse } from "@/defs";
+import type { ChiefResponse } from "@/defs";
 import { formatTime } from "@/util/formatTime";
 import { mb_strwidth } from "@/util/mb_strwidth";
 import { parseTime } from "@/util/parseTime";
 import addMinutes from "date-fns/esm/addMinutes/index";
 import { range } from "lodash";
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 import VueTypes from "vue-types";

 export default defineComponent({
@@ -36,102 +36,26 @@
            :maxTurn="maxChiefTurn"
            :turnTerm="turnTerm"
          />
-          <div class="commandBox" v-else>
-            <div class="only1000px bg1 center row gx-0" style="height: 24px; font-size: 1.2em">
-              <div class="col-5 align-self-center text-end">{{ officer.officerLevelText }} :</div>
-              <div
-                class="col-7 align-self-center"
-                :style="{
-                  color: getNpcColor(officer.npcType ?? 0),
-                }"
-              >{{ officer.name }}</div>
-            </div>
-            <div
-              :class="[
-                'row',
-                'controlPad',
-                chiefLevel == officerLevel ? 'targetIsMe' : 'targetIsNotMe',
-              ]"
-            >
-              <div class="col-3 col-md-12 order-md-last">
-                <div class="d-grid mb-1 py-1 only500px bg1 center">
-                  <div
-                    :style="{
-                      color: getNpcColor(officer.npcType ?? 0),
-                      fontSize: '1.2em',
-                    }"
-                  >{{ officer.name }}</div>
-                  <div>{{ officer.officerLevelText }}</div>
-                </div>
-                <div class="row gx-1 gy-1 py-1">
-                  <div class="col-md-4 mx-0 mb-0 mt-1 d-grid">
-                    <div
-                      class="alert alert-primary mb-0 center"
-                      style="padding: 0.5rem 0"
-                    >{{ serverNow }}</div>
-                  </div>
-
-                  <b-dropdown class="col-md-4" left text="턴 선택">
-                    <b-dropdown-item @click="selectNone()">해제</b-dropdown-item>
-                    <b-dropdown-item @click="selectAll(true)">모든턴</b-dropdown-item>
-                    <b-dropdown-item @click="selectStep(0, 2)">홀수턴</b-dropdown-item>
-                    <b-dropdown-item @click="selectStep(1, 2)">짝수턴</b-dropdown-item>
-                    <b-dropdown-divider></b-dropdown-divider>
-
-                    <b-dropdown-text v-for="spanIdx in [3, 4, 5, 6, 7]" :key="spanIdx">
-                      {{ spanIdx }}턴 간격
-                      <br />
-                      <b-button-group>
-                        <b-button
-                          class="ignoreMe"
-                          v-for="beginIdx in spanIdx"
-                          :key="beginIdx"
-                          @click="selectStep(beginIdx - 1, spanIdx)"
-                        >{{ beginIdx }}</b-button>
-                      </b-button-group>
-                    </b-dropdown-text>
-                  </b-dropdown>
-                  <b-dropdown class="col-md-4" text="반복">
-                    <b-dropdown-item
-                      v-for="turnIdx in maxPushTurn"
-                      :key="turnIdx"
-                      @click="repeatNationCommand(turnIdx)"
-                    >{{ turnIdx }}턴</b-dropdown-item>
-                  </b-dropdown>
-                  <b-dropdown class="col-md-6" split text="당기기" @click="pullNationCommandSingle">
-                    <b-dropdown-item
-                      v-for="turnIdx in maxPushTurn"
-                      :key="turnIdx"
-                      @click="pushNationCommand(-turnIdx)"
-                    >{{ turnIdx }}턴</b-dropdown-item>
-                  </b-dropdown>
-                  <b-dropdown class="col-md-6" split text="미루기" @click="pushNationCommandSingle">
-                    <b-dropdown-item
-                      v-for="turnIdx in maxPushTurn"
-                      :key="turnIdx"
-                      @click="pushNationCommand(turnIdx)"
-                    >{{ turnIdx }}턴</b-dropdown-item>
-                  </b-dropdown>
-                </div>
-              </div>
-              <div class="col">
-                <ChiefReservedCommand
-                  :key="idx"
-                  :year="year"
-                  :month="month"
-                  :turn="officer.turn"
-                  :turnTerm="turnTerm"
-                  :commandList="unwrap(commandList)"
-                  :turnTime="officer.turnTime"
-                  :maxTurn="maxChiefTurn"
-                  :maxPushTurn="Math.floor(maxChiefTurn / 2)"
-                  :date="date"
-                  v-model:selectedTurn="turnList"
-                  @raiseReload="reloadTable()"
-                />
-              </div>
-            </div>
-          </div>
+          <ChiefReservedCommand
+            v-else
+            :serverNick="serverNick"
+            :mapName="mapName"
+            :unitSet="unitSet"
+            :key="idx"
+            :targetIsMe="targetIsMe"
+            :year="year"
+            :month="month"
+            :turn="officer.turn"
+            :turnTerm="turnTerm"
+            :commandList="unwrap(commandList)"
+            :turnTime="officer.turnTime"
+            :maxTurn="maxChiefTurn"
+            :maxPushTurn="Math.floor(maxChiefTurn / 2)"
+            :date="date"
+            @raiseReload="reloadTable()"
+            :officer="officer"
+            :timeDiff="timeDiff"
+          />
        </div>
        <div
          v-if="vidx % 4 == 3"
@@ -177,6 +101,13 @@
    <BottomBar />
  </div>
 </template>
+<script lang="ts">
+declare const staticValues: {
+  serverNick: string,
+  mapName: string,
+  unitSet: string,
+}
+</script>
 <script lang="ts" setup>
 import "@scss/common/bootstrap5.scss";
 import "@scss/game_bg.scss";
@@ -187,41 +118,25 @@ import ChiefReservedCommand from "@/components/ChiefReservedCommand.vue";
 import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
 import VueTypes from "vue-types";
-import { isString, range } from "lodash";
+import { isString } from "lodash";
 import { entriesWithType } from "./util/entriesWithType";
-import { addMilliseconds } from "date-fns";
-import { formatTime } from "./util/formatTime";
 import { parseTime } from "./util/parseTime";
-import { getNpcColor } from "./common_legacy";
 import TopItem from "@/ChiefCenter/TopItem.vue";
 import BottomItem from "@/ChiefCenter/BottomItem.vue";
 import type { ChiefResponse, OptionalFull } from "./defs";
 import { SammoAPI } from "./SammoAPI";
 import { unwrap } from "@/util/unwrap";

-function isDropdownChildren(e?: Event): boolean {
-  if (!e) {
-    return false;
-  }
-  if (!e.target) {
-    return false;
-  }
-  if (
-    (e.target as HTMLElement).classList.contains("dropdown-item") ||
-    (e.target as HTMLElement).classList.contains("dropdown-toggle-split") ||
-    (e.target as HTMLElement).classList.contains("ignoreMe")
-  ) {
-    return true;
-  }
-  return false;
-}
+const {
+  serverNick,
+  mapName,
+  unitSet,
+} = staticValues;

 const props = defineProps({
  maxChiefTurn: VueTypes.number.isRequired,
 })

-const maxPushTurn = props.maxChiefTurn / 2;
-
 const tableObj = reactive<Omit<OptionalFull<ChiefResponse>, "result">>({
  lastExecute: undefined,
  year: undefined,
@@ -249,8 +164,6 @@ const {

 const viewTarget = ref<number | undefined>();

-const turnList = ref(new Set<number>());
-
 const targetIsMe = ref<boolean>(false);
 watch(viewTarget, (val) => {
  console.log("targetChange!", val, targetIsMe);
@@ -265,84 +178,7 @@ watch(viewTarget, (val) => {
  console.log("result", targetIsMe.value);
 });

-function toggleTurn(turnIdx: number) {
-  if (turnList.value.has(turnIdx)) {
-    turnList.value.delete(turnIdx);
-  } else {
-    turnList.value.add(turnIdx);
-  }
-}
-
-function selectTurn(turnIdx: number) {
-  turnList.value.clear();
-  turnList.value.add(turnIdx);
-}
-
-function selectNone() {
-  turnList.value.clear();
-}
-
-function selectAll(e: Event | true) {
-  //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
-  if (e !== true && isDropdownChildren(e)) {
-    return;
-  }
-
-  if (turnList.value.size * 3 > props.maxChiefTurn) {
-    turnList.value.clear();
-  } else {
-    for (let i = 0; i < props.maxChiefTurn; i++) {
-      turnList.value.add(i);
-    }
-  }
-}
-function selectStep(begin: number, step: number) {
-  turnList.value.clear();
-  for (const idx of range(0, props.maxChiefTurn)) {
-    if ((idx - begin) % step == 0) {
-      turnList.value.add(idx);
-    }
-  }
-}
-
-async function repeatNationCommand(amount: number) {
-  try {
-    await SammoAPI.NationCommand.RepeatCommand({ amount });
-  } catch (e) {
-    console.error(e);
-    alert(`실패했습니다: ${e}`);
-    return;
-  }
-  await reloadTable();
-}
-
-async function pushNationCommand(amount: number) {
-  try {
-    await SammoAPI.NationCommand.PushCommand({ amount });
-  } catch (e) {
-    console.error(e);
-    alert(`실패했습니다: ${e}`);
-    return;
-  }
-  await reloadTable();
-}
-
-function pushNationCommandSingle(e: Event) {
-  //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
-  if (isDropdownChildren(e)) {
-    return;
-  }
-  void pushNationCommand(1);
-}
-
-function pullNationCommandSingle(e: Event) {
-  //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
-  if (isDropdownChildren(e)) {
-    return;
-  }
-  void pushNationCommand(-1);
-}
-
+const timeDiff = ref(0);
 async function reloadTable(): Promise<void> {
  try {
    const response =
@@ -400,20 +236,6 @@ const subTableGridRows = computed(() => {

 void reloadTable();

-const serverNow = ref(formatTime(new Date(), "HH:mm:ss"));
-const timeDiff = ref(0);
-
-function updateNow() {
-  const serverNowObj = addMilliseconds(new Date(), timeDiff.value);
-  serverNow.value = formatTime(serverNowObj, "HH:mm:ss");
-  setTimeout(() => {
-    updateNow();
-  }, 1000 - serverNowObj.getMilliseconds());
-}
-
-setTimeout(() => {
-  updateNow();
-}, 500);

 </script>
 <style lang="scss">
@@ -30,102 +30,114 @@
      </div>
    </div>

-    <div class="commandSelectFormAnchor">
-      <div v-if="isEditMode" class="row gx-1">
-        <div class="col-4 d-grid">
-          <BDropdown left text="범위">
-            <BDropdownItem @click="queryActionHelper.selectTurn()">해제</BDropdownItem>
-            <BDropdownItem @click="queryActionHelper.selectAll()">모든턴</BDropdownItem>
-            <BDropdownItem @click="queryActionHelper.selectStep(0, 2)">홀수턴</BDropdownItem>
-            <BDropdownItem @click="queryActionHelper.selectStep(1, 2)">짝수턴</BDropdownItem>
-            <BDropdownDivider></BDropdownDivider>
+    <div v-if="isEditMode" class="row gx-1">
+      <div class="col-4 d-grid">
+        <BDropdown left text="범위">
+          <BDropdownItem @click="queryActionHelper.selectTurn()">해제</BDropdownItem>
+          <BDropdownItem @click="queryActionHelper.selectAll()">모든턴</BDropdownItem>
+          <BDropdownItem @click="queryActionHelper.selectStep(0, 2)">홀수턴</BDropdownItem>
+          <BDropdownItem @click="queryActionHelper.selectStep(1, 2)">짝수턴</BDropdownItem>
+          <BDropdownDivider></BDropdownDivider>

-            <BDropdownText v-for="spanIdx in [3, 4, 5, 6, 7]" :key="spanIdx">
-              {{ spanIdx }}턴 간격
-              <br />
-              <BButtonGroup>
-                <BButton
-                  class="ignoreMe"
-                  v-for="beginIdx in spanIdx"
-                  :key="beginIdx"
-                  @click="queryActionHelper.selectStep(beginIdx - 1, spanIdx)"
-                >{{ beginIdx }}</BButton>
-              </BButtonGroup>
-            </BDropdownText>
-          </BDropdown>
-        </div>
+          <BDropdownText v-for="spanIdx in [3, 4, 5, 6, 7]" :key="spanIdx">
+            {{ spanIdx }}턴 간격
+            <br />
+            <BButtonGroup>
+              <BButton
+                class="ignoreMe"
+                v-for="beginIdx in spanIdx"
+                :key="beginIdx"
+                @click="queryActionHelper.selectStep(beginIdx - 1, spanIdx)"
+              >{{ beginIdx }}</BButton>
+            </BButtonGroup>
+          </BDropdownText>
+        </BDropdown>
+      </div>

-        <div class="col-4 d-grid">
-          <BDropdown left text="보관함">
-            <BDropdownItem
-              v-for="[actionKey, actions] of storedActions"
-              :key="actionKey"
-              @click="useStoredAction(actions)"
-            >
-              {{ actionKey }}
-              <BButton @click.prevent="deleteStoredActions(actionKey)" size="sm">삭제</BButton>
-            </BDropdownItem>
-          </BDropdown>
-        </div>
+      <div class="col-4 d-grid">
+        <BDropdown left text="보관함">
+          <BDropdownItem
+            v-for="[actionKey, actions] of storedActions"
+            :key="actionKey"
+            @click.self="useStoredAction(actions)"
+          >
+            {{ actionKey }}
+            <BButton @click.prevent="deleteStoredActions(actionKey)" size="sm">삭제</BButton>
+          </BDropdownItem>
+        </BDropdown>
+      </div>

-        <div class="col-4 d-grid">
-          <BDropdown right text="최근 실행">
-            <BDropdownItem
-              v-for="(action, idx) in recentActions"
-              :key="idx"
-              @click="void reserveCommandDirect([[Array.from(selectedTurnList.values()), action]])"
-            >{{ action.brief }}</BDropdownItem>
-          </BDropdown>
-        </div>
+      <div class="col-4 d-grid">
+        <BDropdown right text="최근 실행">
+          <BDropdownItem
+            v-for="(action, idx) in recentActions"
+            :key="idx"
+            @click="void reserveCommandDirect([[Array.from(selectedTurnList.values()), action]])"
+          >{{ action.brief }}</BDropdownItem>
+        </BDropdown>
+      </div>

-        <div class="col-5 d-grid">
-          <BDropdown left variant="info" text="선택한 턴을">
-            <BDropdownItem @click="clipboardCut">
-              <i class="bi bi-scissors"></i>&nbsp;잘라내기
-            </BDropdownItem>
-            <BDropdownItem @click="clipboardCopy">
-              <i class="bi bi-files"></i>&nbsp;복사하기
-            </BDropdownItem>
-            <BDropdownItem @click="clipboardPaste">
-              <i class="bi bi-clipboard-fill"></i>&nbsp;붙여넣기
-            </BDropdownItem>
-            <BDropdownDivider />
-            <BDropdownItem @click="setStoredActions">
-              <i class="bi bi-bookmark-plus-fill"></i>&nbsp;보관하기
-            </BDropdownItem>
-            <BDropdownItem @click="subRepeatCommand">
-              <i class="bi bi-arrow-repeat"></i>&nbsp;반복하기
-            </BDropdownItem>
-            <BDropdownDivider />
-            <BDropdownItem @click="eraseSelectedTurnList">
-              <i class="bi bi-eraser"></i>&nbsp;비우기
-            </BDropdownItem>
-            <BDropdownItem @click="eraseAndPullCommand">
-              <i class="bi bi-arrow-bar-up"></i>&nbsp;지우고 당기기
-            </BDropdownItem>
-            <BDropdownItem @click="pushEmptyCommand">
-              <i class="bi bi-arrow-bar-down"></i>&nbsp;뒤로 밀기
-            </BDropdownItem>
-            <!-- 최근에 실행한 10턴 -->
-          </BDropdown>
-        </div>
+      <div class="col-5 d-grid">
+        <BDropdown left variant="info" text="선택한 턴을">
+          <BDropdownItem @click="clipboardCut">
+            <i class="bi bi-scissors"></i>&nbsp;잘라내기
+          </BDropdownItem>
+          <BDropdownItem @click="clipboardCopy">
+            <i class="bi bi-files"></i>&nbsp;복사하기
+          </BDropdownItem>
+          <BDropdownItem @click="clipboardPaste">
+            <i class="bi bi-clipboard-fill"></i>&nbsp;붙여넣기
+          </BDropdownItem>
+          <BDropdownDivider />
+          <BDropdownItem @click="setStoredActions">
+            <i class="bi bi-bookmark-plus-fill"></i>&nbsp;보관하기
+          </BDropdownItem>
+          <BDropdownItem @click="subRepeatCommand">
+            <i class="bi bi-arrow-repeat"></i>&nbsp;반복하기
+          </BDropdownItem>
+          <BDropdownDivider />
+          <BDropdownItem @click="eraseSelectedTurnList">
+            <i class="bi bi-eraser"></i>&nbsp;비우기
+          </BDropdownItem>
+          <BDropdownItem @click="eraseAndPullCommand">
+            <i class="bi bi-arrow-bar-up"></i>&nbsp;지우고 당기기
+          </BDropdownItem>
+          <BDropdownItem @click="pushEmptyCommand">
+            <i class="bi bi-arrow-bar-down"></i>&nbsp;뒤로 밀기
+          </BDropdownItem>
+          <!-- 최근에 실행한 10턴 -->
+        </BDropdown>
+      </div>

-        <div class="col-7 d-grid">
-          <BButton variant="light" @click="toggleForm($event)" :style="{ color: 'black' }">명령 선택 ▾</BButton>
-        </div>
+      <div class="col-7 d-grid">
+        <BButton variant="light" @click="toggleForm($event)" :style="{ color: 'black' }">명령 선택 ▾</BButton>
      </div>
    </div>
+    <CommandSelectForm
+      :commandList="commandList"
+      ref="commandSelectForm"
+      @on-close="chooseCommand($event)"
+      v-model:activatedCategory="activatedCategory"
+    />

    <div :style="{ position: 'relative' }">
      <div
-        class="commandQuickReserveFormAnchor bg-dark"
+        class="bg-dark"
        :style="{
          position: 'absolute',
          top: `${basicModeRowHeight * currentQuickReserveTarget + 30}px`,
          width: '100%',
          zIndex: 9,
        }"
-      ></div>
+      >
+        <CommandSelectForm
+          :commandList="commandList"
+          ref="commandQuickReserveForm"
+          @on-close="chooseQuickReserveCommand($event)"
+          :hideClose="false"
+          v-model:activatedCategory="activatedCategory"
+        />
+      </div>
    </div>
    <div :class="{
      commandTable: true,
@@ -276,21 +288,6 @@ queryActionHelper.selectTurn(...$event);
      </div>
    </div>
  </div>
-  <CommandSelectForm
-    :commandList="commandList"
-    anchor=".commandSelectFormAnchor"
-    ref="commandSelectForm"
-    @on-close="chooseCommand($event)"
-    v-model:activatedCategory="activatedCategory"
-  />
-  <CommandSelectForm
-    :commandList="commandList"
-    anchor=".commandQuickReserveFormAnchor"
-    ref="commandQuickReserveForm"
-    @on-close="chooseQuickReserveCommand($event)"
-    :hideClose="false"
-    v-model:activatedCategory="activatedCategory"
-  />
 </template>

 <script lang="ts">
@@ -38,6 +38,11 @@ const apiRealPath = {
        PushCommand: done,
        RepeatCommand: done,
        ReserveCommand: done,
+        ReserveBulkCommand: done as CallbackT<{
+            turnList: number[],
+            action: string,
+            arg: Args
+        }[], ReserveBulkCommandResponse>,
    },
    Nation: {
        SetNotice: done,
@@ -1,128 +1,286 @@
 <template>
-  <div class="commandPad chiefReservedCommand">
-    <div class="commandTable">
-      <DragSelect
-        :style="rowGridStyle"
-        attribute="turnIdx"
-        @dragStart="isDragSingle = true"
-        @dragDone="
+  <div class="commandBox">
+    <div class="only1000px bg1 center row gx-0" style="height: 24px; font-size: 1.2em">
+      <div class="col-5 align-self-center text-end">{{ officer.officerLevelText }} :</div>
+      <div
+        class="col-7 align-self-center"
+        :style="{
+          color: getNpcColor(officer.npcType ?? 0),
+        }"
+      >{{ officer.name }}</div>
+    </div>
+    <div
+      :class="[
+        'row',
+        'controlPad',
+        props.targetIsMe ? 'targetIsMe' : 'targetIsNotMe',
+      ]"
+    >
+      <div class="col-3 col-md-12 order-md-last">
+        <div class="d-grid mb-1 py-1 only500px bg1 center">
+          <div
+            :style="{
+              color: getNpcColor(officer.npcType ?? 0),
+              fontSize: '1.2em',
+            }"
+          >{{ officer.name }}</div>
+          <div>{{ officer.officerLevelText }}</div>
+        </div>
+        <div class="row gx-1 gy-1 py-1">
+          <div class="col-md-4 mx-0 mb-0 mt-1 d-grid">
+            <div class="alert alert-primary mb-0 center" style="padding: 0.5rem 0">{{ serverNow }}</div>
+          </div>
+
+          <div class="col-md-4 d-grid">
+            <BButton
+              variant="secondary"
+              @click="isEditMode = !isEditMode"
+            >{{ isEditMode ? '일반 모드' : '고급 모드' }}</BButton>
+          </div>
+
+          <BDropdown class="col-md-4" text="반복">
+            <BDropdownItem
+              v-for="turnIdx in maxPushTurn"
+              :key="turnIdx"
+              @click="repeatNationCommand(turnIdx)"
+            >
+              {{
+                turnIdx
+              }}턴
+            </BDropdownItem>
+          </BDropdown>
+
+          <template v-if="isEditMode">
+            <BDropdown class="col-md-4" left text="범위">
+              <BDropdownItem @click="queryActionHelper.selectTurn()">해제</BDropdownItem>
+              <BDropdownItem @click="queryActionHelper.selectAll()">모든턴</BDropdownItem>
+              <BDropdownItem @click="queryActionHelper.selectStep(0, 2)">홀수턴</BDropdownItem>
+              <BDropdownItem @click="queryActionHelper.selectStep(1, 2)">짝수턴</BDropdownItem>
+              <BDropdownDivider></BDropdownDivider>
+
+              <BDropdownText v-for="spanIdx in [3, 4, 5, 6, 7]" :key="spanIdx">
+                {{ spanIdx }}턴 간격
+                <br />
+                <BButtonGroup>
+                  <BButton
+                    class="ignoreMe"
+                    v-for="beginIdx in spanIdx"
+                    :key="beginIdx"
+                    @click="queryActionHelper.selectStep(beginIdx - 1, spanIdx)"
+                  >{{ beginIdx }}</BButton>
+                </BButtonGroup>
+              </BDropdownText>
+            </BDropdown>
+
+            <BDropdown class="col-md-4" left text="보관함">
+              <BDropdownItem
+                v-for="[actionKey, actions] of storedActions"
+                :key="actionKey"
+                @click.self="useStoredAction(actions)"
+              >
+                {{ actionKey }}
+                <BButton @click.prevent="deleteStoredActions(actionKey)" size="sm">삭제</BButton>
+              </BDropdownItem>
+            </BDropdown>
+
+            <div class="col-md-4 d-grid">
+              <BDropdown right text="최근">
+                <BDropdownItem
+                  v-for="(action, idx) in recentActions"
+                  :key="idx"
+                  @click="void reserveCommandDirect([[Array.from(selectedTurnList.values()), action]])"
+                >
+                  {{
+                    action.brief
+                  }}
+                </BDropdownItem>
+              </BDropdown>
+            </div>
+          </template>
+
+          <BDropdown class="col-md-6" split text="당기기" @click="pullNationCommandSingle">
+            <BDropdownItem
+              v-for="turnIdx in maxPushTurn"
+              :key="turnIdx"
+              @click="pushNationCommand(-turnIdx)"
+            >
+              {{
+                turnIdx
+              }}턴
+            </BDropdownItem>
+          </BDropdown>
+          <BDropdown class="col-md-6" split text="미루기" @click="pushNationCommandSingle">
+            <BDropdownItem
+              v-for="turnIdx in maxPushTurn"
+              :key="turnIdx"
+              @click="pushNationCommand(turnIdx)"
+            >
+              {{
+                turnIdx
+              }}턴
+            </BDropdownItem>
+          </BDropdown>
+        </div>
+      </div>
+      <div class="col">
+        <div :style="{ position: 'relative' }">
+          <div
+            class="commandQuickReserveFormAnchor bg-dark"
+            :style="{
+              position: 'absolute',
+              top: `${basicModeRowHeight * currentQuickReserveTarget + 26}px`,
+              width: '100%',
+              zIndex: 9,
+            }"
+          >
+            <CommandSelectForm
+              :commandList="commandList"
+              ref="commandQuickReserveForm"
+              @on-close="chooseQuickReserveCommand($event)"
+              :hideClose="false"
+              v-model:activatedCategory="activatedCategory"
+              class="bg-dark"
+              style="position:absolute"
+            />
+          </div>
+        </div>
+        <div class="commandPad chiefReservedCommand">
+          <div :class="['commandTable', isEditMode ? 'editMode' : 'singleMode']">
+            <DragSelect
+              :style="rowGridStyle"
+              attribute="turnIdx"
+              :disabled="!isEditMode"
+              @dragStart="isDragSingle = true"
+              @dragDone="
  isDragSingle = false;
-selectTurn(...$event);
-        "
-        v-slot="{ selected }"
-      >
-        <div
-          v-for="(turnObj, turnIdx) in reservedCommandList"
-          :key="turnIdx"
-          :turnIdx="turnIdx"
-          class="time_pad center f_tnum"
-          :style="{
-            backgroundColor: 'black',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            color:
-              isDragSingle && selected.has(`${turnIdx}`) ? 'cyan' : undefined,
-          }"
-        >{{ turnObj.time }}</div>
-      </DragSelect>
-      <DragSelect
-        :style="rowGridStyle"
-        attribute="turnIdx"
-        @dragStart="isDragToggle = true"
-        @dragDone="
+queryActionHelper.selectTurn(...$event);
+              "
+              v-slot="{ selected }"
+            >
+              <div
+                v-for="(turnObj, turnIdx) in reservedCommandList"
+                :key="turnIdx"
+                :turnIdx="turnIdx"
+                class="time_pad center f_tnum"
+                :style="{
+                  backgroundColor: 'black',
+                  whiteSpace: 'nowrap',
+                  overflow: 'hidden',
+                  color:
+                    isDragSingle && selected.has(`${turnIdx}`) ? 'cyan' : undefined,
+                }"
+              >{{ turnObj.time }}</div>
+            </DragSelect>
+            <DragSelect
+              :style="{ ...rowGridStyle, display: isEditMode ? 'block' : 'none' }"
+              attribute="turnIdx"
+              :disabled="!isEditMode"
+              @dragStart="isDragToggle = true"
+              @dragDone="
  isDragToggle = false;
 toggleTurn(...$event);
-        "
-        v-slot="{ selected }"
-      >
-        <div
-          v-for="(turnObj, turnIdx) in reservedCommandList"
-          :key="turnIdx"
-          :turnIdx="turnIdx"
-          class="idx_pad center d-grid"
-        >
-          <b-button
-            size="sm"
-            :variant="
-              isDragToggle && selected.has(`${turnIdx}`)
-                ? 'light'
-                : turnList.has(turnIdx)
-                  ? 'info'
-                  : turnList.size == 0 && prevTurnList.has(turnIdx)
-                    ? 'success'
-                    : 'primary'
-            "
-          >{{ turnIdx + 1 }}</b-button>
+              "
+              v-slot="{ selected }"
+            >
+              <div
+                v-for="(turnObj, turnIdx) in reservedCommandList"
+                :key="turnIdx"
+                :turnIdx="turnIdx"
+                class="idx_pad center d-grid"
+              >
+                <BButton
+                  size="sm"
+                  :variant="
+                    isDragToggle && selected.has(`${turnIdx}`)
+                      ? 'light'
+                      : selectedTurnList.has(turnIdx)
+                        ? 'info'
+                        : selectedTurnList.size == 0 && prevSelectedTurnList.has(turnIdx)
+                          ? 'success'
+                          : 'primary'
+                  "
+                >{{ turnIdx + 1 }}</BButton>
+              </div>
+            </DragSelect>
+            <div :style="rowGridStyle">
+              <div
+                v-for="(turnObj, turnIdx) in reservedCommandList"
+                :key="turnIdx"
+                class="turn_pad center"
+              >
+                <span
+                  class="turn_text"
+                  :style="turnObj.style"
+                  v-b-tooltip.hover
+                  :title="turnObj.tooltip"
+                  v-html="turnObj.brief"
+                ></span>
+              </div>
+            </div>
+            <div :style="{ ...rowGridStyle, display: isEditMode ? 'none' : 'grid' }">
+              <div v-for="turnIdx in range(props.maxTurn)" :key="turnIdx" class="action_pad d-grid">
+                <BButton
+                  :variant="(turnIdx % 2 == 0) ? 'secondary' : 'dark'"
+                  size="sm"
+                  class="simple_action_btn bi bi-pencil"
+                  @click="toggleQuickReserveForm(turnIdx)"
+                ></BButton>
+              </div>
+            </div>
+          </div>
+          <div style="position:relative">
+            <CommandSelectForm
+              :commandList="commandList"
+              ref="commandSelectForm"
+              @on-close="chooseCommand($event)"
+              v-model:activatedCategory="activatedCategory"
+              class="bg-dark"
+              :style="{ position: 'absolute', bottom: '0' }"
+            />
+          </div>
+
+          <div class="row gx-0" v-if="isEditMode">
+            <div class="col-5 col-md-6 d-grid">
+              <BDropdown left variant="info" text="선택한 턴을">
+                <BDropdownItem @click="clipboardCut">
+                  <i class="bi bi-scissors"></i>&nbsp;잘라내기
+                </BDropdownItem>
+                <BDropdownItem @click="clipboardCopy">
+                  <i class="bi bi-files"></i>&nbsp;복사하기
+                </BDropdownItem>
+                <BDropdownItem @click="clipboardPaste">
+                  <i class="bi bi-clipboard-fill"></i>&nbsp;붙여넣기
+                </BDropdownItem>
+                <BDropdownDivider />
+                <BDropdownItem @click="setStoredActions">
+                  <i class="bi bi-bookmark-plus-fill"></i>&nbsp;보관하기
+                </BDropdownItem>
+                <BDropdownItem @click="subRepeatCommand">
+                  <i class="bi bi-arrow-repeat"></i>&nbsp;반복하기
+                </BDropdownItem>
+                <BDropdownDivider />
+                <BDropdownItem @click="eraseSelectedTurnList">
+                  <i class="bi bi-eraser"></i>&nbsp;비우기
+                </BDropdownItem>
+                <BDropdownItem @click="eraseAndPullCommand">
+                  <i class="bi bi-arrow-bar-up"></i>&nbsp;지우고 당기기
+                </BDropdownItem>
+                <BDropdownItem @click="pushEmptyCommand">
+                  <i class="bi bi-arrow-bar-down"></i>&nbsp;뒤로 밀기
+                </BDropdownItem>
+                <!-- 최근에 실행한 10턴 -->
+              </BDropdown>
+            </div>
+
+            <div class="col-7 col-md-6 d-grid">
+              <BButton
+                variant="light"
+                @click="toggleForm($event)"
+                :style="{ color: 'black' }"
+              >명령 선택 ▾</BButton>
+            </div>
+          </div>
        </div>
-      </DragSelect>
-      <div :style="rowGridStyle">
-        <div
-          v-for="(turnObj, turnIdx) in reservedCommandList"
-          :key="turnIdx"
-          class="turn_pad center"
-          @click="chooseCommand(turnObj.action)"
-        >
-          <span
-            class="turn_text"
-            :style="turnObj.style"
-            v-b-tooltip.hover
-            :title="turnObj.tooltip"
-            v-html="turnObj.brief"
-          ></span>
-        </div>
-      </div>
-    </div>
-    <div class="row gx-0">
-      <div class="col-2 d-grid">
-        <b-button
-          :pressed="searchModeOn"
-          @click="toggleSearchCommand()"
-          :variant="searchModeOn ? 'info' : 'primary'"
-          v-b-tooltip.hover
-          title="검색 기능을 활성화합니다."
-        >
-          <i class="bi bi-search"></i>
-        </b-button>
-      </div>
-      <div class="col-7">
-        <v-multiselect
-          v-model="selectedCommand"
-          :allow-empty="false"
-          :options="commandList"
-          :group-select="false"
-          group-values="values"
-          group-label="category"
-          label="searchText"
-          track-by="value"
-          open-direction="top"
-          :show-labels="false"
-          selectLabel="선택(엔터)"
-          selectGroupLabel
-          selectedLabel="선택됨"
-          deselectLabel="해제(엔터)"
-          deselectGroupLabel
-          placeholder="턴 선택"
-          :maxHeight="400"
-          :searchable="searchModeOn"
-        >
-          <template v-slot:noResult>검색 결과가 없습니다.</template>
-          <template v-slot:option="props">
-            <!--FIXME: 카테고리-->
-            <template v-if="props.option.title">
-              <span class="compensatePositive" v-if="props.option.compensation > 0">▲</span>
-              <span class="compensateNegative" v-else-if="props.option.compensation < 0">▼</span>
-              <span class="compensateNeutral" v-else></span>
-              <span
-                :class="[props.option.possible ? '' : 'commandImpossible']"
-              >{{ props.option.title }}</span>
-            </template>
-            <template v-else-if="props.option.category">{{ props.option.category }}</template>
-          </template>
-          <template v-slot:singleLabel="props">{{ props.option.simpleName }}</template>
-        </v-multiselect>
-      </div>
-      <div class="col-3 d-grid">
-        <b-button @click="reserveCommand()" variant="primary">실행</b-button>
      </div>
    </div>
  </div>
@@ -131,7 +289,7 @@ toggleTurn(...$event);
 <script lang="ts" setup>
 import addMinutes from "date-fns/esm/addMinutes";
 import { stringifyUrl } from "query-string";
-import { defineProps, defineEmits, onMounted, ref, watch, type PropType } from "vue";
+import { defineProps, defineEmits, defineExpose, onMounted, ref, watch, type PropType } from "vue";
 import { formatTime } from "@util/formatTime";
 import { joinYearMonth } from "@util/joinYearMonth";
 import { mb_strwidth } from "@util/mb_strwidth";
@@ -140,10 +298,19 @@ import { parseYearMonth } from "@util/parseYearMonth";
 import { convertSearch초성 } from "@util/convertSearch초성";
 import VueTypes from "vue-types";
 import DragSelect from "@/components/DragSelect.vue";
-import { isString } from "lodash";
+import { isString, range, trim } from "lodash";
 import { SammoAPI } from "@/SammoAPI";
 import type { ChiefResponse, CommandItem, TurnObj } from "@/defs";
+import { QueryActionHelper } from "@/util/QueryActionHelper";
+import type { Args } from "@/processing/args";
+import { StoredActionsHelper } from "@/util/StoredActionsHelper";
+import { getNpcColor } from "@/common_legacy";
+import { BButton, BDropdownItem, BDropdownText, BButtonGroup, BDropdownDivider, BDropdown } from "bootstrap-vue-3";
+import addMilliseconds from "date-fns/addMilliseconds";
+import CommandSelectForm from "@/components/CommandSelectForm.vue";

+const editModeKey = `sammo_edit_mode_key`;
+const isEditMode = ref(localStorage.getItem(editModeKey) === '1');

 type TurnObjWithTime = TurnObj & {
  time: string;
@@ -153,9 +320,11 @@ type TurnObjWithTime = TurnObj & {
  style?: Record<string, unknown>;
 };

-const searchModeKey = `sammo_searchModeOn`;
-
 const props = defineProps({
+  serverNick: VueTypes.string.isRequired,
+  mapName: VueTypes.string.isRequired,
+  unitSet: VueTypes.string.isRequired,
+
  maxTurn: VueTypes.integer.isRequired,
  maxPushTurn: VueTypes.integer.isRequired,
  date: VueTypes.string.isRequired,
@@ -163,6 +332,10 @@ const props = defineProps({
  month: VueTypes.integer.isRequired,
  turnTerm: VueTypes.integer.isRequired,
  turnTime: VueTypes.string.isRequired,
+  targetIsMe: VueTypes.bool.isRequired,
+
+  timeDiff: VueTypes.number.isRequired,
+
  selectedTurn: {
    type: Object as PropType<Set<number>>,
    required: false,
@@ -176,12 +349,14 @@ const props = defineProps({
    type: Object as PropType<ChiefResponse['commandList']>,
    required: true,
  },
+
+  officer: {
+    type: Object as PropType<ChiefResponse['chiefList'][0]>,
+    required: true,
+  }
 })

-
-const serverNowObj = ref(parseTime(props.date));
-const clientNowObj = ref(new Date());
-const timeDiff = ref(serverNowObj.value.getTime() - clientNowObj.value.getTime());
+const basicModeRowHeight = 30;

 const listReqArgCommand = new Set<string>();
 for (const commandCategories of props.commandList) {
@@ -213,21 +388,6 @@ for (const category of props.commandList) {
  }
 }

-const searchModeOn = ref((localStorage.getItem(searchModeKey) ?? "0") != "0");
-
-const emptyTurn: TurnObjWithTime[] = Array.from<TurnObjWithTime>({
-  length: props.maxTurn,
-}).fill({
-  arg: {},
-  brief: "",
-  action: "",
-  year: undefined,
-  month: undefined,
-  time: "",
-});
-
-const prevTurnList = ref(new Set([0]));
-
 const rowGridStyle = ref({
  display: "grid",
  gridTemplateRows: `repeat(${props.maxTurn}, 30px)`,
@@ -236,8 +396,6 @@ const rowGridStyle = ref({
 const updated = ref(false);
 const isDragSingle = ref(false);
 const isDragToggle = ref(false);
-const reservedCommandList = ref(emptyTurn);
-const turnList = ref(props.selectedTurn);
 const autorun_limit = ref<number | null>(null);

 const emit = defineEmits<{
@@ -252,30 +410,110 @@ function triggerUpdateCommandList(type?: string) {
    updateCommandList();
  }, 1);
 }
+
 function toggleTurn(...reqTurnList: number[] | string[]) {
  for (let turnIdx of reqTurnList) {
    if (isString(turnIdx)) {
      turnIdx = parseInt(turnIdx);
    }
-    if (turnList.value.has(turnIdx)) {
-      turnList.value.delete(turnIdx);
+    if (selectedTurnList.value.has(turnIdx)) {
+      selectedTurnList.value.delete(turnIdx);
    } else {
-      turnList.value.add(turnIdx);
+      selectedTurnList.value.add(turnIdx);
    }
  }
-  emit("update:selectedTurn", turnList.value);
+  emit("update:selectedTurn", selectedTurnList.value);
 }

-function selectTurn(...reqTurnList: number[] | string[]) {
-  turnList.value.clear();
-  for (const turnIdx of reqTurnList) {
-    if (isString(turnIdx)) {
-      turnList.value.add(parseInt(turnIdx));
-    } else {
-      turnList.value.add(turnIdx);
-    }
+function isDropdownChildren(e?: Event): boolean {
+  if (!e) {
+    return false;
  }
-  emit("update:selectedTurn", turnList.value);
+  if (!e.target) {
+    return false;
+  }
+  if (
+    (e.target as HTMLElement).classList.contains("dropdown-item") ||
+    (e.target as HTMLElement).classList.contains("dropdown-toggle-split") ||
+    (e.target as HTMLElement).classList.contains("ignoreMe")
+  ) {
+    return true;
+  }
+  return false;
+}
+
+async function repeatNationCommand(amount: number) {
+  try {
+    await SammoAPI.NationCommand.RepeatCommand({ amount });
+  } catch (e) {
+    console.error(e);
+    alert(`실패했습니다: ${e}`);
+    return;
+  }
+  emit('raiseReload');
+}
+
+
+function pushNationCommandSingle(e: Event) {
+  //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
+  if (isDropdownChildren(e)) {
+    return;
+  }
+  void pushNationCommand(1);
+}
+
+function pullNationCommandSingle(e: Event) {
+  //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
+  if (isDropdownChildren(e)) {
+    return;
+  }
+  void pushNationCommand(-1);
+}
+
+async function pushNationCommand(amount: number) {
+  try {
+    await SammoAPI.NationCommand.PushCommand({ amount });
+  } catch (e) {
+    console.error(e);
+    alert(`실패했습니다: ${e}`);
+    return;
+  }
+  emit('raiseReload');
+}
+
+
+const queryActionHelper = new QueryActionHelper(props.maxTurn);
+const reservedCommandList = queryActionHelper.reservedCommandList;
+const prevSelectedTurnList = queryActionHelper.prevSelectedTurnList;
+const selectedTurnList = queryActionHelper.selectedTurnList;
+
+async function reserveCommandDirect(args: [number[], TurnObj][], reload = true): Promise<boolean> {
+  const query: {
+    turnList: number[],
+    action: string,
+    arg: Args
+  }[] = [];
+  for (const [turnList, { action, arg }] of args) {
+    query.push({
+      turnList,
+      action,
+      arg
+    });
+  }
+
+  try {
+    await SammoAPI.NationCommand.ReserveBulkCommand(query);
+    queryActionHelper.releaseSelectedTurnList();
+  } catch (e) {
+    console.error(e);
+    alert(`실패했습니다: ${e}`);
+    return false;
+  }
+
+  if (reload) {
+    emit('raiseReload');
+  }
+  return true;
 }

 function updateCommandList() {
@@ -332,25 +570,11 @@ function updateCommandList() {
    nextTurnTime = addMinutes(nextTurnTime, props.turnTerm);
  }
  reservedCommandList.value = _reservedCommandList;
-
-  const serverNowObj = parseTime(props.date);
-  const clientNowObj = new Date();
-  timeDiff.value = serverNowObj.getTime() - clientNowObj.getTime();
  updated.value = true;
 }

 async function reserveCommand() {
-  let reqTurnList: number[];
-  if (turnList.value.size == 0) {
-    reqTurnList = Array.from(prevTurnList.value.values());
-  } else {
-    reqTurnList = Array.from(turnList.value.values());
-  }
-
-  if (reqTurnList.length == 0) {
-    reqTurnList.push(0);
-  }
-
+  const reqTurnList = queryActionHelper.getSelectedTurnList();
  const commandName = selectedCommand.value.value;

  if (listReqArgCommand.has(commandName)) {
@@ -371,13 +595,7 @@ async function reserveCommand() {
      action: commandName,
    });

-    if (turnList.value.size > 0) {
-      prevTurnList.value.clear();
-      for (const v of reqTurnList) {
-        prevTurnList.value.add(v);
-      }
-      turnList.value.clear();
-    }
+    queryActionHelper.releaseSelectedTurnList();
  } catch (e) {
    console.error(e);
    alert(`실패했습니다: ${e}`);
@@ -385,15 +603,224 @@ async function reserveCommand() {
  }
  emit("raiseReload");
 }
-function toggleSearchCommand() {
-  searchModeOn.value = !searchModeOn.value;
-  localStorage.setItem(searchModeKey, searchModeOn.value ? "1" : "0");
-}

-function chooseCommand(val: string) {
+function chooseCommand(val?: string) {
+  if (val === undefined) {
+    return;
+  }
  selectedCommand.value = invCommandMap[val];
+  void reserveCommand();
 }

+const emptyTurnObj: TurnObj = { action: '휴식', brief: '휴식', arg: {} };
+
+
+const storedActionsHelper = new StoredActionsHelper(props.serverNick, 'nation', props.mapName, props.unitSet);
+
+const recentActions = storedActionsHelper.recentActions;
+const storedActions = storedActionsHelper.storedActions;
+const activatedCategory = storedActionsHelper.activatedCategory;
+
+async function eraseSelectedTurnList(releaseSelect = true): Promise<boolean> {
+  const result = await reserveCommandDirect([[
+    queryActionHelper.getSelectedTurnList(),
+    emptyTurnObj
+  ]]);
+  if (releaseSelect) {
+    queryActionHelper.releaseSelectedTurnList();
+  }
+  return result;
+}
+
+const clipboard = storedActionsHelper.clipboard;
+
+async function clipboardCut(releaseSelect = true) {
+  clipboardCopy(false);
+  return eraseSelectedTurnList(releaseSelect);
+}
+
+function clipboardCopy(releaseSelect = true) {
+  clipboard.value = queryActionHelper.extractQueryActions();
+  if (releaseSelect) {
+    queryActionHelper.releaseSelectedTurnList();
+  }
+}
+
+async function clipboardPaste(releaseSelect = true) {
+  const rawActions = clipboard.value;
+  if (rawActions === undefined) {
+    return;
+  }
+
+  const actions = queryActionHelper.amplifyQueryActions(rawActions, queryActionHelper.getSelectedTurnList());
+  if (actions.length === 0) {
+    return;
+  }
+
+  const result = await reserveCommandDirect(actions);
+  if (releaseSelect) {
+    queryActionHelper.releaseSelectedTurnList();
+  }
+  return result;
+}
+
+async function subRepeatCommand(releaseSelect = true): Promise<boolean> {
+  const reqTurnList = queryActionHelper.getSelectedTurnList();
+  const selectedMinTurnIdx = reqTurnList[0];
+  const selectedMaxTurnIdx = reqTurnList[reqTurnList.length - 1];
+  const queryLength = selectedMaxTurnIdx - selectedMinTurnIdx + 1;
+
+  const rawActions = queryActionHelper.extractQueryActions();
+  const actions = queryActionHelper.amplifyQueryActions(rawActions, range(selectedMinTurnIdx, props.maxTurn, queryLength));
+
+  const result = await reserveCommandDirect(actions);
+  if (releaseSelect) {
+    queryActionHelper.releaseSelectedTurnList();
+  }
+  return result;
+}
+
+
+async function eraseAndPullCommand(releaseSelect = true): Promise<boolean> {
+  const reqTurnList = queryActionHelper.getSelectedTurnList();
+  const selectedMinTurnIdx = reqTurnList[0];
+  const selectedMaxTurnIdx = reqTurnList[reqTurnList.length - 1];
+  const queryLength = selectedMaxTurnIdx - selectedMinTurnIdx + 1;
+
+  if (selectedMinTurnIdx === 0) {
+    await pushNationCommand(-queryLength);
+    return true;
+  }
+
+  if (selectedMinTurnIdx + queryLength == props.maxTurn) {
+    return eraseSelectedTurnList(releaseSelect);
+  }
+
+  const actions: [number[], TurnObj][] = [];
+
+
+  const emptyTurnList: number[] = [];
+
+  for (const srcTurnIdx of range(selectedMinTurnIdx + queryLength, props.maxTurn)) {
+    const rawAction = reservedCommandList.value[srcTurnIdx];
+    if (rawAction.action == emptyTurnObj.action) {
+      emptyTurnList.push(srcTurnIdx - queryLength);
+      continue;
+    }
+    actions.push([[srcTurnIdx - queryLength], {
+      action: rawAction.action,
+      arg: rawAction.arg,
+      brief: rawAction.brief
+    }]);
+  }
+
+  emptyTurnList.push(...range(props.maxTurn - queryLength, props.maxTurn));
+  actions.push([emptyTurnList, emptyTurnObj]);
+
+  const result = await reserveCommandDirect(actions);
+  if (releaseSelect) {
+    queryActionHelper.releaseSelectedTurnList();
+  }
+  return result;
+}
+
+async function pushEmptyCommand(releaseSelect = true): Promise<boolean> {
+  const reqTurnList = queryActionHelper.getSelectedTurnList();
+  const selectedMinTurnIdx = reqTurnList[0];
+  const selectedMaxTurnIdx = reqTurnList[reqTurnList.length - 1];
+  const queryLength = selectedMaxTurnIdx - selectedMinTurnIdx + 1;
+
+  if (selectedMinTurnIdx === 0) {
+    await pushNationCommand(queryLength);
+    return true;
+  }
+
+  if (selectedMaxTurnIdx == props.maxTurn) {
+    return eraseSelectedTurnList(releaseSelect);
+  }
+
+  const actions: [number[], TurnObj][] = [];
+
+
+  const emptyTurnList: number[] = [];
+
+  for (const srcTurnIdx of range(selectedMinTurnIdx, props.maxTurn - queryLength)) {
+    const rawAction = reservedCommandList.value[srcTurnIdx];
+    if (rawAction.action == emptyTurnObj.action) {
+      emptyTurnList.push(srcTurnIdx + queryLength);
+      continue;
+    }
+    actions.push([[srcTurnIdx + queryLength], {
+      action: rawAction.action,
+      arg: rawAction.arg,
+      brief: rawAction.brief
+    }]);
+  }
+
+  emptyTurnList.push(...range(selectedMinTurnIdx, selectedMinTurnIdx + queryLength));
+  actions.push([emptyTurnList, emptyTurnObj]);
+
+  const result = await reserveCommandDirect(actions);
+  if (releaseSelect) {
+    queryActionHelper.releaseSelectedTurnList();
+  }
+  return result;
+}
+
+function setStoredActions() {
+  const actions = queryActionHelper.extractQueryActions();
+  const turnBrief = new Map<number, string>();
+  for (const [subTurnList, action] of actions) {
+    const actionName = action.action.split('_');
+    const actionShortName = actionName.length == 1 ? actionName[0] : actionName[1];
+    for (const turnIdx of subTurnList) {
+      turnBrief.set(turnIdx, actionShortName[0]);
+    }
+  }
+
+  const turnBriefStr = Array.from(turnBrief.entries())
+    .sort(([turnA], [turnB]) => turnA - turnB)
+    .map(([, action]) => action)
+    .join('');
+
+  const nickName = trim(prompt('선택한 턴들의 별명을 지어주세요', turnBriefStr) ?? '');
+  if (nickName == '') {
+    return;
+  }
+
+  storedActionsHelper.setStoredActions(nickName, actions);
+  queryActionHelper.releaseSelectedTurnList();
+}
+
+function deleteStoredActions(actionKey: string) {
+  storedActionsHelper.deleteStoredActions(actionKey)
+}
+
+async function useStoredAction(rawActions: [number[], TurnObj][]) {
+  const reqTurnList = queryActionHelper.getSelectedTurnList();
+  const actions = queryActionHelper.amplifyQueryActions(rawActions, reqTurnList)
+  const result = await reserveCommandDirect(actions);
+  queryActionHelper.releaseSelectedTurnList();
+  return result;
+}
+
+function getQueryActionHelper(): QueryActionHelper {
+  return queryActionHelper;
+}
+
+function getStoredActionHeler(): StoredActionsHelper {
+  return storedActionsHelper;
+}
+
+defineExpose({
+  useStoredAction,
+  deleteStoredActions,
+  clipboardCut,
+  clipboardCopy,
+  clipboardPaste,
+  getQueryActionHelper,
+  getStoredActionHeler,
+})

 watch(() => props.date, () => {
  triggerUpdateCommandList("date");
@@ -412,21 +839,80 @@ watch(() => props.commandList, () => {
 })
 watch(() => props.selectedTurn, (val: Set<number>) => {
  console.log(val);
-  if (val === turnList.value) {
+  if (val === selectedTurnList.value) {
    console.log("pass!");
    return;
  }
-  turnList.value.clear();
+  selectedTurnList.value.clear();
  for (const t of val.values()) {
-    turnList.value.add(t);
+    selectedTurnList.value.add(t);
  }
 })

-watch(turnList, () => {
-  console.log(turnList.value);
-  emit("update:selectedTurn", turnList.value);
+watch(selectedTurnList, () => {
+  console.log(selectedTurnList.value);
+  emit("update:selectedTurn", selectedTurnList.value);
 })

+const commandQuickReserveForm = ref<InstanceType<typeof CommandSelectForm> | null>(null);
+const commandSelectForm = ref<InstanceType<typeof CommandSelectForm> | null>(null);
+
+const currentQuickReserveTarget = ref(-1);
+function chooseQuickReserveCommand(val?: string) {
+  if (!val) {
+    return;
+  }
+  selectedCommand.value = invCommandMap[val];
+  selectedTurnList.value.clear();
+  selectedTurnList.value.add(currentQuickReserveTarget.value);
+  void reserveCommand();
+}
+
+function toggleQuickReserveForm(turnIdx: number) {
+  if (turnIdx == currentQuickReserveTarget.value) {
+    commandQuickReserveForm.value?.toggle();
+    return;
+  }
+  currentQuickReserveTarget.value = turnIdx;
+  commandQuickReserveForm.value?.show();
+}
+
+
+watch(isEditMode, newEditMode => {
+  localStorage.setItem(editModeKey, newEditMode ? '1' : '0');
+  if (newEditMode) {
+    commandQuickReserveForm.value?.close();
+    currentQuickReserveTarget.value = -1;
+  }
+  else {
+    commandSelectForm.value?.close();
+  }
+});
+function toggleForm($event: Event): void {
+  $event.preventDefault();
+
+  const form = commandSelectForm.value;
+  if (!form) {
+    return;
+  }
+  form.toggle();
+}
+
+
+const serverNow = ref(formatTime(new Date(), "HH:mm:ss"));
+
+function updateNow() {
+  const serverNowObj = addMilliseconds(new Date(), props.timeDiff);
+  serverNow.value = formatTime(serverNowObj, "HH:mm:ss");
+  setTimeout(() => {
+    updateNow();
+  }, 1000 - serverNowObj.getMilliseconds());
+}
+
+setTimeout(() => {
+  updateNow();
+}, 500);
+

 onMounted(() => {
  updateCommandList();
@@ -441,13 +927,20 @@ onMounted(() => {
 .chiefReservedCommand {
  background-color: $gray-900;

-  .commandTable {
+  .commandTable.editMode {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(39.67px, 1fr) minmax(28px, 1fr) 5fr;
    //30, 70, 37.65, 160
  }

+  .commandTable.singleMode {
+    width: 100%;
+    display: grid;
+    grid-template-columns: minmax(39.67px, 1fr) 5fr minmax(28px, 1fr);
+    //30, 70, 160, 37.65
+  }
+
  @include media-1000px {
    .turn_pad {
      overflow: hidden;
@@ -1,28 +1,41 @@
 <template>
-    <teleport :to="anchor">
-        <div v-if="showForm" class="my-1">
-            <div class="commandCategory row gx-0 gy-1">
-                <div
-                    class="categoryItem col-4 d-grid"
-                    v-for="[categoryKey, { deco: categoryDeco }] of commandList"
-                    :key="categoryKey"
-                >
-                    <BButton
-                        variant="success"
-                        @click="chosenCategory = categoryKey"
-                        :active="chosenCategory == categoryKey"
-                    >{{ categoryDeco.altName ?? categoryDeco.name }}</BButton>
-                </div>
+    <div v-if="showForm" class="my-1">
+        <div class="commandCategory row gx-0 gy-1">
+            <div
+                class="categoryItem col-4 d-grid"
+                v-for="[categoryKey, { deco: categoryDeco }] of commandList"
+                :key="categoryKey"
+            >
+                <BButton
+                    variant="success"
+                    @click="chosenCategory = categoryKey"
+                    :active="chosenCategory == categoryKey"
+                >{{ categoryDeco.altName ?? categoryDeco.name }}</BButton>
            </div>
-            <div class="commandList row gx-1 gy-1 my-1">
+        </div>
+        <div
+            class="commandList my-1"
+            :style="{
+                display: 'grid',
+                alignItems: 'self-start',
+            }"
+        >
+            <div
+                class="row gx-1 gy-1"
+                v-for="[category, { values }] of commandList"
+                :key="category"
+                :style="{ visibility: category == chosenCategory ? 'visible' : 'hidden', gridRow: '1', gridColumn: '1' }"
+            >
                <div
                    class="col-6 d-grid"
-                    v-for="commandItem of chosenSubList"
+                    v-for="commandItem of values"
                    :key="commandItem.value"
                    @click="close(commandItem.value)"
                >
                    <div class="commandItem">
-                        <p :class="['center', 'my-0', commandItem.possible ? '' : 'commandImpossible']">
+                        <p
+                            :class="['center', 'my-0', commandItem.possible ? '' : 'commandImpossible']"
+                        >
                            {{ commandItem.simpleName }}
                            <span
                                class="compensatePositive"
@@ -43,28 +56,15 @@
                    </div>
                </div>
            </div>
-            <div v-if="!hideClose" class="commandBottom row mt-1 mb-1">
-                <div class="offset-8 col-4 d-grid">
-                    <BButton @click="close()">닫기</BButton>
-                </div>
+        </div>
+        <div v-if="!hideClose" class="commandBottom row mt-1 mb-1">
+            <div class="offset-8 col-4 d-grid">
+                <BButton @click="close()">닫기</BButton>
            </div>
        </div>
-    </teleport>
+    </div>
 </template>
 <script setup lang="ts">
-/*
-            <template v-if="props.option.title">
-              <span class="compensatePositive" v-if="props.option.compensation > 0">▲</span>
-              <span class="compensateNegative" v-else-if="props.option.compensation < 0">▼</span>
-              <span class="compensateNeutral" v-else></span>
-              <span
-                :class="[props.option.possible ? '' : 'commandImpossible']"
-              >{{ props.option.title }}</span>
-            </template>
-            <template v-else-if="props.option.category">{{ props.option.category }}</template>
-          </template>
-          <template v-slot:singleLabel="props">{{ props.option.simpleName }}</template>
- */
 import type { CommandItem } from "@/defs";
 import { BButton } from "bootstrap-vue-3";
 import { ref, defineProps, defineEmits, defineExpose, type PropType, watch, onMounted } from "vue";
@@ -109,9 +109,9 @@ const props = defineProps({
 const chosenCategory = ref<string>('-');
 const chosenSubList = ref<CommandItem[]>([]);

-const categories = new Set(props.commandList.map(({category})=>category));
+const categories = new Set(props.commandList.map(({ category }) => category));

-watch(()=>props.activatedCategory, (newValue)=>{
+watch(() => props.activatedCategory, (newValue) => {
    chosenCategory.value = newValue;
 })

@@ -157,16 +157,16 @@ watch(chosenCategory, (category) => {
        return;
    }
    chosenSubList.value = itemInfo.values;
-    if(props.activatedCategory !== category){
+    if (props.activatedCategory !== category) {
        emits('update:activatedCategory', category);
    }
 });

 onMounted(() => {
-    if(!categories.has(props.activatedCategory)){
+    if (!categories.has(props.activatedCategory)) {
        chosenCategory.value = props.commandList[0].category;
    }
-    else{
+    else {
        chosenCategory.value = props.activatedCategory;
    }

@@ -24,6 +24,11 @@ $generalObj = General::createGeneralObjFromDB($session->generalID);
    <?= WebUtil::printStaticValues([
        'maxChiefTurn'=>GameConst::$maxChiefTurn,
        'generalID'=>$generalObj->getID(),
+        'staticValues'=>[
+            'serverNick' => DB::prefix(),
+            'mapName' => GameConst::$mapName,
+            'unitSet' => GameConst::$unitSet,
+        ]
    ])?>
    <?= WebUtil::printDist('vue', 'v_chiefCenter', true) ?>
 </head>