refac: 사령부 vue를 setup 방식으로 변경

hwe/ts/PageChiefCenter.vue

@@ -7,10 +7,7 @@
       v-if="chiefList !== undefined"
       :class="`${targetIsMe ? 'targetIsMe' : 'targetIsNotMe'}`"
     >
-      <template
+      <template v-for="(chiefLevel, vidx) in [12, 10, 8, 6, 11, 9, 7, 5]" :key="chiefLevel">
-        v-for="(chiefLevel, vidx) in [12, 10, 8, 6, 11, 9, 7, 5]"
-        :key="chiefLevel"
-      >
         <div
           v-if="vidx % 4 == 0"
           :class="[
@@ -24,9 +21,7 @@
               v-for="idx in maxChiefTurn"
               :class="[`turnIdxLeft`, 'align-self-center', 'center']"
               :key="idx"
-            >
+            >{{ idx }}</div>
-              {{ idx }}
-            </div>
           </div>
         </div>
         <div
@@ -42,21 +37,14 @@
             :turnTerm="turnTerm"
           />
           <div class="commandBox" v-else>
-            <div
+            <div class="only1000px bg1 center row gx-0" style="height: 24px; font-size: 1.2em">
-              class="only1000px bg1 center row gx-0"
+              <div class="col-5 align-self-center text-end">{{ officer.officerLevelText }} :</div>
-              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>
-                {{ officer.name }}
-              </div>
             </div>
             <div
               :class="[
@@ -72,9 +60,7 @@
                       color: getNpcColor(officer.npcType ?? 0),
                       fontSize: '1.2em',
                     }"
-                  >
+                  >{{ officer.name }}</div>
-                    {{ officer.name }}
-                  </div>
                   <div>{{ officer.officerLevelText }}</div>
                 </div>
                 <div class="row gx-1 gy-1 py-1">
@@ -82,39 +68,26 @@
                     <div
                       class="alert alert-primary mb-0 center"
                       style="padding: 0.5rem 0"
-                    >
+                    >{{ serverNow }}</div>
-                      {{ serverNow }}
-                    </div>
                   </div>
 
                   <b-dropdown class="col-md-4" left text="턴 선택">
-                    <b-dropdown-item @click="selectNone()"
+                    <b-dropdown-item @click="selectNone()">해제</b-dropdown-item>
-                      >해제</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="selectAll(true)"
+                    <b-dropdown-item @click="selectStep(1, 2)">짝수턴</b-dropdown-item>
-                      >모든턴</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
+                    <b-dropdown-text v-for="spanIdx in [3, 4, 5, 6, 7]" :key="spanIdx">
-                      v-for="spanIdx in [3, 4, 5, 6, 7]"
+                      {{ spanIdx }}턴 간격
-                      :key="spanIdx"
+                      <br />
-                    >
-                      {{ spanIdx }}턴 간격<br />
                       <b-button-group>
                         <b-button
                           class="ignoreMe"
                           v-for="beginIdx in spanIdx"
                           :key="beginIdx"
                           @click="selectStep(beginIdx - 1, spanIdx)"
-                          >{{ beginIdx }}</b-button
+                        >{{ beginIdx }}</b-button>
-                        >
                       </b-button-group>
                     </b-dropdown-text>
                   </b-dropdown>
@@ -123,34 +96,21 @@
                       v-for="turnIdx in maxPushTurn"
                       :key="turnIdx"
                       @click="repeatNationCommand(turnIdx)"
-                      >{{ turnIdx }}턴
+                    >{{ turnIdx }}턴</b-dropdown-item>
-                    </b-dropdown-item>
                   </b-dropdown>
-                  <b-dropdown
+                  <b-dropdown class="col-md-6" split text="당기기" @click="pullNationCommandSingle">
-                    class="col-md-6"
-                    split
-                    text="당기기"
-                    @click="pullNationCommandSingle"
-                  >
                     <b-dropdown-item
                       v-for="turnIdx in maxPushTurn"
                       :key="turnIdx"
                       @click="pushNationCommand(-turnIdx)"
-                      >{{ turnIdx }}턴
+                    >{{ turnIdx }}턴</b-dropdown-item>
-                    </b-dropdown-item>
                   </b-dropdown>
-                  <b-dropdown
+                  <b-dropdown class="col-md-6" split text="미루기" @click="pushNationCommandSingle">
-                    class="col-md-6"
-                    split
-                    text="미루기"
-                    @click="pushNationCommandSingle"
-                  >
                     <b-dropdown-item
                       v-for="turnIdx in maxPushTurn"
                       :key="turnIdx"
                       @click="pushNationCommand(turnIdx)"
-                      >{{ turnIdx }}턴
+                    >{{ turnIdx }}턴</b-dropdown-item>
-                    </b-dropdown-item>
                   </b-dropdown>
                 </div>
               </div>
@@ -186,9 +146,7 @@
               v-for="idx in maxChiefTurn"
               :class="[`turnIdxRight`, 'align-self-center', 'center']"
               :key="idx"
-            >
+            >{{ idx }}</div>
-              {{ idx }}
-            </div>
           </div>
         </div>
       </template>
@@ -196,19 +154,10 @@
   </div>
   <div id="bottomChiefBox" v-if="chiefList">
     <div id="bottomChiefList" class="c-bg2">
-      <template
+      <template v-for="(chiefLevel, vidx) in [12, 10, 8, 6, 11, 9, 7, 5]" :key="chiefLevel">
-        v-for="(chiefLevel, vidx) in [12, 10, 8, 6, 11, 9, 7, 5]"
+        <div class="turnIdx subRows bg0" :style="subTableGridRows" v-if="vidx % 4 == 0">
-        :key="chiefLevel"
-      >
-        <div
-          class="turnIdx subRows bg0"
-          :style="subTableGridRows"
-          v-if="vidx % 4 == 0"
-        >
           <div class="bg1" style="grid-row: 1/3"></div>
-          <div v-for="idx in maxChiefTurn" :class="[`turnIdxLeft`]" :key="idx">
+          <div v-for="idx in maxChiefTurn" :class="[`turnIdxLeft`]" :key="idx">{{ idx }}</div>
-            {{ idx }}
-          </div>
         </div>
         <BottomItem
           :chiefLevel="chiefLevel"
@@ -217,15 +166,9 @@
           :isMe="chiefLevel == officerLevel"
           @click="viewTarget = chiefLevel"
         />
-        <div
+        <div class="turnIdx subRows bg0" :style="subTableGridRows" v-if="vidx % 4 == 3">
-          class="turnIdx subRows bg0"
-          :style="subTableGridRows"
-          v-if="vidx % 4 == 3"
-        >
           <div class="bg1" style="grid-row: 1/3"></div>
-          <div v-for="idx in maxChiefTurn" :class="`turnIdxRight`" :key="idx">
+          <div v-for="idx in maxChiefTurn" :class="`turnIdxRight`" :key="idx">{{ idx }}</div>
-            {{ idx }}
-          </div>
         </div>
       </template>
     </div>
@@ -234,18 +177,17 @@
     <BottomBar />
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import "@scss/common/bootstrap5.scss";
 import "@scss/game_bg.scss";
 import "../../css/config.css";
 
-import { computed, defineComponent, reactive, ref, toRefs, watch } from "vue";
+import { computed, defineProps, reactive, ref, toRefs, watch } from "vue";
 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 { mb_strwidth } from "./util/mb_strwidth";
 import { entriesWithType } from "./util/entriesWithType";
 import { addMilliseconds } from "date-fns";
 import { formatTime } from "./util/formatTime";
@@ -274,95 +216,37 @@ function isDropdownChildren(e?: Event): boolean {
   return false;
 }
 
-export default defineComponent({
+const props = defineProps({
-  components: {
-    TopBackBar,
-    BottomBar,
-    ChiefReservedCommand,
-    TopItem,
-    BottomItem,
-  },
-  props: {
   maxChiefTurn: VueTypes.number.isRequired,
-  },
+})
-  watch: {
+
-    year() {
+const maxPushTurn = props.maxChiefTurn / 2;
-      console.log(this.lastExecute);
+
-    },
+const tableObj = reactive<Omit<OptionalFull<ChiefResponse>, "result">>({
-  },
+  lastExecute: undefined,
-  methods: {
+  year: undefined,
-    toggleTurn(turnIdx: number) {
+  month: undefined,
-      if (this.turnList.has(turnIdx)) {
+  turnTerm: undefined,
-        this.turnList.delete(turnIdx);
+  date: undefined,
-      } else {
+  chiefList: undefined,
-        this.turnList.add(turnIdx);
+  isChief: undefined,
-      }
+  autorun_limit: undefined,
-    },
+  officerLevel: undefined,
-    selectTurn(turnIdx: number) {
+  commandList: undefined,
-      this.turnList.clear();
+  mapName: undefined,
-      this.turnList.add(turnIdx);
+  unitSet: undefined,
-    },
+});
-    selectNone() {
+
-      this.turnList.clear();
+const {
-    },
+  year,
-    selectAll(e: Event | true) {
+  month,
-      //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
+  turnTerm,
-      if (e !== true && isDropdownChildren(e)) {
+  date,
-        return;
+  chiefList,
-      }
+  officerLevel,
+  commandList,
+} = toRefs(tableObj);
 
-      if (this.turnList.size * 3 > this.maxChiefTurn) {
-        this.turnList.clear();
-      } else {
-        for (let i = 0; i < this.maxChiefTurn; i++) {
-          this.turnList.add(i);
-        }
-      }
-    },
-    selectStep(begin: number, step: number) {
-      this.turnList.clear();
-      for (const idx of range(0, this.maxChiefTurn)) {
-        if ((idx - begin) % step == 0) {
-          this.turnList.add(idx);
-        }
-      }
-    },
-    async repeatNationCommand(amount: number) {
-      try {
-        await SammoAPI.NationCommand.RepeatCommand({ amount });
-      } catch (e) {
-        console.error(e);
-        alert(`실패했습니다: ${e}`);
-        return;
-      }
-      await this.reloadTable();
-    },
-    async pushNationCommand(amount: number) {
-      try {
-        await SammoAPI.NationCommand.PushCommand({ amount });
-      } catch (e) {
-        console.error(e);
-        alert(`실패했습니다: ${e}`);
-        return;
-      }
-      await this.reloadTable();
-    },
-    pushNationCommandSingle(e: Event) {
-      //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
-      if (isDropdownChildren(e)) {
-        return;
-      }
-      void this.pushNationCommand(1);
-    },
-    pullNationCommandSingle(e: Event) {
-      //NOTE: split 구현에 버그가 있어서, 수동으로 구분해야함
-      if (isDropdownChildren(e)) {
-        return;
-      }
-      void this.pushNationCommand(-1);
-    },
-  },
-  setup(props) {
 const viewTarget = ref<number | undefined>();
 
 const turnList = ref(new Set<number>());
@@ -381,20 +265,83 @@ export default defineComponent({
   console.log("result", targetIsMe.value);
 });
 
-    const tableObj = reactive<Omit<OptionalFull<ChiefResponse>, "result">>({
+function toggleTurn(turnIdx: number) {
-      lastExecute: undefined,
+  if (turnList.value.has(turnIdx)) {
-      year: undefined,
+    turnList.value.delete(turnIdx);
-      month: undefined,
+  } else {
-      turnTerm: undefined,
+    turnList.value.add(turnIdx);
-      date: undefined,
+  }
-      chiefList: undefined,
+}
-      isChief: undefined,
+
-      autorun_limit: undefined,
+function selectTurn(turnIdx: number) {
-      officerLevel: undefined,
+  turnList.value.clear();
-      commandList: undefined,
+  turnList.value.add(turnIdx);
-      mapName: undefined,
+}
-      unitSet: undefined,
+
-    });
+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);
+}
 
 async function reloadTable(): Promise<void> {
   try {
@@ -438,7 +385,6 @@ export default defineComponent({
     return;
   }
 }
-    //
 
 const mainTableGridRows = computed(() => {
   return {
@@ -469,24 +415,6 @@ export default defineComponent({
   updateNow();
 }, 500);
 
-    return {
-      updateNow,
-      serverNow,
-      timeDiff,
-      turnList,
-      ...toRefs(tableObj),
-      mb_strwidth,
-      mainTableGridRows,
-      subTableGridRows,
-      reloadTable,
-      getNpcColor,
-      unwrap,
-      viewTarget,
-      targetIsMe,
-      maxPushTurn: props.maxChiefTurn / 2,
-    };
-  },
-});
 </script>
 <style lang="scss">
 @import "@scss/chiefCenter.scss";

hwe/ts/components/ChiefReservedCommand.vue

@@ -23,9 +23,7 @@
             color:
               isDragSingle && selected.has(`${turnIdx}`) ? 'cyan' : undefined,
           }"
-        >
+        >{{ turnObj.time }}</div>
-          {{ turnObj.time }}
-        </div>
       </DragSelect>
       <DragSelect
         :style="rowGridStyle"
@@ -54,8 +52,7 @@
                     ? 'success'
                     : 'primary'
             "
-            >{{ turnIdx + 1 }}</b-button
+          >{{ turnIdx + 1 }}</b-button>
-          >
         </div>
       </DragSelect>
       <div :style="rowGridStyle">
@@ -83,8 +80,9 @@
           :variant="searchModeOn ? 'info' : 'primary'"
           v-b-tooltip.hover
           title="검색 기능을 활성화합니다."
-          ><i class="bi bi-search"></i
+        >
-        ></b-button>
+          <i class="bi bi-search"></i>
+        </b-button>
       </div>
       <div class="col-7">
         <v-multiselect
@@ -99,40 +97,28 @@
           open-direction="top"
           :show-labels="false"
           selectLabel="선택(엔터)"
-          selectGroupLabel=""
+          selectGroupLabel
           selectedLabel="선택됨"
           deselectLabel="해제(엔터)"
-          deselectGroupLabel=""
+          deselectGroupLabel
           placeholder="턴 선택"
           :maxHeight="400"
           :searchable="searchModeOn"
         >
           <template v-slot:noResult>검색 결과가 없습니다.</template>
-          <template v-slot:option="props"
+          <template v-slot:option="props">
-            ><!--FIXME: 카테고리-->
+            <!--FIXME: 카테고리-->
             <template v-if="props.option.title">
-              <span
+              <span class="compensatePositive" v-if="props.option.compensation > 0">▲</span>
-                class="compensatePositive"
+              <span class="compensateNegative" v-else-if="props.option.compensation < 0">▼</span>
-                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']">
+              <span
-                {{ props.option.title }}
+                :class="[props.option.possible ? '' : 'commandImpossible']"
-              </span>
+              >{{ props.option.title }}</span>
             </template>
-            <template v-else-if="props.option.category">
+            <template v-else-if="props.option.category">{{ props.option.category }}</template>
-              {{ props.option.category }}
-            </template>
-          </template>
-          <template v-slot:singleLabel="props">
-            {{ props.option.simpleName }}
           </template>
+          <template v-slot:singleLabel="props">{{ props.option.simpleName }}</template>
         </v-multiselect>
       </div>
       <div class="col-3 d-grid">
@@ -142,10 +128,10 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import addMinutes from "date-fns/esm/addMinutes";
 import { stringifyUrl } from "query-string";
-import { defineComponent, type PropType } from "vue";
+import { defineProps, defineEmits, onMounted, ref, watch, type PropType } from "vue";
 import { formatTime } from "@util/formatTime";
 import { joinYearMonth } from "@util/joinYearMonth";
 import { mb_strwidth } from "@util/mb_strwidth";
@@ -159,11 +145,6 @@ import { SammoAPI } from "@/SammoAPI";
 import type { ChiefResponse, CommandItem, TurnObj } from "@/defs";
 
 
-/*declare const commandList: {
-  category: string;
-  values: commandItem[];
-}[];*/
-
 type TurnObjWithTime = TurnObj & {
   time: string;
   year?: number;
@@ -174,12 +155,7 @@ type TurnObjWithTime = TurnObj & {
 
 const searchModeKey = `sammo_searchModeOn`;
 
-export default defineComponent({
+const props = defineProps({
-  name: "NationReservedCommand",
-  components: {
-    DragSelect
-  },
-  props: {
   maxTurn: VueTypes.integer.isRequired,
   maxPushTurn: VueTypes.integer.isRequired,
   date: VueTypes.string.isRequired,
@@ -200,92 +176,125 @@ export default defineComponent({
     type: Object as PropType<ChiefResponse['commandList']>,
     required: true,
   },
-  },
+})
-  emits: ["raiseReload", "update:selectedTurn"],
+
-  watch: {
+
-    date() {
+const serverNowObj = ref(parseTime(props.date));
-      this.triggerUpdateCommandList("date");
+const clientNowObj = ref(new Date());
-    },
+const timeDiff = ref(serverNowObj.value.getTime() - clientNowObj.value.getTime());
-    year() {
+
-      this.triggerUpdateCommandList("year");
+const listReqArgCommand = new Set<string>();
-    },
+for (const commandCategories of props.commandList) {
-    month() {
+  if (!commandCategories.values) {
-      this.triggerUpdateCommandList("month");
+    continue;
-    },
-    turnTime() {
-      this.triggerUpdateCommandList("turnTime");
-    },
-    commandList() {
-      this.triggerUpdateCommandList("commandList");
-    },
-    selectedTurn(val: Set<number>) {
-      console.log(val);
-      if (val === this.turnList) {
-        console.log("pass!");
-        return;
   }
-      this.turnList.clear();
+  for (const commandObj of commandCategories.values) {
-      for (const t of val.values()) {
+    if (!commandObj.reqArg) {
-        this.turnList.add(t);
+      continue;
     }
-    },
+    listReqArgCommand.add(commandObj.value);
-    turnList: {
+  }
-      handler() {
+}
-        console.log(this.turnList);
+
-        this.$emit("update:selectedTurn", this.turnList);
+const selectedCommand = ref(props.commandList[0].values[0]);
-      },
+for (const subCategory of props.commandList) {
-      deep: true,
+  for (const command of subCategory.values) {
-    },
+    if (command.searchText) {
-  },
+      continue;
-  methods: {
+    }
-    triggerUpdateCommandList(type?: string) {
+    command.searchText = convertSearch초성(command.simpleName).join("|");
+  }
+}
+
+const invCommandMap: Record<string, CommandItem> = {};
+for (const category of props.commandList) {
+  for (const command of category.values) {
+    invCommandMap[command.value] = command;
+  }
+}
+
+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)`,
+});
+
+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<{
+  (event: 'raiseReload'): void,
+  (event: 'update:selectedTurn', value: Set<number>): void,
+}>();
+
+function triggerUpdateCommandList(type?: string) {
   console.log("try update", type);
-      this.updated = false;
+  updated.value = false;
   setTimeout(() => {
-        this.updateCommandList();
+    updateCommandList();
   }, 1);
-    },
+}
-    toggleTurn(...turnList: number[] | string[]) {
+function toggleTurn(...reqTurnList: number[] | string[]) {
-      for (let turnIdx of turnList) {
+  for (let turnIdx of reqTurnList) {
     if (isString(turnIdx)) {
       turnIdx = parseInt(turnIdx);
     }
-        if (this.turnList.has(turnIdx)) {
+    if (turnList.value.has(turnIdx)) {
-          this.turnList.delete(turnIdx);
+      turnList.value.delete(turnIdx);
     } else {
-          this.turnList.add(turnIdx);
+      turnList.value.add(turnIdx);
     }
   }
-      this.$emit("update:selectedTurn", this.turnList);
+  emit("update:selectedTurn", turnList.value);
-    },
+}
-    selectTurn(...turnList: number[] | string[]) {
+
-      this.turnList.clear();
+function selectTurn(...reqTurnList: number[] | string[]) {
-      for (const turnIdx of turnList) {
+  turnList.value.clear();
+  for (const turnIdx of reqTurnList) {
     if (isString(turnIdx)) {
-          this.turnList.add(parseInt(turnIdx));
+      turnList.value.add(parseInt(turnIdx));
     } else {
-          this.turnList.add(turnIdx);
+      turnList.value.add(turnIdx);
     }
   }
-      this.$emit("update:selectedTurn", this.turnList);
+  emit("update:selectedTurn", turnList.value);
-    },
+}
-    updateCommandList() {
+
-      if (this.updated) {
+function updateCommandList() {
+  if (updated.value) {
     return;
   }
   console.log("do update!");
-      const reservedCommandList: TurnObjWithTime[] = [];
+  const _reservedCommandList: TurnObjWithTime[] = [];
-      let yearMonth = joinYearMonth(this.year, this.month);
+  let yearMonth = joinYearMonth(props.year, props.month);
 
-      const turnTime = parseTime(this.turnTime);
+  const turnTime = parseTime(props.turnTime);
   let nextTurnTime = new Date(turnTime);
 
-      const autorunLimitYearMonth = this.autorun_limit ?? yearMonth - 1;
+  const autorunLimitYearMonth = autorun_limit.value ?? yearMonth - 1;
   const [autorunLimitYear, autorunLimitMonth] = parseYearMonth(
     autorunLimitYearMonth
   );
 
-      for (const obj of this.turn) {
+  for (const obj of props.turn) {
     const [year, month] = parseYearMonth(yearMonth);
     let tooltip: string[] = [];
     let style: Record<string, unknown> = {};
@@ -307,49 +316,49 @@ export default defineComponent({
       tooltip.push(brief);
     }
 
-        reservedCommandList.push({
+    _reservedCommandList.push({
       ...obj,
       year,
       month,
       time: formatTime(
         nextTurnTime,
-            this.turnTerm >= 5 ? "HH:mm" : "mm:ss"
+        props.turnTerm >= 5 ? "HH:mm" : "mm:ss"
       ),
       tooltip: tooltip.length == 0 ? undefined : tooltip.join("\n"),
       style,
     });
 
     yearMonth += 1;
-        nextTurnTime = addMinutes(nextTurnTime, this.turnTerm);
+    nextTurnTime = addMinutes(nextTurnTime, props.turnTerm);
   }
-      this.reservedCommandList = reservedCommandList;
+  reservedCommandList.value = _reservedCommandList;
 
-      const serverNowObj = parseTime(this.date);
+  const serverNowObj = parseTime(props.date);
   const clientNowObj = new Date();
-      const timeDiff = serverNowObj.getTime() - clientNowObj.getTime();
+  timeDiff.value = serverNowObj.getTime() - clientNowObj.getTime();
-      this.timeDiff = timeDiff;
+  updated.value = true;
-      this.updated = true;
+}
-    },
+
-    async reserveCommand() {
+async function reserveCommand() {
-      let turnList: number[];
+  let reqTurnList: number[];
-      if (this.turnList.size == 0) {
+  if (turnList.value.size == 0) {
-        turnList = Array.from(this.prevTurnList.values());
+    reqTurnList = Array.from(prevTurnList.value.values());
   } else {
-        turnList = Array.from(this.turnList.values());
+    reqTurnList = Array.from(turnList.value.values());
   }
 
-      if (turnList.length == 0) {
+  if (reqTurnList.length == 0) {
-        turnList.push(0);
+    reqTurnList.push(0);
   }
 
-      const commandName = this.selectedCommand.value;
+  const commandName = selectedCommand.value.value;
 
-      if (this.listReqArgCommand.has(commandName)) {
+  if (listReqArgCommand.has(commandName)) {
     document.location.href = stringifyUrl({
       url: "v_processing.php",
       query: {
         command: commandName,
-            turnList: turnList.join("_"),
+        turnList: reqTurnList.join("_"),
         is_chief: true,
       },
     });
@@ -358,109 +367,71 @@ export default defineComponent({
 
   try {
     await SammoAPI.NationCommand.ReserveCommand({
-          turnList,
+      turnList: reqTurnList,
       action: commandName,
     });
 
-        if (this.turnList.size > 0) {
+    if (turnList.value.size > 0) {
-          this.prevTurnList.clear();
+      prevTurnList.value.clear();
-          for (const v of this.turnList) {
+      for (const v of reqTurnList) {
-            this.prevTurnList.add(v);
+        prevTurnList.value.add(v);
       }
-          this.turnList.clear();
+      turnList.value.clear();
     }
   } catch (e) {
     console.error(e);
     alert(`실패했습니다: ${e}`);
     return;
   }
-      this.$emit("raiseReload");
+  emit("raiseReload");
-    },
-    toggleSearchCommand() {
-      const searchModeOn = !this.searchModeOn;
-      this.searchModeOn = searchModeOn;
-      localStorage.setItem(searchModeKey, searchModeOn ? "1" : "0");
-    },
-    chooseCommand(val: string){
-      this.selectedCommand = this.invCommandMap[val];
-    },
-  },
-  data() {
-    const serverNowObj = parseTime(this.date);
-    const clientNowObj = new Date();
-    const timeDiff = serverNowObj.getTime() - clientNowObj.getTime();
-
-    const listReqArgCommand = new Set<string>();
-    for (const commandCategories of this.commandList) {
-      if (!commandCategories.values) {
-        continue;
-      }
-      for (const commandObj of commandCategories.values) {
-        if (!commandObj.reqArg) {
-          continue;
-        }
-        listReqArgCommand.add(commandObj.value);
 }
+function toggleSearchCommand() {
+  searchModeOn.value = !searchModeOn.value;
+  localStorage.setItem(searchModeKey, searchModeOn.value ? "1" : "0");
 }
 
-    const selectedCommand = this.commandList[0].values[0];
+function chooseCommand(val: string) {
-    for (const subCategory of this.commandList) {
+  selectedCommand.value = invCommandMap[val];
-      for (const command of subCategory.values) {
-        if (command.searchText) {
-          continue;
-        }
-        command.searchText = convertSearch초성(command.simpleName).join("|");
-      }
 }
 
-    const invCommandMap: Record<string, CommandItem> = {};
+
-    for(const category of this.commandList){
+watch(() => props.date, () => {
-      for(const command of category.values){
+  triggerUpdateCommandList("date");
-        invCommandMap[command.value] = command;
+})
+watch(() => props.year, () => {
+  triggerUpdateCommandList("year");
+})
+watch(() => props.month, () => {
+  triggerUpdateCommandList("month");
+})
+watch(() => props.turnTime, () => {
+  triggerUpdateCommandList("turnTime");
+})
+watch(() => props.commandList, () => {
+  triggerUpdateCommandList("commandList");
+})
+watch(() => props.selectedTurn, (val: Set<number>) => {
+  console.log(val);
+  if (val === turnList.value) {
+    console.log("pass!");
+    return;
   }
+  turnList.value.clear();
+  for (const t of val.values()) {
+    turnList.value.add(t);
   }
+})
 
-    const searchModeOn = (localStorage.getItem(searchModeKey) ?? "0") != "0";
+watch(turnList, () => {
+  console.log(turnList.value);
+  emit("update:selectedTurn", turnList.value);
+})
 
-    const emptyTurn: TurnObjWithTime[] = Array.from<TurnObjWithTime>({
-      length: this.maxTurn,
-    }).fill({
-      arg: {},
-      brief: "",
-      action: "",
-      year: undefined,
-      month: undefined,
-      time: "",
-    });
 
-    const prevTurnList = new Set([0]);
+onMounted(() => {
+  updateCommandList();
+})
 
-    const rowGridStyle = {
-      display: "grid",
-      gridTemplateRows: `repeat(${this.maxTurn}, 30px)`,
-    };
-
-    return {
-      updated: false,
-      listReqArgCommand,
-      serverNow: formatTime(serverNowObj, "HH:mm:ss"),
-      timeDiff,
-      prevTurnList,
-      turnList: this.selectedTurn,
-      selectedCommand,
-      reservedCommandList: emptyTurn,
-      autorun_limit: null as null | number,
-      searchModeOn,
-      rowGridStyle,
-      isDragSingle: false,
-      isDragToggle: false,
-      invCommandMap,
-    };
-  },
-  mounted() {
-    this.updateCommandList();
-  },
-});
 </script>
 <style lang="scss">
 @import "@scss/common/break_500px.scss";