feat(WIP): processing 임관

- 구 css 코드 남은것 해결

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

@@ -0,0 +1,137 @@
+<template>
+  <TopBackBar :title="commandName" type="chief" />
+  <div class="bg0">
+    <div>
+      국가에 임관합니다.<br />
+      이미 임관/등용되었던 국가는 다시 임관할 수 없습니다.<br />
+      바로 군주의 위치로 이동합니다.<br />
+      임관할 국가를 목록에서 선택하세요.<br />
+    </div>
+    <div class="row">
+      <div class="col-6 col-md-3">
+        국가 :
+        <NationSelect :nations="nations" v-model="selectedNationID" />
+      </div>
+      <div class="col-4 col-md-2 d-grid">
+        <b-button @click="submit">{{ commandName }}</b-button>
+      </div>
+    </div>
+    <div class="nation-list">
+      <div class="nation-header nation-row bg1 center">
+        <div>국가명</div>
+        <div>임관권유문</div>
+      </div>
+      <div
+        v-for="[, nation] in nations"
+        :key="nation.id"
+        class="nation-row s-border-b"
+        @click="selectedNationID = nation.id"
+      >
+        <div
+          :style="{
+            backgroundColor: nation.color,
+            color: isBrightColor(nation.color) ? 'black' : 'white',
+            fontSize: '1.3em',
+          }"
+          class="d-grid"
+        >
+          <div class="align-self-center center">{{ nation.name }}</div>
+        </div>
+        <div class="nation-scout-plate align-self-center">
+          <div class="nation-scout-msg" v-html="nation.scoutMsg" />
+        </div>
+      </div>
+    </div>
+  </div>
+  <BottomBar :title="commandName" />
+</template>
+
+<script lang="ts">
+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";
+import { isBrightColor } from "@/util/isBrightColor";
+declare const mapTheme: string;
+declare const commandName: string;
+
+declare const procRes: {
+  nations: procNationList;
+  startYear: number;
+};
+
+export default defineComponent({
+  components: {
+    NationSelect,
+    TopBackBar,
+    BottomBar,
+  },
+  setup() {
+    const nations = new Map<number, procNationItem>();
+    for (const nationItem of procRes.nations) {
+      nations.set(nationItem.id, nationItem);
+    }
+
+    const selectedNationID = ref(procRes.nations[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),
+      nations: ref(nations),
+      selectedCityObj,
+      selectedNationID,
+      commandName,
+      isBrightColor,
+      selectedNation,
+      submit,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "@scss/common/break_500px.scss";
+
+@include media-1000px {
+  .nation-list .nation-row {
+    display: grid;
+    grid-template-columns: 130px 870px;
+  }
+}
+
+@include media-500px {
+  .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;
+  }
+
+  .nation-scout-msg {
+    width: 870px;
+    transform-origin: 0px 0px;
+    transform: scale(calc(500 / 870));
+  }
+}
+</style>

hwe/ts/processing/General/index.ts

@@ -1,8 +1,9 @@
-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 "./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 che_등용 } from "./che_등용.vue";
+import { default as CityProcess } from "./che_이동.vue";
+import { default as che_임관 } from "./che_임관.vue";
+import { default as che_징병 } from "./che_징병.vue";
 
 //TODO: 자주 쓰는 녀석들은 Slot으로 변경
 
@@ -12,6 +13,7 @@ export const commandMap: Record<string, typeof CityProcess> = {
     che_건국,
     che_등용,
     che_이동: CityProcess,
+    che_임관,
     che_출병: CityProcess,
     che_징병,
     che_모병: che_징병,