feat(WIP): 커맨드 윈도우 UI 구성

hwe/ts/PartialReservedCommand.vue

@@ -3,7 +3,17 @@
     <div class="col alert alert-dark m-0 p-1 center">
       <h4 class="m-0">명령 목록</h4>
     </div>
-
+    <div class="row gx-0 commandSelectFormAnchor">
+      <div class="col-3 d-grid">
+        <BButton variant="primary">편집</BButton>
+      </div>
+      <div class="col-6 d-grid">
+        <BButton variant="light" @click="toggleForm($event)" :style="{color: 'black'}">{{ selectedCommand.simpleName }} ▾</BButton>
+      </div>
+      <div class="col-3 d-grid">
+        <BButton @click="reserveCommand()" variant="primary">실행</BButton>
+      </div>
+    </div>
     <div class="row gx-1">
       <div class="col d-grid">
         <BDropdown left text="턴 선택">
@@ -176,17 +186,13 @@ selectTurn(...$event);
         </BButton>
       </div>
     </div>
-    <div class="row gx-0">
-      <div class="col-2 d-grid"></div>
-      <div class="col-7">
-        <BButton @click="commandSelectForm?.show()">{{ selectedCommand.title }}</BButton>
-      </div>
-      <div class="col-3 d-grid">
-        <BButton @click="reserveCommand()" variant="primary">실행</BButton>
-      </div>
-    </div>
   </div>
-  <CommandSelectForm :commandList="commandList" ref="commandSelectForm" @on-close="chooseCommand($event)" />
+  <CommandSelectForm
+    :commandList="commandList"
+    anchor=".commandSelectFormAnchor"
+    ref="commandSelectForm"
+    @on-close="chooseCommand($event)"
+  />
 </template>
 
 <script lang="ts">
@@ -270,6 +276,16 @@ for (const commandCategories of commandList) {
   }
 }
 
+function toggleForm($event: Event): void{
+  $event.preventDefault();
+
+  const form = commandSelectForm.value;
+  if(!form){
+    return;
+  }
+  form.toggle();
+}
+
 function isDropdownChildren(e?: Event): boolean {
   if (!e) {
     return false;
@@ -539,7 +555,7 @@ async function reserveCommand() {
 }
 
 function chooseCommand(val?: string) {
-  if(!val){
+  if (!val) {
     return;
   }
   selectedCommand.value = invCommandMap[val];