com : selectCode 로딩지연 이슈 Promise 객체로 받아서 1번만 호출되게 개선

src/components/app-vuero/VCodeSelect.vue

@@ -47,12 +47,13 @@ const classes = computed(() => {
   return ['select', props.multiple && 'is-multiple']
 })
 
-const cdItems = ref<Array<{ cd: string; nm: string }>>([])
+const cdItems = computed(() => {
+  return detailCode.getCodeList(props.cd_grp)
+})
 
 watch(() => props.cd_grp, async (newVal) => {
   if (newVal) {
     await detailCode.setDetailCode(newVal)
-    cdItems.value = detailCode.getCodeList(newVal)
   }
 }, { immediate: true })
 </script>

src/stores/codeStore.ts

@@ -1,17 +1,27 @@
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import { useStorage } from '@vueuse/core'
 import { getDetailCode } from '/@src/service/code'
 
 export const useCodes = defineStore('codeStore', () => {
     // 🟡 상태
     const codes = ref<Record<number, Array<{ cd: string; nm: string }>>>({})
 
-    // 🔵 액션: 코드 불러오기
+    const loadingPromises = new Map<number, Promise<void>>()
+
     const setDetailCode = async (cd_grp: number) => {
-        if (!codes.value[cd_grp]) {
-            const res = await getDetailCode(cd_grp)
-            codes.value[cd_grp] = res
+        if (codes.value[cd_grp] && codes.value[cd_grp].length > 0) return
+
+        if (loadingPromises.has(cd_grp)) {
+            return loadingPromises.get(cd_grp)
         }
+
+        const p = getDetailCode(cd_grp).then((res) => {
+            codes.value[cd_grp] = res
+        }).finally(() => {
+            loadingPromises.delete(cd_grp)
+        })
+
+        loadingPromises.set(cd_grp, p)
+        return p
     }
 
     // 🟢 코드 목록 가져오기