feat(WIP): 장비매매

- 초성 검색을 일원화

hwe/ts/processing/General/che_임관.vue

@@ -20,11 +20,20 @@
       <div class="nation-header nation-row bg1 center">
         <div>국가명</div>
         <div>임관권유문</div>
+        <div class="zoom-toggle d-grid">
+          <b-button
+            :pressed="toggleZoom"
+            :variant="toggleZoom ? 'info' : 'secondary'"
+            v-model="toggleZoom"
+            @click="toggleZoom = !toggleZoom"
+            >{{ toggleZoom ? "작게 보기" : "크게 보기" }}</b-button
+          >
+        </div>
       </div>
       <div
         v-for="[, nation] in nationList"
         :key="nation.id"
-        class="nation-row s-border-b"
+        :class="['nation-row', 's-border-b', toggleZoom ? 'on-zoom' : 'on-fit']"
         @click="selectedNationID = nation.id"
       >
         <div
@@ -73,6 +82,7 @@ export default defineComponent({
       nationList.set(nationItem.id, nationItem);
     }
 
+    const toggleZoom = ref(true);
     const selectedNationID = ref(procRes.nationList[0].id);
 
     function selectedNation(nationID: number) {
@@ -92,6 +102,7 @@ export default defineComponent({
       nationList: ref(nationList),
       selectedNationID,
       commandName,
+      toggleZoom,
       isBrightColor,
       selectedNation,
       submit,
@@ -108,24 +119,57 @@ export default defineComponent({
     display: grid;
     grid-template-columns: 130px 870px;
   }
+
+  .zoom-toggle {
+    display: none;
+  }
+
+  .zoom-toggle > * {
+    display: none;
+  }
 }
 
 @include media-500px {
+  .nation-list .nation-row.nation-header {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    grid-template-rows: 1fr 1fr;
+
+    .zoom-toggle {
+      grid-column: 2/3;
+      grid-row: 1/3;
+    }
+  }
+
   .nation-list .nation-row {
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: 1fr minmax(1fr, calc(200px * 500 / 870));
   }
 
-  .nation-scout-plate {
-    max-height: calc(200px * 500 / 870);
-    overflow: hidden;
+  .on-fit {
+    .nation-scout-plate {
+      max-height: calc(200px * 500 / 870);
+      overflow: hidden;
+    }
+
+    .nation-scout-msg {
+      width: 870px;
+      transform-origin: 0px 0px;
+      transform: scale(calc(500 / 870));
+    }
   }
 
-  .nation-scout-msg {
-    width: 870px;
-    transform-origin: 0px 0px;
-    transform: scale(calc(500 / 870));
+  .on-zoom {
+    .nation-scout-plate {
+      max-height: 200px;
+      overflow-y: hidden;
+      overflow-x: auto;
+    }
+
+    .nation-scout-msg {
+      max-width: 870px;
+    }
   }
 }
 </style>