feat, refac: 메인 페이지에서 커맨드 리스트를 동적으로 받아옴

hwe/ts/components/CommandSelectForm.vue

@@ -59,7 +59,7 @@
 <script setup lang="ts">
 import type { CommandItem } from "@/defs";
 import { BButton } from "bootstrap-vue-3";
-import { ref, type PropType, watch, onMounted } from "vue";
+import { ref, type PropType, watch } from "vue";
 
 interface CategoryDecoration {
   name: string;
@@ -106,7 +106,7 @@ const props = defineProps({
 const chosenCategory = ref<string>("-");
 const chosenSubList = ref<CommandItem[]>([]);
 
-const categories = new Set(props.commandList.map(({ category }) => category));
+const categories = ref();
 
 watch(
   () => props.activatedCategory,
@@ -142,12 +142,24 @@ const commandList = ref(
 
 function updateCommandList(rawCommandList: typeof props.commandList) {
   commandList.value.clear();
+  const newCategories = new Set<string>();
   for (const { category, values } of rawCommandList) {
+    newCategories.add(category);
     commandList.value.set(category, {
       deco: convCategoryDeco(category),
       values,
     });
   }
+  categories.value = newCategories;
+
+  if(categories.value.size === 0) {
+    chosenCategory.value = "";
+  }
+  else if (!categories.value.has(props.activatedCategory)) {
+    chosenCategory.value = rawCommandList[0].category;
+  } else {
+    chosenCategory.value = props.activatedCategory;
+  }
 }
 
 watch(() => props.commandList, updateCommandList);
@@ -165,14 +177,6 @@ watch(chosenCategory, (category) => {
   }
 });
 
-onMounted(() => {
-  if (!categories.has(props.activatedCategory)) {
-    chosenCategory.value = props.commandList[0].category;
-  } else {
-    chosenCategory.value = props.activatedCategory;
-  }
-});
-
 function show(): void {
   showForm.value = true;
 }