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

- component로 src 내부 ts/vue 사용 시도 중
2022-02-18 20:54:26 +09:00
parent bbf916f28c
commit dc0281d359
13 changed files with 534 additions and 651 deletions
@@ -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;
+
    }
 }

@@ -4,6 +4,10 @@
@import "@scss/editor_component.scss";
@import "@scss/common_legacy.scss";

+#container{
+    padding: 0;
+}
+
 .diplomacyTitle {
    background-color: $blue;
    text-align: center;
@@ -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
-          v-model="nationPolicy.reqNationGold"
-          :step="100"
-          title="국가 권장 금"
-          >이보다 많으면 포상, 적으면 몰수/헌납합니다.(긴급포상
-          제외)</NumberInputWithInfo
-        >
+        <NumberInputWithInfo v-model="nationPolicy.reqNationGold" :step="100" title="국가 권장 금">
+          이보다 많으면 포상, 적으면 몰수/헌납합니다.(긴급포상
+          제외)
+        </NumberInputWithInfo>
      </div>
      <div class="col">
-        <NumberInputWithInfo
-          v-model="nationPolicy.reqNationRice"
-          :step="100"
-          title="국가 권장 쌀"
-          >이보다 많으면 포상, 적으면 몰수/헌납합니다.(긴급포상
-          제외)</NumberInputWithInfo
-        >
+        <NumberInputWithInfo v-model="nationPolicy.reqNationRice" :step="100" title="국가 권장 쌀">
+          이보다 많으면 포상, 적으면 몰수/헌납합니다.(긴급포상
+          제외)
+        </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
-          v-model="nationPolicy.reqNPCWarGold"
-          :step="100"
-          title="NPC전투장 권장 금"
-          >NPC전투장에게 주는 금입니다. 이보다 적으면 포상합니다. <br />
+        <NumberInputWithInfo v-model="nationPolicy.reqNPCWarGold" :step="100" title="NPC전투장 권장 금">
+          NPC전투장에게 주는 금입니다. 이보다 적으면 포상합니다.
+          <br />
          0이면 기본 병종 4회({{ (defaultStatNPCMax * 100).toLocaleString() }}
          * 4) 징병비를 기준으로 하며, 그 수치는 현재
          {{
            zeroPolicy.reqNPCWarGold.toLocaleString()
-          }}입니다.</NumberInputWithInfo
-        >
+          }}입니다.
+        </NumberInputWithInfo>
      </div>
      <div class="col">
-        <NumberInputWithInfo
-          v-model="nationPolicy.reqNPCWarRice"
-          :step="100"
-          title="NPC전투장 권장 쌀"
-          >NPC전투장에게 주는 쌀입니다. 이보다 적으면 포상합니다. <br />
+        <NumberInputWithInfo v-model="nationPolicy.reqNPCWarRice" :step="100" title="NPC전투장 권장 쌀">
+          NPC전투장에게 주는 쌀입니다. 이보다 적으면 포상합니다.
+          <br />
          0이면 기본 병종으로
          {{ (defaultStatNPCMax * 100).toLocaleString() }} * 4명 사살 가능한
          쌀을 기준으로 하며, 그 수치는 현재
          {{
            zeroPolicy.reqNPCWarRice.toLocaleString()
-          }}입니다.</NumberInputWithInfo
-        >
+          }}입니다.
+        </NumberInputWithInfo>
      </div>
      <div class="col">
-        <NumberInputWithInfo
-          v-model="nationPolicy.reqNPCDevelGold"
-          :step="100"
-          title="NPC내정장 권장 금"
-          >NPC내정장에게 주는 금입니다. 이보다 5배 더 많다면 헌납합니다.<br />0이면
+        <NumberInputWithInfo v-model="nationPolicy.reqNPCDevelGold" :step="100" title="NPC내정장 권장 금">
+          NPC내정장에게 주는 금입니다. 이보다 5배 더 많다면 헌납합니다.
+          <br />
+          0이면
          30턴 내정 가능한 금을 기준으로 하며, 그 수치는 현재
-          {{ zeroPolicy.reqNPCDevelGold }}입니다.</NumberInputWithInfo
-        >
+          {{ zeroPolicy.reqNPCDevelGold }}입니다.
+        </NumberInputWithInfo>
      </div>
      <div class="col">
-        <NumberInputWithInfo
-          v-model="nationPolicy.reqNPCDevelRice"
-          :step="100"
-          title="NPC내정장 권장 쌀"
-          >NPC내정장에게 주는 쌀입니다. 이보다 5배 더 많다면
-          헌납합니다.</NumberInputWithInfo
-        >
+        <NumberInputWithInfo v-model="nationPolicy.reqNPCDevelRice" :step="100" title="NPC내정장 권장 쌀">
+          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 />
-        내정 부대는 작업중입니다(json양식: [부대번호,...])
+        {부대번호:[시작도시번호(아국),도착도시번호(적군)],...})
+        <br />후방 징병 부대는 작업중입니다(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
-          type="button"
-          @click="resetPolicy"
-          class="btn btn-dark reset_btn"
-        >
-          초기값으로
-        </button>
-        <button
-          type="button"
-          @click="rollbackPolicy"
-          class="btn btn-secondary revert_btn"
-        >
-          이전값으로
-        </button>
+        <button type="button" @click="resetPolicy" class="btn btn-dark reset_btn">초기값으로</button>
+        <button type="button" @click="rollbackPolicy" class="btn btn-secondary revert_btn">이전값으로</button>
      </div>
-      <button
-        type="button"
-        @click="submitPolicy"
-        class="btn btn-primary submit_btn"
-      >
-        설정
-      </button>
+      <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"
-            >예턴이 없거나, 지정되어 있더라도 실패하면<br />아래 순위에 따라
-            사령턴을 시도합니다.</small
-          >
+          <small class="text-muted">
+            예턴이 없거나, 지정되어 있더라도 실패하면
+            <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">
-                    &lt;비활성화 항목들&gt;
-                  </div>
+                  <div class="list-group-item list-group-item-dark">&lt;비활성화 항목들&gt;</div>
                </template>
                <template #item="{ element }">
                  <div class="list-group-item">
-                    <i class="bi bi-list"></i>&nbsp;&nbsp;{{ element.id
-                    }}<button
+                    <i class="bi bi-list"></i>
+                    &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
-                    }}<button
+                    <i class="bi bi-list"></i>
+                    &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"
-            >순위가 높은 것부터 시도합니다. <br />아무것도 실행할 수 없으면
-            물자조달이나 인재탐색을 합니다.</small
-          >
+          <small class="text-muted">
+            순위가 높은 것부터 시도합니다.
+            <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">
-                    &lt;비활성화 항목들&gt;
-                  </div>
+                  <div class="list-group-item list-group-item-dark">&lt;비활성화 항목들&gt;</div>
                </template>
                <template #item="{ element }">
                  <div class="list-group-item">
-                    <i class="bi bi-list"></i>&nbsp;&nbsp;{{ element.id
-                    }}<button
+                    <i class="bi bi-list"></i>
+                    &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
-                    }}<button
+                    <i class="bi bi-list"></i>
+                    &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;
-declare const currentNationPolicy: NationPolicy;
+const generalActionPriority = ref<IDItem<NPCGeneralActions>[]>([]);
+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;
-declare const currentNationPriority: NPCChiefActions[];
-declare const availableNationPriorityItems: NPCChiefActions[];
-declare const defaultNationPriority: NPCChiefActions[];
+const title = "NPC 정책";
+const lastSetters = ref(staticValues.lastSetters);
+const defaultStatMax = ref(staticValues.defaultStatMax);
+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[];
-declare const availableGeneralActionPriorityItems: NPCGeneralActions[];
-declare const defaultGeneralActionPriority: NPCGeneralActions[];
+const toasts = unwrap(useToast());

-declare const defaultStatNPCMax: number;
-declare const defaultStatMax: number;
+function resetPolicy() {
+  if (!confirm("초기 설정으로 되돌릴까요?")) {
+    return;
+  }
+  nationPolicy.value = cloneDeep(staticValues.defaultNationPolicy);
+  toasts.info({
+    title: '초기화 완료',
+    body: "서버 초기값을 적용했습니다.설정 버튼을 누르면 반영됩니다."
+  });
+}

-type SetterInfo = {
-  setter: string | null;
-  date: string | null;
-};
+function rollbackPolicy() {
+  if (!confirm("이전 설정으로 되돌릴까요?")) {
+    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: {
-  policy: SetterInfo;
-  nation: SetterInfo;
-  general: SetterInfo;
-};
+async function submitPolicy() {
+  if (!confirm("저장할까요?")) {
+    return;
+  }

-export default defineComponent({
-  name: "PageNPCControl",
-  components: {
-    TopBackBar,
-    NumberInputWithInfo,
-    draggable,
-    MyToast,
-  },
-  methods: {
-    resetPolicy() {
-      if (!confirm("초기 설정으로 되돌릴까요?")) {
-        return;
-      }
-      this.nationPolicy = cloneDeep(defaultNationPolicy);
-      this.toasts.push({
-        title: "초기화 완료",
-        content: "서버 초기값을 적용했습니다.설정 버튼을 누르면 반영됩니다.",
-        type: "info",
-      });
-    },
-    rollbackPolicy() {
-      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 {
+    const response = await axios({
+      url: "j_set_npc_control.php",
+      responseType: "json",
+      method: "post",
+      data: convertFormData({
+        type: "nationPolicy",
+        data: JSON.stringify(nationPolicy.value),
+      }),
+    });
+    const result: InvalidResponse = response.data;
+    if (!result.result) {
+      throw result.reason;
+    }
+  } catch (e) {
+    console.error(e);
+    toasts.danger({
+      title: "에러",
+      body: `설정하지 못했습니다: ${e}`,
+    });
+    return;
+  }

-      try {
-        const response = await axios({
-          url: "j_set_npc_control.php",
-          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;
-      }
+  toasts.success({
+    title: "적용 완료",
+    body: "NPC 정책이 반영되었습니다.",
+  });

-      this.toasts.push({
-        title: "적용 완료",
-        content: "NPC 정책이 반영되었습니다.",
-        type: "success",
-      });
+  const lastPolicy = unwrap(last(nationPolicyStack));
+  if (!isEqual(lastPolicy, nationPolicy.value)) {
+    nationPolicyStack.push(cloneDeep(nationPolicy.value));
+  }
+}

-      const lastPolicy = unwrap(last(this.nationPolicyStack));
-      if (!isEqual(lastPolicy, this.nationPolicy)) {
-        const { nationPolicy } = this;
-        this.nationPolicyStack.push(cloneDeep(nationPolicy));
-      }
-    },
-    calcPolicyValue(
-      title: keyof NationPolicy
-    ): number {
-      if (!(title in this.nationPolicy)) {
-        throw `${title}이 NationPolicy key가 아님`;
-      }
-      const policyValue = this.nationPolicy[title];
-      if(!isNumber(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);
+function calcPolicyValue(
+  title: keyof NationPolicy
+): number {
+  if (!(title in nationPolicy.value)) {
+    throw `${title}이 NationPolicy key가 아님`;
+  }
+  const policyValue = nationPolicy.value[title];
+  if (!isNumber(policyValue)) {
+    throw `${title}에 해당하는 값이 number가 아님`;
+  }
+  if (policyValue == 0) {
+    return zeroPolicy.value[title] as number;
+  }
+  return policyValue;
+}

-      this.toasts.push({
-        title: "되돌리기 완료",
-        content: "이전 설정으로 되돌렸습니다.",
-        type: "info",
-      });
-    },
-    async submitNationPriority() {
-      if (!confirm("저장할까요?")) {
-        return;
-      }
+function resetNationPriority() {
+  if (!confirm("초기 설정으로 되돌릴까요?")) {
+    return;
+  }
+  chiefActionUnused.value = [];
+  chiefActionPriority.value = staticValues.defaultNationPriority.map((id) => {
+    return { id };
+  });
+  toasts.info({
+    title: "초기화 완료",
+    body: "서버 초기값을 적용했습니다.설정 버튼을 누르면 반영됩니다.",
+  });
+}

-      try {
-        const response = await axios({
-          url: "j_set_npc_control.php",
-          responseType: "json",
-          method: "post",
-          data: convertFormData({
-            type: "nationPriority",
-            data: JSON.stringify(this.chiefActionPriority.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.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 });
+function rollbackNationPriority() {
+  if (!confirm("이전 설정으로 되돌릴까요?")) {
+    return;
+  }
+  let lastActions = unwrap(last(chiefActionStack));
+  while (chiefActionStack.length > 1) {
+    if (!isEqual(lastActions, chiefActionPriority.value)) {
+      break;
+    }
+    chiefActionStack.pop();
+    lastActions = unwrap(last(chiefActionStack));
+  }
+  const chiefActionKeys = new Set(staticValues.availableNationPriorityItems);
+  for (const { id } of lastActions) {
+    if (chiefActionKeys.has(id)) {
      chiefActionKeys.delete(id);
    }
-    const chiefActionUnused: IDItem<NPCChiefActions>[] =
-      convertIDArray(chiefActionKeys);
+  }
+  chiefActionPriority.value = cloneDeep(lastActions);
+  chiefActionUnused.value = convertIDArray(chiefActionKeys);

-    const generalActionPriority: IDItem<NPCGeneralActions>[] = [];
-    const generalActionKeys = new Set(availableGeneralActionPriorityItems);
-    for (const id of currentGeneralActionPriority) {
-      generalActionPriority.push({ id });
+  toasts.info({
+    title: "되돌리기 완료",
+    body: "이전 설정으로 되돌렸습니다.",
+  });
+}
+
+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 {
-      title: "NPC 정책",
-      toasts: <ToastType[]>[],
-      lastSetters,
+  toasts.info({
+    title: "되돌리기 완료",
+    body: "이전 설정으로 되돌렸습니다.",
+  });
+}

-      nationID,
-      defaultStatMax,
-      defaultStatNPCMax,
-      nationPolicy: cloneDeep(currentNationPolicy),
-      nationPolicyStack: [currentNationPolicy],
-      zeroPolicy,
+async function submitGeneralPriority() {
+  if (!confirm("저장할까요?")) {
+    return;
+  }

-      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,
-      chiefActionPriority,
-      chiefActionStack: [cloneDeep(chiefActionPriority)],
+  toasts.success({
+    title: "적용 완료",
+    body: "NPC 정책이 반영되었습니다.",
+  });

-      generalActionUnused,
-      generalActionPriority,
-      generalActionStack: [cloneDeep(generalActionPriority)],
-    };
-  },
-});
+  const lastActions = unwrap(last(generalActionStack));
+  if (!isEqual(lastActions, generalActionPriority.value)) {
+    generalActionStack.push(cloneDeep(generalActionPriority.value));
+  }
+}
 </script>

 <style>
@@ -1,8 +1,11 @@
 <template>
-  <MyToast v-model="toasts" />
-  <div id="container" class="pageNationBetting bg0">
+  <BContainer id="container" :toast="{ root: true }" 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 = ref<ToastType[]>([]);
+const toasts = unwrap(useToast());
 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){
-  toasts.value.push(msg);
+function addToast(msg: ToastType) {
+  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,
-        type: "danger",
+        body: e,
      });
    }
    console.error(e);
@@ -1,6 +1,5 @@
 <template>
-  <MyToast v-model="toasts" />
-  <div id="container" class="pageNationStratFinan bg0">
+  <BContainer :toast="{root: true}" 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,
-            type: "danger",
+            body: e,
          });
        }
        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,
-            type: "danger",
+            body: e,
          });
        }
        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,
-            type: "danger",
+            body: e,
          });
        }
        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,
-            type: "danger",
+            body: e,
          });
        }
        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,
-            type: "danger",
+            body: e,
          });
        }
        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,
-            type: "danger",
+            body: e,
          });
        }
        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,
-            type: "danger",
+            body: e,
          });
        }
        self.policy.blockScout = !self.policy.blockScout;
@@ -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: e,
-                type: "danger",
+                content: {
+                    title: "에러",
+                    body: e
+                },
+                options: {
+                    variant: 'danger',
+                }
            });
        }
        console.error(e);
@@ -388,9 +396,13 @@ function toggleCandidate(idx: number) {
    }
    else {
        emit('reqToast', {
-            title: '오류',
-            type: 'warning',
-            content: `이미 ${selectCnt}개를 선택했습니다.`,
+            content: {
+                title: '오류',
+                body: `이미 ${selectCnt}개를 선택했습니다.`,
+            },
+            options: {
+                variant: 'warning',
+            }
        });
        return;
    }
@@ -416,17 +428,25 @@ async function submitBet(): Promise<void> {
            amount,
        });
        emit('reqToast', {
-            title: '완료',
-            content: '베팅했습니다',
-            type: 'success'
+            content: {
+                title: '완료',
+                body: '베팅했습니다',
+            },
+            options: {
+                variant: 'success'
+            }
        });
        await loadBetting(bettingInfo.id);
    } catch (e) {
        if (isString(e)) {
            emit('reqToast', {
-                title: "에러",
-                content: e,
-                type: "danger",
+                content: {
+                    title: "에러",
+                    body: e,
+                },
+                options: {
+                    variant: "danger",
+                }
            });
        }
        console.error(e);
@@ -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>
@@ -148,10 +148,14 @@ export type IDItem<T> = {
 };

 export type ToastType = {
-    title?: string,
-    content?: string,
-    type?: Colors,
-    delay?: number,
+    content: {
+        title?: string,
+        body?: string,
+    },
+    options?: {
+        variant?: Colors,
+        delay?: number,
+    }
 }

 export const keyScreenMode = 'sam.screenMode';
@@ -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')
@@ -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');
@@ -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');
@@ -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));
-$zeroPolicy = new AutorunNationPolicy($general, ($gameStor->autorun_user)['options']??[], null, 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));

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