diff --git a/hwe/sammo/Command/Nation/che_국호변경.php b/hwe/sammo/Command/Nation/che_국호변경.php
index f0cfc747..fd7b36de 100644
--- a/hwe/sammo/Command/Nation/che_국호변경.php
+++ b/hwe/sammo/Command/Nation/che_국호변경.php
@@ -157,23 +157,4 @@ class che_국호변경 extends Command\NationCommand
         $general->applyDB($db);
         return true;
     }
-
-    public function getJSPlugins(): array
-    {
-        return [
-            'colorSelect'
-        ];
-    }
-
-
-    public function getForm(): string
-    {
-        ob_start();
-?>
-        나라의 이름을 바꿉니다. 황제가 된 후 1회 가능합니다.<br>
-        국명 : <input type='text' class='formInput' name="nationName" id="nationName" size='18' maxlength='18' style='color:white;background-color:black;'> <input type=button id="commonSubmit" value="<?= $this->getName() ?>"><br>
-        <br>
-<?php
-        return ob_get_clean();
-    }
 }
diff --git a/hwe/sammo/Command/Nation/che_급습.php b/hwe/sammo/Command/Nation/che_급습.php
index 25117d85..92534432 100644
--- a/hwe/sammo/Command/Nation/che_급습.php
+++ b/hwe/sammo/Command/Nation/che_급습.php
@@ -196,48 +196,43 @@ class che_급습 extends Command\NationCommand
         return true;
     }
 
-    public function getJSPlugins(): array
-    {
-        return [
-            'defaultSelectNationByMap'
-        ];
-    }
-
-    public function getForm(): string
+    public function exportJSVars(): array
     {
         $generalObj = $this->generalObj;
         $nationID = $generalObj->getNationID();
         $nationList = [];
         $testTurn = new LastTurn($this->getName(), null, $this->getPreReqTurn());
         foreach (getAllNationStaticInfo() as $destNation) {
-            if ($destNation['nation'] == $nationID) {
+            /*if ($destNation['nation'] == $nationID) {
                 continue;
-            }
+            }*/
 
             $testTurn->setArg(['destNationID' => $destNation['nation']]);
             $testCommand = new static($generalObj, $this->env, $testTurn, ['destNationID' => $destNation['nation']]);
-            if ($testCommand->hasFullConditionMet()) {
-                $destNation['availableCommand'] = true;
-            } else {
-                $destNation['availableCommand'] = false;
+
+            $nationTarget = [
+                'id' => $destNation['nation'],
+                'name' => $destNation['name'],
+                'color' => $destNation['color'],
+                'power' => $destNation['power'],
+            ];
+            if (!$testCommand->hasFullConditionMet()) {
+                $nationTarget['notAvailable'] = true;
+            }
+            if ($destNation['nation'] == $nationID) {
+                $nationTarget['notAvailable'] = true;
             }
 
-            $nationList[] = $destNation;
+            $nationList[] = $nationTarget;
         }
-
-        ob_start();
-?>
-        <?= \sammo\getMapHtml() ?><br>
-        선택된 국가에 급습을 발동합니다.<br>
-        선포, 전쟁중인 상대국에만 가능합니다.<br>
-        상대 국가를 목록에서 선택하세요.<br>
-        배경색은 현재 급습 불가능 국가는 <font color=red>붉은색</font>으로 표시됩니다.<br>
-        <select class='formInput' name="destNationID" id="destNationID" size='1' style='color:white;background-color:black;'>
-            <?php foreach ($nationList as $nation) : ?>
-                <option value='<?= $nation['nation'] ?>' style='color:<?= $nation['color'] ?>;<?= $nation['availableCommand'] ? '' : 'background-color:red;' ?>'>【<?= $nation['name'] ?> 】</option>
-            <?php endforeach; ?>
-            <input type=button id="commonSubmit" value="<?= $this->getName() ?>">
-    <?php
-        return ob_get_clean();
+        return [
+            'mapTheme' => \sammo\getMapTheme(),
+            'procRes' => [
+                'nations' => $nationList
+            ],
+        ];
     }
+
+
+
 }
diff --git a/hwe/sammo/Command/Nation/che_발령.php b/hwe/sammo/Command/Nation/che_발령.php
index 6efd3be9..536276df 100644
--- a/hwe/sammo/Command/Nation/che_발령.php
+++ b/hwe/sammo/Command/Nation/che_발령.php
@@ -187,57 +187,4 @@ class che_발령 extends Command\NationCommand
             ]
         ];
     }
-
-    public function getJSPlugins(): array
-    {
-        return [
-            'defaultSelectCityByMap'
-        ];
-    }
-
-    public function getForm(): string
-    {
-        $db = DB::db();
-
-        $nationID = $this->generalObj->getNationID();
-
-        $troops = Util::convertArrayToDict($db->query('SELECT * FROM troop WHERE nation=%i', $nationID), 'troop_leader');
-        $destRawGenerals = $db->query('SELECT no,name,officer_level,npc,gold,rice,leadership,strength,intel,city,crew,train,atmos,troop FROM general WHERE nation = %i ORDER BY npc,binary(name)', $nationID);
-        $destGeneralList = [];
-        foreach ($destRawGenerals as $destGeneral) {
-            $nameColor = \sammo\getNameColor($destGeneral['npc']);
-            if ($nameColor) {
-                $nameColor = " style='color:{$nameColor}'";
-            }
-
-            $name = $destGeneral['name'];
-            if ($destGeneral['officer_level'] >= 5) {
-                $name = "*{$name}*";
-            }
-
-            $destGeneral['name'] = $name;
-            $destGeneral['color'] = $nameColor;
-            $destGeneralList[] = $destGeneral;
-        }
-        ob_start();
-?>
-        <?= \sammo\getMapHtml() ?><br>
-        선택된 도시로 아국 장수를 발령합니다.<br>
-        아국 도시로만 발령이 가능합니다.<br>
-        목록을 선택하거나 도시를 클릭하세요.<br>
-        <select class='formInput' name="destGeneralID" id="destGeneralID" size='1' style='color:white;background-color:black;'>
-            <?php foreach ($destGeneralList as $destGeneral) : ?>
-                <option value='<?= $destGeneral['no'] ?>' <?= $destGeneral['color'] ?>><?= $destGeneral['name'] ?>[<?= CityConst::byID($destGeneral['city'])->name ?>]
-                    (<?= $destGeneral['leadership'] ?>/<?= $destGeneral['strength'] ?>/<?= $destGeneral['intel'] ?>)
-                    &lt;병<?= number_format($destGeneral['crew']) ?>/훈<?= $destGeneral['train'] ?>/사<?= $destGeneral['atmos'] ?>/<?= $destGeneral['troop'] ? $troops[$destGeneral['troop']]['name'] : '-' ?>&gt;
-                </option>
-            <?php endforeach; ?>
-        </select>
-        <select class='formInput' name="destCityID" id="destCityID" size='1' style='color:white;background-color:black;'>
-            <?= \sammo\optionsForCities() ?><br>
-        </select> <input type=button id="commonSubmit" value="<?= $this->getName() ?>"><br>
-        <br>
-<?php
-        return ob_get_clean();
-    }
 }
diff --git a/hwe/ts/processing/CitySelect.vue b/hwe/ts/processing/CitySelect.vue
index 07e043b2..59b1ad7f 100644
--- a/hwe/ts/processing/CitySelect.vue
+++ b/hwe/ts/processing/CitySelect.vue
@@ -16,9 +16,15 @@
     :maxHeight="400"
     :searchable="searchMode"
   >
-    <template v-slot:option="props">
-      {{ props.option.title }}
-      <span v-if="props.option.info">({{ props.option.info }})</span>
+    <template v-slot:option="props"
+      ><span
+        :style="{
+          color: props.option.notAvailable ? 'red' : undefined,
+        }"
+      >
+        {{ props.option.title }}
+        <span v-if="props.option.info">({{ props.option.info }})</span></span
+      >
     </template>
     <template v-slot:singleLabel="props">
       {{ props.option.simpleName }}
@@ -35,6 +41,7 @@ type SelectedCity = {
   title: string;
   simpleName: string;
   info?: string;
+  notAvailable?: boolean;
 };
 
 export default defineComponent({
@@ -54,9 +61,9 @@ export default defineComponent({
       const target = this.targets.get(val);
       this.selectedCity = target;
     },
-    selectedCity(val: SelectedCity){
-        this.$emit('update:modelValue', val.value);
-    }
+    selectedCity(val: SelectedCity) {
+      this.$emit("update:modelValue", val.value);
+    },
   },
   data() {
     const citiesForFind = [];
@@ -69,7 +76,7 @@ export default defineComponent({
         title: name,
         info: info,
         simpleName: name,
-        searchText: `${name} ${filteredTextH} ${filteredTextA}`
+        searchText: `${name} ${filteredTextH} ${filteredTextA}`,
       };
       if (value == this.modelValue) {
         selectedCity = obj;
diff --git a/hwe/ts/processing/Nation/che_국호변경.vue b/hwe/ts/processing/Nation/che_국호변경.vue
new file mode 100644
index 00000000..b6f7ac48
--- /dev/null
+++ b/hwe/ts/processing/Nation/che_국호변경.vue
@@ -0,0 +1,53 @@
+<template>
+  <TopBackBar :title="commandName" type="chief" />
+  <div class="bg0">
+    <div>
+      나라의 이름을 바꿉니다. 황제가 된 후 1회 가능합니다.<br />
+      국명 : <br />
+    </div>
+    <div class="row">
+      <div class="col-12 col-md-6">
+        <b-form-input v-model="destNationName"/>
+      </div>
+      <div class="col-12 col-md-6">
+        <b-button @click="submit">{{ commandName }}</b-button>
+      </div>
+    </div>
+  </div>
+  <BottomBar :title="commandName" />
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import { unwrap } from "@/util/unwrap";
+import { Args } from "@/processing/args";
+import TopBackBar from "@/components/TopBackBar.vue";
+import BottomBar from "@/components/BottomBar.vue";
+
+declare const commandName: string;
+
+export default defineComponent({
+  components: {
+    TopBackBar,
+    BottomBar,
+  },
+  setup() {
+    const destNationName = ref("");
+
+    async function submit(e: Event) {
+      const event = new CustomEvent<Args>("customSubmit", {
+        detail: {
+          nationName: destNationName.value,
+        },
+      });
+      unwrap(e.target).dispatchEvent(event);
+    }
+
+    return {
+      destNationName,
+      commandName,
+      submit,
+    };
+  },
+});
+</script>
diff --git a/hwe/ts/processing/Nation/che_급습.vue b/hwe/ts/processing/Nation/che_급습.vue
new file mode 100644
index 00000000..7f8b7209
--- /dev/null
+++ b/hwe/ts/processing/Nation/che_급습.vue
@@ -0,0 +1,100 @@
+<template>
+  <TopBackBar :title="commandName" type="chief" />
+  <div class="bg0">
+    <MapLegacyTemplate
+      :isDetailMap="false"
+      :clickableAll="true"
+      :neutralView="true"
+      :useCachedMap="true"
+      :mapTheme="mapTheme"
+      v-model="selectedCityObj"
+    />
+
+    <div>
+      선택된 국가에 급습을 발동합니다.<br />
+      선포, 전쟁중인 상대국에만 가능합니다.<br />
+      상대 국가를 목록에서 선택하세요.<br />
+      배경색은 현재 급습 불가능 국가는 <span style="color:red;">붉은색</span>으로
+      표시됩니다.<br />
+    </div>
+    <div class="row">
+      <div class="col-12 col-md-6">
+        <NationSelect :nations="nations" v-model="selectedNationID" />
+      </div>
+      <div class="col-12 col-md-6">
+        <b-button @click="submit">{{ commandName }}</b-button>
+      </div>
+    </div>
+  </div>
+  <BottomBar :title="commandName" />
+</template>
+
+<script lang="ts">
+import MapLegacyTemplate, {
+  MapCityParsed,
+} from "@/components/MapLegacyTemplate.vue";
+import NationSelect from "@/processing/NationSelect.vue";
+import { defineComponent, ref } from "vue";
+import { unwrap } from "@/util/unwrap";
+import { Args } from "@/processing/args";
+import TopBackBar from "@/components/TopBackBar.vue";
+import BottomBar from "@/components/BottomBar.vue";
+import {
+  procNationItem,
+  procNationList
+} from "../processingRes";
+declare const mapTheme: string;
+declare const currentNation: number;
+declare const commandName: string;
+
+declare const procRes: {
+  nations: procNationList,
+};
+
+export default defineComponent({
+  components: {
+    MapLegacyTemplate,
+    NationSelect,
+    TopBackBar,
+    BottomBar,
+  },
+  watch: {
+    selectedCityObj(city: MapCityParsed) {
+      if(!city.nationID){
+        return;
+      }
+      this.selectedNationID = city.nationID;
+    },
+  },
+  setup() {
+    const nations = new Map<number, procNationItem>();
+    for (const nationItem of procRes.nations) {
+      nations.set(nationItem.id, nationItem);
+    }
+
+    const selectedNationID = ref(currentNation);
+
+    function selectedNation(nationID: number) {
+      selectedNationID.value = nationID;
+    }
+
+    async function submit(e: Event) {
+      const event = new CustomEvent<Args>("customSubmit", {
+        detail: {
+          destNationID: selectedNationID.value,
+        },
+      });
+      unwrap(e.target).dispatchEvent(event);
+    }
+
+    return {
+      mapTheme: ref(mapTheme),
+      nations: ref(nations),
+      selectedNationID,
+      commandName,
+      selectedNation,
+      submit,
+    };
+  },
+});
+</script>
diff --git a/hwe/ts/processing/Nation/index.ts b/hwe/ts/processing/Nation/index.ts
index f192048a..38c83d85 100644
--- a/hwe/ts/processing/Nation/index.ts
+++ b/hwe/ts/processing/Nation/index.ts
@@ -1,3 +1,5 @@
 export { default as che_국기변경 } from "./che_국기변경.vue";
+export { default as che_국호변경 } from "./che_국호변경.vue";
+export { default as che_급습 } from "./che_급습.vue";
 export { default as che_발령 } from "./che_발령.vue";
 export { default as che_포상 } from "./che_포상.vue";
\ No newline at end of file
diff --git a/hwe/ts/processing/NationSelect.vue b/hwe/ts/processing/NationSelect.vue
new file mode 100644
index 00000000..4bc6ba17
--- /dev/null
+++ b/hwe/ts/processing/NationSelect.vue
@@ -0,0 +1,100 @@
+<template>
+  <v-multiselect
+    v-model="selectedNation"
+    :allow-empty="false"
+    :options="forFind"
+    :group-select="false"
+    label="searchText"
+    track-by="value"
+    :show-labels="false"
+    selectLabel="선택(엔터)"
+    selectGroupLabel=""
+    selectedLabel="선택됨"
+    deselectLabel="해제(엔터)"
+    deselectGroupLabel=""
+    placeholder="국가 선택"
+    :maxHeight="400"
+    :searchable="searchMode"
+  >
+    <template v-slot:option="props">
+      <span
+        :style="{
+          color: props.option.notAvailable ? 'red' : undefined,
+        }"
+      >
+        {{ props.option.title }}
+        <span v-if="props.option.info">({{ props.option.info }})</span>
+        {{ props.option.notAvailable ? "(불가)" : undefined }}
+      </span>
+    </template>
+    <template v-slot:singleLabel="props">
+      {{ props.option.simpleName }}
+    </template>
+  </v-multiselect>
+</template>
+<script lang="ts">
+import { filter초성withAlphabet } from "@/util/filter초성withAlphabet";
+import { defineComponent, PropType } from "vue";
+import { procNationItem } from "./processingRes";
+
+type SelectedNation = {
+  value: number;
+  searchText: string;
+  title: string;
+  simpleName: string;
+  info?: string;
+  notAvailable?: boolean;
+};
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Number,
+      required: true,
+    },
+    nations: {
+      type: Map as PropType<Map<number, procNationItem>>,
+      required: true,
+    },
+  },
+  emits: ["update:modelValue"],
+  watch: {
+    modelValue(val: number) {
+      const target = this.targets.get(val);
+      this.selectedNation = target;
+    },
+    selectedNation(val: SelectedNation) {
+      this.$emit("update:modelValue", val.value);
+    },
+  },
+  data() {
+    const forFind = [];
+    const targets = new Map<number, SelectedNation>();
+    let selectedNation;
+    for (const nationItem of this.nations.values()) {
+      const [filteredTextH, filteredTextA] = filter초성withAlphabet(
+        nationItem.name
+      );
+      const obj: SelectedNation = {
+        value: nationItem.id,
+        title: nationItem.name,
+        info: nationItem.info,
+        simpleName: nationItem.name,
+        notAvailable: nationItem.notAvailable,
+        searchText: `${nationItem.name} ${filteredTextH} ${filteredTextA}`,
+      };
+      if (nationItem.id == this.modelValue) {
+        selectedNation = obj;
+      }
+      forFind.push(obj);
+      targets.set(nationItem.id, obj);
+    }
+    return {
+      selectedNation,
+      searchMode: true,
+      forFind,
+      targets,
+    };
+  },
+});
+</script>
diff --git a/hwe/ts/processing/processingRes.ts b/hwe/ts/processing/processingRes.ts
index ea380147..23e4980c 100644
--- a/hwe/ts/processing/processingRes.ts
+++ b/hwe/ts/processing/processingRes.ts
@@ -51,4 +51,16 @@ export type procGeneralRawItemList = procGeneralRawItem[];
 
 export function convertGeneralList(keys: procGeneralKeyList, rawList: procGeneralRawItemList): procGeneralList{
     return combineArray(rawList, keys) as procGeneralList;
-}
\ No newline at end of file
+}
+
+
+export type procNationItem = {
+    id: number,
+    name: string,
+    color: string,
+    power: number,
+    info?: string,
+    notAvailable?: boolean,
+};
+
+export type procNationList = procNationItem[];
\ No newline at end of file