fix: ui 요소 안정화

- 사령부
- 커맨드 되돌아가기

hwe/ts/ChiefCenter/TopItem.vue

@@ -2,35 +2,38 @@
   <div :class="['subRows', 'c-bg2', 'chiefCommand']" :style="style">
     <div class="bg1 center row gx-0" style="font-size: 1.2em">
       <div class="col-5 align-self-center text-end">
-        {{ officer?`${officer.officerLevelText} : `:'' }}
+        {{ officer ? `${officer.officerLevelText} : ` : "" }}
       </div>
       <div
         class="col-7 align-self-center"
         :style="{
-          color: getNpcColor((officer?.npcType) ?? 0),
+          color: getNpcColor(officer?.npcType ?? 0),
         }"
       >
         {{ officer?.name }}
       </div>
     </div>
-    <template v-if="officer">
-      <div class="row gx-0" v-for="(turn, idx) in officer.turn" :key="idx">
-        <div class="col-2 time_pad f_tnum">
-          {{ turnTimes[idx] }}
-        </div>
-        <div
-          class="tableCell align-self-center col-10 center turn_pad"
-          :style="{
-            fontSize:
-              mb_strwidth(turn.brief) > 28
-                ? `${28 / mb_strwidth(turn.brief)}em`
-                : undefined,
-          }"
-        >
-          {{ turn.brief }}
-        </div>
+    <div class="row gx-0" v-for="vidx in maxTurn" :key="vidx">
+      <div class="col-2 time_pad f_tnum">
+        {{ turnTimes[vidx - 1] ?? "" }}
       </div>
-    </template>
+      <div
+        class="center turn_pad"
+        v-if="!officer || (!officer.turn) || !(vidx - 1 in officer.turn)"
+      ></div>
+      <div
+        v-else
+        class="tableCell align-self-center col-10 center turn_pad"
+        :style="{
+          fontSize:
+            mb_strwidth(officer.turn[vidx - 1].brief) > 28
+              ? `${28 / mb_strwidth(officer.turn[vidx - 1].brief)}em`
+              : undefined,
+        }"
+      >
+        {{ officer.turn[vidx - 1].brief }}
+      </div>
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -49,9 +52,9 @@ export default defineComponent({
     style: VueTypes.object.isRequired,
     officer: {
       type: Object as PropType<ChiefResponse["chiefList"][0]>,
-      required: true,
     },
     turnTerm: VueTypes.integer.isRequired,
+    maxTurn: VueTypes.integer.isRequired,
   },
   methods: {
     getNpcColor,
@@ -60,14 +63,10 @@ export default defineComponent({
 
   data() {
     const turnTimes: string[] = [];
-    if (!this.officer) {
-      return {};
-    }
-
-    if (!this.officer.turnTime) {
+    if (!this.officer || !this.officer.turnTime) {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      for (const _ of range(this.officer.turn.length)) {
-        turnTimes.push("-");
+      for (const _ of range(this.maxTurn)) {
+        turnTimes.push("");
       }
     } else {
       const baseTurnTime = parseTime(this.officer.turnTime);

hwe/ts/PageChiefCenter.vue

@@ -38,6 +38,7 @@
             v-if="officerLevel != chiefLevel"
             :style="mainTableGridRows"
             :officer="officer"
+            :maxTurn="maxChiefTurn"
             :turnTerm="turnTerm"
           />
           <div class="commandBox" v-else>
@@ -352,7 +353,7 @@ export default defineComponent({
   setup(props) {
     const viewTarget = ref<number | undefined>();
 
-    const turnList = ref(new Set<number>([2]));
+    const turnList = ref(new Set<number>());
 
     const targetIsMe = ref<boolean>(false);
     watch(viewTarget, (val) => {

hwe/ts/components/BottomBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg0">
+  <div class="bg0" style="padding-top:20px;">
     <button type="button" class="btn btn-sammo-base2 back_btn" @click="back">
       돌아가기
     </button>