용어집 수정정

src/components/wordDict/DictAlphabetFilter.vue

@@ -1,56 +1,86 @@
 <template>
-    <div>
+        <ul class="d-flex p-0 mb-0">
-        <ul class="alphabet-list list-unstyled d-flex flex-wrap mb-0">
+            <li v-for="(char, index) in koreanChars" :key="char.CHARACTER_" class="d-flex">
-            <li v-for="char in koreanChars" :key="char" class="mt-2 me-2">
                 <button
                     type="button"
-                    class="btn"
+                    class="alphabet-btn"
-                    :class="selectedAlphabet === char ? 'btn-primary' : 'btn-outline-primary'"
+                    :class="{ active: selectedAl === char.CHARACTER_ }"
-                    @click="selectAlphabet(char)"
+                    @click="selectAlphabet(char.CHARACTER_)"
                 >
-                    {{ char }}
+                    {{ char.CHARACTER_ }} ({{ char.COUNT }})
                 </button>
+                <span v-if="index !== koreanChars.length - 1" class="divider">|</span>
             </li>
         </ul>
-        <ul class="alphabet-list list-unstyled d-flex flex-wrap mb-0">
+        <ul class="d-flex p-0 mb-0">
-            <li v-for="char in englishChars" :key="char" class="mt-2 me-2">
+            <li v-for="(char, index) in englishChars" :key="char.CHARACTER_" class="d-flex">
                 <button
                     type="button"
-                    class="btn"
+                    class="alphabet-btn"
-                    :class="selectedAlphabet === char ? 'btn-primary' : 'btn-outline-primary'"
+                    :class="{ active: selectedAl === char.CHARACTER_ }"
-                    @click="selectAlphabet(char)"
+                    @click="selectAlphabet(char.CHARACTER_)"
                 >
-                    {{ char }}
+                    {{ char.CHARACTER_ }} ({{ char.COUNT }})
                 </button>
+                <span v-if="index !== englishChars.length - 1" class="divider">|</span>
             </li>
         </ul>
-    </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 
-const koreanChars = ['ㄱ', 'ㄴ', 'ㄷ', 'ㄹ', 'ㅁ', 'ㅂ', 'ㅅ', 'ㅇ', 'ㅈ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ'];
+const props = defineProps({
-const englishChars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
+    indexCategory: {
+        type: Array,
+        required: true,
+    },
+    selectedAl: {
+        type: String,
+        default : '',
+        required: false,
+    },
+});
+
+const selectedAlphabet = ref(props.selectedAl);
+const koreanChars = computed(() => {
+    return props.indexCategory.filter(char => /[ㄱ-ㅎ가-힣]/.test(char.CHARACTER_));
+});
+
+const englishChars = computed(() => {
+    return props.indexCategory.filter(char => /^[a-zA-Z]$/.test(char.CHARACTER_));
+});
 
-const selectedAlphabet = ref(null);
-//emit정의
 const emit = defineEmits();
 const selectAlphabet = (alphabet) => {
     selectedAlphabet.value = selectedAlphabet.value === alphabet ? null : alphabet;
-    emit('update:data',selectedAlphabet.value);
+    emit('update:data', selectedAlphabet.value);
 };
 </script>
 
 <style scoped>
-.btn {
+.alphabet-btn {
-    min-width: 56px;
+    background: none;
+    border: none;
+    font-size: 13px;
+    font-weight: bold;
+    color: #6c757d;
+    cursor: pointer;
+    width: 70%;
+    height: 40px;
 }
 
-@media (max-width: 768px) {
+.alphabet-btn:hover {
-    .alphabet-list {
+    color: #0d6efd;
-        overflow-x: scroll;
+}
-        flex-wrap: nowrap !important;
+
-    }
+.alphabet-btn.active {
+    color: #0d6efd;
+    text-decoration: underline;
+}
+.divider {
+    color: #bbb;
+    font-size: 14px;
+    font-weight: bold;
 }
 </style>

src/components/wordDict/DictWrite.vue

@@ -11,6 +11,7 @@
                     @change="onChange"
                     :value="formValue"
                     :disabled="isDisabled"
+                    :isEssential="true"
                 />
             </div>
             <div class="col-2 btn-margin" v-if="!isDisabled">
@@ -85,6 +86,7 @@ const computedTitle = computed(() =>
 // 카테고리 상태
 const selectedCategory = computed(() =>
     selectCategory.value === '' ? props.formValue : selectCategory.value
+
 );
 
 // 카테고리 입력 중복 ref
@@ -154,16 +156,15 @@ const saveWord = () => {
         wordContentAlert.value = true;
         return;
     }
-    
-
     const wordData = {
         id: props.NumValue || null,
         title: computedTitle.value,
         category: selectedCategory.value,
         content: content.value,
     };
-
+    emit('addWord', wordData,  addCategory.value === ''
-    emit('addWord', wordData, addCategory.value);
+    ? (isNaN(selectedCategory.value) ? selectedCategory.value : Number(selectedCategory.value))
+    : addCategory.value);
 }
 
 

src/views/wordDict/wordDict.vue

@@ -1,42 +1,31 @@
 <template>
     <div class="container-xxl flex-grow-1 container-p-y">
-        <div class="card p-5">
+        <div >
             <!-- 타이틀, 검색 -->
             <div class="row">
                 <div class="col-12 col-md-6">
-                    <h5 class="mb-0 title">용어집</h5>
+                    <h5 class="mb-0 title"></h5>
                 </div>
-                <div class="col-12 col-md-6">
                     <SearchBar @update:data="search"/>
             </div>
-            </div>
-
             <!-- 단어 갯수, 작성하기 -->
-            <div class="mt-4">
                 <WriteButton ref="writeButton" @click="writeStore.toggleItem(999999)" :isToggleEnabled="true"/>
-            </div>
-
             <!-- ㄱ ㄴ ㄷ ㄹ -->
-            <div>
+            <DictAlphabetFilter @update:data="handleSelectedAlphabetChange" :indexCategory="indexCategory" :selectedAl="selectedAlphabet"/>
-                <DictAlphabetFilter @update:data="handleSelectedAlphabetChange" />
-            </div>
-
             <!-- 카테고리 -->
-            <div v-if="cateList.length" class="mt-5">
+            <div v-if="cateList.length">
                 <CategoryBtn :lists="cateList" @update:data="handleSelectedCategoryChange"/>
             </div>
-
             <!-- 작성 -->
-            <div v-if="writeStore.isItemActive(999999)" class="mt-5">
+            <div v-if="writeStore.isItemActive(999999)" class="mt-5 card p-5">
                 <DictWrite @close="writeStore.closeAll()" :dataList="cateList"  @addWord="addWord"/>
             </div>
         </div>
 
         <!-- 용어 리스트 -->
-        <div class="mt-10">
+        <div >
             <!-- 로딩 중일 때 -->
             <div v-if="loading">로딩 중...</div>
-
             <!-- 에러 메시지 -->
             <div v-if="error" class="error">{{ error }}</div>
 
@@ -51,10 +40,8 @@
                     @updateChecked="updateCheckedItems"
                 />
             </ul>
-
             <!-- 데이터가 없을 때 -->
-            <div v-else-if="!loading && !error" class="card p-5 text-center">용어집의 용어가 없습니다.</div>
+            <div v-else-if="!loading && !error" class="card p-5 text-center mt-5">✏️ 용어를 선택/작성해 주세요 ✏️ </div>
-
         </div>
 
     </div>
@@ -116,9 +103,13 @@
     // 검색
     const searchText = ref('');
 
+    //검색 정렬
+    const indexCategory = ref([]);
+
     // 데이터 로드
     onMounted(() => {
-        getwordList();
+        //getwordList();
+        getIndex();
     });
 
     //용어 목록
@@ -144,6 +135,14 @@
                 loading.value = false;
             });
     };
+    //정렬 목록
+    const getIndex = () => {
+        axios.get('worddict/getIndexCategory').then(res=>{
+            if(res.data.status ="OK"){
+                indexCategory.value = res.data.data;
+            }
+        })
+    }
 
     // 검색
     const search = (e) => {
@@ -166,29 +165,25 @@
     // 용어집 등록
     const addWord = (wordData, data) => {
         let category = null;
+        let newCodName =  '';
         // 카테고리 체크
-        const existingCategory = cateList.value.find(item => item.label === data.trim());
+        console.log('data',data)
-
+        if(typeof(data) == 'number'){
-        if (existingCategory) {
+            category = data;
-            //카테고리 있을시 그냥 저장
+            newCodName = '';
-            category = existingCategory.label == '' ? wordData.category : existingCategory.value;
+        }else{
-        } else {
-            //카테고리 없을시 카테고리 와 용어 둘다 저장
             const lastCategory = cateList.value[cateList.value.length - 1];
             category = lastCategory ? lastCategory.value + 1 : 600101;
-            
+            newCodName = data;
         }
-        sendWordRequest(category, wordData, data, !existingCategory);
+        sendWordRequest(category, wordData, newCodName);
     };
-
+    const sendWordRequest = (category, wordData, data) => {
-    const sendWordRequest = (category, wordData, data, isNewCategory) => {
         const payload = {
             WRDDICCAT: category,
             WRDDICTTL: wordData.title,
             WRDDICCON: $common.deltaAsJson(wordData.content),
         };
-
-        if (isNewCategory) {
             payload.CMNCODNAM = data;
             axios.post('worddict/insertWord', payload).then(res => {
                 if (res.data.status === 'OK') {
@@ -198,22 +193,14 @@
                         writeButton.value.resetButton();
                     }
                     getwordList();
+                    getIndex();
+                    if(res.data.data == '2'){
                         const newCategory = { label: data, value: category };
-                    cateList.value = [newCategory, ...cateList.value];
+                        cateList.value = [...cateList.value,newCategory];
+                    }
+                    selectedAlphabet.value = '';
                 }
             });
-        } else {
-            axios.post('worddict/insertWord', payload).then(res => {
-                if (res.data.status === 'OK') {
-                    toastStore.onToast('용어가 등록 되었습니다.', 's');
-                    writeStore.closeAll();
-                    if (writeButton.value) {
-                        writeButton.value.resetButton();
-                    }
-                    getwordList();
-                }
-            });
-        }
     };