From 394284d8ded71d5428a437bce1a82bce8bf2c5ed Mon Sep 17 00:00:00 2001
From: hide_d <hided62@gmail.com>
Date: Wed, 8 Sep 2021 20:39:04 +0900
Subject: [PATCH] =?UTF-8?q?vue:=20NPCControl=20-=20=EC=99=B8=ED=96=A5=20?=
 =?UTF-8?q?=20=EB=AA=A8=EC=82=AC(=EB=94=B1=ED=9E=88=20=EC=9D=98=EB=AF=B8?=
 =?UTF-8?q?=EB=8A=94=20=EC=97=86=EC=9C=BC=EB=82=98..)=20-=20=EC=95=BD?=
 =?UTF-8?q?=EA=B0=84=20=EB=B0=98=EC=9D=91=ED=98=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hwe/ts/NPCControl.vue                     | 484 +++++++++++-----------
 hwe/ts/components/NumberInputWithInfo.vue |   4 +-
 hwe/ts/components/TopBackBar.vue          |  59 ++-
 hwe/v_NPCControl.php                      |   2 +-
 4 files changed, 285 insertions(+), 264 deletions(-)

diff --git a/hwe/ts/NPCControl.vue b/hwe/ts/NPCControl.vue
index b8ab6669..ee9ea33a 100644
--- a/hwe/ts/NPCControl.vue
+++ b/hwe/ts/NPCControl.vue
@@ -4,232 +4,214 @@
   <div
     id="container"
     class="tb_layout bg0"
-    :style="{ width: '1000px', margin: 'auto', border: 'solid 1px #888888' }"
+    :style="{ maxWidth: '1000px', margin: 'auto', border: 'solid 1px #888888' }"
   >
     <div class="bg1 section_bar">국가 정책</div>
-    <div class="px-3" style="text-align:right;">
+    <div class="px-3" style="text-align: right">
       <small class="form-text text-muted">
         최근 설정:
         {{ lastSetters.policy.setter ?? "-없음-" }}
         ({{ lastSetters.policy.date ?? "설정 기록 없음" }})
       </small>
     </div>
-    <div class="form_list">
-      <div class="form-group row">
-        <div class="col-sm-6">
-          <NumberInputWithInfo
-            v-model="nationPolicy.reqNationGold"
-            :step="100"
-            title="국가 권장 금"
-            >이보다 많으면 포상, 적으면 몰수/헌납합니다.(긴급포상
-            제외)</NumberInputWithInfo
-          >
-        </div>
-        <div class="col-sm-6">
-          <NumberInputWithInfo
-            v-model="nationPolicy.reqNationRice"
-            :step="100"
-            title="국가 권장 쌀"
-            >이보다 많으면 포상, 적으면 몰수/헌납합니다.(긴급포상
-            제외)</NumberInputWithInfo
-          >
-        </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
+        >
       </div>
-      <div class="form-group row">
-        <div class="col-sm-6">
-          <NumberInputWithInfo
-            v-model="nationPolicy.reqHumanWarUrgentGold"
-            :step="100"
-            title="유저전투장 긴급포상 금"
-            >유저장긴급포상시 이보다 금이 적은 장수에게 포상합니다.<br />0이면
-            보병 6회 징병({{ (defaultStatMax * 100).toLocaleString() }} * 6)
-            가능한 금을 기준으로 하며, 그 수치는 현재
-            {{
-              zeroPolicy.reqHumanWarUrgentGold.toLocaleString()
-            }}입니다.</NumberInputWithInfo
-          >
-        </div>
-        <div class="col-sm-6">
-          <NumberInputWithInfo
-            v-model="nationPolicy.reqHumanWarUrgentRice"
-            :step="100"
-            title="유저전투장 긴급포상 금"
-            >유저장긴급포상시 이보다 쌀이 적은 장수에게 포상합니다.<br />0이면
-            기본 병종으로 {{ (defaultStatMax * 100).toLocaleString() }} * 6명
-            사살 가능한 쌀을 기준으로 하며, 그 수치는 현재
-            {{
-              zeroPolicy.reqHumanWarUrgentRice.toLocaleString()
-            }}입니다.</NumberInputWithInfo
-          >
-        </div>
+      <div class="col">
+        <NumberInputWithInfo
+          v-model="nationPolicy.reqNationRice"
+          :step="100"
+          title="국가 권장 쌀"
+          >이보다 많으면 포상, 적으면 몰수/헌납합니다.(긴급포상
+          제외)</NumberInputWithInfo
+        >
       </div>
-      <div class="form-group row">
-        <div class="col-sm-6">
-          <NumberInputWithInfo
-            v-model="nationPolicy.reqHumanWarRecommandGold"
-            :step="100"
-            title="유저전투장 권장 금"
-            >유저전투장에게 주는 금입니다. 이보다 적으면 포상합니다. <br />
-            0이면 유저전투장 긴급포상 금의 2배를 기준으로 하며, 그 수치는 현재
-            {{
-              (calcPolicyValue("reqHumanWarUrgentGold") * 2).toLocaleString()
-            }}입니다.</NumberInputWithInfo
-          >
-        </div>
-        <div class="col-sm-6">
-          <NumberInputWithInfo
-            v-model="nationPolicy.reqHumanWarRecommandRice"
-            :step="100"
-            title="유저전투장 권장 쌀"
-            >유저전투장에게 주는 쌀입니다. 이보다 적으면 포상합니다. <br />
-            0이면 유저전투장 긴급포상 쌀의 2배를 기준으로 하며, 그 수치는 현재
-            {{
-              (calcPolicyValue("reqHumanWarUrgentRice") * 2).toLocaleString()
-            }}입니다.</NumberInputWithInfo
-          >
-        </div>
+      <div class="col">
+        <NumberInputWithInfo
+          v-model="nationPolicy.reqHumanWarUrgentGold"
+          :step="100"
+          title="유저전투장 긴급포상 금"
+          >유저장긴급포상시 이보다 금이 적은 장수에게 포상합니다.<br />0이면
+          보병 6회 징병({{ (defaultStatMax * 100).toLocaleString() }} * 6)
+          가능한 금을 기준으로 하며, 그 수치는 현재
+          {{
+            zeroPolicy.reqHumanWarUrgentGold.toLocaleString()
+          }}입니다.</NumberInputWithInfo
+        >
       </div>
-      <div class="form-group row">
-        <div class="col-sm-6">
-          <NumberInputWithInfo
-            v-model="nationPolicy.reqHumanDevelGold"
-            :step="100"
-            title="유저내정장 권장 금"
-            >유저내정장에게 주는 금입니다. 이보다 적으면
-            포상합니다.</NumberInputWithInfo
-          >
-        </div>
-        <div class="col-sm-6">
-          <NumberInputWithInfo
-            v-model="nationPolicy.reqHumanDevelRice"
-            :step="100"
-            title="유저내정장 권장 쌀"
-            >유저내정장에게 주는 쌀입니다. 이보다 적으면
-            포상합니다.</NumberInputWithInfo
-          >
-        </div>
+      <div class="col">
+        <NumberInputWithInfo
+          v-model="nationPolicy.reqHumanWarUrgentRice"
+          :step="100"
+          title="유저전투장 긴급포상 금"
+          >유저장긴급포상시 이보다 쌀이 적은 장수에게 포상합니다.<br />0이면
+          기본 병종으로 {{ (defaultStatMax * 100).toLocaleString() }} * 6명 사살
+          가능한 쌀을 기준으로 하며, 그 수치는 현재
+          {{
+            zeroPolicy.reqHumanWarUrgentRice.toLocaleString()
+          }}입니다.</NumberInputWithInfo
+        >
       </div>
-      <div class="form-group row">
-        <div class="col-sm-6">
-          <NumberInputWithInfo
-            v-model="nationPolicy.reqNPCWarGold"
-            :step="100"
-            title="NPC전투장 권장 금"
-            >NPC전투장에게 주는 금입니다. 이보다 적으면 포상합니다. <br />
-            0이면 기본 병종 4회({{ (defaultStatNPCMax * 100).toLocaleString() }}
-            * 4) 징병비를 기준으로 하며, 그 수치는 현재
-            {{
-              zeroPolicy.reqNPCWarGold.toLocaleString()
-            }}입니다.</NumberInputWithInfo
-          >
-        </div>
-        <div class="col-sm-6">
-          <NumberInputWithInfo
-            v-model="nationPolicy.reqNPCWarRice"
-            :step="100"
-            title="NPC전투장 권장 쌀"
-            >NPC전투장에게 주는 쌀입니다. 이보다 적으면 포상합니다. <br />
-            0이면 기본 병종으로
-            {{ (defaultStatNPCMax * 100).toLocaleString() }} * 4명 사살 가능한
-            쌀을 기준으로 하며, 그 수치는 현재
-            {{
-              zeroPolicy.reqNPCWarRice.toLocaleString()
-            }}입니다.</NumberInputWithInfo
-          >
-        </div>
+      <div class="col">
+        <NumberInputWithInfo
+          v-model="nationPolicy.reqHumanWarRecommandGold"
+          :step="100"
+          title="유저전투장 권장 금"
+          >유저전투장에게 주는 금입니다. 이보다 적으면 포상합니다. <br />
+          0이면 유저전투장 긴급포상 금의 2배를 기준으로 하며, 그 수치는 현재
+          {{
+            (calcPolicyValue("reqHumanWarUrgentGold") * 2).toLocaleString()
+          }}입니다.</NumberInputWithInfo
+        >
       </div>
-      <div class="form-group row">
-        <div class="col-sm-6">
-          <NumberInputWithInfo
-            v-model="nationPolicy.reqNPCDevelGold"
-            :step="100"
-            title="NPC내정장 권장 금"
-            >NPC내정장에게 주는 금입니다. 이보다 5배 더 많다면 헌납합니다.<br />0이면
-            30턴 내정 가능한 금을 기준으로 하며, 그 수치는 현재
-            {{ zeroPolicy.reqNPCDevelGold }}입니다.</NumberInputWithInfo
-          >
-        </div>
-        <div class="col-sm-6">
-          <NumberInputWithInfo
-            v-model="nationPolicy.reqNPCDevelRice"
-            :step="100"
-            title="NPC내정장 권장 쌀"
-            >NPC내정장에게 주는 쌀입니다. 이보다 5배 더 많다면
-            헌납합니다.</NumberInputWithInfo
-          >
-        </div>
+      <div class="col">
+        <NumberInputWithInfo
+          v-model="nationPolicy.reqHumanWarRecommandRice"
+          :step="100"
+          title="유저전투장 권장 쌀"
+          >유저전투장에게 주는 쌀입니다. 이보다 적으면 포상합니다. <br />
+          0이면 유저전투장 긴급포상 쌀의 2배를 기준으로 하며, 그 수치는 현재
+          {{
+            (calcPolicyValue("reqHumanWarUrgentRice") * 2).toLocaleString()
+          }}입니다.</NumberInputWithInfo
+        >
       </div>
-      <div class="form-group row">
-        <div class="col-sm-6">
-          <NumberInputWithInfo
-            v-model="nationPolicy.minimumResourceActionAmount"
-            :step="100"
-            title="포상/몰수/헌납/삼/팜 최소 단위"
-            >연산결과가 이 단위보다 적다면 수행하지
-            않습니다.</NumberInputWithInfo
-          >
-        </div>
-        <div class="col-sm-6">
-          <NumberInputWithInfo
-            v-model="nationPolicy.minWarCrew"
-            :step="50"
-            title="최소 전투 가능 병력 수"
-            >이보다 적을 때에는 징병을 시도합니다.</NumberInputWithInfo
-          >
-        </div>
+      <div class="col">
+        <NumberInputWithInfo
+          v-model="nationPolicy.reqHumanDevelGold"
+          :step="100"
+          title="유저내정장 권장 금"
+          >유저내정장에게 주는 금입니다. 이보다 적으면
+          포상합니다.</NumberInputWithInfo
+        >
       </div>
-      <div class="form-group row">
-        <div class="col-sm-6">
-          <NumberInputWithInfo
-            v-model="nationPolicy.minNPCRecruitCityPopulation"
-            :step="100"
-            title="NPC 최소 징병 가능 인구 수"
-            >도시의 인구가 이보다 낮으면 NPC는 도시에서 징병하지 않고 후방
-            워프합니다.<br />NPC의 최대 병력수보다 낮게 설정하면 제자리에서
-            정착장려를 합니다.</NumberInputWithInfo
-          >
-        </div>
-        <div class="col-sm-6">
-          <NumberInputWithInfo
-            :modelValue="nationPolicy.safeRecruitCityPopulationRatio * 100"
-            @update:modelValue="
-              nationPolicy.safeRecruitCityPopulationRatio = $event / 100
-            "
-            :step="0.5"
-            :int="false"
-            :min="0"
-            :max="100"
-            title="제자리 징병 허용 인구율(%)"
-            >전쟁 시 후방 발령, 후방 워프의 기준 인구입니다. 이보다 많다면
-            '충분하다'고 판단합니다.<br />NPC의 최대 병력수보다 낮게 설정하면
-            제자리에서 정착장려를 합니다.</NumberInputWithInfo
-          >
-        </div>
+      <div class="col">
+        <NumberInputWithInfo
+          v-model="nationPolicy.reqHumanDevelRice"
+          :step="100"
+          title="유저내정장 권장 쌀"
+          >유저내정장에게 주는 쌀입니다. 이보다 적으면
+          포상합니다.</NumberInputWithInfo
+        >
       </div>
-      <div class="form-group row">
-        <div class="col-sm-6">
-          <NumberInputWithInfo
-            v-model="nationPolicy.minNPCWarLeadership"
-            :step="5"
-            title="NPC 전투 참여 통솔 기준"
-            >이 수치보다 같거나 높으면 NPC전투장으로
-            분류됩니다.</NumberInputWithInfo
-          >
-        </div>
-        <div class="col-sm-6">
-          <NumberInputWithInfo
-            v-model="nationPolicy.properWarTrainAtmos"
-            :step="5"
-            :min="20"
-            :max="100"
-            title="훈련/사기진작 목표치"
-            >훈련/사기진작 기준치입니다. 이보다 같거나 높으면
-            출병합니다.</NumberInputWithInfo
-          >
-        </div>
+      <div class="col">
+        <NumberInputWithInfo
+          v-model="nationPolicy.reqNPCWarGold"
+          :step="100"
+          title="NPC전투장 권장 금"
+          >NPC전투장에게 주는 금입니다. 이보다 적으면 포상합니다. <br />
+          0이면 기본 병종 4회({{ (defaultStatNPCMax * 100).toLocaleString() }}
+          * 4) 징병비를 기준으로 하며, 그 수치는 현재
+          {{
+            zeroPolicy.reqNPCWarGold.toLocaleString()
+          }}입니다.</NumberInputWithInfo
+        >
+      </div>
+      <div class="col">
+        <NumberInputWithInfo
+          v-model="nationPolicy.reqNPCWarRice"
+          :step="100"
+          title="NPC전투장 권장 쌀"
+          >NPC전투장에게 주는 쌀입니다. 이보다 적으면 포상합니다. <br />
+          0이면 기본 병종으로
+          {{ (defaultStatNPCMax * 100).toLocaleString() }} * 4명 사살 가능한
+          쌀을 기준으로 하며, 그 수치는 현재
+          {{
+            zeroPolicy.reqNPCWarRice.toLocaleString()
+          }}입니다.</NumberInputWithInfo
+        >
+      </div>
+      <div class="col">
+        <NumberInputWithInfo
+          v-model="nationPolicy.reqNPCDevelGold"
+          :step="100"
+          title="NPC내정장 권장 금"
+          >NPC내정장에게 주는 금입니다. 이보다 5배 더 많다면 헌납합니다.<br />0이면
+          30턴 내정 가능한 금을 기준으로 하며, 그 수치는 현재
+          {{ zeroPolicy.reqNPCDevelGold }}입니다.</NumberInputWithInfo
+        >
+      </div>
+      <div class="col">
+        <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
+        >
+      </div>
+      <div class="col">
+        <NumberInputWithInfo
+          v-model="nationPolicy.minWarCrew"
+          :step="50"
+          title="최소 전투 가능 병력 수"
+          >이보다 적을 때에는 징병을 시도합니다.</NumberInputWithInfo
+        >
+      </div>
+      <div class="col">
+        <NumberInputWithInfo
+          v-model="nationPolicy.minNPCRecruitCityPopulation"
+          :step="100"
+          title="NPC 최소 징병 가능 인구 수"
+          >도시의 인구가 이보다 낮으면 NPC는 도시에서 징병하지 않고 후방
+          워프합니다.<br />NPC의 최대 병력수보다 낮게 설정하면 제자리에서
+          정착장려를 합니다.</NumberInputWithInfo
+        >
+      </div>
+      <div class="col">
+        <NumberInputWithInfo
+          :modelValue="nationPolicy.safeRecruitCityPopulationRatio * 100"
+          @update:modelValue="
+            nationPolicy.safeRecruitCityPopulationRatio = $event / 100
+          "
+          :step="0.5"
+          :int="false"
+          :min="0"
+          :max="100"
+          title="제자리 징병 허용 인구율(%)"
+          >전쟁 시 후방 발령, 후방 워프의 기준 인구입니다. 이보다 많다면
+          '충분하다'고 판단합니다.<br />NPC의 최대 병력수보다 낮게 설정하면
+          제자리에서 정착장려를 합니다.</NumberInputWithInfo
+        >
+      </div>
+      <div class="col">
+        <NumberInputWithInfo
+          v-model="nationPolicy.minNPCWarLeadership"
+          :step="5"
+          title="NPC 전투 참여 통솔 기준"
+          >이 수치보다 같거나 높으면 NPC전투장으로
+          분류됩니다.</NumberInputWithInfo
+        >
+      </div>
+      <div class="col">
+        <NumberInputWithInfo
+          v-model="nationPolicy.properWarTrainAtmos"
+          :step="5"
+          :min="20"
+          :max="100"
+          title="훈련/사기진작 목표치"
+          >훈련/사기진작 기준치입니다. 이보다 같거나 높으면
+          출병합니다.</NumberInputWithInfo
+        >
       </div>
       <!--allowNpcAttackCity는 현재 게임 내 비활성-->
-
+    </div>
+    <div style="padding: 0 8pt">
       <div class="alert alert-secondary">
         전투 부대는 작업중입니다(json양식:
         {부대번호:[시작도시번호(아국),도착도시번호(적군)],...})<br />
@@ -280,8 +262,8 @@
         설정
       </button>
     </div>
-    <div class="row">
-      <div class="col-sm-6 half_section_left">
+    <div class="row row-cols-md-2 row-cols-1 g-0">
+      <div class="col half_section_left">
         <div class="bg1 section_bar">NPC 사령턴 우선순위</div>
         <div class="float-right px-3">
           <small class="form-text text-muted">
@@ -296,16 +278,21 @@
             사령턴을 시도합니다.</small
           >
         </div>
-        <div class="form_list">
-          <div class="row">
-            <div class="col-sm-6">
+        <div>
+          <div class="row g-0">
+            <div class="col">
               <div class="bg2 sub_bar">비활성</div>
               <draggable
                 :list="chiefActionUnused"
                 group="chiefAction"
-                class="list-group col"
+                class="list-group col priority-list"
                 itemKey="id"
               >
+                <template #header>
+                  <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
@@ -320,12 +307,12 @@
                 </template>
               </draggable>
             </div>
-            <div class="col-sm-6">
+            <div class="col">
               <div class="bg2 sub_bar">활성</div>
               <draggable
                 :list="chiefActionPriority"
                 group="chiefAction"
-                class="list-group col"
+                class="list-group col priority-list"
                 itemKey="id"
               >
                 <template #item="{ element }">
@@ -369,7 +356,7 @@
           </div>
         </div>
       </div>
-      <div class="col-sm-6 half_section_right">
+      <div class="col half_section_right">
         <div class="bg1 section_bar">NPC 일반턴 우선순위</div>
         <div class="float-right px-3">
           <small class="form-text text-muted">
@@ -384,16 +371,21 @@
             물자조달이나 인재탐색을 합니다.</small
           >
         </div>
-        <div class="form_list">
-          <div class="row">
-            <div class="col-sm-6">
+        <div>
+          <div class="row g-0">
+            <div class="col">
               <div class="bg2 sub_bar">비활성</div>
               <draggable
                 :list="generalActionUnused"
                 group="generalAction"
-                class="list-group col"
+                class="list-group col priority-list"
                 itemKey="id"
               >
+                <template #header>
+                  <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
@@ -407,12 +399,12 @@
                 </template>
               </draggable>
             </div>
-            <div class="col-sm-6">
+            <div class="col">
               <div class="bg2 sub_bar">활성</div>
               <draggable
                 :list="generalActionPriority"
                 group="generalAction"
-                class="list-group col"
+                class="list-group col priority-list"
                 itemKey="id"
               >
                 <template #item="{ element }">
@@ -824,37 +816,51 @@ export default defineComponent({
   text-align: left;
 }
 
+.form_list {
+  margin: 8px;
+}
+
+.sub_bar {
+  text-align: center;
+  border: 0.5px solid #aaa;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.priority-list {
+  margin: 0 10px;
+}
+
 .control_bar {
-    margin-top: 8pt;
-    text-align: right;
+  padding: 0 8pt 8pt 8pt;
+  text-align: right;
+}
+
+.control_bar .btn {
+  margin-top: 8pt;
 }
 
 .reset_btn {
-    width: 15ch;
+  width: 15ch;
 }
 
-.revert_btn{
+.revert_btn {
   width: 15ch;
 }
 
 .submit_btn {
-    margin-left: 1em;
-    width: 15ch;
+  margin-left: 1em;
+  width: 15ch;
 }
 
 .half_section_left {
-    padding-right: 0;
-    border-right: 0.5px solid #aaa;
-}
-
-.half_section_right {
-    padding-left: 0;
+  border-right: 0.5px solid #aaa;
 }
 
 .section_bar {
-    text-align: center;
-    border: 0.5px solid #aaa;
-    padding-right: 0;
-    padding-left: 0;
+  text-align: center;
+  border: 0.5px solid #aaa;
+  padding-right: 0;
+  padding-left: 0;
 }
 </style>
\ No newline at end of file
diff --git a/hwe/ts/components/NumberInputWithInfo.vue b/hwe/ts/components/NumberInputWithInfo.vue
index 393408a8..69fef342 100644
--- a/hwe/ts/components/NumberInputWithInfo.vue
+++ b/hwe/ts/components/NumberInputWithInfo.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="row form-group number-input-with-info">
-    <label class="col-sm-6 col-form-label">{{ title }}</label>
-    <div class="col-sm-6">
+    <label class="col-6 col-form-label">{{ title }}</label>
+    <div class="col-6">
       <input
         ref="input"
         type="number"
diff --git a/hwe/ts/components/TopBackBar.vue b/hwe/ts/components/TopBackBar.vue
index 72a6d348..352508d0 100644
--- a/hwe/ts/components/TopBackBar.vue
+++ b/hwe/ts/components/TopBackBar.vue
@@ -1,15 +1,10 @@
 <template>
-  <table style="width: 1000px; margin: auto" class="tb_layout bg0">
-    <tr>
-      <td style="text-align: left">
-        {{title}}<br /><button
-          type="button"
-          class="btn btn-primary"
-          @click="back"
-        >돌아가기</button><br />
-      </td>
-    </tr>
-  </table>
+  <div class="tb_layout bg0 back_bar">
+    <button type="button" class="btn btn-primary back_btn" @click="back">
+      돌아가기
+    </button>
+    <h2 class="title">{{ title }}</h2>
+  </div>
 </template>
 
 <script lang="ts">
@@ -19,18 +14,16 @@ import "../../scss/game_bg.scss";
 export default defineComponent({
   name: "TopBackBar",
   methods: {
-    back(){
-      if(this.type === 'normal'){
-        location.href = './';
-      }
-      else if(this.type == 'chief'){
-        location.href = 'b_chiefcenter.php';
-      }
-      else{
+    back() {
+      if (this.type === "normal") {
+        location.href = "./";
+      } else if (this.type == "chief") {
+        location.href = "b_chiefcenter.php";
+      } else {
         //TODO: window.close하려면 부모창이 있어야함!
         window.close();
       }
-    }
+    },
   },
   props: {
     title: {
@@ -38,7 +31,7 @@ export default defineComponent({
       required: true,
     },
     type: {
-      type: String as PropType<"normal"|"chief"|"close">,
+      type: String as PropType<"normal" | "chief" | "close">,
       default: "normal",
       required: false,
     },
@@ -47,5 +40,27 @@ export default defineComponent({
 </script>
 
 
-<style>
+<style scoped>
+.back_bar {
+  max-width: 1000px;
+  width: 100%;
+  margin: auto;
+  position: relative;
+  border-left: 1px solid #888;
+  border-right: 1px solid #888;
+  height: 24pt;
+}
+
+.back_btn {
+  position: absolute;
+  left: 0;
+  height: 24pt;
+}
+
+.title {
+  text-align: center;
+  line-height: 24pt;
+  font-size: 18pt;
+  margin: 0;
+}
 </style>
\ No newline at end of file
diff --git a/hwe/v_NPCControl.php b/hwe/v_NPCControl.php
index f204e378..b8ea7030 100644
--- a/hwe/v_NPCControl.php
+++ b/hwe/v_NPCControl.php
@@ -89,7 +89,7 @@ $lastSetters = [
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=1024" />
+    <meta name="viewport" content="width=device-with" />
     <title><?= UniqueConst::$serverName ?>: 임시 NPC 정책</title>
     <?= WebUtil::printStaticValues([
         'nationID' => $nationID,