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/ProcessCity.vue

@@ -1,13 +1,13 @@
 <template>
-  <TopBackBar :title="commandName" :type="procEntryMode" v-model:searchable="searchable" />
+  <TopBackBar v-model:searchable="searchable" :title="commandName" :type="procEntryMode" />
   <div class="bg0">
     <MapLegacyTemplate
+      v-model="selectedCityObj"
       :isDetailMap="false"
       :clickableAll="true"
       :neutralView="true"
       :useCachedMap="true"
-      :mapTheme="mapTheme"
-      v-model="selectedCityObj"
+      :mapName="mapName"
     />
 
     <div v-if="commandName == '강행'">
@@ -31,8 +31,7 @@
       목록을 선택하거나 도시를 클릭하세요.<br />
     </div>
     <div v-else-if="commandName in { 화계: 1, 탈취: 1, 파괴: 1, 선동: 1 }">
-      선택된 도시에 {{ commandName
-      }}{{ JosaPick(commandName, "을") }} 실행합니다.<br />
+      선택된 도시에 {{ commandName }}{{ JosaPick(commandName, "을") }} 실행합니다.<br />
       목록을 선택하거나 도시를 클릭하세요.<br />
     </div>
     <div v-else-if="commandName == '수몰'">
@@ -57,104 +56,92 @@
     </div>
     <div v-else-if="commandName == '초토화'">
       선택된 도시를 초토화 시킵니다.<br />
-      도시가 공백지가 되며, 도시의 인구, 내정 상태에 따라 상당량의 국고가
-      확보됩니다.<br />
+      도시가 공백지가 되며, 도시의 인구, 내정 상태에 따라 상당량의 국고가 확보됩니다.<br />
       국가의 수뇌들은 명성을 잃고, 모든 장수들은 배신 수치가 1 증가합니다.<br />
       목록을 선택하거나 도시를 클릭하세요.<br />
     </div>
     <div class="row">
       <div class="col-4 col-md-2">
         도시:
-        <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 @click="submit">{{ commandName }}</b-button>
+        <b-button @click="submit">
+          {{ commandName }}
+        </b-button>
       </div>
     </div>
-    <CityBasedOnDistance
-      :citiesMap="citiesMap"
-      :distanceList="distanceList"
-      @selected="selected"
-    />
+    <CityBasedOnDistance :citiesMap="citiesMap" :distanceList="distanceList" @selected="selected" />
   </div>
   <BottomBar :title="commandName" :type="procEntryMode" />
 </template>
 
 <script lang="ts">
-import MapLegacyTemplate, {
-  MapCityParsed,
-} from "@/components/MapLegacyTemplate.vue";
-import SelectCity from "@/processing/SelectCity.vue";
-import CityBasedOnDistance from "@/processing/CitiesBasedOnDistance.vue";
-import { defineComponent, ref } from "vue";
-import { unwrap } from "@/util/unwrap";
-import { Args } from "@/processing/args";
-import TopBackBar from "@/components/TopBackBar.vue";
-import BottomBar from "@/components/BottomBar.vue";
-import { pick as JosaPick } from "@util/JosaUtil";
-import { getProcSearchable } from "./processingRes";
-declare const mapTheme: string;
-declare const currentCity: number;
-declare const commandName: string;
+declare const staticValues: {
+  mapName: string;
+  currentCity: number;
+  commandName: string;
+  entryInfo: ["General" | "Nation", unknown];
+};
 declare const procRes: {
   distanceList: Record<number, number[]>;
   cities: [number, string][];
 };
-declare const entryInfo: ['General'|'Nation', unknown];
+</script>
 
-export default defineComponent({
-  components: {
-    MapLegacyTemplate,
-    SelectCity,
-    CityBasedOnDistance,
-    TopBackBar,
-    BottomBar,
-  },
-  watch: {
-    selectedCityObj(city: MapCityParsed) {
-      this.selectedCityID = city.id;
+<script lang="ts" setup>
+import MapLegacyTemplate, { type MapCityParsed } from "@/components/MapLegacyTemplate.vue";
+import SelectCity from "@/processing/SelectCity.vue";
+import CityBasedOnDistance from "@/processing/CitiesBasedOnDistance.vue";
+import { ref, type Ref, watch } from "vue";
+import { unwrap } from "@/util/unwrap";
+import type { Args } from "@/processing/args";
+import TopBackBar from "@/components/TopBackBar.vue";
+import BottomBar from "@/components/BottomBar.vue";
+import { pick as JosaPick } from "@util/JosaUtil";
+import { getProcSearchable } from "./processingRes";
+
+const { distanceList } = procRes;
+
+const citiesMap = ref(
+  new Map<
+    number,
+    {
+      name: string;
+      info?: string;
+    }
+  >()
+);
+for (const [id, name] of procRes.cities) {
+  citiesMap.value.set(id, { name });
+}
+
+const selectedCityID = ref(staticValues.currentCity);
+
+function selected(cityID: number) {
+  selectedCityID.value = cityID;
+}
+
+async function submit(e: Event) {
+  const event = new CustomEvent<Args>("customSubmit", {
+    detail: {
+      destCityID: selectedCityID.value,
     },
-  },
-  setup() {
-    const citiesMap = new Map<
-      number,
-      {
-        name: string;
-        info?: string;
-      }
-    >();
-    for (const [id, name] of procRes.cities) {
-      citiesMap.set(id, { name });
-    }
+  });
+  unwrap(e.target).dispatchEvent(event);
+}
 
-    const selectedCityID = ref(currentCity);
+const searchable = getProcSearchable();
+const mapName = staticValues.mapName;
 
-    function selected(cityID: number) {
-      selectedCityID.value = cityID;
-    }
+const procEntryMode: Ref<"chief" | "normal"> = ref(staticValues.entryInfo[0] == "Nation" ? "chief" : "normal");
+const selectedCityObj = ref<MapCityParsed>();
+const commandName = ref(staticValues.commandName);
 
-    async function submit(e: Event) {
-      const event = new CustomEvent<Args>("customSubmit", {
-        detail: {
-          destCityID: selectedCityID.value,
-        },
-      });
-      unwrap(e.target).dispatchEvent(event);
-    }
-
-    return {
-      procEntryMode: entryInfo[0] == 'Nation'?'chief':'normal',
-      searchable: getProcSearchable(),
-      mapTheme: ref(mapTheme),
-      citiesMap: ref(citiesMap),
-      selectedCityID,
-      selectedCityObj: ref(undefined as MapCityParsed | undefined),
-      distanceList: procRes.distanceList,
-      commandName,
-      JosaPick,
-      selected,
-      submit,
-    };
-  },
+watch(selectedCityObj, (city?: MapCityParsed) => {
+  if (city === undefined) {
+    return;
+  }
+  selectedCityID.value = city.id;
 });
 </script>