diff --git a/hwe/sammo/Command/Nation/che_물자원조.php b/hwe/sammo/Command/Nation/che_물자원조.php
index e77cc6e1..7687d68c 100644
--- a/hwe/sammo/Command/Nation/che_물자원조.php
+++ b/hwe/sammo/Command/Nation/che_물자원조.php
@@ -272,7 +272,7 @@ class che_물자원조 extends Command\NationCommand
 
             //TODO: 물자원조 자체가 가능한지도 검사?
 
-            if($nationTarget['id'] == $generalObj->getNationID()){
+            if ($nationTarget['id'] == $generalObj->getNationID()) {
                 $nationTarget['notAvailable'] = true;
             }
 
@@ -280,9 +280,9 @@ class che_물자원조 extends Command\NationCommand
         }
         $currentNationLevel = getNationStaticInfo($this->generalObj->getNationID())['level'];
 
-        $nationLevelText = [];
+        $levelInfo = [];
         foreach (\sammo\getNationLevelList() as $level => [$levelText,,]) {
-            $nationLevelText[$level] = $levelText;
+            $levelInfo[$level] = ['text' => $levelText, 'amount' => $level * GameConst::$coefAidAmount];
         }
 
         $amountGuide = [];
@@ -295,52 +295,11 @@ class che_물자원조 extends Command\NationCommand
             'procRes' => [
                 'nationList' => $nationList,
                 'currentNationLevel' => $currentNationLevel,
-                'nationLevelText' => $nationLevelText,
+                'levelInfo' => $levelInfo,
                 'minAmount' => 1000,
                 'maxAmount' => Util::array_last($amountGuide),
                 'amountGuide' => $amountGuide,
             ],
         ];
     }
-
-    public function getJSPlugins(): array
-    {
-        return [
-            'defaultSelectNationByMap'
-        ];
-    }
-
-
-    public function getForm(): string
-    {
-        $currentNationLevel = getNationStaticInfo($this->generalObj->getNationID())['level'];
-        ob_start();
-?>
-        <?= \sammo\getMapHtml() ?><br>
-        타국에게 원조합니다.<br>
-        작위별로 금액 제한이 있습니다.<br>
-        <?php foreach (\sammo\getNationLevelList() as $level => [$levelText,,]) : ?>
-            <?= StringUtil::padStringAlignRight($levelText, 10) ?>: <?= number_format($level * GameConst::$coefAidAmount) ?><br>
-        <?php endforeach; ?>
-        원조할 국가를 목록에서 선택하세요.<br>
-        <select class='formInput' name="destNationID" id="destNationID" size='1' style='color:white;background-color:black;'>
-            <?php foreach (getAllNationStaticInfo() as $nation) : ?>
-                <option value='<?= $nation['nation'] ?>' style='color:<?= $nation['color'] ?>;'>【<?= $nation['name'] ?> 】</option>
-            <?php endforeach; ?>
-        </select>
-        국고 <select class='formInput amountList' name="amountList[]" size='1' style='color:white;background-color:black;'>
-            <?php foreach (Util::range($currentNationLevel + 1) as $nationLevel) : ?>
-                <option value='<?= $nationLevel * GameConst::$coefAidAmount ?>'><?= $nationLevel * GameConst::$coefAidAmount ?></option>
-            <?php endforeach; ?>
-        </select>
-        병량 <select class='formInput amountList' name="amountList[]" size='1' style='color:white;background-color:black;'>
-            <?php foreach (Util::range($currentNationLevel + 1) as $nationLevel) : ?>
-                <option value='<?= $nationLevel * GameConst::$coefAidAmount ?>'><?= $nationLevel * GameConst::$coefAidAmount ?></option>
-            <?php endforeach; ?>
-        </select>
-        <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 ba54b61c..2848ea24 100644
--- a/hwe/sammo/Command/Nation/che_불가침파기제의.php
+++ b/hwe/sammo/Command/Nation/che_불가침파기제의.php
@@ -170,6 +170,44 @@ class che_불가침파기제의 extends Command\NationCommand{
         return true;
     }
 
+    public function exportJSVars(): array
+    {
+        $generalObj = $this->generalObj;
+        $nationID = $generalObj->getNationID();
+        $nationList = [];
+
+        $db = DB::db();
+        $diplomacyStatus = Util::convertArrayToDict(
+            $db->query('SELECT * FROM diplomacy WHERE me = %i', $nationID),
+            'you'
+        );
+
+        foreach (getAllNationStaticInfo() as $destNation) {
+            $nationTarget = [
+                'id' => $destNation['nation'],
+                'name' => $destNation['name'],
+                'color' => $destNation['color'],
+                'power' => $destNation['power'],
+            ];
+
+            if($diplomacyStatus[$destNation['nation']]['state'] != 7){
+                $nationTarget['notAvailable'] = true;
+            }
+            if ($destNation['id'] == $nationID) {
+                $nationTarget['notAvailable'] = true;
+            }
+
+            $nationList[] = $nationTarget;
+        }
+        return [
+            'mapTheme' => \sammo\getMapTheme(),
+            'procRes' => [
+                'nationList' => $nationList,
+                'startYear' => $this->env['startyear'],
+            ],
+        ];
+    }
+
     public function getJSPlugins(): array
     {
         return [
diff --git a/hwe/sammo/Command/Nation/che_이호경식.php b/hwe/sammo/Command/Nation/che_이호경식.php
index 563e6fad..5d8cc06f 100644
--- a/hwe/sammo/Command/Nation/che_이호경식.php
+++ b/hwe/sammo/Command/Nation/che_이호경식.php
@@ -199,48 +199,36 @@ 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) {
-                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['id'] == $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' => [
+                'nationList' => $nationList,
+                'startYear' => $this->env['startyear'],
+            ],
+        ];
     }
 }
diff --git a/hwe/sammo/Command/Nation/che_종전제의.php b/hwe/sammo/Command/Nation/che_종전제의.php
index 6e26fc6a..7c6d8ea2 100644
--- a/hwe/sammo/Command/Nation/che_종전제의.php
+++ b/hwe/sammo/Command/Nation/che_종전제의.php
@@ -168,57 +168,36 @@ 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();
-
-        $db = DB::db();
-        $diplomacyStatus = Util::convertArrayToDict(
-            $db->query('SELECT * FROM diplomacy WHERE me = %i', $nationID),
-            'you'
-        );
-
         $nationList = [];
-        foreach(getAllNationStaticInfo() as $destNation){
-            if($destNation['nation'] == $nationID){
-                continue;
+        $testTurn = new LastTurn($this->getName(), null, $this->getPreReqTurn());
+        foreach (getAllNationStaticInfo() as $destNation) {
+            $testCommand = new static($generalObj, $this->env, $testTurn, ['destNationID' => $destNation['nation']]);
+
+            $nationTarget = [
+                'id' => $destNation['nation'],
+                'name' => $destNation['name'],
+                'color' => $destNation['color'],
+                'power' => $destNation['power'],
+            ];
+            if (!$testCommand->hasFullConditionMet()) {
+                $nationTarget['notAvailable'] = true;
+            }
+            if ($destNation['id'] == $nationID) {
+                $nationTarget['notAvailable'] = true;
             }
 
-            if(!in_array($diplomacyStatus[$destNation['nation']]['state'], [0, 1])){
-                $destNation['cssBgColor'] = 'background-color:red;';
-            }
-            else{
-                $destNation['cssBgColor'] = '';
-            }
-
-            $nationList[] = $destNation;
+            $nationList[] = $nationTarget;
         }
-
-        ob_start();
-?>
-<?=\sammo\getMapHtml()?><br>
-전쟁중인 국가에 종전을 제의합니다.<br>
-제의할 국가를 목록에서 선택하세요.<br>
-배경색은 현재 제의가 불가능한 국가는 <font color=red>붉은색</font>으로 표시됩니다.<br>
-<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['cssBgColor']?>'
-    >【<?=$nation['name']?> 】</option>
-<?php endforeach; ?>
-</select>에게
-<input type=button id="commonSubmit" value="<?=$this->getName()?>">
-<?php
-        return ob_get_clean();
+        return [
+            'mapTheme' => \sammo\getMapTheme(),
+            'procRes' => [
+                'nationList' => $nationList,
+                'startYear' => $this->env['startyear'],
+            ],
+        ];
     }
 }
\ No newline at end of file
diff --git a/hwe/sammo/Command/Nation/che_피장파장.php b/hwe/sammo/Command/Nation/che_피장파장.php
index 20fabea0..0d45620d 100644
--- a/hwe/sammo/Command/Nation/che_피장파장.php
+++ b/hwe/sammo/Command/Nation/che_피장파장.php
@@ -1,16 +1,21 @@
 <?php
+
 namespace sammo\Command\Nation;
 
 use \sammo\{
-    DB, Util, JosaUtil,
-    General, DummyGeneral,
+    DB,
+    Util,
+    JosaUtil,
+    General,
+    DummyGeneral,
     ActionLogger,
     GameConst,
     LastTurn,
     GameUnitConst,
     Command,
     KVStorage,
-    Message, MessageTarget
+    Message,
+    MessageTarget
 };
 
 use function \sammo\buildNationCommandClass;
@@ -20,48 +25,51 @@ use function \sammo\getNationStaticInfo;
 use \sammo\Constraint\Constraint;
 use \sammo\Constraint\ConstraintHelper;
 
-class che_피장파장 extends Command\NationCommand{
+class che_피장파장 extends Command\NationCommand
+{
     static protected $actionName = '피장파장';
     static public $reqArg = true;
     static public $delayCnt = 60;
 
-    protected function argTest():bool{
-        if($this->arg === null){
+    protected function argTest(): bool
+    {
+        if ($this->arg === null) {
             return false;
         }
         //NOTE: 멸망 직전에 턴을 넣을 수 있으므로, 존재하지 않는 국가여도 argTest에서 바로 탈락시키지 않음
-        if(!key_exists('destNationID', $this->arg)){
+        if (!key_exists('destNationID', $this->arg)) {
             return false;
         }
-        if(!key_exists('commandType', $this->arg)){
+        if (!key_exists('commandType', $this->arg)) {
             return false;
         }
         $destNationID = $this->arg['destNationID'];
         $commandType = $this->arg['commandType'];
 
-        if(!is_int($destNationID)){
+        if (!is_int($destNationID)) {
             return false;
         }
-        if($destNationID < 1){
+        if ($destNationID < 1) {
             return false;
         }
 
-        if(!is_string($commandType)){
+        if (!is_string($commandType)) {
             return false;
         }
-        if(!in_array($commandType, GameConst::$availableChiefCommand['전략'])){
+        if (!in_array($commandType, GameConst::$availableChiefCommand['전략'])) {
             return false;
         }
 
 
         $this->arg = [
-            'destNationID'=>$destNationID,
-            'commandType'=>$commandType
+            'destNationID' => $destNationID,
+            'commandType' => $commandType
         ];
         return true;
     }
 
-    protected function init(){
+    protected function init()
+    {
         $general = $this->generalObj;
 
         $env = $this->env;
@@ -69,7 +77,7 @@ class che_피장파장 extends Command\NationCommand{
         $this->setCity();
         $this->setNation();
 
-        $this->minConditionConstraints=[
+        $this->minConditionConstraints = [
             ConstraintHelper::OccupiedCity(),
             ConstraintHelper::BeChief(),
         ];
@@ -79,8 +87,8 @@ class che_피장파장 extends Command\NationCommand{
     {
         $this->setDestNation($this->arg['destNationID'], null);
 
-        if($this->getNationID() == 0){
-            $this->fullConditionConstraints=[
+        if ($this->getNationID() == 0) {
+            $this->fullConditionConstraints = [
                 ConstraintHelper::OccupiedCity()
             ];
             return;
@@ -90,14 +98,14 @@ class che_피장파장 extends Command\NationCommand{
 
         $currYearMonth = Util::joinYearMonth($this->env['year'], $this->env['month']);
         $nextAvailableTurn = $cmd->getNextAvailableTurn();
-        if($currYearMonth < $nextAvailableTurn){
-            $this->fullConditionConstraints=[
+        if ($currYearMonth < $nextAvailableTurn) {
+            $this->fullConditionConstraints = [
                 ConstraintHelper::AlwaysFail('해당 전략을 아직 사용할 수 없습니다')
             ];
             return;
         }
 
-        $this->fullConditionConstraints=[
+        $this->fullConditionConstraints = [
             ConstraintHelper::OccupiedCity(),
             ConstraintHelper::BeChief(),
             ConstraintHelper::ExistsDestNation(),
@@ -108,35 +116,41 @@ class che_피장파장 extends Command\NationCommand{
         ];
     }
 
-    public function getCommandDetailTitle():string{
+    public function getCommandDetailTitle(): string
+    {
         $name = $this->getName();
-        $reqTurn = $this->getPreReqTurn()+1;
+        $reqTurn = $this->getPreReqTurn() + 1;
 
         return "{$name}/{$reqTurn}턴(대상 재사용 대기 {$this->getTargetPostReqTurn()})";
     }
 
-    public function getCost():array{
+    public function getCost(): array
+    {
         return [0, 0];
     }
 
-    public function getPreReqTurn():int{
+    public function getPreReqTurn(): int
+    {
         return 1;
     }
 
-    public function getPostReqTurn():int{
+    public function getPostReqTurn(): int
+    {
         return 0;
     }
 
-    public function getTargetPostReqTurn():int{
+    public function getTargetPostReqTurn(): int
+    {
         $genCount = Util::valueFit($this->nation['gennum'], GameConst::$initialNationGenLimit);
-        $nextTerm = Util::round(sqrt($genCount*2)*10);
+        $nextTerm = Util::round(sqrt($genCount * 2) * 10);
 
         $nextTerm = $this->generalObj->onCalcStrategic($this->getName(), 'delay', $nextTerm);
         $nextTerm = Util::valueFit($nextTerm, Util::round(static::$delayCnt * 1.2));
         return $nextTerm;
     }
 
-    public function getBrief():string{
+    public function getBrief(): string
+    {
         $commandName = $this->getName();
         $cmd = buildNationCommandClass($this->arg['commandType'], $this->generalObj, $this->env, new LastTurn());
         $targetCommandName = $cmd->getName();
@@ -145,8 +159,9 @@ class che_피장파장 extends Command\NationCommand{
     }
 
 
-    public function run():bool{
-        if(!$this->hasFullConditionMet()){
+    public function run(): bool
+    {
+        if (!$this->hasFullConditionMet()) {
             throw new \RuntimeException('불가능한 커맨드를 강제로 실행 시도');
         }
 
@@ -187,7 +202,7 @@ class che_피장파장 extends Command\NationCommand{
         $broadcastMessage = "<Y>{$generalName}</>{$josaYi} <G><b>{$destNationName}</b></>에 <G><b>{$cmd->getName()}</b></> 전략의 <M>{$commandName}</>{$josaUl} 발동하였습니다.";
 
         $nationGeneralList = $db->queryFirstColumn('SELECT no FROM general WHERE nation=%i AND no != %i', $nationID, $generalID);
-        foreach($nationGeneralList as $nationGeneralID){
+        foreach ($nationGeneralList as $nationGeneralID) {
             $nationGeneralLogger = new ActionLogger($nationGeneralID, $nationID, $year, $month);
             $nationGeneralLogger->pushGeneralActionLog($broadcastMessage, ActionLogger::PLAIN);
             $nationGeneralLogger->flush();
@@ -198,7 +213,7 @@ class che_피장파장 extends Command\NationCommand{
         $broadcastMessage = "아국에 <G><b>{$cmd->getName()}</b></> 전략의 <M>{$commandName}</>{$josaYiCommand} 발동되었습니다.";
 
         $destNationGeneralList = $db->queryFirstColumn('SELECT no FROM general WHERE nation=%i AND no != %i', $destNationID, $generalID);
-        foreach($destNationGeneralList as $destNationGeneralID){
+        foreach ($destNationGeneralList as $destNationGeneralID) {
             $destNationGeneralLogger = new ActionLogger($destNationGeneralID, $destNationID, $year, $month);
             $destNationGeneralLogger->pushGeneralActionLog($broadcastMessage, ActionLogger::PLAIN);
             $destNationGeneralLogger->flush();
@@ -222,79 +237,55 @@ 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){
-                continue;
+        foreach (getAllNationStaticInfo() as $destNation) {
+            $testCommand = new static($generalObj, $this->env, $testTurn, ['destNationID' => $destNation['nation']]);
+
+            $nationTarget = [
+                'id' => $destNation['nation'],
+                'name' => $destNation['name'],
+                'color' => $destNation['color'],
+                'power' => $destNation['power'],
+            ];
+            if (!$testCommand->hasFullConditionMet()) {
+                $nationTarget['notAvailable'] = true;
+            }
+            if ($destNation['id'] == $nationID) {
+                $nationTarget['notAvailable'] = true;
             }
 
-            $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;
-            }
-
-            $nationList[] = $destNation;
+            $nationList[] = $nationTarget;
         }
 
+
         $availableCommandTypeList = [];
         $currYearMonth = Util::joinYearMonth($this->env['year'], $this->env['month']);
-        foreach(GameConst::$availableChiefCommand['전략'] as $commandType){
+        foreach (GameConst::$availableChiefCommand['전략'] as $commandType) {
             $cmd = buildNationCommandClass($commandType, $generalObj, $this->env, new LastTurn());
             $cmdName = $cmd->getName();
             $remainTurn = 0;
             $nextAvailableTurn = $cmd->getNextAvailableTurn();
 
-            if($nextAvailableTurn !== null && $currYearMonth < $nextAvailableTurn){
+            if ($nextAvailableTurn !== null && $currYearMonth < $nextAvailableTurn) {
                 $remainTurn = $nextAvailableTurn - $currYearMonth;
             }
-            $availableCommandTypeList[$commandType] = [$cmdName, $remainTurn];
+            $availableCommandTypeList[$commandType] = ['name' => $cmdName, 'remainTurn' => $remainTurn];
         }
 
-        ob_start();
-?>
-<?=\sammo\getMapHtml()?><br>
-선택된 국가에 피장파장을 발동합니다.<br>
-지정한 전략을 상대국이 <?=static::$delayCnt?>턴 동안 사용할 수 없게됩니다.<br>
-대신 아국은 지정한 전략을<?=$this->getTargetPostReqTurn()?>턴 동안 사용할 수 없습니다.<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; ?>
-</select>에
-<select class='formInput' name="commandType" id="commandType" size='1' style='color:white;background-color:black;'>
-<?php foreach($availableCommandTypeList as $commandType=>[$cmdName, $cmdRemainTurn]):
-    /** @var \sammo\Command\NationCommand $cmdObj */
-?>
-    <option
-        value='<?=$commandType?>'
-        style='color:white;<?=$cmdRemainTurn?'background-color:red;':''?>'
-    ><?=$cmdName?><?=$cmdRemainTurn?"({$cmdRemainTurn}턴 뒤)":''?></option>
-<?php endforeach; ?>
-</select> 전략을
-<input type=button id="commonSubmit" value="<?=$this->getName()?>">
-<?php
-        return ob_get_clean();
+        return [
+            'mapTheme' => \sammo\getMapTheme(),
+            'procRes' => [
+                'nationList' => $nationList,
+                'startYear' => $this->env['startyear'],
+                'delayCnt' => static::$delayCnt,
+                'postReqTurn' => $this->getTargetPostReqTurn(),
+                'availableCommandTypeList' => $availableCommandTypeList
+            ],
+        ];
     }
-}
\ No newline at end of file
+}
diff --git a/hwe/ts/processing/General/che_건국.vue b/hwe/ts/processing/General/che_건국.vue
index f5f49147..970b2fc7 100644
--- a/hwe/ts/processing/General/che_건국.vue
+++ b/hwe/ts/processing/General/che_건국.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script lang="ts">
-import ColorSelect from "@/processing/ColorSelect.vue";
+import ColorSelect from "@/processing/SelectColor.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
 import { Args } from "@/processing/args";
diff --git a/hwe/ts/processing/General/che_군량매매.vue b/hwe/ts/processing/General/che_군량매매.vue
index b6384f6c..34ee9825 100644
--- a/hwe/ts/processing/General/che_군량매매.vue
+++ b/hwe/ts/processing/General/che_군량매매.vue
@@ -12,9 +12,9 @@
           <b-button :pressed="!buyRice" @click="buyRice=false">팜</b-button>
         </b-button-group>
       </div>
-      <div class="col-10 col-md-4">
+      <div class="col-6 col-md-4">
         금액 :
-        <AmountSelect
+        <SelectAmount
           :amountGuide="amountGuide"
           v-model="amount"
           :maxAmount="maxAmount"
@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts">
-import AmountSelect from "@/processing/AmountSelect.vue";
+import SelectAmount from "@/processing/SelectAmount.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
 import { Args } from "@/processing/args";
@@ -46,7 +46,7 @@ declare const procRes: {
 
 export default defineComponent({
   components: {
-    AmountSelect,
+    SelectAmount,
     TopBackBar,
     BottomBar,
   },
diff --git a/hwe/ts/processing/General/che_등용.vue b/hwe/ts/processing/General/che_등용.vue
index 192ea2eb..9a22ff35 100644
--- a/hwe/ts/processing/General/che_등용.vue
+++ b/hwe/ts/processing/General/che_등용.vue
@@ -9,7 +9,7 @@
     <div class="row">
       <div class="col-12 col-md-6">
         장수 :
-        <GeneralSelect
+        <SelectGeneral
           :generals="generalList"
           :groupByNation="nationList"
           :textHelper="textHelpGeneral"
@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import GeneralSelect from "@/processing/GeneralSelect.vue";
+import SelectGeneral from "@/processing/SelectGeneral.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
 import { Args } from "@/processing/args";
@@ -50,7 +50,7 @@ declare const procRes: {
 
 export default defineComponent({
   components: {
-    GeneralSelect,
+    SelectGeneral,
     TopBackBar,
     BottomBar,
   },
diff --git a/hwe/ts/processing/General/che_선양.vue b/hwe/ts/processing/General/che_선양.vue
index e493576c..eeafe81a 100644
--- a/hwe/ts/processing/General/che_선양.vue
+++ b/hwe/ts/processing/General/che_선양.vue
@@ -13,7 +13,7 @@
     <div class="row">
       <div class="col-12 col-md-6">
         장수 :
-        <GeneralSelect
+        <SelectGeneral
           :generals="generalList"
           :textHelper="textHelpGeneral"
           v-model="selectedGeneralID"
@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts">
-import GeneralSelect from "@/processing/GeneralSelect.vue";
+import SelectGeneral from "@/processing/SelectGeneral.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
 import { Args } from "@/processing/args";
@@ -50,7 +50,7 @@ declare const procRes: {
 
 export default defineComponent({
   components: {
-    GeneralSelect,
+    SelectGeneral,
     TopBackBar,
     BottomBar,
   },
diff --git a/hwe/ts/processing/General/che_임관.vue b/hwe/ts/processing/General/che_임관.vue
index b2771b63..d207f60b 100644
--- a/hwe/ts/processing/General/che_임관.vue
+++ b/hwe/ts/processing/General/che_임관.vue
@@ -10,7 +10,7 @@
     <div class="row">
       <div class="col-6 col-md-3">
         국가 :
-        <NationSelect :nations="nationList" v-model="selectedNationID" />
+        <SelectNation :nations="nationList" v-model="selectedNationID" />
       </div>
       <div class="col-4 col-md-2 d-grid">
         <b-button @click="submit">{{ commandName }}</b-button>
@@ -47,7 +47,7 @@
 </template>
 
 <script lang="ts">
-import NationSelect from "@/processing/NationSelect.vue";
+import SelectNation from "@/processing/SelectNation.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
 import { Args } from "@/processing/args";
@@ -63,7 +63,7 @@ declare const procRes: {
 
 export default defineComponent({
   components: {
-    NationSelect,
+    SelectNation,
     TopBackBar,
     BottomBar,
   },
diff --git a/hwe/ts/processing/General/che_장수대상임관.vue b/hwe/ts/processing/General/che_장수대상임관.vue
index f1ab5e90..89ee3768 100644
--- a/hwe/ts/processing/General/che_장수대상임관.vue
+++ b/hwe/ts/processing/General/che_장수대상임관.vue
@@ -10,7 +10,7 @@
     <div class="row">
       <div class="col-12 col-md-6">
         장수 :
-        <GeneralSelect
+        <SelectGeneral
           :generals="generalList"
           :groupByNation="nationList"
           :textHelper="textHelpGeneral"
@@ -51,7 +51,7 @@
 </template>
 
 <script lang="ts">
-import GeneralSelect from "@/processing/GeneralSelect.vue";
+import SelectGeneral from "@/processing/SelectGeneral.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
 import { Args } from "@/processing/args";
@@ -77,7 +77,7 @@ declare const procRes: {
 
 export default defineComponent({
   components: {
-    GeneralSelect,
+    SelectGeneral,
     TopBackBar,
     BottomBar,
   },
diff --git a/hwe/ts/processing/General/index.ts b/hwe/ts/processing/General/index.ts
index d1e4a7b0..04828e57 100644
--- a/hwe/ts/processing/General/index.ts
+++ b/hwe/ts/processing/General/index.ts
@@ -7,35 +7,34 @@ import { default as che_임관 } from "./che_임관.vue";
 import { default as che_장수대상임관 } from "./che_장수대상임관.vue";
 import { default as che_징병 } from "./che_징병.vue";
 
-import { default as CityProcess } from "./CityProcess.vue";
+import { default as ProcessCity } from "../ProcessCity.vue";
 
 
 //TODO: 자주 쓰는 녀석들은 Slot으로 변경
 
-export const commandMap: Record<string, typeof CityProcess> = {
-    che_강행: CityProcess,
+export const commandMap: Record<string, typeof ProcessCity> = {
+    che_강행: ProcessCity,
     che_군량매매,
     che_건국,
     che_등용,
     che_모병: che_징병,
-    che_선동: CityProcess,
+    che_선동: ProcessCity,
     che_선양,
-    che_이동: CityProcess,
+    che_이동: ProcessCity,
     che_임관,
     che_장수대상임관,
     che_징병,
-    che_첩보: CityProcess,
-    che_출병: CityProcess,
-    che_탈취: CityProcess,
-    che_파괴: CityProcess,
-    che_화계: CityProcess,
+    che_첩보: ProcessCity,
+    che_출병: ProcessCity,
+    che_탈취: ProcessCity,
+    che_파괴: ProcessCity,
+    che_화계: ProcessCity,
 }
 
 /*
 - 항목들
 장수/금쌀/분량 - 증여(포상 이식)
 금쌀/분량 - 헌납(군량매매 또는 포상 수정)
-도시 - 첩보, 계략(화계 등)
 
 고유 양식 - 숙련전환, 장비매매
 
diff --git a/hwe/ts/processing/Nation/che_국기변경.vue b/hwe/ts/processing/Nation/che_국기변경.vue
index 539ae3fd..c0fdf098 100644
--- a/hwe/ts/processing/Nation/che_국기변경.vue
+++ b/hwe/ts/processing/Nation/che_국기변경.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts">
-import ColorSelect from "@/processing/ColorSelect.vue";
+import ColorSelect from "@/processing/SelectColor.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
 import { Args } from "@/processing/args";
diff --git a/hwe/ts/processing/Nation/che_몰수.vue b/hwe/ts/processing/Nation/che_몰수.vue
index 1c58e190..34877a2c 100644
--- a/hwe/ts/processing/Nation/che_몰수.vue
+++ b/hwe/ts/processing/Nation/che_몰수.vue
@@ -11,7 +11,7 @@
     <div class="row">
       <div class="col-12 col-md-5">
         장수 :
-        <GeneralSelect
+        <SelectGeneral
           :cities="citiesMap"
           :generals="generalList"
           :troops="troops"
@@ -26,9 +26,9 @@
           <b-button :pressed="!isGold" @click="isGold=false">쌀</b-button>
         </b-button-group>
       </div>
-      <div class="col-10 col-md-4">
+      <div class="col-6 col-md-4">
         금액 :
-        <AmountSelect
+        <SelectAmount
           :amountGuide="amountGuide"
           v-model="amount"
           :maxAmount="maxAmount"
@@ -44,8 +44,8 @@
 </template>
 
 <script lang="ts">
-import GeneralSelect from "@/processing/GeneralSelect.vue";
-import AmountSelect from "@/processing/AmountSelect.vue";
+import SelectGeneral from "@/processing/SelectGeneral.vue";
+import SelectAmount from "@/processing/SelectAmount.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
 import { Args } from "@/processing/args";
@@ -72,8 +72,8 @@ declare const procRes: {
 
 export default defineComponent({
   components: {
-    GeneralSelect,
-    AmountSelect,
+    SelectGeneral,
+    SelectAmount,
     TopBackBar,
     BottomBar,
   },
diff --git a/hwe/ts/processing/Nation/che_물자원조.vue b/hwe/ts/processing/Nation/che_물자원조.vue
index eeff6f85..caee85ff 100644
--- a/hwe/ts/processing/Nation/che_물자원조.vue
+++ b/hwe/ts/processing/Nation/che_물자원조.vue
@@ -11,17 +11,38 @@
     />
     <div>
       타국에게 원조합니다.<br />
-      작위별로 금액 제한이 있습니다.<br />
+      작위별로 금액 제한이 있습니다.<br /><br />
+      <ul>
+        <template v-for="({ text, amount }, level) in levelInfo" :key="level">
+          <li>
+            <span
+              :style="{
+                width: '4em',
+                display: 'inline-block',
+                ...(level != currentNationLevel
+                  ? {}
+                  : {
+                      textDecoration: 'underline',
+                      fontWeight: 'bold',
+                    }),
+              }"
+              >{{ text }}</span
+            >: {{ amount.toLocaleString() }}
+          </li>
+        </template>
+      </ul>
+      <br />
+      원조할 국가를 목록에서 선택하세요.<br /><br />
     </div>
     <div class="row">
       <div class="col-6 col-md-3">
         국가 :
-        <NationSelect :nations="nationList" v-model="selectedNationID" />
+        <SelectNation :nations="nationList" v-model="selectedNationID" />
       </div>
       <div class="col-6 col-md-0"></div>
-      <div class="col-10 col-md-5">
+      <div class="col-8 col-md-4">
         금 :
-        <AmountSelect
+        <SelectAmount
           :amountGuide="amountGuide"
           v-model="goldAmount"
           :step="10"
@@ -29,9 +50,9 @@
           :minAmount="minAmount"
         />
       </div>
-      <div class="col-10 col-md-5">
+      <div class="col-8 col-md-4">
         쌀 :
-        <AmountSelect
+        <SelectAmount
           :amountGuide="amountGuide"
           v-model="riceAmount"
           :step="10"
@@ -51,8 +72,8 @@
 import MapLegacyTemplate, {
   MapCityParsed,
 } from "@/components/MapLegacyTemplate.vue";
-import NationSelect from "@/processing/NationSelect.vue";
-import AmountSelect from "@/processing/AmountSelect.vue";
+import SelectNation from "@/processing/SelectNation.vue";
+import SelectAmount from "@/processing/SelectAmount.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
 import { Args } from "@/processing/args";
@@ -65,7 +86,13 @@ declare const commandName: string;
 declare const procRes: {
   nationList: procNationList;
   currentNationLevel: number;
-  nationLevelText: Record<number, string>;
+  levelInfo: Record<
+    number,
+    {
+      text: string;
+      amount: number;
+    }
+  >;
   minAmount: number;
   maxAmount: number;
   amountGuide: number[];
@@ -74,8 +101,8 @@ declare const procRes: {
 export default defineComponent({
   components: {
     MapLegacyTemplate,
-    NationSelect,
-    AmountSelect,
+    SelectNation,
+    SelectAmount,
     TopBackBar,
     BottomBar,
   },
@@ -117,7 +144,7 @@ export default defineComponent({
       selectedNationID,
       selectedCityObj,
       currentNationLevel: procRes.currentNationLevel,
-      nationLevelText: procRes.nationLevelText,
+      levelInfo: procRes.levelInfo,
       minAmount: ref(procRes.minAmount),
       maxAmount: ref(procRes.maxAmount),
       amountGuide: procRes.amountGuide,
diff --git a/hwe/ts/processing/Nation/che_발령.vue b/hwe/ts/processing/Nation/che_발령.vue
index 285d7dbd..6fb344ce 100644
--- a/hwe/ts/processing/Nation/che_발령.vue
+++ b/hwe/ts/processing/Nation/che_발령.vue
@@ -18,7 +18,7 @@
     <div class="row">
       <div class="col-12 col-md-6">
         장수 :
-        <GeneralSelect
+        <SelectGeneral
           :cities="citiesMap"
           :generals="generalList"
           :troops="troops"
@@ -28,7 +28,7 @@
       </div>
       <div class="col-6 col-md-4">
         도시 :
-        <CitySelect :cities="citiesMap" v-model="selectedCityID" />
+        <SelectCity :cities="citiesMap" v-model="selectedCityID" />
       </div>
       <div class="col-4 col-md-2 d-grid">
         <b-button variant="primary" @click="submit">{{ commandName }}</b-button>
@@ -42,8 +42,8 @@
 import MapLegacyTemplate, {
   MapCityParsed,
 } from "@/components/MapLegacyTemplate.vue";
-import CitySelect from "@/processing/CitySelect.vue";
-import GeneralSelect from "@/processing/GeneralSelect.vue";
+import SelectCity from "@/processing/SelectCity.vue";
+import SelectGeneral from "@/processing/SelectGeneral.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
 import { Args } from "@/processing/args";
@@ -72,8 +72,8 @@ declare const procRes: {
 export default defineComponent({
   components: {
     MapLegacyTemplate,
-    CitySelect,
-    GeneralSelect,
+    SelectCity,
+    SelectGeneral,
     TopBackBar,
     BottomBar,
   },
diff --git a/hwe/ts/processing/Nation/che_선전포고.vue b/hwe/ts/processing/Nation/che_피장파장.vue
similarity index 59%
rename from hwe/ts/processing/Nation/che_선전포고.vue
rename to hwe/ts/processing/Nation/che_피장파장.vue
index a2b2b393..1c695645 100644
--- a/hwe/ts/processing/Nation/che_선전포고.vue
+++ b/hwe/ts/processing/Nation/che_피장파장.vue
@@ -9,27 +9,27 @@
       :mapTheme="mapTheme"
       v-model="selectedCityObj"
     />
-
-    <div v-if="(commandName == '선전포고')">
-      타국에게 선전 포고합니다.<br />
-      선전 포고할 국가를 목록에서 선택하세요.<br />
-      고립되지 않은 아국 도시에서 인접한 국가에 선포 가능합니다.<br />
-      초반제한 해제 2년전부터 선포가 가능합니다. ({{ startYear + 1 }}년
-      1월부터 가능)<br />
-      현재 선포가 불가능한 국가는 배경색이 <span style="color: red">붉은색</span>으로
-      표시됩니다.<br />
-    </div>
-    <div v-if="(commandName == '급습')">
-      선택된 국가에 급습을 발동합니다.<br />
+    <div>
+      선택된 국가에 피장파장을 발동합니다.<br />
+      지정한 전략을 상대국이
+      {{ delayCnt }}턴 동안 사용할 수 없게됩니다.<br />
+      대신 아국은 지정한 전략을 {{ postReqTurn }}턴 동안 사용할 수 없습니다.<br />
       선포, 전쟁중인 상대국에만 가능합니다.<br />
       상대 국가를 목록에서 선택하세요.<br />
-      배경색은 현재 급습 불가능 국가는
+      현재 피장파장이 불가능한 국가는
       <span style="color: red">붉은색</span>으로 표시됩니다.<br />
     </div>
     <div class="row">
       <div class="col-6 col-md-3">
         국가 :
-        <NationSelect :nations="nationList" v-model="selectedNationID" />
+        <SelectNation :nations="nationList" v-model="selectedNationID" />
+      </div>
+      <div class="col-4 col-md-2">
+        <label>전략 :</label>
+        <b-form-select
+          :options="commandTypesOption"
+          v-model="selectedCommandID"
+        />
       </div>
       <div class="col-4 col-md-2 d-grid">
         <b-button @click="submit">{{ commandName }}</b-button>
@@ -43,7 +43,7 @@
 import MapLegacyTemplate, {
   MapCityParsed,
 } from "@/components/MapLegacyTemplate.vue";
-import NationSelect from "@/processing/NationSelect.vue";
+import SelectNation from "@/processing/SelectNation.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
 import { Args } from "@/processing/args";
@@ -55,13 +55,22 @@ declare const commandName: string;
 
 declare const procRes: {
   nationList: procNationList;
-  startYear: number,
+  startYear: number;
+  delayCnt: number;
+  postReqTurn: number;
+  availableCommandTypeList: Record<
+    number,
+    {
+      name: string;
+      remainTurn: number;
+    }
+  >;
 };
 
 export default defineComponent({
   components: {
     MapLegacyTemplate,
-    NationSelect,
+    SelectNation,
     TopBackBar,
     BottomBar,
   },
@@ -80,7 +89,23 @@ export default defineComponent({
     }
 
     const selectedNationID = ref(procRes.nationList[0].id);
-    const selectedCityObj = ref();//mapping용
+    const selectedCityObj = ref(); //mapping용
+
+    const commandTypesOption: { html: string; value: string }[] = [];
+    for (const [commandTypeID, commandTypeInfo] of Object.entries(procRes.availableCommandTypeList)) {
+      const notAvailable = commandTypeInfo.remainTurn > 0;
+      const notAvailableText = notAvailable?' (불가)':'';
+      const name = `${commandTypeInfo.name}${notAvailableText}`;
+      const html = notAvailable?`<span style='color:red;'>${name}</span>`:name;
+      commandTypesOption.push({
+        html,
+        value: commandTypeID,
+      });
+    }
+
+    const selectedCommandID = ref(
+      Object.keys(procRes.availableCommandTypeList)[0]
+    );
 
     function selectedNation(nationID: number) {
       selectedNationID.value = nationID;
@@ -90,13 +115,16 @@ export default defineComponent({
       const event = new CustomEvent<Args>("customSubmit", {
         detail: {
           destNationID: selectedNationID.value,
+          commandType: selectedCommandID.value,
         },
       });
       unwrap(e.target).dispatchEvent(event);
     }
 
     return {
-      startYear: procRes.startYear,
+      ...procRes,
+      selectedCommandID,
+      commandTypesOption,
       mapTheme: ref(mapTheme),
       nationList: ref(nationList),
       selectedCityObj,
diff --git a/hwe/ts/processing/Nation/index.ts b/hwe/ts/processing/Nation/index.ts
index 4c3624b3..56107060 100644
--- a/hwe/ts/processing/Nation/index.ts
+++ b/hwe/ts/processing/Nation/index.ts
@@ -1,27 +1,30 @@
 import { default as che_국기변경 } from "./che_국기변경.vue";
 import { default as che_국호변경 } from "./che_국호변경.vue";
 import { default as che_물자원조 } from "./che_물자원조.vue";
+import { default as che_피장파장 } from "./che_피장파장.vue";
 
-import { default as NationProcess } from "./che_선전포고.vue";
-import { default as GeneralAmountProcess } from "./che_몰수.vue";
-import { default as GeneralCityProcess } from "./che_발령.vue";
+import { default as ProcessNation } from "../ProcessNation.vue";
+import { default as ProcessGeneralAmount } from "./che_몰수.vue";
+import { default as ProcessGeneralCity } from "./che_발령.vue";
 
-export const commandMap: Record<string, typeof NationProcess> = {
+export const commandMap: Record<string, typeof ProcessNation> = {
     che_국기변경,
     che_국호변경,
-    che_급습: NationProcess,
-    che_몰수: GeneralAmountProcess,
+    che_급습: ProcessNation,
+    che_몰수: ProcessGeneralAmount,
     che_물자원조,
-    che_선전포고: NationProcess,
-    che_포상: GeneralAmountProcess,
-    che_발령: GeneralCityProcess,
+    che_발령: ProcessGeneralCity,
+    che_불가침파기제의: ProcessNation,
+    che_선전포고: ProcessNation,
+    che_이호경식: ProcessNation,
+    che_종전제의: ProcessNation,
+    che_포상: ProcessGeneralAmount,
+    che_피장파장,
 }
 
 /*
 - 항목들
-국가/금쌀/분량 - 물자원조
-도시 - 백성동원, 수몰, 천도, 초토화,
-국가 - 불가침파기제의, 선전포고, 이호경식, 종전제의, 피장파장, 허보
+도시 - 백성동원, 수몰, 천도, 초토화, 허보
 고유 양식 - 불가침제의
 
 */
\ No newline at end of file
diff --git a/hwe/ts/processing/General/CityProcess.vue b/hwe/ts/processing/ProcessCity.vue
similarity index 96%
rename from hwe/ts/processing/General/CityProcess.vue
rename to hwe/ts/processing/ProcessCity.vue
index de5a0540..a22d5f02 100644
--- a/hwe/ts/processing/General/CityProcess.vue
+++ b/hwe/ts/processing/ProcessCity.vue
@@ -38,7 +38,7 @@
     <div class="row">
       <div class="col-4 col-md-2">
         도시:
-        <CitySelect :cities="citiesMap" v-model="selectedCityID" />
+        <SelectCity :cities="citiesMap" v-model="selectedCityID" />
       </div>
       <div class="col-4 col-md-2 d-grid">
         <b-button @click="submit">{{ commandName }}</b-button>
@@ -57,7 +57,7 @@
 import MapLegacyTemplate, {
   MapCityParsed,
 } from "@/components/MapLegacyTemplate.vue";
-import CitySelect from "@/processing/CitySelect.vue";
+import SelectCity from "@/processing/SelectCity.vue";
 import CityBasedOnDistance from "@/processing/CitiesBasedOnDistance.vue";
 import { defineComponent, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
@@ -75,7 +75,7 @@ declare const procRes: {
 export default defineComponent({
   components: {
     MapLegacyTemplate,
-    CitySelect,
+    SelectCity,
     CityBasedOnDistance,
     TopBackBar,
     BottomBar,
diff --git a/hwe/ts/processing/ProcessNation.vue b/hwe/ts/processing/ProcessNation.vue
new file mode 100644
index 00000000..fcd9b2e8
--- /dev/null
+++ b/hwe/ts/processing/ProcessNation.vue
@@ -0,0 +1,135 @@
+<template>
+  <TopBackBar :title="commandName" type="chief" />
+  <div class="bg0">
+    <MapLegacyTemplate
+      :isDetailMap="false"
+      :clickableAll="true"
+      :neutralView="true"
+      :useCachedMap="true"
+      :mapTheme="mapTheme"
+      v-model="selectedCityObj"
+    />
+
+    <div v-if="commandName == '선전포고'">
+      타국에게 선전 포고합니다.<br />
+      선전 포고할 국가를 목록에서 선택하세요.<br />
+      고립되지 않은 아국 도시에서 인접한 국가에 선포 가능합니다.<br />
+      초반제한 해제 2년전부터 선포가 가능합니다. ({{ startYear + 1 }}년 1월부터
+      가능)<br />
+      현재 선포가 불가능한 국가는 배경색이
+      <span style="color: red">붉은색</span>으로 표시됩니다.<br />
+    </div>
+    <div v-else-if="commandName == '급습'">
+      선택된 국가에 급습을 발동합니다.<br />
+      선포, 전쟁중인 상대국에만 가능합니다.<br />
+      상대 국가를 목록에서 선택하세요.<br />
+      현재 급습이 불가능한 국가는
+      <span style="color: red">붉은색</span>으로 표시됩니다.<br />
+    </div>
+    <div v-else-if="commandName == '불가침 파기 제의'">
+      불가침중인 국가에 조약 파기를 제의합니다.<br />
+      제의할 국가를 목록에서 선택하세요.<br />
+      현재 제의가 불가능한 국가는
+      <span style="color: red">붉은색</span>으로 표시됩니다.<br />
+    </div>
+    <div v-else-if="commandName == '이호경식'">
+      선택된 국가에 이호경식을 발동합니다.<br />
+      선포, 전쟁중인 상대국에만 가능합니다.<br />
+      상대 국가를 목록에서 선택하세요.<br />
+      현재 이호경식이 불가능한 국가는
+      <span style="color: red">붉은색</span>으로 표시됩니다.<br />
+    </div>
+    <div v-else-if="commandName == '종전 제의'">
+      전쟁중인 국가에 종전을 제의합니다.<br />
+      제의할 국가를 목록에서 선택하세요.<br />
+      현재 제의가 불가능한 국가는
+      <span style="color: red">붉은색</span>으로 표시됩니다.<br />
+    </div>
+    <div v-else-if="commandName == '허보'">
+      전쟁중인 국가에 종전을 제의합니다.<br />
+      제의할 국가를 목록에서 선택하세요.<br />
+      현재 제의가 불가능한 국가는
+      <span style="color: red">붉은색</span>으로 표시됩니다.<br />
+    </div>
+    <div class="row">
+      <div class="col-6 col-md-3">
+        국가 :
+        <SelectNation :nations="nationList" v-model="selectedNationID" />
+      </div>
+      <div class="col-4 col-md-2 d-grid">
+        <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 SelectNation from "@/processing/SelectNation.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 commandName: string;
+
+declare const procRes: {
+  nationList: procNationList;
+  startYear: number;
+};
+
+export default defineComponent({
+  components: {
+    MapLegacyTemplate,
+    SelectNation,
+    TopBackBar,
+    BottomBar,
+  },
+  watch: {
+    selectedCityObj(city: MapCityParsed) {
+      if (!city.nationID) {
+        return;
+      }
+      this.selectedNationID = city.nationID;
+    },
+  },
+  setup() {
+    const nationList = new Map<number, procNationItem>();
+    for (const nationItem of procRes.nationList) {
+      nationList.set(nationItem.id, nationItem);
+    }
+
+    const selectedNationID = ref(procRes.nationList[0].id);
+    const selectedCityObj = ref(); //mapping용
+
+    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 {
+      startYear: procRes.startYear,
+      mapTheme: ref(mapTheme),
+      nationList: ref(nationList),
+      selectedCityObj,
+      selectedNationID,
+      commandName,
+      selectedNation,
+      submit,
+    };
+  },
+});
+</script>
diff --git a/hwe/ts/processing/AmountSelect.vue b/hwe/ts/processing/SelectAmount.vue
similarity index 80%
rename from hwe/ts/processing/AmountSelect.vue
rename to hwe/ts/processing/SelectAmount.vue
index 2f50b9b1..c16a474c 100644
--- a/hwe/ts/processing/AmountSelect.vue
+++ b/hwe/ts/processing/SelectAmount.vue
@@ -1,19 +1,22 @@
 <template>
   <div class="input-group">
     <b-button
-      v-if="maxAmount > 30000"
+      v-if="maxAmount > 20000"
+      class="btn-sm"
       @click="amount = Math.max(amount - 10000, minAmount)"
-      >-1만</b-button
+      >-만</b-button
     >
     <b-button
-      v-if="maxAmount > 3000"
+      v-if="maxAmount > 2000"
+      class="btn-sm"
       @click="amount = Math.max(amount - 1000, minAmount)"
-      >-1천</b-button
+      >-천</b-button
     >
     <b-button
-      v-if="maxAmount > 300"
+      v-if="maxAmount > 200"
+      class="btn-sm"
       @click="amount = Math.max(amount - 100, minAmount)"
-      >-1백</b-button
+      >-백</b-button
     >
     <input
       type="number"
@@ -35,19 +38,22 @@
       >
     </b-dropdown>
     <b-button
-      v-if="maxAmount > 300"
+      v-if="maxAmount > 200"
+      class="btn-sm"
       @click="amount = Math.min(amount + 100, maxAmount)"
-      >+1백</b-button
+      >+백</b-button
     >
     <b-button
-      v-if="maxAmount > 3000"
+      v-if="maxAmount > 2000"
+      class="btn-sm"
       @click="amount = Math.min(amount + 1000, maxAmount)"
-      >+1천</b-button
+      >+천</b-button
     >
     <b-button
-      v-if="maxAmount > 30000"
+      v-if="maxAmount > 20000"
+      class="btn-sm"
       @click="amount = Math.min(amount + 10000, maxAmount)"
-      >+1만</b-button
+      >+만</b-button
     >
   </div>
 </template>
@@ -76,7 +82,7 @@ export default defineComponent({
       type: Number,
       required: false,
       default: 1,
-    }
+    },
   },
   emits: ["update:modelValue"],
   watch: {
diff --git a/hwe/ts/processing/CitySelect.vue b/hwe/ts/processing/SelectCity.vue
similarity index 100%
rename from hwe/ts/processing/CitySelect.vue
rename to hwe/ts/processing/SelectCity.vue
diff --git a/hwe/ts/processing/ColorSelect.vue b/hwe/ts/processing/SelectColor.vue
similarity index 100%
rename from hwe/ts/processing/ColorSelect.vue
rename to hwe/ts/processing/SelectColor.vue
diff --git a/hwe/ts/processing/GeneralSelect.vue b/hwe/ts/processing/SelectGeneral.vue
similarity index 100%
rename from hwe/ts/processing/GeneralSelect.vue
rename to hwe/ts/processing/SelectGeneral.vue
diff --git a/hwe/ts/processing/NationSelect.vue b/hwe/ts/processing/SelectNation.vue
similarity index 100%
rename from hwe/ts/processing/NationSelect.vue
rename to hwe/ts/processing/SelectNation.vue