refac: linter 관련 설정 변경 및 적용, map_theme 변수 제거

- eslint에 prettier 조합
- prettierrc에 width 120, tabWidth 2
- gameStor->map_theme 제거
- map_theme, mapTheme를 GameConst::$mapName으로 대체
- eslint에서 vue/vue3-essential 대신 vue3-recommended 적용
  - vue/max-attributes-per-line 완화
  - vue/v-on-event-hyphenation 해제
  - vue/attribute-hyphenation 해제
- 일부 tsc import type warning 해결
- 일부 vue template type warning 해결
- 일부 vue SFC를 script setup으로 변경
  - TipTap
  - TopBackBar
  - BottomBackBar
  - BoardArticle
  - ProcessCity

hwe/ts/processing/Nation/che_국기변경.vue

@@ -1,5 +1,8 @@
 <template>
-  <TopBackBar :title="commandName" type="chief" />
+  <TopBackBar
+    :title="commandName"
+    type="chief"
+  />
   <div class="bg0">
     <div>
       국기를 변경합니다. 단 1회 가능합니다.<br>
@@ -7,14 +10,22 @@
     <div class="row">
       <div class="col-6 col-md-3">
         색상 :
-        <ColorSelect :colors="colors" v-model="selectedColorID" />
+        <ColorSelect
+          v-model="selectedColorID"
+          :colors="colors"
+        />
       </div>
       <div class="col-4 col-md-2 d-grid">
-        <b-button @click="submit">{{ commandName }}</b-button>
+        <b-button @click="submit">
+          {{ commandName }}
+        </b-button>
       </div>
     </div>
   </div>
-  <BottomBar :title="commandName" type="chief" />
+  <BottomBar
+    :title="commandName"
+    type="chief"
+  />
 </template>
 
 <script lang="ts">

hwe/ts/processing/Nation/che_국호변경.vue

@@ -1,20 +1,31 @@
 <template>
-  <TopBackBar :title="commandName" type="chief" />
+  <TopBackBar
+    :title="commandName"
+    type="chief"
+  />
   <div class="bg0">
     <div>
-      나라의 이름을 바꿉니다. 황제가 된 후 1회 가능합니다.<br />
+      나라의 이름을 바꿉니다. 황제가 된 후 1회 가능합니다.<br>
     </div>
     <div class="row">
       <div class="col-6 col-md-3">
         국명 :
-        <b-form-input maxlength="18" v-model="destNationName"/>
+        <b-form-input
+          v-model="destNationName"
+          maxlength="18"
+        />
       </div>
       <div class="col-4 col-md-2 d-grid">
-        <b-button @click="submit">{{ commandName }}</b-button>
+        <b-button @click="submit">
+          {{ commandName }}
+        </b-button>
       </div>
     </div>
   </div>
-  <BottomBar :title="commandName" type="chief" />
+  <BottomBar
+    :title="commandName"
+    type="chief"
+  />
 </template>
 
 <script lang="ts">

hwe/ts/processing/Nation/che_물자원조.vue

@@ -1,13 +1,13 @@
 <template>
-  <TopBackBar :title="commandName" type="chief" v-model:searchable="searchable" />
+  <TopBackBar v-model:searchable="searchable" :title="commandName" type="chief" />
   <div class="bg0">
     <MapLegacyTemplate
+      v-model="selectedCityObj"
       :isDetailMap="false"
       :clickableAll="true"
       :neutralView="true"
       :useCachedMap="true"
-      :mapTheme="mapTheme"
-      v-model="selectedCityObj"
+      :mapName="mapName"
     />
     <div>
       타국에게 원조합니다.<br />
@@ -37,14 +37,14 @@
     <div class="row">
       <div class="col-6 col-md-3">
         국가 :
-        <SelectNation :nations="nationList" v-model="selectedNationID" :searchable="searchable" />
+        <SelectNation v-model="selectedNationID" :nations="nationList" :searchable="searchable" />
       </div>
-      <div class="col-6 col-md-0"></div>
+      <div class="col-6 col-md-0" />
       <div class="col-8 col-md-4">
         금 :
         <SelectAmount
-          :amountGuide="amountGuide"
           v-model="goldAmount"
+          :amountGuide="amountGuide"
           :step="10"
           :maxAmount="maxAmount"
           :minAmount="minAmount"
@@ -53,15 +53,17 @@
       <div class="col-8 col-md-4">
         쌀 :
         <SelectAmount
-          :amountGuide="amountGuide"
           v-model="riceAmount"
+          :amountGuide="amountGuide"
           :step="10"
           :maxAmount="maxAmount"
           :minAmount="minAmount"
         />
       </div>
       <div class="col-4 col-md-2 d-grid">
-        <b-button variant="primary" @click="submit">{{ commandName }}</b-button>
+        <b-button variant="primary" @click="submit">
+          {{ commandName }}
+        </b-button>
       </div>
     </div>
   </div>
@@ -69,19 +71,19 @@
 </template>
 
 <script lang="ts">
-import MapLegacyTemplate, {
-  MapCityParsed,
-} from "@/components/MapLegacyTemplate.vue";
+import MapLegacyTemplate, { type MapCityParsed } from "@/components/MapLegacyTemplate.vue";
 import SelectNation from "@/processing/SelectNation.vue";
 import SelectAmount from "@/processing/SelectAmount.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
-import { Args } from "@/processing/args";
+import type { Args } from "@/processing/args";
 import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
-import { getProcSearchable, procNationItem, procNationList } from "../processingRes";
-declare const mapTheme: string;
-declare const commandName: string;
+import { getProcSearchable, type procNationItem, type procNationList } from "../processingRes";
+declare const staticValues: {
+  mapName: string;
+  commandName: string;
+};
 
 declare const procRes: {
   nationList: procNationList;
@@ -106,14 +108,6 @@ export default defineComponent({
     TopBackBar,
     BottomBar,
   },
-  watch: {
-    selectedCityObj(city: MapCityParsed) {
-      if (!city.nationID) {
-        return;
-      }
-      this.selectedNationID = city.nationID;
-    },
-  },
   setup() {
     const nationList = new Map<number, procNationItem>();
     for (const nationItem of procRes.nationList) {
@@ -138,7 +132,7 @@ export default defineComponent({
 
     return {
       searchable: getProcSearchable(),
-      mapTheme,
+      mapName: staticValues.mapName,
       goldAmount,
       riceAmount,
       nationList,
@@ -149,9 +143,17 @@ export default defineComponent({
       minAmount: ref(procRes.minAmount),
       maxAmount: ref(procRes.maxAmount),
       amountGuide: procRes.amountGuide,
-      commandName,
+      commandName: staticValues.commandName,
       submit,
     };
   },
+  watch: {
+    selectedCityObj(city: MapCityParsed) {
+      if (!city.nationID) {
+        return;
+      }
+      this.selectedNationID = city.nationID;
+    },
+  },
 });
 </script>

hwe/ts/processing/Nation/che_발령.vue

@@ -1,13 +1,13 @@
 <template>
-  <TopBackBar :title="commandName" type="chief" v-model:searchable="searchable" />
+  <TopBackBar v-model:searchable="searchable" :title="commandName" type="chief" />
   <div class="bg0">
     <MapLegacyTemplate
+      v-model="selectedCityObj"
       :isDetailMap="false"
       :clickableAll="true"
       :neutralView="true"
       :useCachedMap="true"
-      :mapTheme="mapTheme"
-      v-model="selectedCityObj"
+      :mapName="mapName"
     />
 
     <div>
@@ -19,20 +19,22 @@
       <div class="col-12 col-md-6">
         장수 :
         <SelectGeneral
+          v-model="selectedGeneralID"
           :cities="citiesMap"
           :generals="generalList"
           :troops="troops"
           :textHelper="textHelpGeneral"
           :searchable="searchable"
-          v-model="selectedGeneralID"
         />
       </div>
       <div class="col-6 col-md-4">
         도시 :
-        <SelectCity :cities="citiesMap" v-model="selectedCityID" :searchable="searchable" />
+        <SelectCity v-model="selectedCityID" :cities="citiesMap" :searchable="searchable" />
       </div>
       <div class="col-4 col-md-2 d-grid">
-        <b-button variant="primary" @click="submit">{{ commandName }}</b-button>
+        <b-button variant="primary" @click="submit">
+          {{ commandName }}
+        </b-button>
       </div>
     </div>
   </div>
@@ -40,28 +42,29 @@
 </template>
 
 <script lang="ts">
-import MapLegacyTemplate, {
-  MapCityParsed,
-} from "@/components/MapLegacyTemplate.vue";
+import MapLegacyTemplate, { type MapCityParsed } from "@/components/MapLegacyTemplate.vue";
 import SelectCity from "@/processing/SelectCity.vue";
 import SelectGeneral from "@/processing/SelectGeneral.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
-import { Args } from "@/processing/args";
+import type { Args } from "@/processing/args";
 import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
 import {
   convertGeneralList,
   getProcSearchable,
-  procGeneralItem,
-  procGeneralKey,
-  procGeneralRawItemList,
-  procTroopList,
+  type procGeneralItem,
+  type procGeneralKey,
+  type procGeneralRawItemList,
+  type procTroopList,
 } from "../processingRes";
 import { getNpcColor } from "@/common_legacy";
-declare const mapTheme: string;
-declare const currentCity: number;
-declare const commandName: string;
+
+declare const staticValues: {
+  mapName: string;
+  currentCity: number;
+  commandName: string;
+};
 
 declare const procRes: {
   distanceList: Record<number, number[]>;
@@ -79,11 +82,6 @@ export default defineComponent({
     TopBackBar,
     BottomBar,
   },
-  watch: {
-    selectedCityObj(city: MapCityParsed) {
-      this.selectedCityID = city.id;
-    },
-  },
   setup() {
     const citiesMap = new Map<
       number,
@@ -96,11 +94,8 @@ export default defineComponent({
       citiesMap.set(id, { name });
     }
 
-    const generalList = convertGeneralList(
-      procRes.generalsKey,
-      procRes.generals
-    );
-    const selectedCityID = ref(currentCity);
+    const generalList = convertGeneralList(procRes.generalsKey, procRes.generals);
+    const selectedCityID = ref(staticValues.currentCity);
 
     function selectedCity(cityID: number) {
       selectedCityID.value = cityID;
@@ -108,11 +103,13 @@ export default defineComponent({
 
     const selectedGeneralID = ref(generalList[0].no);
 
-    function textHelpGeneral(gen: procGeneralItem): string{
-      const troops = (!gen.troopID)?'':`,${procRes.troops[gen.troopID].name}`;
+    function textHelpGeneral(gen: procGeneralItem): string {
+      const troops = !gen.troopID ? "" : `,${procRes.troops[gen.troopID].name}`;
       const nameColor = getNpcColor(gen.npc);
-      const name = nameColor?`<span style="color:${nameColor}">${gen.name}</span>`:gen.name;
-      return `${name} [${citiesMap.get(unwrap(gen.cityID))?.name}${troops}] (${gen.leadership}/${gen.strength}/${gen.intel}) <병${unwrap(gen.crew).toLocaleString()}/훈${gen.train}/사${gen.atmos}>`;
+      const name = nameColor ? `<span style="color:${nameColor}">${gen.name}</span>` : gen.name;
+      return `${name} [${citiesMap.get(unwrap(gen.cityID))?.name}${troops}] (${gen.leadership}/${gen.strength}/${
+        gen.intel
+      }) <병${unwrap(gen.crew).toLocaleString()}/훈${gen.train}/사${gen.atmos}>`;
     }
 
     async function submit(e: Event) {
@@ -127,7 +124,7 @@ export default defineComponent({
 
     return {
       searchable: getProcSearchable(),
-      mapTheme: ref(mapTheme),
+      mapName: ref(staticValues.mapName),
       citiesMap: ref(citiesMap),
       selectedCityID,
       selectedGeneralID,
@@ -135,11 +132,16 @@ export default defineComponent({
       distanceList: procRes.distanceList,
       troops: procRes.troops,
       generalList,
-      commandName,
+      commandName: staticValues.commandName,
       selectedCity,
       textHelpGeneral,
       submit,
     };
   },
+  watch: {
+    selectedCityObj(city: MapCityParsed) {
+      this.selectedCityID = city.id;
+    },
+  },
 });
 </script>

hwe/ts/processing/Nation/che_불가침제의.vue

@@ -1,13 +1,13 @@
 <template>
-  <TopBackBar :title="commandName" type="chief" v-model:searchable="searchable" />
+  <TopBackBar v-model:searchable="searchable" :title="commandName" type="chief" />
   <div class="bg0">
     <MapLegacyTemplate
+      v-model="selectedCityObj"
       :isDetailMap="false"
       :clickableAll="true"
       :neutralView="true"
       :useCachedMap="true"
-      :mapTheme="mapTheme"
-      v-model="selectedCityObj"
+      :mapName="mapName"
     />
 
     <div>
@@ -20,30 +20,29 @@
     <div class="row">
       <div class="col-4 col-md-3">
         국가 :
-        <SelectNation :nations="nationList" v-model="selectedNationID" :searchable="searchable" />
+        <SelectNation v-model="selectedNationID" :nations="nationList" :searchable="searchable" />
       </div>
       <div class="col-5 col-md-3">
         기간 :
         <div class="input-group">
-          <b-form-select class="text-end selectedYear" v-model="selectedYear"
-            ><b-form-select-option
-              v-for="yearP in maxYear - minYear + 1"
-              :key="yearP"
-              :value="yearP + minYear - 1"
-              >{{ yearP + minYear - 1 }}</b-form-select-option
-            >
+          <b-form-select v-model="selectedYear" class="text-end selectedYear">
+            <b-form-select-option v-for="yearP in maxYear - minYear + 1" :key="yearP" :value="yearP + minYear - 1">
+              {{ yearP + minYear - 1 }}
+            </b-form-select-option>
           </b-form-select>
           <span class="input-group-text px-2">년</span>
-          <b-form-select class="text-center" v-model="selectedMonth"
-            ><b-form-select-option v-for="month in 12" :key="month" :value="month">{{
-              month
-            }}</b-form-select-option>
+          <b-form-select v-model="selectedMonth" class="text-center">
+            <b-form-select-option v-for="month in 12" :key="month" :value="month">
+              {{ month }}
+            </b-form-select-option>
           </b-form-select>
           <span class="input-group-text px-2">월</span>
         </div>
       </div>
       <div class="col-3 col-md-2 d-grid">
-        <b-button @click="submit">{{ commandName }}</b-button>
+        <b-button @click="submit">
+          {{ commandName }}
+        </b-button>
       </div>
     </div>
   </div>
@@ -51,18 +50,19 @@
 </template>
 
 <script lang="ts">
-import MapLegacyTemplate, {
-  MapCityParsed,
-} from "@/components/MapLegacyTemplate.vue";
+import MapLegacyTemplate, { type MapCityParsed } from "@/components/MapLegacyTemplate.vue";
 import SelectNation from "@/processing/SelectNation.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
-import { Args } from "@/processing/args";
+import type { Args } from "@/processing/args";
 import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
-import { getProcSearchable, procNationItem, procNationList } from "../processingRes";
-declare const mapTheme: string;
-declare const commandName: string;
+import { getProcSearchable, type procNationItem, type procNationList } from "../processingRes";
+
+declare const staticValues: {
+  mapName: string,
+  commandName: string,
+}
 
 declare const procRes: {
   nationList: procNationList;
@@ -79,14 +79,6 @@ export default defineComponent({
     TopBackBar,
     BottomBar,
   },
-  watch: {
-    selectedCityObj(city: MapCityParsed) {
-      if (!city.nationID) {
-        return;
-      }
-      this.selectedNationID = city.nationID;
-    },
-  },
   setup() {
     const nationList = new Map<number, procNationItem>();
     for (const nationItem of procRes.nationList) {
@@ -119,20 +111,28 @@ export default defineComponent({
       ...procRes,
       selectedYear,
       selectedMonth,
-      mapTheme: ref(mapTheme),
+      mapName: staticValues.mapName,
       nationList: ref(nationList),
       selectedCityObj,
       selectedNationID,
-      commandName,
+      commandName: staticValues.commandName,
       selectedNation,
       submit,
     };
   },
+  watch: {
+    selectedCityObj(city: MapCityParsed) {
+      if (!city.nationID) {
+        return;
+      }
+      this.selectedNationID = city.nationID;
+    },
+  },
 });
 </script>
 
 <style lang="scss" scoped>
-.selectedYear{
-  width:32%;
+.selectedYear {
+  width: 32%;
 }
-</style>
+</style>

hwe/ts/processing/Nation/che_피장파장.vue

@@ -1,13 +1,13 @@
 <template>
-  <TopBackBar :title="commandName" type="chief" v-model:searchable="searchable" />
+  <TopBackBar v-model:searchable="searchable" :title="commandName" type="chief" />
   <div class="bg0">
     <MapLegacyTemplate
+      v-model="selectedCityObj"
       :isDetailMap="false"
       :clickableAll="true"
       :neutralView="true"
       :useCachedMap="true"
-      :mapTheme="mapTheme"
-      v-model="selectedCityObj"
+      :mapName="mapName"
     />
     <div>
       선택된 국가에 피장파장을 발동합니다.<br />
@@ -22,17 +22,16 @@
     <div class="row">
       <div class="col-6 col-md-3">
         국가 :
-        <SelectNation :nations="nationList" v-model="selectedNationID" :searchable="searchable" />
+        <SelectNation v-model="selectedNationID" :nations="nationList" :searchable="searchable" />
       </div>
       <div class="col-3 col-md-2">
         <label>전략 :</label>
-        <b-form-select
-          :options="commandTypesOption"
-          v-model="selectedCommandID"
-        />
+        <b-form-select v-model="selectedCommandID" :options="commandTypesOption" />
       </div>
       <div class="col-3 col-md-2 d-grid">
-        <b-button @click="submit">{{ commandName }}</b-button>
+        <b-button @click="submit">
+          {{ commandName }}
+        </b-button>
       </div>
     </div>
   </div>
@@ -40,18 +39,19 @@
 </template>
 
 <script lang="ts">
-import MapLegacyTemplate, {
-  MapCityParsed,
-} from "@/components/MapLegacyTemplate.vue";
+import MapLegacyTemplate, { type MapCityParsed } from "@/components/MapLegacyTemplate.vue";
 import SelectNation from "@/processing/SelectNation.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
-import { Args } from "@/processing/args";
+import type { Args } from "@/processing/args";
 import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
-import { getProcSearchable, procNationItem, procNationList } from "../processingRes";
-declare const mapTheme: string;
-declare const commandName: string;
+import { getProcSearchable, type procNationItem, type procNationList } from "../processingRes";
+
+declare const staticValues: {
+  mapName: string;
+  commandName: string;
+};
 
 declare const procRes: {
   nationList: procNationList;
@@ -74,14 +74,6 @@ export default defineComponent({
     TopBackBar,
     BottomBar,
   },
-  watch: {
-    selectedCityObj(city: MapCityParsed) {
-      if (!city.nationID) {
-        return;
-      }
-      this.selectedNationID = city.nationID;
-    },
-  },
   setup() {
     const nationList = new Map<number, procNationItem>();
     for (const nationItem of procRes.nationList) {
@@ -94,18 +86,16 @@ export default defineComponent({
     const commandTypesOption: { html: string; value: string }[] = [];
     for (const [commandTypeID, commandTypeInfo] of Object.entries(procRes.availableCommandTypeList)) {
       const notAvailable = commandTypeInfo.remainTurn > 0;
-      const notAvailableText = notAvailable?' (불가)':'';
+      const notAvailableText = notAvailable ? " (불가)" : "";
       const name = `${commandTypeInfo.name}${notAvailableText}`;
-      const html = notAvailable?`<span style='color:red;'>${name}</span>`:name;
+      const html = notAvailable ? `<span style='color:red;'>${name}</span>` : name;
       commandTypesOption.push({
         html,
         value: commandTypeID,
       });
     }
 
-    const selectedCommandID = ref(
-      Object.keys(procRes.availableCommandTypeList)[0]
-    );
+    const selectedCommandID = ref(Object.keys(procRes.availableCommandTypeList)[0]);
 
     function selectedNation(nationID: number) {
       selectedNationID.value = nationID;
@@ -124,16 +114,23 @@ export default defineComponent({
     return {
       searchable: getProcSearchable(),
       ...procRes,
+      ...staticValues,
       selectedCommandID,
       commandTypesOption,
-      mapTheme: ref(mapTheme),
       nationList: ref(nationList),
       selectedCityObj,
       selectedNationID,
-      commandName,
       selectedNation,
       submit,
     };
   },
+  watch: {
+    selectedCityObj(city: MapCityParsed) {
+      if (!city.nationID) {
+        return;
+      }
+      this.selectedNationID = city.nationID;
+    },
+  },
 });
 </script>