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

@@ -1,5 +1,5 @@
 <template>
-  <top-back-bar title="장수 생성" />
+  <TopBackBar title="장수 생성" />
 
   <div id="container" class="bg0">
     <div class="nation-list">
@@ -8,20 +8,24 @@
         <div>임관권유문</div>
         <div class="display-toggle d-grid">
           <b-button
+            v-model="displayTable"
             :pressed="displayTable"
             :variant="displayTable ? 'info' : 'secondary'"
-            v-model="displayTable"
             @click="displayTable = !displayTable"
-          >{{ displayTable ? "숨기기" : "보이기" }}</b-button>
+          >
+            {{ displayTable ? "숨기기" : "보이기" }}
+          </b-button>
         </div>
         <div class="zoom-toggle d-grid">
           <b-button
+            v-model="toggleZoom"
             :pressed="toggleZoom"
             :variant="toggleZoom ? 'info' : 'secondary'"
-            v-model="toggleZoom"
-            @click="toggleZoom = !toggleZoom"
             :disabled="!displayTable"
-          >{{ toggleZoom ? "작게 보기" : "크게 보기" }}</b-button>
+            @click="toggleZoom = !toggleZoom"
+          >
+            {{ toggleZoom ? "작게 보기" : "크게 보기" }}
+          </b-button>
         </div>
       </div>
       <template v-if="displayTable">
@@ -38,9 +42,12 @@
             }"
             class="d-grid"
           >
-            <div class="align-self-center center">{{ nation.name }}</div>
+            <div class="align-self-center center">
+              {{ nation.name }}
+            </div>
           </div>
           <div class="nation-scout-plate align-self-center">
+            <!-- eslint-disable-next-line vue/no-v-html -->
             <div class="nation-scout-msg" v-html="nation.scoutmsg ?? '-'" />
           </div>
         </div>
@@ -60,32 +67,22 @@
         <div class="col col-md-1 col-3 a-right align-self-center">전콘 사용</div>
         <div class="col col-md-4 col-9 align-self-center">
           <img style="height: 64px; width: 64px" :src="iconPath" />
-          <label>
-            <input type="checkbox" v-model="args.pic" /> 사용
-          </label>
+          <label> <input v-model="args.pic" type="checkbox" /> 사용 </label>
         </div>
         <div class="col col-md-4 col-3 align-self-center a-right">성격</div>
 
         <div class="col col-md-8 col-9 align-self-center">
           <div class="row">
             <div class="col col-md-3 col-4 align-self-center">
-              <select
-                class="form-select form-inline"
-                style="max-width: 20ch"
-                v-model="args.character"
-              >
-                <option
-                  v-for="(personalityObj, key) in availablePersonality"
-                  :key="key"
-                  :value="key"
-                >{{ personalityObj.name }}</option>
+              <select v-model="args.character" class="form-select form-inline" style="max-width: 20ch">
+                <option v-for="(personalityObj, key) in availablePersonality" :key="key" :value="key">
+                  {{ personalityObj.name }}
+                </option>
               </select>
             </div>
             <div class="col col-md-9 col-8 align-self-center">
               <small class="text-muted">
-                {{
-                  availablePersonality[args.character].info
-                }}
+                {{ availablePersonality[args.character].info }}
               </small>
             </div>
           </div>
@@ -103,37 +100,35 @@
           <small class="text-muted">통/무/지</small>
         </div>
         <div class="col col-md-2 col-3 align-self-center">
-          <input type="number" class="form-control" v-model="args.leadership" />
+          <input v-model="args.leadership" type="number" class="form-control" />
         </div>
         <div class="col col-md-2 col-3 align-self-center">
-          <input type="number" class="form-control" v-model="args.strength" />
+          <input v-model="args.strength" type="number" class="form-control" />
         </div>
         <div class="col col-md-2 col-3 align-self-center">
-          <input type="number" class="form-control" v-model="args.intel" />
+          <input v-model="args.intel" type="number" class="form-control" />
         </div>
       </div>
       <div class="row" style="margin-top: 1em">
         <div class="col col-md-4 col-3 a-right align-self-center">능력치 조절</div>
         <div class="col col-md-8 col-9">
-          <b-button variant="secondary" class="stat-btn" @click="randStatRandom">랜덤형</b-button>
-          <b-button variant="secondary" class="stat-btn" @click="randStatLeadPow">통솔무력형</b-button>
-          <b-button variant="secondary" class="stat-btn" @click="randStatLeadInt">통솔지력형</b-button>
-          <b-button variant="secondary" class="stat-btn" @click="randStatPowInt">무력지력형</b-button>
+          <b-button variant="secondary" class="stat-btn" @click="randStatRandom"> 랜덤형 </b-button>
+          <b-button variant="secondary" class="stat-btn" @click="randStatLeadPow"> 통솔무력형 </b-button>
+          <b-button variant="secondary" class="stat-btn" @click="randStatLeadInt"> 통솔지력형 </b-button>
+          <b-button variant="secondary" class="stat-btn" @click="randStatPowInt"> 무력지력형 </b-button>
         </div>
       </div>
     </div>
     <div class="row" style="border-top: solid 1px #aaa; margin-top: 0.5em">
       <div class="col a-center" style="color: orange">
-        모든 능력치는 ( {{ stats.min }} &lt;= 능력치 &lt;= {{ stats.max }} )
-        사이로 잡으셔야 합니다.
-        <br />그 외의 능력치는 가입되지 않습니다.
+        모든 능력치는 ( {{ stats.min }} &lt;= 능력치 &lt;= {{ stats.max }} ) 사이로 잡으셔야 합니다. <br />그 외의
+        능력치는 가입되지 않습니다.
       </div>
     </div>
     <div class="row">
       <div class="col a-center">
-        능력치의 총합은 {{ stats.total }} 입니다. 가입후 {{ stats.bonusMin }} ~
-        {{ stats.bonusMax }} 의 능력치 보너스를 받게 됩니다.
-        <br />임의의 도시에서 재야로 시작하며 건국과 임관은 게임 내에서 실행합니다.
+        능력치의 총합은 {{ stats.total }} 입니다. 가입후 {{ stats.bonusMin }} ~ {{ stats.bonusMax }} 의 능력치 보너스를
+        받게 됩니다. <br />임의의 도시에서 재야로 시작하며 건국과 임관은 게임 내에서 실행합니다.
       </div>
     </div>
 
@@ -141,20 +136,18 @@
       <div class="col col-md-11 col-9 center align-self-center">유산 포인트 사용</div>
       <div class="col col-md-1 col-3">
         <label>
-          <input type="checkbox" v-model="displayInherit" />
-          {{
-            displayInherit ? "숨기기" : "보이기"
-          }}
+          <input v-model="displayInherit" type="checkbox" />
+          {{ displayInherit ? "숨기기" : "보이기" }}
         </label>
       </div>
     </div>
-    <div class="inherit-block" v-if="displayInherit">
+    <div v-if="displayInherit" class="inherit-block">
       <div class="row">
         <div class="col">
-          <NumberInputWithInfo title="보유한 유산 포인트" v-model="inheritTotalPoint" :readonly="true" />
+          <NumberInputWithInfo v-model="inheritTotalPoint" title="보유한 유산 포인트" :readonly="true" />
         </div>
         <div class="col">
-          <NumberInputWithInfo title="필요 유산 포인트" v-model="inheritRequiredPoint" :readonly="true" />
+          <NumberInputWithInfo v-model="inheritRequiredPoint" title="필요 유산 포인트" :readonly="true" />
         </div>
       </div>
       <hr />
@@ -163,28 +156,17 @@
           <div class="row">
             <div class="col col-6 a-right align-self-center">천재로 생성</div>
             <div class="col col-6 align-self-center">
-              <select
-                class="form-select form-inline"
-                style="max-width: 20ch"
-                v-model="args.inheritSpecial"
-              >
+              <select v-model="args.inheritSpecial" class="form-select form-inline" style="max-width: 20ch">
                 <option :value="undefined">사용안함</option>
-                <option
-                  v-for="(inheritSpecial, key) in availableInheritSpecial"
-                  :key="key"
-                  :value="key"
-                >{{ inheritSpecial.name }}</option>
+                <option v-for="(inheritSpecial, key) in availableInheritSpecial" :key="key" :value="key">
+                  {{ inheritSpecial.name }}
+                </option>
               </select>
             </div>
           </div>
           <div class="col align-self-center">
-            <small
-              class="text-muted"
-              v-html="
-                (availableInheritSpecial[args.inheritSpecial ?? ''] ?? { info: '' })
-                  .info
-              "
-            />
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <small class="text-muted" v-html="availableInheritSpecial[args.inheritSpecial ?? '']?.info" />
           </div>
         </div>
 
@@ -192,17 +174,11 @@
           <div class="row">
             <div class="col col-6 a-right align-self-center">도시</div>
             <div class="col col-6 align-self-center">
-              <select
-                class="form-select form-inline"
-                style="max-width: 20ch"
-                v-model="args.inheritCity"
-              >
+              <select v-model="args.inheritCity" class="form-select form-inline" style="max-width: 20ch">
                 <option :value="undefined">사용안함</option>
-                <option
-                  v-for="city in availableInheritCity"
-                  :key="city[0]"
-                  :value="city[0]"
-                >{{ `[${city[1]}] ${city[2]}` }}</option>
+                <option v-for="city in availableInheritCity" :key="city[0]" :value="city[0]">
+                  {{ `[${city[1]}] ${city[2]}` }}
+                </option>
               </select>
             </div>
           </div>
@@ -210,28 +186,25 @@
 
         <div class="col col-md-6 col-sm-6 col-12 p-2 align-self-center">
           <div class="a-center">
-            <label>
-              <input type="checkbox" v-model="inheritTurnTimeSet" />턴 시간
-              고정
-            </label>
+            <label> <input v-model="inheritTurnTimeSet" type="checkbox" />턴 시간 고정 </label>
           </div>
           <div class="row turn_time_pad">
             <div class="col col-md-4 offset-md-3 col-4 offset-3">
               <NumberInputWithInfo
+                v-model="inheritTurnTimeMinute"
                 :readonly="!inheritTurnTimeSet"
                 :min="0"
                 :max="1 - turnterm"
-                v-model="inheritTurnTimeMinute"
                 :right="true"
                 title="분"
               />
             </div>
             <div class="col col-md-4 col-4">
               <NumberInputWithInfo
+                v-model="inheritTurnTimeSecond"
                 :readonly="!inheritTurnTimeSet"
                 :min="0"
                 :max="60"
-                v-model="inheritTurnTimeSecond"
                 :right="true"
                 title="초"
               />
@@ -243,13 +216,13 @@
           <div class="a-center">추가 능력치 고정</div>
           <div class="row">
             <div class="col">
-              <NumberInputWithInfo title="통솔" v-model="(args.inheritBonusStat ?? [0, 0, 0])[0]" />
+              <NumberInputWithInfo v-model="(args.inheritBonusStat ?? [0, 0, 0])[0]" title="통솔" />
             </div>
             <div class="col">
-              <NumberInputWithInfo title="무력" v-model="(args.inheritBonusStat ?? [0, 0, 0])[1]" />
+              <NumberInputWithInfo v-model="(args.inheritBonusStat ?? [0, 0, 0])[1]" title="무력" />
             </div>
             <div class="col">
-              <NumberInputWithInfo title="지력" v-model="(args.inheritBonusStat ?? [0, 0, 0])[2]" />
+              <NumberInputWithInfo v-model="(args.inheritBonusStat ?? [0, 0, 0])[2]" title="지력" />
             </div>
           </div>
         </div>
@@ -258,8 +231,8 @@
 
     <div class="row" style="border-top: solid 1px #aaa">
       <div class="col a-center" style="margin: 0.5em">
-        <b-button color="primary" @click="submitForm">장수 생성</b-button>&nbsp;
-        <b-button color="secondary" @click="resetArgs">다시 입력</b-button>
+        <b-button color="primary" @click="submitForm"> 장수 생성 </b-button>&nbsp;
+        <b-button color="secondary" @click="resetArgs"> 다시 입력 </b-button>
       </div>
     </div>
   </div>
@@ -272,12 +245,7 @@ import { defineComponent } from "vue";
 import TopBackBar from "@/components/TopBackBar.vue";
 import { getIconPath } from "@util/getIconPath";
 import { isBrightColor } from "@util/isBrightColor";
-import {
-  abilityLeadint,
-  abilityLeadpow,
-  abilityPowint,
-  abilityRand,
-} from "@util/generalStats";
+import { abilityLeadint, abilityLeadpow, abilityPowint, abilityRand } from "@util/generalStats";
 import { clone, shuffle, sum } from "lodash";
 import NumberInputWithInfo from "@/components/NumberInputWithInfo.vue";
 import { SammoAPI } from "./SammoAPI";
@@ -358,12 +326,8 @@ export default defineComponent({
     NumberInputWithInfo,
   },
   data() {
-    const displayTable = JSON.parse(
-      localStorage.getItem(`conf.${serverID}.join.displayTable`) ?? "true"
-    );
-    const displayInherit = JSON.parse(
-      localStorage.getItem(`conf.${serverID}.join.displayInherit`) ?? "true"
-    );
+    const displayTable = JSON.parse(localStorage.getItem(`conf.${serverID}.join.displayTable`) ?? "true");
+    const displayInherit = JSON.parse(localStorage.getItem(`conf.${serverID}.join.displayInherit`) ?? "true");
     const nationListShuffled = shuffle(nationList);
     const args: APIArgs = {
       name: member.name,
@@ -402,18 +366,36 @@ export default defineComponent({
       toggleZoom: true,
     };
   },
+  computed: {
+    iconPath() {
+      if (this.args.pic) {
+        return getIconPath(this.member.imgsvr, this.member.picture);
+      }
+      return getIconPath(0, "default.jpg");
+    },
+    inheritRequiredPoint() {
+      let inheritRequiredPoint = 0;
+      if (this.args.inheritCity !== undefined) {
+        inheritRequiredPoint += inheritPoints.city;
+      }
+      if (this.args.inheritSpecial !== undefined) {
+        inheritRequiredPoint += inheritPoints.special;
+      }
+      if (this.args.inheritTurntime !== undefined) {
+        inheritRequiredPoint += inheritPoints.turnTime;
+      }
+      if (this.args.inheritBonusStat !== undefined && sum(this.args.inheritBonusStat) != 0) {
+        inheritRequiredPoint += inheritPoints.stat;
+      }
+      return inheritRequiredPoint;
+    },
+  },
   watch: {
     displayTable(newValue: boolean) {
-      localStorage.setItem(
-        `conf.${serverID}.join.displayTable`,
-        JSON.stringify(newValue)
-      );
+      localStorage.setItem(`conf.${serverID}.join.displayTable`, JSON.stringify(newValue));
     },
     displayInherit(newValue: boolean) {
-      localStorage.setItem(
-        `conf.${serverID}.join.displayInherit`,
-        JSON.stringify(newValue)
-      );
+      localStorage.setItem(`conf.${serverID}.join.displayInherit`, JSON.stringify(newValue));
     },
     inheritTurnTimeMinute(newValue: number) {
       if (!this.inheritTurnTimeSet) {
@@ -434,53 +416,21 @@ export default defineComponent({
         this.args.inheritTurntime = undefined;
         return;
       }
-      this.args.inheritTurntime =
-        this.inheritTurnTimeMinute * 60 + this.inheritTurnTimeSecond;
-    },
-  },
-  computed: {
-    iconPath() {
-      if (this.args.pic) {
-        return getIconPath(this.member.imgsvr, this.member.picture);
-      }
-      return getIconPath(0, "default.jpg");
-    },
-    inheritRequiredPoint() {
-      let inheritRequiredPoint = 0;
-      if (this.args.inheritCity !== undefined) {
-        inheritRequiredPoint += inheritPoints.city;
-      }
-      if (this.args.inheritSpecial !== undefined) {
-        inheritRequiredPoint += inheritPoints.special;
-      }
-      if (this.args.inheritTurntime !== undefined) {
-        inheritRequiredPoint += inheritPoints.turnTime;
-      }
-      if (
-        this.args.inheritBonusStat !== undefined &&
-        sum(this.args.inheritBonusStat) != 0
-      ) {
-        inheritRequiredPoint += inheritPoints.stat;
-      }
-      return inheritRequiredPoint;
+      this.args.inheritTurntime = this.inheritTurnTimeMinute * 60 + this.inheritTurnTimeSecond;
     },
   },
   methods: {
     randStatRandom() {
-      [this.args.leadership, this.args.strength, this.args.intel] =
-        abilityRand();
+      [this.args.leadership, this.args.strength, this.args.intel] = abilityRand();
     },
     randStatLeadPow() {
-      [this.args.leadership, this.args.strength, this.args.intel] =
-        abilityLeadpow();
+      [this.args.leadership, this.args.strength, this.args.intel] = abilityLeadpow();
     },
     randStatLeadInt() {
-      [this.args.leadership, this.args.strength, this.args.intel] =
-        abilityLeadint();
+      [this.args.leadership, this.args.strength, this.args.intel] = abilityLeadint();
     },
     randStatPowInt() {
-      [this.args.leadership, this.args.strength, this.args.intel] =
-        abilityPowint();
+      [this.args.leadership, this.args.strength, this.args.intel] = abilityPowint();
     },
     resetArgs() {
       this.args.name = member.name;
@@ -496,7 +446,9 @@ export default defineComponent({
       const totalStat = args.leadership + args.strength + args.intel;
 
       if (totalStat < stats.total) {
-        if (!confirm(`설정한 능력치가 ${totalStat}으로, 실제 최대치인 ${stats.total}보다 적습니다.\r\n그래도 진행할까요?`)) {
+        if (
+          !confirm(`설정한 능력치가 ${totalStat}으로, 실제 최대치인 ${stats.total}보다 적습니다.\r\n그래도 진행할까요?`)
+        ) {
           return false;
         }
       }
@@ -508,9 +460,7 @@ export default defineComponent({
         return;
       }
 
-      alert(
-        "정상적으로 생성되었습니다. \n위키와 팁/강좌 게시판을 꼭 읽어보세요!"
-      );
+      alert("정상적으로 생성되었습니다. \n위키와 팁/강좌 게시판을 꼭 읽어보세요!");
       location.href = "./";
     },
   },
@@ -612,4 +562,4 @@ export default defineComponent({
     }
   }
 }
-</style>
+</style>