refac: toast 출력을 bootstrap-vue-3 내부 toast로 변경

- component로 src 내부 ts/vue 사용 시도 중

hwe/scss/nationBetting.scss

@@ -2,12 +2,16 @@
 @import "@scss/game_bg.scss";
 @import "@scss/util.scss";
 
+#container {
+    padding: 0;
+}
 
 @include media-1000px {
     #container {
         width: 1000px;
         margin: 0 auto;
         position: relative;
+
     }
 }
 

hwe/scss/nationStratFinan.scss

@@ -4,6 +4,10 @@
 @import "@scss/editor_component.scss";
 @import "@scss/common_legacy.scss";
 
+#container{
+    padding: 0;
+}
+
 .diplomacyTitle {
     background-color: $blue;
     text-align: center;

hwe/ts/PageNPCControl.vue

@@ -1,10 +1,10 @@
 <template>
-  <my-toast v-model="toasts" />
   <top-back-bar :title="title" />
-  <div
+  <BContainer
     id="container"
     class="tb_layout bg0"
-    :style="{ maxWidth: '1000px', margin: 'auto', border: 'solid 1px #888888' }"
+    :toast="{root: true}"
+    :style="{ maxWidth: '1000px', margin: 'auto', border: 'solid 1px #888888', padding: '0' }"
   >
     <div class="bg1 section_bar">국가 정책</div>
     <div class="px-3" style="text-align: right">
@@ -16,170 +16,167 @@
     </div>
     <div class="form_list row row-cols-md-2 row-cols-1">
       <div class="col">
-        <NumberInputWithInfo
+        <NumberInputWithInfo v-model="nationPolicy.reqNationGold" :step="100" title="국가 권장 금">
-          v-model="nationPolicy.reqNationGold"
+          이보다 많으면 포상, 적으면 몰수/헌납합니다.(긴급포상
-          :step="100"
+          제외)
-          title="국가 권장 금"
+        </NumberInputWithInfo>
-          >이보다 많으면 포상, 적으면 몰수/헌납합니다.(긴급포상
-          제외)</NumberInputWithInfo
-        >
       </div>
       <div class="col">
-        <NumberInputWithInfo
+        <NumberInputWithInfo v-model="nationPolicy.reqNationRice" :step="100" title="국가 권장 쌀">
-          v-model="nationPolicy.reqNationRice"
+          이보다 많으면 포상, 적으면 몰수/헌납합니다.(긴급포상
-          :step="100"
+          제외)
-          title="국가 권장 쌀"
+        </NumberInputWithInfo>
-          >이보다 많으면 포상, 적으면 몰수/헌납합니다.(긴급포상
-          제외)</NumberInputWithInfo
-        >
       </div>
       <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.reqHumanWarUrgentGold"
           :step="100"
           title="유저전투장 긴급포상 금"
-          >유저장긴급포상시 이보다 금이 적은 장수에게 포상합니다.<br />0이면
+        >
+          유저장긴급포상시 이보다 금이 적은 장수에게 포상합니다.
+          <br />
+          0이면
           보병 6회 징병({{ (defaultStatMax * 100).toLocaleString() }} * 6)
           가능한 금을 기준으로 하며, 그 수치는 현재
           {{
             zeroPolicy.reqHumanWarUrgentGold.toLocaleString()
-          }}입니다.</NumberInputWithInfo
+          }}입니다.
-        >
+        </NumberInputWithInfo>
       </div>
       <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.reqHumanWarUrgentRice"
           :step="100"
           title="유저전투장 긴급포상 쌀"
-          >유저장긴급포상시 이보다 쌀이 적은 장수에게 포상합니다.<br />0이면
+        >
+          유저장긴급포상시 이보다 쌀이 적은 장수에게 포상합니다.
+          <br />
+          0이면
           기본 병종으로 {{ (defaultStatMax * 100).toLocaleString() }} * 6명 사살
           가능한 쌀을 기준으로 하며, 그 수치는 현재
           {{
             zeroPolicy.reqHumanWarUrgentRice.toLocaleString()
-          }}입니다.</NumberInputWithInfo
+          }}입니다.
-        >
+        </NumberInputWithInfo>
       </div>
       <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.reqHumanWarRecommandGold"
           :step="100"
           title="유저전투장 권장 금"
-          >유저전투장에게 주는 금입니다. 이보다 적으면 포상합니다. <br />
+        >
+          유저전투장에게 주는 금입니다. 이보다 적으면 포상합니다.
+          <br />
           0이면 유저전투장 긴급포상 금의 2배를 기준으로 하며, 그 수치는 현재
           {{
             (calcPolicyValue("reqHumanWarUrgentGold") * 2).toLocaleString()
-          }}입니다.</NumberInputWithInfo
+          }}입니다.
-        >
+        </NumberInputWithInfo>
       </div>
       <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.reqHumanWarRecommandRice"
           :step="100"
           title="유저전투장 권장 쌀"
-          >유저전투장에게 주는 쌀입니다. 이보다 적으면 포상합니다. <br />
+        >
+          유저전투장에게 주는 쌀입니다. 이보다 적으면 포상합니다.
+          <br />
           0이면 유저전투장 긴급포상 쌀의 2배를 기준으로 하며, 그 수치는 현재
           {{
             (calcPolicyValue("reqHumanWarUrgentRice") * 2).toLocaleString()
-          }}입니다.</NumberInputWithInfo
+          }}입니다.
-        >
+        </NumberInputWithInfo>
       </div>
       <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.reqHumanDevelGold"
           :step="100"
           title="유저내정장 권장 금"
-          >유저내정장에게 주는 금입니다. 이보다 적으면
-          포상합니다.</NumberInputWithInfo
         >
+          유저내정장에게 주는 금입니다. 이보다 적으면
+          포상합니다.
+        </NumberInputWithInfo>
       </div>
       <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.reqHumanDevelRice"
           :step="100"
           title="유저내정장 권장 쌀"
-          >유저내정장에게 주는 쌀입니다. 이보다 적으면
-          포상합니다.</NumberInputWithInfo
         >
+          유저내정장에게 주는 쌀입니다. 이보다 적으면
+          포상합니다.
+        </NumberInputWithInfo>
       </div>
       <div class="col">
-        <NumberInputWithInfo
+        <NumberInputWithInfo v-model="nationPolicy.reqNPCWarGold" :step="100" title="NPC전투장 권장 금">
-          v-model="nationPolicy.reqNPCWarGold"
+          NPC전투장에게 주는 금입니다. 이보다 적으면 포상합니다.
-          :step="100"
+          <br />
-          title="NPC전투장 권장 금"
-          >NPC전투장에게 주는 금입니다. 이보다 적으면 포상합니다. <br />
           0이면 기본 병종 4회({{ (defaultStatNPCMax * 100).toLocaleString() }}
           * 4) 징병비를 기준으로 하며, 그 수치는 현재
           {{
             zeroPolicy.reqNPCWarGold.toLocaleString()
-          }}입니다.</NumberInputWithInfo
+          }}입니다.
-        >
+        </NumberInputWithInfo>
       </div>
       <div class="col">
-        <NumberInputWithInfo
+        <NumberInputWithInfo v-model="nationPolicy.reqNPCWarRice" :step="100" title="NPC전투장 권장 쌀">
-          v-model="nationPolicy.reqNPCWarRice"
+          NPC전투장에게 주는 쌀입니다. 이보다 적으면 포상합니다.
-          :step="100"
+          <br />
-          title="NPC전투장 권장 쌀"
-          >NPC전투장에게 주는 쌀입니다. 이보다 적으면 포상합니다. <br />
           0이면 기본 병종으로
           {{ (defaultStatNPCMax * 100).toLocaleString() }} * 4명 사살 가능한
           쌀을 기준으로 하며, 그 수치는 현재
           {{
             zeroPolicy.reqNPCWarRice.toLocaleString()
-          }}입니다.</NumberInputWithInfo
+          }}입니다.
-        >
+        </NumberInputWithInfo>
       </div>
       <div class="col">
-        <NumberInputWithInfo
+        <NumberInputWithInfo v-model="nationPolicy.reqNPCDevelGold" :step="100" title="NPC내정장 권장 금">
-          v-model="nationPolicy.reqNPCDevelGold"
+          NPC내정장에게 주는 금입니다. 이보다 5배 더 많다면 헌납합니다.
-          :step="100"
+          <br />
-          title="NPC내정장 권장 금"
+          0이면
-          >NPC내정장에게 주는 금입니다. 이보다 5배 더 많다면 헌납합니다.<br />0이면
           30턴 내정 가능한 금을 기준으로 하며, 그 수치는 현재
-          {{ zeroPolicy.reqNPCDevelGold }}입니다.</NumberInputWithInfo
+          {{ zeroPolicy.reqNPCDevelGold }}입니다.
-        >
+        </NumberInputWithInfo>
       </div>
       <div class="col">
-        <NumberInputWithInfo
+        <NumberInputWithInfo v-model="nationPolicy.reqNPCDevelRice" :step="100" title="NPC내정장 권장 쌀">
-          v-model="nationPolicy.reqNPCDevelRice"
+          NPC내정장에게 주는 쌀입니다. 이보다 5배 더 많다면
-          :step="100"
+          헌납합니다.
-          title="NPC내정장 권장 쌀"
+        </NumberInputWithInfo>
-          >NPC내정장에게 주는 쌀입니다. 이보다 5배 더 많다면
-          헌납합니다.</NumberInputWithInfo
-        >
       </div>
       <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.minimumResourceActionAmount"
           :step="100"
           title="포상/몰수/헌납/삼/팜 최소 단위"
-          >연산결과가 이 단위보다 적다면 수행하지 않습니다.</NumberInputWithInfo
+        >연산결과가 이 단위보다 적다면 수행하지 않습니다.</NumberInputWithInfo>
-        >
       </div>
-        <div class="col">
+      <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.maximumResourceActionAmount"
           :step="100"
           title="포상/몰수/헌납/삼/팜 최대 단위"
-          >연산결과가 이 단위보다 크다면, 이 값에 맞춥니다.</NumberInputWithInfo
+        >연산결과가 이 단위보다 크다면, 이 값에 맞춥니다.</NumberInputWithInfo>
-        >
       </div>
       <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.minWarCrew"
           :step="50"
           title="최소 전투 가능 병력 수"
-          >이보다 적을 때에는 징병을 시도합니다.</NumberInputWithInfo
+        >이보다 적을 때에는 징병을 시도합니다.</NumberInputWithInfo>
-        >
       </div>
       <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.minNPCRecruitCityPopulation"
           :step="100"
           title="NPC 최소 징병 가능 인구 수"
-          >도시의 인구가 이보다 낮으면 NPC는 도시에서 징병하지 않고 후방
-          워프합니다.<br />NPC의 최대 병력수보다 낮게 설정하면 제자리에서
-          정착장려를 합니다.</NumberInputWithInfo
         >
+          도시의 인구가 이보다 낮으면 NPC는 도시에서 징병하지 않고 후방
+          워프합니다.
+          <br />NPC의 최대 병력수보다 낮게 설정하면 제자리에서
+          정착장려를 합니다.
+        </NumberInputWithInfo>
       </div>
       <div class="col">
         <NumberInputWithInfo
@@ -192,19 +189,22 @@
           :min="0"
           :max="100"
           title="제자리 징병 허용 인구율(%)"
-          >전쟁 시 후방 발령, 후방 워프의 기준 인구입니다. 이보다 많다면
-          '충분하다'고 판단합니다.<br />NPC의 최대 병력수보다 낮게 설정하면
-          제자리에서 정착장려를 합니다.</NumberInputWithInfo
         >
+          전쟁 시 후방 발령, 후방 워프의 기준 인구입니다. 이보다 많다면
+          '충분하다'고 판단합니다.
+          <br />NPC의 최대 병력수보다 낮게 설정하면
+          제자리에서 정착장려를 합니다.
+        </NumberInputWithInfo>
       </div>
       <div class="col">
         <NumberInputWithInfo
           v-model="nationPolicy.minNPCWarLeadership"
           :step="5"
           title="NPC 전투 참여 통솔 기준"
-          >이 수치보다 같거나 높으면 NPC전투장으로
-          분류됩니다.</NumberInputWithInfo
         >
+          이 수치보다 같거나 높으면 NPC전투장으로
+          분류됩니다.
+        </NumberInputWithInfo>
       </div>
       <div class="col">
         <NumberInputWithInfo
@@ -213,18 +213,19 @@
           :min="20"
           :max="100"
           title="훈련/사기진작 목표치"
-          >훈련/사기진작 기준치입니다. 이보다 같거나 높으면
-          출병합니다.</NumberInputWithInfo
         >
+          훈련/사기진작 기준치입니다. 이보다 같거나 높으면
+          출병합니다.
+        </NumberInputWithInfo>
       </div>
       <!--allowNpcAttackCity는 현재 게임 내 비활성-->
     </div>
     <div style="padding: 0 8pt">
       <div class="alert alert-secondary">
         전투 부대는 작업중입니다(json양식:
-        {부대번호:[시작도시번호(아국),도착도시번호(적군)],...})<br />
+        {부대번호:[시작도시번호(아국),도착도시번호(적군)],...})
-        후방 징병 부대는 작업중입니다(json양식: [부대번호,...])<br />
+        <br />후방 징병 부대는 작업중입니다(json양식: [부대번호,...])
-        내정 부대는 작업중입니다(json양식: [부대번호,...])
+        <br />내정 부대는 작업중입니다(json양식: [부대번호,...])
         <input
           type="hidden"
           :value="JSON.stringify(nationPolicy.CombatForce)"
@@ -247,28 +248,10 @@
     </div>
     <div class="control_bar" data-type="nationPolicy">
       <div class="btn-group" role="group">
-        <button
+        <button type="button" @click="resetPolicy" class="btn btn-dark reset_btn">초기값으로</button>
-          type="button"
+        <button type="button" @click="rollbackPolicy" class="btn btn-secondary revert_btn">이전값으로</button>
-          @click="resetPolicy"
-          class="btn btn-dark reset_btn"
-        >
-          초기값으로
-        </button>
-        <button
-          type="button"
-          @click="rollbackPolicy"
-          class="btn btn-secondary revert_btn"
-        >
-          이전값으로
-        </button>
       </div>
-      <button
+      <button type="button" @click="submitPolicy" class="btn btn-primary submit_btn">설정</button>
-        type="button"
-        @click="submitPolicy"
-        class="btn btn-primary submit_btn"
-      >
-        설정
-      </button>
     </div>
     <div class="row row-cols-md-2 row-cols-1 g-0">
       <div class="col half_section_left">
@@ -281,10 +264,11 @@
           </small>
         </div>
         <div class="text-left px-2">
-          <small class="text-muted"
+          <small class="text-muted">
-            >예턴이 없거나, 지정되어 있더라도 실패하면<br />아래 순위에 따라
+            예턴이 없거나, 지정되어 있더라도 실패하면
-            사령턴을 시도합니다.</small
+            <br />아래 순위에 따라
-          >
+            사령턴을 시도합니다.
+          </small>
         </div>
         <div>
           <div class="row g-0">
@@ -297,16 +281,18 @@
                 itemKey="id"
               >
                 <template #header>
-                  <div class="list-group-item list-group-item-dark">
+                  <div class="list-group-item list-group-item-dark">&lt;비활성화 항목들&gt;</div>
-                    &lt;비활성화 항목들&gt;
-                  </div>
                 </template>
                 <template #item="{ element }">
                   <div class="list-group-item">
-                    <i class="bi bi-list"></i>&nbsp;&nbsp;{{ element.id
+                    <i class="bi bi-list"></i>
-                    }}<button
+                    &nbsp;&nbsp;{{
+                      element.id
+                    }}
+                    <button
                       class="btn btn-sm float-right btn-secondary py-0 px-1"
-                      v-b-tooltip.hover :title="actionHelpText[element.id]"
+                      v-b-tooltip.hover
+                      :title="actionHelpText[element.id]"
                     >
                       <i class="bi bi-question-lg"></i>
                     </button>
@@ -324,10 +310,14 @@
               >
                 <template #item="{ element }">
                   <div class="list-group-item">
-                    <i class="bi bi-list"></i>&nbsp;&nbsp;{{ element.id
+                    <i class="bi bi-list"></i>
-                    }}<button
+                    &nbsp;&nbsp;{{
+                      element.id
+                    }}
+                    <button
                       class="btn btn-sm float-right btn-secondary py-0 px-1"
-                      v-b-tooltip.hover :title="actionHelpText[element.id]"
+                      v-b-tooltip.hover
+                      :title="actionHelpText[element.id]"
                     >
                       <i class="bi bi-question-lg"></i>
                     </button>
@@ -342,24 +332,18 @@
                 type="button"
                 class="btn btn-dark reset_btn"
                 @click="resetNationPriority"
-              >
+              >초기값으로</button>
-                초기값으로
-              </button>
               <button
                 type="button"
                 class="btn btn-secondary revert_btn"
                 @click="rollbackNationPriority"
-              >
+              >이전값으로</button>
-                이전값으로
-              </button>
             </div>
             <button
               type="button"
               class="btn btn-primary submit_btn"
               @click="submitNationPriority"
-            >
+            >설정</button>
-              설정
-            </button>
           </div>
         </div>
       </div>
@@ -373,10 +357,11 @@
           </small>
         </div>
         <div class="text-left px-2">
-          <small class="text-muted"
+          <small class="text-muted">
-            >순위가 높은 것부터 시도합니다. <br />아무것도 실행할 수 없으면
+            순위가 높은 것부터 시도합니다.
-            물자조달이나 인재탐색을 합니다.</small
+            <br />아무것도 실행할 수 없으면
-          >
+            물자조달이나 인재탐색을 합니다.
+          </small>
         </div>
         <div>
           <div class="row g-0">
@@ -389,16 +374,18 @@
                 itemKey="id"
               >
                 <template #header>
-                  <div class="list-group-item list-group-item-dark">
+                  <div class="list-group-item list-group-item-dark">&lt;비활성화 항목들&gt;</div>
-                    &lt;비활성화 항목들&gt;
-                  </div>
                 </template>
                 <template #item="{ element }">
                   <div class="list-group-item">
-                    <i class="bi bi-list"></i>&nbsp;&nbsp;{{ element.id
+                    <i class="bi bi-list"></i>
-                    }}<button
+                    &nbsp;&nbsp;{{
+                      element.id
+                    }}
+                    <button
                       class="btn btn-sm float-right btn-secondary py-0 px-1"
-                      v-b-tooltip.hover :title="actionHelpText[element.id]"
+                      v-b-tooltip.hover
+                      :title="actionHelpText[element.id]"
                     >
                       <i class="bi bi-question-lg"></i>
                     </button>
@@ -416,10 +403,14 @@
               >
                 <template #item="{ element }">
                   <div class="list-group-item">
-                    <i class="bi bi-list"></i>&nbsp;&nbsp;{{ element.id
+                    <i class="bi bi-list"></i>
-                    }}<button
+                    &nbsp;&nbsp;{{
+                      element.id
+                    }}
+                    <button
                       class="btn btn-sm float-right btn-secondary py-0 px-1"
-                      v-b-tooltip.hover :title="actionHelpText[element.id]"
+                      v-b-tooltip.hover
+                      :title="actionHelpText[element.id]"
                     >
                       <i class="bi bi-question-lg"></i>
                     </button>
@@ -434,42 +425,67 @@
                 type="button"
                 class="btn btn-dark reset_btn"
                 @click="resetGeneralPriority"
-              >
+              >초기값으로</button>
-                초기값으로
-              </button>
               <button
                 type="button"
                 class="btn btn-secondary revert_btn"
                 @click="rollbackGeneralPriority"
-              >
+              >이전값으로</button>
-                이전값으로
-              </button>
             </div>
             <button
               type="button"
               class="btn btn-primary submit_btn"
               @click="submitGeneralPriority"
-            >
+            >설정</button>
-              설정
-            </button>
           </div>
         </div>
       </div>
     </div>
-  </div>
+  </BContainer>
 </template>
 <script lang="ts">
+
+type SetterInfo = {
+  setter: string | null;
+  date: string | null;
+};
+
+declare const staticValues: {
+  nationID: number;
+
+  defaultNationPolicy: NationPolicy;
+  currentNationPolicy: NationPolicy;
+
+  zeroPolicy: NationPolicy;
+  currentNationPriority: NPCChiefActions[];
+  availableNationPriorityItems: NPCChiefActions[];
+  defaultNationPriority: NPCChiefActions[];
+
+  currentGeneralActionPriority: NPCGeneralActions[];
+  availableGeneralActionPriorityItems: NPCGeneralActions[];
+  defaultGeneralActionPriority: NPCGeneralActions[];
+
+  defaultStatNPCMax: number;
+  defaultStatMax: number;
+
+  lastSetters: {
+    policy: SetterInfo;
+    nation: SetterInfo;
+    general: SetterInfo;
+  };
+};
+</script>
+<script setup lang="ts">
 import "@scss/common/bootstrap5.scss";
 import "@scss/game_bg.scss";
 
-import { defineComponent } from "vue";
+import { ref } from "vue";
 import {
   IDItem,
   InvalidResponse,
   NationPolicy,
   NPCChiefActions,
   NPCGeneralActions,
-  ToastType,
 } from "@/defs";
 import NumberInputWithInfo from "@/components/NumberInputWithInfo.vue";
 import { cloneDeep, isEqual, isNumber, last } from "lodash";
@@ -478,343 +494,286 @@ import { convertFormData } from "@util/convertFormData";
 import axios from "axios";
 import { NPCPriorityBtnHelpMessage } from "@/helpTexts";
 import draggable from "vuedraggable";
-import MyToast from "@/components/MyToast.vue";
 import TopBackBar from "@/components/TopBackBar.vue";
 import { convertIDArray } from "@util/convertIDArray";
+import { useToast } from 'bootstrap-vue-3/src/components/BToast/plugin';
+import BContainer from "bootstrap-vue-3/src/components/BContainer.vue";
 
-declare const nationID: number;
+const chiefActionPriority = ref<IDItem<NPCChiefActions>[]>([]);
+const chiefActionKeys = ref(new Set(staticValues.availableNationPriorityItems));
+for (const id of staticValues.currentNationPriority) {
+  chiefActionPriority.value.push({ id });
+  chiefActionKeys.value.delete(id);
+}
+const chiefActionUnused = ref<IDItem<NPCChiefActions>[]>(convertIDArray(chiefActionKeys.value));
+const chiefActionStack = cloneDeep([chiefActionPriority.value]);
 
-declare const defaultNationPolicy: NationPolicy;
+const generalActionPriority = ref<IDItem<NPCGeneralActions>[]>([]);
-declare const currentNationPolicy: NationPolicy;
+const generalActionKeys = ref(new Set(staticValues.availableGeneralActionPriorityItems));
+for (const id of staticValues.currentGeneralActionPriority) {
+  generalActionPriority.value.push({ id });
+  generalActionKeys.value.delete(id);
+}
+const generalActionUnused = ref<IDItem<NPCGeneralActions>[]>(convertIDArray(generalActionKeys.value));
+const generalActionStack = cloneDeep([generalActionPriority.value]);
 
-declare const zeroPolicy: NationPolicy;
+const title = "NPC 정책";
-declare const currentNationPriority: NPCChiefActions[];
+const lastSetters = ref(staticValues.lastSetters);
-declare const availableNationPriorityItems: NPCChiefActions[];
+const defaultStatMax = ref(staticValues.defaultStatMax);
-declare const defaultNationPriority: NPCChiefActions[];
+const defaultStatNPCMax = ref(staticValues.defaultStatNPCMax);
+const nationPolicy = ref(cloneDeep(staticValues.currentNationPolicy));
+const nationPolicyStack = [staticValues.currentNationPolicy];
+const zeroPolicy = ref(staticValues.zeroPolicy);
+const actionHelpText = ref(NPCPriorityBtnHelpMessage);
 
-declare const currentGeneralActionPriority: NPCGeneralActions[];
+const toasts = unwrap(useToast());
-declare const availableGeneralActionPriorityItems: NPCGeneralActions[];
-declare const defaultGeneralActionPriority: NPCGeneralActions[];
 
-declare const defaultStatNPCMax: number;
+function resetPolicy() {
-declare const defaultStatMax: number;
+  if (!confirm("초기 설정으로 되돌릴까요?")) {
+    return;
+  }
+  nationPolicy.value = cloneDeep(staticValues.defaultNationPolicy);
+  toasts.info({
+    title: '초기화 완료',
+    body: "서버 초기값을 적용했습니다.설정 버튼을 누르면 반영됩니다."
+  });
+}
 
-type SetterInfo = {
+function rollbackPolicy() {
-  setter: string | null;
+  if (!confirm("이전 설정으로 되돌릴까요?")) {
-  date: string | null;
+    return;
-};
+  }
+  let lastPolicy = unwrap(last(nationPolicyStack));
+  while (nationPolicyStack.length > 1) {
+    if (!isEqual(lastPolicy, nationPolicy.value)) {
+      break;
+    }
+    nationPolicyStack.pop();
+    lastPolicy = unwrap(last(nationPolicyStack));
+  }
+  nationPolicy.value = cloneDeep(lastPolicy);
+  toasts.info({
+    title: "되돌리기 완료",
+    body: "이전 설정으로 되돌렸습니다.",
+  });
+}
 
-declare const lastSetters: {
+async function submitPolicy() {
-  policy: SetterInfo;
+  if (!confirm("저장할까요?")) {
-  nation: SetterInfo;
+    return;
-  general: SetterInfo;
+  }
-};
 
-export default defineComponent({
+  try {
-  name: "PageNPCControl",
+    const response = await axios({
-  components: {
+      url: "j_set_npc_control.php",
-    TopBackBar,
+      responseType: "json",
-    NumberInputWithInfo,
+      method: "post",
-    draggable,
+      data: convertFormData({
-    MyToast,
+        type: "nationPolicy",
-  },
+        data: JSON.stringify(nationPolicy.value),
-  methods: {
+      }),
-    resetPolicy() {
+    });
-      if (!confirm("초기 설정으로 되돌릴까요?")) {
+    const result: InvalidResponse = response.data;
-        return;
+    if (!result.result) {
-      }
+      throw result.reason;
-      this.nationPolicy = cloneDeep(defaultNationPolicy);
+    }
-      this.toasts.push({
+  } catch (e) {
-        title: "초기화 완료",
+    console.error(e);
-        content: "서버 초기값을 적용했습니다.설정 버튼을 누르면 반영됩니다.",
+    toasts.danger({
-        type: "info",
+      title: "에러",
-      });
+      body: `설정하지 못했습니다: ${e}`,
-    },
+    });
-    rollbackPolicy() {
+    return;
-      if (!confirm("이전 설정으로 되돌릴까요?")) {
+  }
-        return;
-      }
-      let lastPolicy = unwrap(last(this.nationPolicyStack));
-      while (this.nationPolicyStack.length > 1) {
-        if (!isEqual(lastPolicy, this.nationPolicy)) {
-          break;
-        }
-        this.nationPolicyStack.pop();
-        lastPolicy = unwrap(last(this.nationPolicyStack));
-      }
-      this.nationPolicy = cloneDeep(lastPolicy);
-      this.toasts.push({
-        title: "되돌리기 완료",
-        content: "이전 설정으로 되돌렸습니다.",
-        type: "info",
-      });
-    },
-    async submitPolicy() {
-      if (!confirm("저장할까요?")) {
-        return;
-      }
 
-      try {
+  toasts.success({
-        const response = await axios({
+    title: "적용 완료",
-          url: "j_set_npc_control.php",
+    body: "NPC 정책이 반영되었습니다.",
-          responseType: "json",
+  });
-          method: "post",
-          data: convertFormData({
-            type: "nationPolicy",
-            data: JSON.stringify(this.nationPolicy),
-          }),
-        });
-        const result: InvalidResponse = response.data;
-        if (!result.result) {
-          throw result.reason;
-        }
-      } catch (e) {
-        console.error(e);
-        this.toasts.push({
-          title: "에러",
-          content: `설정하지 못했습니다: ${e}`,
-          type: "danger",
-        });
-        return;
-      }
 
-      this.toasts.push({
+  const lastPolicy = unwrap(last(nationPolicyStack));
-        title: "적용 완료",
+  if (!isEqual(lastPolicy, nationPolicy.value)) {
-        content: "NPC 정책이 반영되었습니다.",
+    nationPolicyStack.push(cloneDeep(nationPolicy.value));
-        type: "success",
+  }
-      });
+}
 
-      const lastPolicy = unwrap(last(this.nationPolicyStack));
+function calcPolicyValue(
-      if (!isEqual(lastPolicy, this.nationPolicy)) {
+  title: keyof NationPolicy
-        const { nationPolicy } = this;
+): number {
-        this.nationPolicyStack.push(cloneDeep(nationPolicy));
+  if (!(title in nationPolicy.value)) {
-      }
+    throw `${title}이 NationPolicy key가 아님`;
-    },
+  }
-    calcPolicyValue(
+  const policyValue = nationPolicy.value[title];
-      title: keyof NationPolicy
+  if (!isNumber(policyValue)) {
-    ): number {
+    throw `${title}에 해당하는 값이 number가 아님`;
-      if (!(title in this.nationPolicy)) {
+  }
-        throw `${title}이 NationPolicy key가 아님`;
+  if (policyValue == 0) {
-      }
+    return zeroPolicy.value[title] as number;
-      const policyValue = this.nationPolicy[title];
+  }
-      if(!isNumber(policyValue)){
+  return policyValue;
-        throw `${title}에 해당하는 값이 number가 아님`;
+}
-      }
-      if (policyValue == 0) {
-        return this.zeroPolicy[title] as number;
-      }
-      return policyValue;
-    },
-    resetNationPriority() {
-      if (!confirm("초기 설정으로 되돌릴까요?")) {
-        return;
-      }
-      this.chiefActionUnused = [];
-      this.chiefActionPriority = defaultNationPriority.map((id) => {
-        return { id };
-      });
-      this.toasts.push({
-        title: "초기화 완료",
-        content: "서버 초기값을 적용했습니다.설정 버튼을 누르면 반영됩니다.",
-        type: "info",
-      });
-    },
-    rollbackNationPriority() {
-      if (!confirm("이전 설정으로 되돌릴까요?")) {
-        return;
-      }
-      let lastActions = unwrap(last(this.chiefActionStack));
-      while (this.chiefActionStack.length > 1) {
-        if (!isEqual(lastActions, this.chiefActionPriority)) {
-          break;
-        }
-        this.chiefActionStack.pop();
-        lastActions = unwrap(last(this.chiefActionStack));
-      }
-      const chiefActionKeys = new Set(availableNationPriorityItems);
-      for (const { id } of lastActions) {
-        if (chiefActionKeys.has(id)) {
-          chiefActionKeys.delete(id);
-        }
-      }
-      this.chiefActionPriority = cloneDeep(lastActions);
-      this.chiefActionUnused = convertIDArray(chiefActionKeys);
 
-      this.toasts.push({
+function resetNationPriority() {
-        title: "되돌리기 완료",
+  if (!confirm("초기 설정으로 되돌릴까요?")) {
-        content: "이전 설정으로 되돌렸습니다.",
+    return;
-        type: "info",
+  }
-      });
+  chiefActionUnused.value = [];
-    },
+  chiefActionPriority.value = staticValues.defaultNationPriority.map((id) => {
-    async submitNationPriority() {
+    return { id };
-      if (!confirm("저장할까요?")) {
+  });
-        return;
+  toasts.info({
-      }
+    title: "초기화 완료",
+    body: "서버 초기값을 적용했습니다.설정 버튼을 누르면 반영됩니다.",
+  });
+}
 
-      try {
+function rollbackNationPriority() {
-        const response = await axios({
+  if (!confirm("이전 설정으로 되돌릴까요?")) {
-          url: "j_set_npc_control.php",
+    return;
-          responseType: "json",
+  }
-          method: "post",
+  let lastActions = unwrap(last(chiefActionStack));
-          data: convertFormData({
+  while (chiefActionStack.length > 1) {
-            type: "nationPriority",
+    if (!isEqual(lastActions, chiefActionPriority.value)) {
-            data: JSON.stringify(this.chiefActionPriority.map(({ id }) => id)),
+      break;
-          }),
+    }
-        });
+    chiefActionStack.pop();
-        const result: InvalidResponse = response.data;
+    lastActions = unwrap(last(chiefActionStack));
-        if (!result.result) {
+  }
-          throw result.reason;
+  const chiefActionKeys = new Set(staticValues.availableNationPriorityItems);
-        }
+  for (const { id } of lastActions) {
-      } catch (e) {
+    if (chiefActionKeys.has(id)) {
-        console.error(e);
-        this.toasts.push({
-          title: "에러",
-          content: `설정하지 못했습니다: ${e}`,
-          type: "danger",
-        });
-        return;
-      }
-
-      this.toasts.push({
-        title: "적용 완료",
-        content: "NPC 정책이 반영되었습니다.",
-        type: "success",
-      });
-
-      const lastActions = unwrap(last(this.chiefActionStack));
-      if (!isEqual(lastActions, this.chiefActionPriority)) {
-        const { chiefActionPriority } = this;
-        this.chiefActionStack.push(cloneDeep(chiefActionPriority));
-      }
-    },
-    resetGeneralPriority() {
-      if (!confirm("초기 설정으로 되돌릴까요?")) {
-        return;
-      }
-      this.generalActionUnused = [];
-      this.generalActionPriority = defaultGeneralActionPriority.map((id) => {
-        return { id };
-      });
-      this.toasts.push({
-        title: "초기화 완료",
-        content: "서버 초기값을 적용했습니다.설정 버튼을 누르면 반영됩니다.",
-        type: "info",
-      });
-    },
-    rollbackGeneralPriority() {
-      if (!confirm("이전 설정으로 되돌릴까요?")) {
-        return;
-      }
-      let lastActions = unwrap(last(this.generalActionStack));
-      while (this.generalActionStack.length > 1) {
-        if (!isEqual(lastActions, this.generalActionPriority)) {
-          break;
-        }
-        this.generalActionStack.pop();
-        lastActions = unwrap(last(this.generalActionStack));
-      }
-      const generalActionKeys = new Set(availableGeneralActionPriorityItems);
-      for (const { id } of lastActions) {
-        if (generalActionKeys.has(id)) {
-          generalActionKeys.delete(id);
-        }
-      }
-      this.generalActionPriority = cloneDeep(lastActions);
-      this.generalActionUnused = convertIDArray(generalActionKeys);
-
-      this.toasts.push({
-        title: "되돌리기 완료",
-        content: "이전 설정으로 되돌렸습니다.",
-        type: "info",
-      });
-    },
-    async submitGeneralPriority() {
-      if (!confirm("저장할까요?")) {
-        return;
-      }
-
-      try {
-        const response = await axios({
-          url: "j_set_npc_control.php",
-          responseType: "json",
-          method: "post",
-          data: convertFormData({
-            type: "generalPriority",
-            data: JSON.stringify(
-              this.generalActionPriority.map(({ id }) => id)
-            ),
-          }),
-        });
-        const result: InvalidResponse = response.data;
-        if (!result.result) {
-          throw result.reason;
-        }
-      } catch (e) {
-        console.error(e);
-        this.toasts.push({
-          title: "에러",
-          content: `설정하지 못했습니다: ${e}`,
-          type: "danger",
-        });
-        return;
-      }
-
-      this.toasts.push({
-        title: "적용 완료",
-        content: "NPC 정책이 반영되었습니다.",
-        type: "success",
-      });
-
-      const lastActions = unwrap(last(this.generalActionStack));
-      if (!isEqual(lastActions, this.generalActionPriority)) {
-        const { generalActionPriority } = this;
-        this.generalActionStack.push(cloneDeep(generalActionPriority));
-      }
-    },
-  },
-  data() {
-    const chiefActionPriority: IDItem<NPCChiefActions>[] = [];
-    const chiefActionKeys = new Set(availableNationPriorityItems);
-    for (const id of currentNationPriority) {
-      chiefActionPriority.push({ id });
       chiefActionKeys.delete(id);
     }
-    const chiefActionUnused: IDItem<NPCChiefActions>[] =
+  }
-      convertIDArray(chiefActionKeys);
+  chiefActionPriority.value = cloneDeep(lastActions);
+  chiefActionUnused.value = convertIDArray(chiefActionKeys);
 
-    const generalActionPriority: IDItem<NPCGeneralActions>[] = [];
+  toasts.info({
-    const generalActionKeys = new Set(availableGeneralActionPriorityItems);
+    title: "되돌리기 완료",
-    for (const id of currentGeneralActionPriority) {
+    body: "이전 설정으로 되돌렸습니다.",
-      generalActionPriority.push({ id });
+  });
+}
+
+async function submitNationPriority() {
+  if (!confirm("저장할까요?")) {
+    return;
+  }
+
+  try {
+    const response = await axios({
+      url: "j_set_npc_control.php",
+      responseType: "json",
+      method: "post",
+      data: convertFormData({
+        type: "nationPriority",
+        data: JSON.stringify(chiefActionPriority.value.map(({ id }) => id)),
+      }),
+    });
+    const result: InvalidResponse = response.data;
+    if (!result.result) {
+      throw result.reason;
+    }
+  } catch (e) {
+    console.error(e);
+    toasts.danger({
+      title: "에러",
+      body: `설정하지 못했습니다: ${e}`,
+    });
+    return;
+  }
+
+  toasts.success({
+    title: "적용 완료",
+    body: "NPC 정책이 반영되었습니다.",
+  });
+
+  const lastActions = unwrap(last(chiefActionStack));
+  if (!isEqual(lastActions, chiefActionPriority.value)) {
+    chiefActionStack.push(cloneDeep(chiefActionPriority.value));
+  }
+}
+
+function resetGeneralPriority() {
+  if (!confirm("초기 설정으로 되돌릴까요?")) {
+    return;
+  }
+  generalActionUnused.value = [];
+  generalActionPriority.value = staticValues.defaultGeneralActionPriority.map((id) => {
+    return { id };
+  });
+  toasts.info({
+    title: "초기화 완료",
+    body: "서버 초기값을 적용했습니다.설정 버튼을 누르면 반영됩니다.",
+  });
+}
+
+function rollbackGeneralPriority() {
+  if (!confirm("이전 설정으로 되돌릴까요?")) {
+    return;
+  }
+  let lastActions = unwrap(last(generalActionStack));
+  while (generalActionStack.length > 1) {
+    if (!isEqual(lastActions, generalActionPriority.value)) {
+      break;
+    }
+    generalActionStack.pop();
+    lastActions = unwrap(last(generalActionStack));
+  }
+  const generalActionKeys = new Set(staticValues.availableGeneralActionPriorityItems);
+  for (const { id } of lastActions) {
+    if (generalActionKeys.has(id)) {
       generalActionKeys.delete(id);
     }
-    const generalActionUnused: IDItem<NPCGeneralActions>[] =
+  }
-      convertIDArray(generalActionKeys);
+  generalActionPriority.value = cloneDeep(lastActions);
+  generalActionUnused.value = convertIDArray(generalActionKeys);
 
-    return {
+  toasts.info({
-      title: "NPC 정책",
+    title: "되돌리기 완료",
-      toasts: <ToastType[]>[],
+    body: "이전 설정으로 되돌렸습니다.",
-      lastSetters,
+  });
+}
 
-      nationID,
+async function submitGeneralPriority() {
-      defaultStatMax,
+  if (!confirm("저장할까요?")) {
-      defaultStatNPCMax,
+    return;
-      nationPolicy: cloneDeep(currentNationPolicy),
+  }
-      nationPolicyStack: [currentNationPolicy],
-      zeroPolicy,
 
-      actionHelpText: NPCPriorityBtnHelpMessage,
+  try {
+    const response = await axios({
+      url: "j_set_npc_control.php",
+      responseType: "json",
+      method: "post",
+      data: convertFormData({
+        type: "generalPriority",
+        data: JSON.stringify(
+          generalActionPriority.value.map(({ id }) => id)
+        ),
+      }),
+    });
+    const result: InvalidResponse = response.data;
+    if (!result.result) {
+      throw result.reason;
+    }
+  } catch (e) {
+    console.error(e);
+    toasts.danger({
+      title: "에러",
+      body: `설정하지 못했습니다: ${e}`,
+    });
+    return;
+  }
 
-      chiefActionUnused,
+  toasts.success({
-      chiefActionPriority,
+    title: "적용 완료",
-      chiefActionStack: [cloneDeep(chiefActionPriority)],
+    body: "NPC 정책이 반영되었습니다.",
+  });
 
-      generalActionUnused,
+  const lastActions = unwrap(last(generalActionStack));
-      generalActionPriority,
+  if (!isEqual(lastActions, generalActionPriority.value)) {
-      generalActionStack: [cloneDeep(generalActionPriority)],
+    generalActionStack.push(cloneDeep(generalActionPriority.value));
-    };
+  }
-  },
+}
-});
 </script>
 
 <style>

hwe/ts/PageNationBetting.vue

@@ -1,8 +1,11 @@
 <template>
-  <MyToast v-model="toasts" />
+  <BContainer id="container" :toast="{ root: true }" class="pageNationBetting bg0">
-  <div id="container" class="pageNationBetting bg0">
     <TopBackBar :title="title" />
-    <BettingDetail v-if="targetBettingID !== undefined" :bettingID="targetBettingID" @reqToast="addToast" />
+    <BettingDetail
+      v-if="targetBettingID !== undefined"
+      :bettingID="targetBettingID"
+      @reqToast="addToast"
+    />
     <div v-if="bettingList === undefined">로딩 중...</div>
     <div class="bettingList" v-else>
       <div class="bg2">베팅 목록</div>
@@ -24,11 +27,10 @@
     </div>
 
     <BottomBar />
-  </div>
+  </BContainer>
 </template>
 
 <script lang="ts" setup>
-import MyToast from "@/components/MyToast.vue";
 import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
 import { BettingInfo, ToastType } from "@/defs";
@@ -38,6 +40,9 @@ import { isString } from "lodash";
 import { parseYearMonth } from "@/util/parseYearMonth";
 import { joinYearMonth } from "./util/joinYearMonth";
 import BettingDetail from "@/components/BettingDetail.vue";
+import { useToast } from "bootstrap-vue-3/src/components/BToast/plugin";
+import { unwrap } from "./util/unwrap";
+import BContainer from "bootstrap-vue-3/src/components/BContainer.vue";
 
 type BettingListResponse = ValidResponse & {
   bettingList: Record<number, Omit<BettingInfo & { totalAmount: number }, 'candidates'>>,
@@ -45,9 +50,7 @@ type BettingListResponse = ValidResponse & {
   month: number,
 };
 
-
+const toasts = unwrap(useToast());
-
-const toasts = ref<ToastType[]>([]);
 const year = ref<number>();
 const month = ref<number>();
 const yearMonth = ref<number>();
@@ -57,8 +60,8 @@ const bettingList = ref<BettingListResponse['bettingList']>();
 const targetBettingID = ref<number>();
 
 
-function addToast(msg: ToastType){
+function addToast(msg: ToastType) {
-  toasts.value.push(msg);
+  toasts.show(msg.content, msg.options);
 }
 
 
@@ -73,10 +76,9 @@ onMounted(async () => {
     console.log(result);
   } catch (e) {
     if (isString(e)) {
-      toasts.value.push({
+      toasts.danger({
         title: "에러",
-        content: e,
+        body: e,
-        type: "danger",
       });
     }
     console.error(e);

hwe/ts/PageNationStratFinan.vue

@@ -1,6 +1,5 @@
 <template>
-  <MyToast v-model="toasts" />
+  <BContainer :toast="{root: true}" id="container" class="pageNationStratFinan bg0">
-  <div id="container" class="pageNationStratFinan bg0">
     <TopBackBar title="내무부" />
     <div class="diplomacyTitle">외교관계</div>
     <div class="diplomacyTable">
@@ -296,7 +295,7 @@
     </div>
     <div>추가 설정</div>
     <BottomBar title="내무부" />
-  </div>
+  </BContainer>
 </template>
 <script lang="ts">
 import TipTap from "./components/TipTap.vue";
@@ -308,13 +307,14 @@ import {
   diplomacyState,
   diplomacyStateInfo,
   NationStaticItem,
-  ToastType,
 } from "./defs";
 import { SammoAPI } from "./SammoAPI";
 import { joinYearMonth } from "@/util/joinYearMonth";
 import { parseYearMonth } from "@/util/parseYearMonth";
-import MyToast from "@/components/MyToast.vue";
 import { ValidResponse } from "./util/callSammoAPI";
+import BContainer from "bootstrap-vue-3/src/components/BContainer.vue";
+import { useToast } from "bootstrap-vue-3/src/components/BToast/plugin";
+import { unwrap } from "./util/unwrap";
 
 type NationItem = NationStaticItem & {
   cityCnt: number;
@@ -369,11 +369,11 @@ export default defineComponent({
   components: {
     TopBackBar,
     BottomBar,
-    MyToast,
     TipTap,
-  },
+    BContainer
+},
   setup() {
-    const toasts = ref<ToastType[]>([]);
+    const toasts = unwrap(useToast());
     const self = reactive(staticValues);
 
     let oldNationMsg = staticValues.nationMsg;
@@ -396,16 +396,15 @@ export default defineComponent({
         });
         oldNationMsg = msg;
         inEditNationMsg.value = false;
-        toasts.value.push({
+        toasts.info({
           title: "변경",
-          content: "국가 방침을 변경했습니다.",
+          body: "국가 방침을 변경했습니다.",
         });
       } catch (e) {
         if (isString(e)) {
-          toasts.value.push({
+          toasts.danger({
             title: "에러",
-            content: e,
+            body: e,
-            type: "danger",
           });
         }
         console.error(e);
@@ -430,16 +429,15 @@ export default defineComponent({
         });
         oldScoutMsg = msg;
         inEditScoutMsg.value = false;
-        toasts.value.push({
+        toasts.info({
           title: "변경",
-          content: "임관 권유문을 변경했습니다.",
+          body: "임관 권유문을 변경했습니다.",
         });
       } catch (e) {
         if (isString(e)) {
-          toasts.value.push({
+          toasts.danger({
             title: "에러",
-            content: e,
+            body: e,
-            type: "danger",
           });
         }
         console.error(e);
@@ -502,16 +500,15 @@ export default defineComponent({
       try {
         await SammoAPI.Nation.SetRate({ amount: rate });
         oldRate = rate;
-        toasts.value.push({
+        toasts.info({
           title: "변경",
-          content: "세율을 변경했습니다.",
+          body: "세율을 변경했습니다.",
         });
       } catch (e) {
         if (isString(e)) {
-          toasts.value.push({
+          toasts.danger({
             title: "에러",
-            content: e,
+            body: e,
-            type: "danger",
           });
         }
         console.error(e);
@@ -527,16 +524,15 @@ export default defineComponent({
       try {
         await SammoAPI.Nation.SetBill({ amount: bill });
         oldBill = bill;
-        toasts.value.push({
+        toasts.info({
           title: "변경",
-          content: "지급률을 변경했습니다.",
+          body: "지급률을 변경했습니다.",
         });
       } catch (e) {
         if (isString(e)) {
-          toasts.value.push({
+          toasts.danger({
             title: "에러",
-            content: e,
+            body: e,
-            type: "danger",
           });
         }
         console.error(e);
@@ -552,16 +548,15 @@ export default defineComponent({
       try {
         await SammoAPI.Nation.SetSecretLimit({ amount: secretLimit });
         oldSecretLimit = secretLimit;
-        toasts.value.push({
+        toasts.info({
           title: "변경",
-          content: "기밀 권한을 변경했습니다.",
+          body: "기밀 권한을 변경했습니다.",
         });
       } catch (e) {
         if (isString(e)) {
-          toasts.value.push({
+          toasts.danger({
             title: "에러",
-            content: e,
+            body: e,
-            type: "danger",
           });
         }
         self.policy.secretLimit = oldSecretLimit;
@@ -576,16 +571,15 @@ export default defineComponent({
       try {
         const result = await SammoAPI.Nation.SetBlockWar<SetBlockWarResponse>({ value: self.policy.blockWar });
         self.warSettingCnt.remain = result.availableCnt;
-        toasts.value.push({
+        toasts.info({
           title: "변경",
-          content: "전쟁 금지 설정을 변경했습니다.",
+          body: "전쟁 금지 설정을 변경했습니다.",
         });
       } catch (e) {
         if (isString(e)) {
-          toasts.value.push({
+          toasts.danger({
             title: "에러",
-            content: e,
+            body: e,
-            type: "danger",
           });
         }
         self.policy.blockWar = !self.policy.blockWar;
@@ -596,16 +590,15 @@ export default defineComponent({
     async function setBlockScout() {
       try {
         await SammoAPI.Nation.SetBlockScout({ value: self.policy.blockScout });
-        toasts.value.push({
+        toasts.info({
           title: "변경",
-          content: "임관 설정을 변경했습니다.",
+          body: "임관 설정을 변경했습니다.",
         });
       } catch (e) {
         if (isString(e)) {
-          toasts.value.push({
+          toasts.danger({
             title: "에러",
-            content: e,
+            body: e,
-            type: "danger",
           });
         }
         self.policy.blockScout = !self.policy.blockScout;

hwe/ts/components/BettingDetail.vue

@@ -66,7 +66,7 @@
                 <div class="col-5 text-center">대상</div>
                 <div class="col-2 text-center">베팅액</div>
                 <div class="col-3 text-center">내 베팅</div>
-                <div class="col-2 text-center">{{ info.finished? '배율':'기대 배율' }}</div>
+                <div class="col-2 text-center">{{ info.finished ? '배율' : '기대 배율' }}</div>
             </div>
             <template v-if="info.finished">
                 <div class="row" v-for="[betType, amount] of detailBet" :key="betType">
@@ -85,10 +85,12 @@
                         <div class="col-3 text-center" v-if="myBettings.has(betType)">
                             <template
                                 v-for="subPoint of [myBettings.get(betType) ?? 0]"
-                            >({{ subPoint.toLocaleString() }} -> {{ calculatedReward[matchPoint] == 0? 0 : (subPoint * calculatedReward[matchPoint] / (calculatedSubAmount.get(matchPoint)??1)).toFixed(1).toLocaleString() }})</template>
+                            >({{ subPoint.toLocaleString() }} -> {{ calculatedReward[matchPoint] == 0 ? 0 : (subPoint * calculatedReward[matchPoint] / (calculatedSubAmount.get(matchPoint) ?? 1)).toFixed(1).toLocaleString() }})</template>
                         </div>
                         <div class="col-3 text-center" v-else></div>
-                        <div class="col-2 text-end">{{ (calculatedReward[matchPoint] == 0? 0 : (calculatedReward[matchPoint] / (calculatedSubAmount.get(matchPoint)??1))).toFixed(1).toLocaleString() }}배</div>
+                        <div
+                            class="col-2 text-end"
+                        >{{ (calculatedReward[matchPoint] == 0 ? 0 : (calculatedReward[matchPoint] / (calculatedSubAmount.get(matchPoint) ?? 1))).toFixed(1).toLocaleString() }}배</div>
                     </template>
                 </div>
             </template>
@@ -107,7 +109,9 @@
                         >({{ subPoint.toLocaleString() }} -> {{ (subPoint * maxBettingReward / amount).toFixed(1).toLocaleString() }})</template>
                     </div>
                     <div class="col-3 text-center" v-else></div>
-                    <div class="col-2 text-end">{{ (maxBettingReward / amount).toFixed(1).toLocaleString() }}배</div>
+                    <div
+                        class="col-2 text-end"
+                    >{{ (maxBettingReward / amount).toFixed(1).toLocaleString() }}배</div>
                 </div>
             </template>
         </div>
@@ -343,9 +347,13 @@ async function loadBetting(bettingID: number) {
     } catch (e) {
         if (isString(e)) {
             emit('reqToast', {
-                title: "에러",
+                content: {
-                content: e,
+                    title: "에러",
-                type: "danger",
+                    body: e
+                },
+                options: {
+                    variant: 'danger',
+                }
             });
         }
         console.error(e);
@@ -388,9 +396,13 @@ function toggleCandidate(idx: number) {
     }
     else {
         emit('reqToast', {
-            title: '오류',
+            content: {
-            type: 'warning',
+                title: '오류',
-            content: `이미 ${selectCnt}개를 선택했습니다.`,
+                body: `이미 ${selectCnt}개를 선택했습니다.`,
+            },
+            options: {
+                variant: 'warning',
+            }
         });
         return;
     }
@@ -416,17 +428,25 @@ async function submitBet(): Promise<void> {
             amount,
         });
         emit('reqToast', {
-            title: '완료',
+            content: {
-            content: '베팅했습니다',
+                title: '완료',
-            type: 'success'
+                body: '베팅했습니다',
+            },
+            options: {
+                variant: 'success'
+            }
         });
         await loadBetting(bettingInfo.id);
     } catch (e) {
         if (isString(e)) {
             emit('reqToast', {
-                title: "에러",
+                content: {
-                content: e,
+                    title: "에러",
-                type: "danger",
+                    body: e,
+                },
+                options: {
+                    variant: "danger",
+                }
             });
         }
         console.error(e);

hwe/ts/components/MyToast.vue

@@ -1,103 +0,0 @@
-<template>
-  <CToaster class="my-toaster" placement="top-end" v-if="toasts.length > 0">
-    <template v-for="(toast, index) in toasts" :key="index">
-      <CToast :delay="toast.delay ?? delay">
-        <CToastHeader :class="['text-white', `bg-${toast.type ?? 'primary'}`]">
-          <span class="me-auto fw-bold">{{ toast.title }}</span>
-          <CToastClose class="my-close" color="secondary" size="sm" />
-        </CToastHeader>
-        <CToastBody> {{ toast.content }} </CToastBody>
-      </CToast>
-    </template>
-  </CToaster>
-</template>
-<script lang="ts">
-import { defineComponent, PropType, ref, watch } from "vue";
-import { ToastType } from "@/defs";
-import {
-  CToaster,
-  CToast,
-  CToastHeader,
-  CToastBody,
-  CToastClose,
-} from "@coreui/vue/src/components/toast";
-
-export default defineComponent({
-  components: {
-    CToaster,
-    CToast,
-    CToastHeader,
-    CToastBody,
-    CToastClose,
-  },
-  emits: ["update:modelValue"],
-  props: {
-    modelValue: {
-      type: Array as PropType<ToastType[]>,
-      required: true,
-    },
-    delay: {
-      type: Number,
-      required: false,
-      default: 5000,
-    },
-  },
-  setup(props, { emit }) {
-    let doneCnt = 0;
-    const doneMap = new Map<ToastType, boolean>();
-    let toasts = ref(props.modelValue);
-
-    function onClose(toast: ToastType) {
-      const status = doneMap.get(toast);
-      if (status === undefined) {
-        return;
-      }
-      if (status) {
-        return;
-      }
-      doneCnt -= 1;
-
-      if (doneCnt != 0) {
-        doneMap.set(toast, true);
-        return;
-      }
-
-      doneMap.clear();
-      toasts.value.length = 0;
-      emit("update:modelValue", toasts.value);
-    }
-
-    watch(props.modelValue, (values) => {
-      for (const item of values) {
-        if (!doneMap.has(item)) {
-          doneMap.set(item, false);
-          doneCnt += 1;
-
-          setTimeout(() => {
-            onClose(item);
-          }, (item.delay ?? props.delay) + 1000);
-        }
-      }
-      if (toasts.value !== values) {
-        toasts.value = values;
-      }
-    });
-
-    return {
-      onClose,
-      toasts,
-    };
-  },
-});
-</script>
-<style>
-.my-toaster {
-  z-index: 199;
-}
-.my-toaster .btn.btn-close.my-close,
-.my-toaster .btn.btn-close.my-close:hover,
-.my-toaster .btn.btn-close.my-close:active {
-  border: 0;
-  padding: 0;
-}
-</style>

hwe/ts/defs.ts

@@ -148,10 +148,14 @@ export type IDItem<T> = {
 };
 
 export type ToastType = {
-    title?: string,
+    content: {
-    content?: string,
+        title?: string,
-    type?: Colors,
+        body?: string,
-    delay?: number,
+    },
+    options?: {
+        variant?: Colors,
+        delay?: number,
+    }
 }
 
 export const keyScreenMode = 'sam.screenMode';

hwe/ts/v_NPCControl.ts

@@ -2,8 +2,8 @@ import "@scss/common/bootstrap5.scss";
 
 import { createApp } from 'vue'
 import NPCControl from '@/PageNPCControl.vue';
-import BootstrapVue3 from 'bootstrap-vue-3'
+import {BootstrapVue3, ToastPlugin} from 'bootstrap-vue-3'
 import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
 
 setAxiosXMLHttpRequest();
-createApp(NPCControl).use(BootstrapVue3).mount('#app')
+createApp(NPCControl).use(BootstrapVue3).use(ToastPlugin).mount('#app')

hwe/ts/v_nationBetting.ts

@@ -2,11 +2,11 @@ import "@scss/nationBetting.scss";
 
 import { createApp } from 'vue'
 import PageNationBetting from '@/PageNationBetting.vue';
-import BootstrapVue3 from 'bootstrap-vue-3';
+import {BootstrapVue3, ToastPlugin} from 'bootstrap-vue-3';
 import { auto500px } from './util/auto500px';
 
 
 
 
 auto500px();
-createApp(PageNationBetting).use(BootstrapVue3).mount('#app');
+createApp(PageNationBetting).use(BootstrapVue3).use(ToastPlugin).mount('#app');

hwe/ts/v_nationStratFinan.ts

@@ -2,11 +2,11 @@ import "@scss/nationStratFinan.scss";
 
 import { createApp } from 'vue'
 import PageNationStratFinan from '@/PageNationStratFinan.vue';
-import BootstrapVue3 from 'bootstrap-vue-3';
+import {BootstrapVue3, ToastPlugin} from 'bootstrap-vue-3';
 import { auto500px } from './util/auto500px';
 
 
 
 
 auto500px();
-createApp(PageNationStratFinan).use(BootstrapVue3).mount('#app');
+createApp(PageNationStratFinan).use(BootstrapVue3).use(ToastPlugin).mount('#app');

hwe/v_NPCControl.php

@@ -63,8 +63,8 @@ if ($currentNationPolicy['reqHumanWarUrgentRice'] ?? 0) {
 if ($currentNationPolicy['reqHumanWarUrgentGold'] ?? 0) {
     $autoPolicyVariable['reqHumanWarUrgentGold'] = $currentNationPolicy['reqHumanWarUrgentGold'];
 }
-$autoPolicy = new AutorunNationPolicy($general, ($gameStor->autorun_user)['options']??[], ['values' => $autoPolicyVariable], null, $nation, $gameStor->getAll(true));
+$autoPolicy = new AutorunNationPolicy($general, ($gameStor->autorun_user)['options'] ?? [], ['values' => $autoPolicyVariable], null, $nation, $gameStor->getAll(true));
-$zeroPolicy = new AutorunNationPolicy($general, ($gameStor->autorun_user)['options']??[], null, null, $nation, $gameStor->getAll(true));
+$zeroPolicy = new AutorunNationPolicy($general, ($gameStor->autorun_user)['options'] ?? [], null, null, $nation, $gameStor->getAll(true));
 
 $lastSetters = [
     'policy' => [
@@ -91,7 +91,7 @@ $lastSetters = [
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title><?= UniqueConst::$serverName ?>: 임시 NPC 정책</title>
-    <?= WebUtil::printStaticValues([
+    <?= WebUtil::printStaticValues(['staticValues' => [
         'nationID' => $nationID,
         'defaultNationPolicy' => $defaultNationPolicy,
         'currentNationPolicy' => $currentNationPolicy,
@@ -109,7 +109,7 @@ $lastSetters = [
 
         'defaultStatNPCMax' => GameConst::$defaultStatNPCMax,
         'defaultStatMax' => GameConst::$defaultStatMax,
-    ]) ?>
+    ]]) ?>
     <?= WebUtil::printJS('../d_shared/common_path.js', true) ?>
     <?= WebUtil::printDist('vue', ['v_NPCControl'], true) ?>
 </head>

webpack.config.cjs

@@ -158,7 +158,7 @@ module.exports = (env, argv) => {
                 {
                     test: /\.vue$/,
                     loader: 'vue-loader',
-                    exclude: /(node_modules)/,
+                    //exclude: /(node_modules)/,
                     options: {
                         hotReload: false,
                     }