feat: 턴 선택기에서 클립보드, 선택 카테고리를 상태 관리

hwe/ts/components/CommandSelectForm.vue

@@ -69,9 +69,6 @@ import type { CommandItem } from "@/defs";
 import { BButton } from "bootstrap-vue-3";
 import { ref, defineProps, defineEmits, defineExpose, type PropType, watch, onMounted } from "vue";
 
-const chosenCategory = ref<string>("-");
-const chosenSubList = ref<CommandItem[]>([]);
-
 interface CategoryDecoration {
     name: string,
     altName?: string,
@@ -101,9 +98,23 @@ const props = defineProps({
         type: Boolean,
         required: false,
         default: true,
+    },
+    activatedCategory: {
+        type: String,
+        required: false,
+        default: "",
     }
 })
 
+const chosenCategory = ref<string>('-');
+const chosenSubList = ref<CommandItem[]>([]);
+
+const categories = new Set(props.commandList.map(({category})=>category));
+
+watch(()=>props.activatedCategory, (newValue)=>{
+    chosenCategory.value = newValue;
+})
+
 const showForm = ref(false);
 
 function convCategoryDeco(category: string): CategoryDecoration {
@@ -140,17 +151,25 @@ watch(() => props.commandList, updateCommandList);
 updateCommandList(props.commandList);
 
 watch(chosenCategory, (category) => {
-    console.log('sel', category);
     const itemInfo = commandList.value?.get(category);
     if (itemInfo === undefined) {
         console.error(`category 없음: ${category}`);
         return;
     }
     chosenSubList.value = itemInfo.values;
+    if(props.activatedCategory !== category){
+        emits('update:activatedCategory', category);
+    }
 });
 
 onMounted(() => {
-    chosenCategory.value = props.commandList[0].category;
+    if(!categories.has(props.activatedCategory)){
+        chosenCategory.value = props.commandList[0].category;
+    }
+    else{
+        chosenCategory.value = props.activatedCategory;
+    }
+
 });
 
 function show(): void {
@@ -171,6 +190,7 @@ function close(category?: string): void {
 
 const emits = defineEmits<{
     (event: 'onClose', command?: string): void,
+    (event: 'update:activatedCategory', category: string): void,
 }>();
 
 defineExpose({