diff --git a/.phan/config.php b/.phan/config.php
index 513c421a..b6a5feea 100644
--- a/.phan/config.php
+++ b/.phan/config.php
@@ -101,13 +101,11 @@ return [
         'hwe/j_export_simulator_object.php',
         'hwe/j_general_log_old.php',
         'hwe/j_general_set_permission.php',
-        'hwe/j_general_turn.php',
         'hwe/j_get_basic_general_list.php',
         'hwe/j_getChiefTurn.php',
         'hwe/j_get_city_list.php',
         'hwe/j_get_general_list.php',
         'hwe/j_get_nation_general_list.php',
-        'hwe/j_get_reserved_command.php',
         'hwe/j_get_select_npc_token.php',
         'hwe/j_get_select_pool.php',
         'hwe/j_image_upload.php',
diff --git a/hwe/func.php b/hwe/func.php
index d60d2654..c734626e 100644
--- a/hwe/func.php
+++ b/hwe/func.php
@@ -479,6 +479,7 @@ function getCommandTable(General $general){
                 'compansation'=>$commandObj->getCompensationStyle(),
                 'possible'=>$commandObj->hasMinConditionMet(),
                 'title'=>$commandObj->getCommandDetailTitle(),
+                'reqArg'=>$commandObj::$reqArg,
             ];
         }
 
diff --git a/hwe/func_command.php b/hwe/func_command.php
index a42e78f3..22936254 100644
--- a/hwe/func_command.php
+++ b/hwe/func_command.php
@@ -63,7 +63,7 @@ function pullGeneralCommand(int $generalID, int $turnCnt=1){
     if($turnCnt >= GameConst::$maxTurn){
         return;
     }
-    
+
     $db = DB::db();
 
     $db->update('general_turn', [
@@ -96,7 +96,7 @@ function repeatGeneralCommand(int $generalId, int $turnCnt){
     foreach($turnList as $turnItem){
         $turnIdx = $turnItem['turn_idx'];
         $turnTarget = iterator_to_array(Util::range($turnIdx+$turnCnt, GameConst::$maxTurn, $turnCnt));
-        
+
         $db->update('general_turn', [
             'action'=>$turnItem['action'],
             'arg'=>$turnItem['arg'],
@@ -116,7 +116,7 @@ function pushNationCommand(int $nationID, int $officerLevel, int $turnCnt=1){
         return;
     }
     if($turnCnt < 0){
-        pullNationCommand($nationID, $officerLevel, -$turnCnt);   
+        pullNationCommand($nationID, $officerLevel, -$turnCnt);
         return;
     }
     if($turnCnt >= GameConst::$maxChiefTurn){
@@ -153,7 +153,7 @@ function pullNationCommand(int $nationID, int $officerLevel, int $turnCnt=1){
     if($turnCnt >= GameConst::$maxChiefTurn){
         return;
     }
-    
+
     $db = DB::db();
 
     $db->update('nation_turn', [
@@ -269,7 +269,7 @@ function checkCommandArg(?array $arg):?string{
 }
 
 function setGeneralCommand(int $generalID, array $rawTurnList, string $command, ?array $arg = null):array{
-    
+
     $turnList = [];
     foreach($rawTurnList as $turnIdx){
         if(!is_int($turnIdx) || $turnIdx < -3 || $turnIdx >= GameConst::$maxTurn){
diff --git a/hwe/j_general_turn.php b/hwe/j_general_turn.php
deleted file mode 100644
index 358e00b9..00000000
--- a/hwe/j_general_turn.php
+++ /dev/null
@@ -1,42 +0,0 @@
-<?php
-namespace sammo;
-
-include "lib.php";
-include "func.php";
-
-WebUtil::requireAJAX();
-
-
-
-$session = Session::requireGameLogin([])->setReadOnly();
-
-$generalID = $session->generalID;
-
-$turnAmount = Util::getPost('amount', 'int');
-$isRepeat = Util::getPost('is_repeat', 'bool', false);
-
-if($turnAmount == null){
-    Json::die([
-        'result'=>false,
-        'reason'=>'턴이 입력되지 않았습니다.',
-    ]);
-}
-
-if(abs($turnAmount) >= GameConst::$maxTurn){
-    Json::die([
-        'result'=>false,
-        'reason'=>'턴 숫자가 올바르지 않습니다.',
-    ]);
-}
-
-if($isRepeat){
-    repeatGeneralCommand($generalID, $turnAmount);
-}
-else{
-    pushGeneralCommand($generalID, $turnAmount);
-}
-
-Json::die([
-    'result'=>true,
-    'reason'=>'success',
-]);
\ No newline at end of file
diff --git a/hwe/j_get_reserved_command.php b/hwe/j_get_reserved_command.php
deleted file mode 100644
index 593508c9..00000000
--- a/hwe/j_get_reserved_command.php
+++ /dev/null
@@ -1,49 +0,0 @@
-<?php
-namespace sammo;
-
-include "lib.php";
-include "func.php";
-
-$session = Session::requireGameLogin([])->setReadOnly();
-
-$db = DB::db();
-
-$commandList = [];
-$gameStor = KVStorage::getStorage($db, 'game_env');
-$generalID = $session->generalID;
-
-$rawTurn = $db->queryAllLists('SELECT turn_idx, action, arg, brief FROM general_turn WHERE general_id = %i ORDER BY turn_idx ASC', $generalID);
-foreach($rawTurn as [$turn_idx, $action, $arg, $brief]){
-    $commandList[$turn_idx] = [
-        'action'=>$action,
-        'brief'=>$brief,
-        'arg'=>Json::decode($arg)
-    ];
-}
-
-
-[$turnTerm, $year, $month, $lastExecute] = $gameStor->getValuesAsArray(['turnterm', 'year', 'month', 'turntime']);
-
-[$turnTime, $rawGeneralAux] = $db->queryFirstList('SELECT turntime, aux FROM general WHERE no=%i', $generalID);
-$generalAux = Json::decode($rawGeneralAux??'{}');
-
-if(cutTurn($turnTime, $turnTerm) > cutTurn($lastExecute, $turnTerm)){
-    //이미 이번달에 실행된 턴이다.
-    $month++;
-    if($month >= 13){
-        $month -= 12;
-        $year += 1;
-    }
-}
-
-
-Json::die([
-    'result'=>true,
-    'turnTime'=>$turnTime,
-    'turnTerm'=>$turnTerm,
-    'year'=>$year,
-    'month'=>$month,
-    'date'=>TimeUtil::now(true),
-    'turn'=>$commandList,
-    'autorun_limit'=> $generalAux['autorun_limit']??null,
-]);
\ No newline at end of file
diff --git a/hwe/sammo/API/Command/GetReservedCommand.php b/hwe/sammo/API/Command/GetReservedCommand.php
new file mode 100644
index 00000000..5ed77069
--- /dev/null
+++ b/hwe/sammo/API/Command/GetReservedCommand.php
@@ -0,0 +1,69 @@
+<?php
+
+namespace sammo\API\Command;
+
+use sammo\Session;
+use DateTimeInterface;
+use sammo\DB;
+use sammo\Json;
+use sammo\KVStorage;
+use sammo\TimeUtil;
+
+use function sammo\cutTurn;
+
+class GetReservedCommand extends \sammo\BaseAPI
+{
+    public function validateArgs(): ?string
+    {
+        return null;
+    }
+
+    public function getRequiredSessionMode(): int
+    {
+        return static::REQ_GAME_LOGIN | static::REQ_READ_ONLY;
+    }
+
+    public function launch(Session $session, ?DateTimeInterface $modifiedSince, ?string $reqEtag)
+    {
+        $db = DB::db();
+
+        $commandList = [];
+        $gameStor = KVStorage::getStorage($db, 'game_env');
+        $generalID = $session->generalID;
+
+        $rawTurn = $db->queryAllLists('SELECT turn_idx, action, arg, brief FROM general_turn WHERE general_id = %i ORDER BY turn_idx ASC', $generalID);
+        foreach ($rawTurn as [$turn_idx, $action, $arg, $brief]) {
+            $commandList[$turn_idx] = [
+                'action' => $action,
+                'brief' => $brief,
+                'arg' => Json::decode($arg)
+            ];
+        }
+
+
+        [$turnTerm, $year, $month, $lastExecute] = $gameStor->getValuesAsArray(['turnterm', 'year', 'month', 'turntime']);
+
+        [$turnTime, $rawGeneralAux] = $db->queryFirstList('SELECT turntime, aux FROM general WHERE no=%i', $generalID);
+        $generalAux = Json::decode($rawGeneralAux ?? '{}');
+
+        if (cutTurn($turnTime, $turnTerm) > cutTurn($lastExecute, $turnTerm)) {
+            //이미 이번달에 실행된 턴이다.
+            $month++;
+            if ($month >= 13) {
+                $month -= 12;
+                $year += 1;
+            }
+        }
+
+        return [
+            'result' => true,
+            'turnTime' => $turnTime,
+            'turnTerm' => $turnTerm,
+            'year' => $year,
+            'month' => $month,
+            'date' => TimeUtil::now(true),
+            'turn' => $commandList,
+            'autorun_limit' => $generalAux['autorun_limit'] ?? null,
+        ];
+    }
+}
diff --git a/hwe/sammo/API/Command/PushCommand.php b/hwe/sammo/API/Command/PushCommand.php
new file mode 100644
index 00000000..dd3f8bf1
--- /dev/null
+++ b/hwe/sammo/API/Command/PushCommand.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace sammo\API\Command;
+
+use sammo\Session;
+use DateTimeInterface;
+use sammo\Validator;
+
+use function sammo\cutTurn;
+use function sammo\pushGeneralCommand;
+
+class PushCommand extends \sammo\BaseAPI
+{
+    public function validateArgs(): ?string
+    {
+        $v = new Validator($this->args);
+        $v->rule('required', [
+            'amount',
+        ])
+            ->rule('integer', 'amount')
+            ->rule('min', 'amount', -12)
+            ->rule('max', 'amount', 12);
+
+        if (!$v->validate()) {
+            return $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)
+    {
+        $amount = $this->args['amount'];
+        if($amount == 0){
+            return '0은 불가능합니다';
+        }
+        pushGeneralCommand($session->generalID, $amount);
+
+        return [
+            'result'=>true
+        ];
+    }
+}
diff --git a/hwe/sammo/API/Command/RepeatCommand.php b/hwe/sammo/API/Command/RepeatCommand.php
new file mode 100644
index 00000000..b48e571c
--- /dev/null
+++ b/hwe/sammo/API/Command/RepeatCommand.php
@@ -0,0 +1,45 @@
+<?php
+
+namespace sammo\API\Command;
+
+use sammo\Session;
+use DateTimeInterface;
+use sammo\Validator;
+
+use function sammo\cutTurn;
+use function sammo\repeatGeneralCommand;
+
+class RepeatCommand extends \sammo\BaseAPI
+{
+    public function validateArgs(): ?string
+    {
+        $v = new Validator($this->args);
+        $v->rule('required', [
+            'amount',
+        ])
+            ->rule('integer', 'amount')
+            ->rule('min', 'amount', 1)
+            ->rule('max', 'amount', 12);
+
+        if (!$v->validate()) {
+            return $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)
+    {
+
+        $amount = $this->args['amount'];
+        repeatGeneralCommand($session->generalID, $amount);
+
+        return [
+            'result'=>true
+        ];
+    }
+}
diff --git a/hwe/sammo/API/Command/ReserveCommand.php b/hwe/sammo/API/Command/ReserveCommand.php
new file mode 100644
index 00000000..802c5dbd
--- /dev/null
+++ b/hwe/sammo/API/Command/ReserveCommand.php
@@ -0,0 +1,56 @@
+<?php
+
+namespace sammo\API\Command;
+
+use sammo\Session;
+use DateTimeInterface;
+use sammo\GameConst;
+use sammo\Util;
+use sammo\Validator;
+
+use function sammo\setGeneralCommand;
+
+class ReserveCommand extends \sammo\BaseAPI
+{
+    public function validateArgs(): ?string
+    {
+        $v = new Validator($this->args);
+        $v->rule('required', [
+            'action',
+            'turnList'
+        ])
+            ->rule('lengthMin', 'action', 1)
+            ->rule('integerArray', 'turnList');
+
+        if (!$v->validate()) {
+            return $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)
+    {
+        $action = $this->args['action'];
+        $turnList = $this->args['turnList'];
+        $arg = $this->args['arg']??[];
+
+        if(!$turnList){
+            return '턴이 입력되지 않았습니다';
+        }
+
+        if(!in_array($action, Util::array_flatten(GameConst::$availableGeneralCommand))){
+            return '사용할 수 없는 커맨드입니다.';
+        }
+
+        if(!is_array($arg)){
+            '올바른 arg 형태가 아닙니다.';
+        }
+
+        return setGeneralCommand($session->generalID, $turnList, $action, $arg);
+    }
+}
diff --git a/hwe/ts/ReservedCommand.vue b/hwe/ts/ReservedCommand.vue
index a3655922..9b65415b 100644
--- a/hwe/ts/ReservedCommand.vue
+++ b/hwe/ts/ReservedCommand.vue
@@ -17,8 +17,16 @@
         <td colspan="4">
           <div class="row gx-1">
             <div class="col d-grid">
-              <b-dropdown right split text="당기기">
-                <b-dropdown-item v-for="turnIdx in maxPushTurn" :key="turnIdx"
+              <b-dropdown
+                right
+                split
+                text="당기기"
+                @click="pullGeneralCommandSingle"
+              >
+                <b-dropdown-item
+                  v-for="turnIdx in maxPushTurn"
+                  :key="turnIdx"
+                  @click="pushGeneralCommand(-turnIdx)"
                   >{{ turnIdx }}턴
                 </b-dropdown-item>
               </b-dropdown>
@@ -55,7 +63,10 @@
             </div>
             <div class="col d-grid">
               <b-dropdown right text="반복">
-                <b-dropdown-item v-for="turnIdx in maxPushTurn" :key="turnIdx"
+                <b-dropdown-item
+                  v-for="turnIdx in maxPushTurn"
+                  :key="turnIdx"
+                  @click="repeatGeneralCommand(turnIdx)"
                   >{{ turnIdx }}턴
                 </b-dropdown-item>
               </b-dropdown>
@@ -66,31 +77,59 @@
     </thead>
     <tbody class="center" style="font-weight: bold">
       <tr
-        v-for="turnIdx in Math.min(maxTurn, viewMaxTurn)"
+        v-for="(turnObj, turnIdx) in reservedCommandList.slice(
+          0,
+          Math.min(maxTurn, viewMaxTurn)
+        )"
         :key="turnIdx"
         height="28"
-        :id="`command_${turnIdx - 1}`"
-        :class="pressed[turnIdx - 1] ? 'pressed' : ''"
+        :id="`command_${turnIdx}`"
+        :class="pressed[turnIdx] ? 'pressed' : ''"
       >
-        <td width="32" class="idx_pad center bg0 d-grid" @click="clickTurn(turnIdx - 1)">
+        <td
+          width="32"
+          class="idx_pad center bg0 d-grid"
+          @click="clickTurn(turnIdx)"
+        >
           <b-button
             size="sm"
-            :variant="pressed[turnIdx - 1] ? 'info' : 'primary'"
-            >{{ turnIdx }}</b-button
+            :variant="pressed[turnIdx] ? 'info' : 'primary'"
+            >{{ turnIdx + 1 }}</b-button
           >
         </td>
-        <td @click="clickTurn(turnIdx - 1)"
+        <td
+          @click="clickTurn(turnIdx)"
           height="24"
           class="month_pad center bg1"
-          style="min-width: 70px; white-space: nowrap; overflow: hidden"
-        ></td>
-        <td @click="clickTurn(turnIdx - 1)"
+          :style="{
+            'min-width': '70px',
+            'white-space': 'nowrap',
+            'font-size': `${Math.min(
+              14,
+              (70 / (`${turnObj.year ?? 1}`.length + 8)) * 1.8
+            )}px`,
+            overflow: 'hidden',
+          }"
+        >
+          {{ turnObj.year ? `${turnObj.year}年` : "" }}
+          {{ turnObj.month ? `${turnObj.month}月` : "" }}
+        </td>
+        <td
+          @click="clickTurn(turnIdx)"
           width="38"
           class="time_pad center"
           style="background-color: black; white-space: nowrap; overflow: hidden"
-        ></td>
+        >
+          {{ turnObj.time }}
+        </td>
         <td width="160" class="turn_pad center bg2">
-          <span class="turn_text"></span>
+          <span
+            class="turn_text"
+            :style="turnObj.style"
+            v-b-tooltip.hover
+            :title="turnObj.tooltip"
+            v-html="turnObj.brief"
+          ></span>
         </td>
       </tr>
     </tbody>
@@ -99,54 +138,137 @@
         <td colspan="4">
           <div class="row gx-1">
             <div class="col-4 d-grid">
-              <b-dropdown right split text="미루기">
-                <b-dropdown-item v-for="turnIdx in maxPushTurn" :key="turnIdx"
+              <b-dropdown
+                right
+                split
+                text="미루기"
+                @click="pushGeneralCommandSingle"
+              >
+                <b-dropdown-item
+                  v-for="turnIdx in maxPushTurn"
+                  :key="turnIdx"
+                  @click="pushGeneralCommand(turnIdx)"
                   >{{ turnIdx }}턴
                 </b-dropdown-item>
               </b-dropdown>
             </div>
-            <div class="col-8 d-grid"><b-button @click="toggleViewMaxTurn">{{flippedMaxTurn==viewMaxTurn?'펼치기':'접기'}}</b-button></div>
+            <div class="col-8 d-grid">
+              <b-button @click="toggleViewMaxTurn">{{
+                flippedMaxTurn == viewMaxTurn ? "펼치기" : "접기"
+              }}</b-button>
+            </div>
           </div>
         </td>
       </tr>
     </tfoot>
   </table>
   <div class="row gx-0">
-      <div class="col-10 d-grid">
-    <b-form-select v-model="selectedCommand"
-      ><b-form-select-option-group
-        v-for="cgroup in commandList"
-        :key="cgroup['category']"
-        :label="cgroup['category']"
-      ><b-form-select-option v-for="(citem, ckey) in cgroup['values']" :value="ckey" :key="ckey">{{citem.title}}{{citem.possible?'':'(불가)'}}</b-form-select-option>
-      </b-form-select-option-group
-    ></b-form-select></div>
+    <div class="col-10 d-grid">
+      <b-form-select v-model="selectedCommand"
+        ><b-form-select-option-group
+          v-for="cgroup in commandList"
+          :key="cgroup['category']"
+          :label="cgroup['category']"
+          ><b-form-select-option
+            v-for="(citem, ckey) in cgroup['values']"
+            :value="ckey"
+            :key="ckey"
+            >{{ citem.title
+            }}{{ citem.possible ? "" : "(불가)" }}</b-form-select-option
+          >
+        </b-form-select-option-group></b-form-select
+      >
+    </div>
     <div class="col-2 d-grid">
-    <b-button>실행</b-button></div>
+      <b-button @click="reserveCommand()">실행</b-button>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import addMilliseconds from "date-fns/esm/addMilliseconds/index.js";
+import addMilliseconds from "date-fns/esm/addMilliseconds";
+import addMinutes from "date-fns/esm/addMinutes";
 import { range } from "lodash";
-import { defineComponent, ref } from "vue";
+import { stringifyUrl } from "query-string";
+import { defineComponent } from "vue";
 import { formatTime } from "./util/formatTime";
+import { joinYearMonth } from "./util/joinYearMonth";
 import { parseTime } from "./util/parseTime";
-
+import { parseYearMonth } from "./util/parseYearMonth";
+import { sammoAPI } from "./util/sammoAPI";
+import { unwrap_any } from "./util/unwrap_any";
 type commandItem = {
   title: string;
   compensation: number;
   possible: boolean;
+  reqArg: boolean;
 };
 
 declare const maxTurn: number;
 declare const maxPushTurn: number;
 declare const commandList: {
   category: string;
-  values: Record<string, commandItem>[];
+  values: Record<string, commandItem>;
 }[];
 declare const serverNow: string;
 
+type TurnObj = {
+  action: string;
+  brief: string;
+  arg: null | [] | Record<string, number | string | number[] | string[]>;
+};
+
+type TurnObjWithTime = TurnObj & {
+  time: string;
+  year?: number;
+  month?: number;
+  tooltip?: string;
+  style?: Record<string, unknown>;
+};
+
+type ReservedCommandResponse = {
+  result: true;
+  turnTime: string;
+  turnTerm: number;
+  year: number;
+  month: number;
+  date: string;
+  turn: TurnObj[];
+  autorun_limit: null | number;
+};
+
+const listReqArgCommand = new Set<string>();
+for (const commandCategories of commandList) {
+  if (!commandCategories.values) {
+    continue;
+  }
+  for (const [commandName, commandObj] of Object.entries(
+    commandCategories.values
+  )) {
+    if (!commandObj.reqArg) {
+      continue;
+    }
+    listReqArgCommand.add(commandName);
+  }
+}
+
+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;
+}
+
 export default defineComponent({
   name: "ReservedCommand",
 
@@ -163,19 +285,8 @@ export default defineComponent({
     },
     selectAll(e: Event | true) {
       //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
-      if (e !== true) {
-        if (!e.target) {
-          return;
-        }
-        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;
-        }
+      if (e !== true && isDropdownChildren(e)) {
+        return;
       }
 
       let pressedCnt = 0;
@@ -200,14 +311,131 @@ export default defineComponent({
         }
       }
     },
-    toggleViewMaxTurn(){
-        if(this.viewMaxTurn == this.flippedMaxTurn){
-            this.viewMaxTurn = this.maxTurn;
+    toggleViewMaxTurn() {
+      if (this.viewMaxTurn == this.flippedMaxTurn) {
+        this.viewMaxTurn = this.maxTurn;
+      } else {
+        this.viewMaxTurn = this.flippedMaxTurn;
+      }
+    },
+    async repeatGeneralCommand(amount: number) {
+      try {
+        await sammoAPI(`Command/RepeatCommand`, { amount });
+      } catch (e) {
+        console.error(e);
+        alert(`실패했습니다: ${e}`);
+        return;
+      }
+      await this.reloadCommandList();
+    },
+    async pushGeneralCommand(amount: number) {
+      try {
+        await sammoAPI("Command/PushCommand", { amount });
+      } catch (e) {
+        console.error(e);
+        alert(`실패했습니다: ${e}`);
+        return;
+      }
+      await this.reloadCommandList();
+    },
+    pushGeneralCommandSingle(e: Event) {
+      //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
+      if (isDropdownChildren(e)) {
+        return;
+      }
+      void this.pushGeneralCommand(1);
+    },
+    pullGeneralCommandSingle(e: Event) {
+      //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
+      if (isDropdownChildren(e)) {
+        return;
+      }
+      void this.pushGeneralCommand(-1);
+    },
+    async reloadCommandList() {
+      let result: ReservedCommandResponse;
+      try {
+        result = await sammoAPI("Command/GetReservedCommand");
+      } catch (e) {
+        console.error(e);
+        alert(`실패했습니다: ${e}`);
+        return;
+      }
+
+      const reservedCommandList: TurnObjWithTime[] = [];
+      let yearMonth = joinYearMonth(result.year, result.month);
+
+      const turnTime = parseTime(result.turnTime);
+      let nextTurnTime = new Date(turnTime);
+
+      const autorunLimitYearMonth = result.autorun_limit ?? yearMonth - 1;
+      const [autorunLimitYear, autorunLimitMonth] = parseYearMonth(
+        autorunLimitYearMonth
+      );
+
+      for (const obj of result.turn) {
+        const [year, month] = parseYearMonth(yearMonth);
+        let tooltip: string | undefined = undefined;
+        let style: Record<string, unknown> = {};
+        if (yearMonth <= autorunLimitYearMonth) {
+          if (obj.brief == "휴식") {
+            obj.brief = "휴식<small>(자율 행동)</small>";
+          }
+          style.color = "#aaffff";
+          tooltip = `자율 행동 기간: ${autorunLimitYear}년 ${autorunLimitMonth}월까지`;
         }
-        else{
-            this.viewMaxTurn = this.flippedMaxTurn;
+
+        reservedCommandList.push({
+          ...obj,
+          year,
+          month,
+          time: formatTime(nextTurnTime, "HH:mm"),
+          tooltip,
+          style,
+        });
+
+        yearMonth += 1;
+        nextTurnTime = addMinutes(nextTurnTime, result.turnTerm);
+      }
+      this.reservedCommandList = reservedCommandList;
+
+      const serverNowObj = parseTime(result.date);
+      const clientNowObj = new Date();
+      const timeDiff = serverNowObj.getTime() - clientNowObj.getTime();
+      this.timeDiff = timeDiff;
+    },
+    async reserveCommand() {
+      const turnList: number[] = [];
+      for (const [turnIdx, pressed] of this.pressed.entries()) {
+        if (!pressed) {
+          continue;
         }
-    }
+        turnList.push(turnIdx);
+      }
+
+      if (listReqArgCommand.has(this.selectedCommand)) {
+        document.location.href = stringifyUrl({
+          url: "b_processing.php",
+          query: {
+            command: unwrap_any<string>(this.selectedCommand),
+            turnList: turnList.join("_"),
+          },
+        });
+        return;
+      }
+
+      try {
+        await sammoAPI("Command/ReserveCommand", {
+          turnList,
+          action: this.selectedCommand,
+        });
+      } catch (e) {
+        console.error(e);
+        alert(`실패했습니다: ${e}`);
+        return;
+      }
+      await this.reloadCommandList();
+    },
   },
   data() {
     const serverNowObj = parseTime(serverNow);
@@ -221,7 +449,18 @@ export default defineComponent({
     const pressed = Array.from<boolean>({ length: maxTurn }).fill(false);
     pressed[0] = true;
 
-    const selectedCommand = ref<string>("휴식");
+    const selectedCommand = "휴식";
+
+    const emptyTurn: TurnObjWithTime[] = Array.from<TurnObjWithTime>({
+      length: maxTurn,
+    }).fill({
+      arg: null,
+      brief: "",
+      action: "",
+      year: undefined,
+      month: undefined,
+      time: "",
+    });
 
     return {
       maxTurn,
@@ -233,7 +472,12 @@ export default defineComponent({
       timeDiff,
       pressed,
       selectedCommand,
+      reservedCommandList: emptyTurn,
+      autorun_limit: null as null | number,
     };
   },
+  mounted() {
+    void this.reloadCommandList();
+  },
 });
 </script>
\ No newline at end of file
diff --git a/hwe/ts/main.ts b/hwe/ts/main.ts
index 5e522a50..77c733db 100644
--- a/hwe/ts/main.ts
+++ b/hwe/ts/main.ts
@@ -2,211 +2,22 @@ import $ from 'jquery';
 import Popper from 'popper.js';
 exportWindow(Popper, 'Popper');//XXX: 왜 popper를 이렇게 불러야 하는가?
 import 'bootstrap';
-import { parseTime } from './util/parseTime';
-import { addMilliseconds, addMinutes, differenceInMilliseconds } from 'date-fns';
-import { formatTime } from './util/formatTime';
-import { unwrap_any } from './util/unwrap_any';
-import { activateFlip, errUnknown, initTooltip } from './common_legacy';
-import { unwrap } from './util/unwrap';
-import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
+import { activateFlip, initTooltip } from './common_legacy';
 import './msg.ts';
 import './map.ts';
 import { exportWindow } from './util/exportWindow';
-import {stringifyUrl} from 'query-string';
-import { joinYearMonth } from './util/joinYearMonth';
-import { parseYearMonth } from './util/parseYearMonth';
-
 
 
 exportWindow($, '$');
 
 import '../scss/main.scss';
 
-type TurnArg = {
-    //TODO: 채울것
-}
-
-type TurnItem = {
-    action: string,
-    brief: string,
-    arg: TurnArg,
-}
-
-type ReservedTurnResponse = {
-    result: true,
-    turnTime: string,
-    turnTerm: number,
-    year: number,
-    month: number,
-    date: string,
-    turn: TurnItem[],
-    autorun_limit: number|null,
-}
-
-
 $(function ($) {
     $('#refreshPage').click(function () {
         document.location.reload();
         return false;
     });
 
-
-    function reloadCommandList() {
-        void $.get({
-            url: 'j_get_reserved_command.php',
-            dataType: 'json',
-            cache: false,
-        }).then(function (data: ReservedTurnResponse) {
-            if (!data) {
-                return;
-            }
-            if (!data.result) {
-                return;
-            }
-            const game_clock = parseTime(data.date);
-            const now_clock = new Date();
-            const $clock = $('#clock');
-            $clock.data('time-diff', differenceInMilliseconds(game_clock, now_clock));
-            $clock.val(formatTime(game_clock));
-
-            const turnTime = parseTime(data.turnTime);
-            let nextTurnTime = new Date(turnTime);
-
-            let nowYearMonth = joinYearMonth(data.year, data.month);
-            const autorunLimitYearMonth = data.autorun_limit ?? nowYearMonth - 1;
-            const [autorunLimitYear, autorunLimitMonth] = parseYearMonth(autorunLimitYearMonth);
-
-            for (const [turnIdx, turnInfo] of Object.entries(data.turn)) {
-                const [year, month] = parseYearMonth(nowYearMonth);
-                const $tr = $(`#command_${turnIdx}`);
-
-                $tr.find('.time_pad').text(formatTime(nextTurnTime, 'HH:mm'));
-                $tr.find('.month_pad').text(`${year}年 ${month}月`);
-                const $turn_pad = $tr.find('.turn_pad');
-                const $turn_text = $turn_pad.find('.turn_text');
-                $turn_text.text(turnInfo.brief).css('font-size', '13px');
-                if(nowYearMonth <= autorunLimitYearMonth){
-                    const brief = turnInfo.brief != '휴식'? turnInfo.brief :'휴식<small>(자율 행동)</small>';
-                    const autorunTooltip = `<span class="obj_tooltip" data-toggle="tooltip" data-placement="top"
-    ><span style='color:#aaffff;'>${brief}</span
-    ><span class="tooltiptext">자율 행동 기간: ${autorunLimitYear}년 ${autorunLimitMonth}월까지</span
-></span>`;
-                    $turn_text.html(autorunTooltip);
-                    initTooltip($turn_text);
-                }
-
-
-                const oWidth = unwrap($turn_pad.innerWidth());
-                const iWidth = unwrap($turn_text.outerWidth());
-                if (iWidth > oWidth * 0.95) {
-                    const newFontSize = 13 * oWidth / iWidth * 0.9;
-                    $turn_text.css('font-size', `${newFontSize}px`);
-                }
-
-                nextTurnTime = addMinutes(nextTurnTime, data.turnTerm);
-                nowYearMonth += 1;
-            }
-            console.log(data);
-
-
-        });
-    }
-
-    function myclock() {
-
-        const $clock = $('#clock');
-        const now_clock = new Date();
-
-        const rawTimeDiff = $clock.data('time-diff');
-        if (rawTimeDiff === null || rawTimeDiff === undefined) {
-            return;
-        }
-        const timeDiff = unwrap_any<number>(rawTimeDiff);
-
-        const gameClock = addMilliseconds(now_clock, timeDiff);
-
-        $('#clock').val(formatTime(gameClock));
-    }
-
-    function pushTurn(pushAmount: number) {
-        $.post({
-            url: 'j_general_turn.php',
-            dataType: 'json',
-            data: {
-                amount: pushAmount
-            }
-        }).then(function (data) {
-            if (!data.result) {
-                alert(data.reason);
-            }
-            reloadCommandList();
-        }, errUnknown);
-    }
-
-    function repeatTurn(repeatAmount: number) {
-        $.post({
-            url: 'j_general_turn.php',
-            dataType: 'json',
-            data: {
-                amount: repeatAmount,
-                is_repeat: true
-            }
-        }).then(function (data) {
-            if (!data.result) {
-                alert(data.reason);
-            }
-            reloadCommandList();
-        }, errUnknown);
-    }
-
-    $('#pullTurn').click(function () {
-        pushTurn(-parseInt(unwrap_any<string>($('#repeatAmount').val())));
-    });
-
-    $('#pushTurn').click(function () {
-        pushTurn(parseInt(unwrap_any<string>($('#repeatAmount').val())));
-    });
-
-    $('#repeatTurn').click(function () {
-        repeatTurn(parseInt(unwrap_any<string>($('#repeatAmount').val())));
-    });
-
-
-    function reserveTurn(turnList: number[], command: string) {
-        console.log(turnList, command);
-        $.post({
-            url: 'j_set_general_command.php',
-            dataType: 'json',
-            data: {
-                action: command,
-                turnList: turnList
-            }
-        }).then(function (data) {
-            if (!data.result) {
-                alert(data.reason);
-            }
-            reloadCommandList();
-        }, errUnknown);
-    }
-
-    $('#reserveTurn').click(function () {
-        const turnList = unwrap_any<string[]>($('#generalTurnSelector').val()).map(v => parseInt(v));
-        const $command = $('#generalCommandList option:selected');
-        if ($command.data('reqarg')) {
-            document.location.href = stringifyUrl({
-                url: 'b_processing.php',
-                query: {
-                    command: unwrap_any<string>($command.val()),
-                    turnList: turnList.join('_')
-                }
-            });
-        }
-        else {
-            reserveTurn(turnList, unwrap_any<string>($command.val()));
-        }
-        return false;
-    })
-
     $('.open-window').on('click', function(e){
         e.preventDefault();
         let target = $(e.target as HTMLAnchorElement);
@@ -220,8 +31,6 @@ $(function ($) {
         window.open(href);
     });
 
-    //setInterval(myclock, 500);
-    //reloadCommandList();
     activateFlip();
     initTooltip();
 });
diff --git a/hwe/ts/util/sammoAPI.ts b/hwe/ts/util/sammoAPI.ts
new file mode 100644
index 00000000..2897242e
--- /dev/null
+++ b/hwe/ts/util/sammoAPI.ts
@@ -0,0 +1,28 @@
+import axios from "axios";
+import { isArray } from "lodash";
+import { InvalidResponse } from "../defs";
+
+type ValidResponse = {
+    result: true
+}
+
+export async function sammoAPI<ResultType extends ValidResponse>(path: string | string[], args?: Record<string, unknown>): Promise<ResultType> {
+    if (isArray(path)) {
+        path = path.join('/');
+    }
+
+    const response = await axios({
+        url: "api.php",
+        method: "post",
+        responseType: "json",
+        data: {
+            path,
+            args,
+        },
+    });
+    const result: InvalidResponse | ResultType = response.data;
+    if (!result.result) {
+        throw result.reason;
+    }
+    return result;
+}
\ No newline at end of file