용어집 등록

src/components/category/CategoryBtn.vue

@@ -43,4 +43,15 @@ const selectCategory = (cate) => {
 .cate-list {
     margin-left: -0.25rem;
 }
+
+@media (max-width: 768px) {
+    .cate-list {
+        overflow-x: scroll;
+        flex-wrap: nowrap !important;
+        
+        li {
+            flex: 0 0 auto;
+        }
+    }
+}
 </style>

src/components/wordDict/DictWrite.vue

@@ -7,11 +7,15 @@
             :is-common="true"
             @update:data="selectCategory = $event"
             @change="onChange"
-            />
+        />
-        <button @click="toggleInput">+</button>
+
+        <PlusBtn @click="toggleInput"/>
+        
         <div class="d-flex" v-if="showInput">
             <FormInput :isLabel="false" title="카테고리" name="카테고리"  @update:modelValue="addCategory = $event" :is-alert="addCategoryAlert"/>
-            <button @click="saveInput">저장</button>
+            <button class="btn btn-primary" @click="saveInput">
+                <i class="bx bx-check"></i>
+            </button>
         </div>
     </div>
     <div>
@@ -22,10 +26,13 @@
                 :is-essential="true"
                 :is-alert="wordTitleAlert"
                 @update:modelValue="wordTitle = $event"
-            />    </div>
+            />
+    </div>
     <div>
-        <QEditor @update:data="content = $event" @update:imageUrls="imageUrls = $event"  :is-alert="true" />
+        <QEditor @update:data="content = $event" @update:imageUrls="imageUrls = $event"  :is-alert="wordContentAlert" />
-        <button @click="saveWord">저장</button>
+        <button class="btn btn-primary" @click="saveWord">
+            <i class="bx bx-check"></i>
+        </button>
         <button @click="$emit('close')">취소</button>
     </div>
 </template>
@@ -36,19 +43,21 @@ import { defineProps, computed, ref, defineEmits } from 'vue';
 import QEditor from '@/components/editor/QEditor.vue';
 import FormInput from '@/components/input/FormInput.vue';
 import FormSelect from '@/components/input/FormSelect.vue';
+import PlusBtn from '../button/PlusBtn.vue';
 
 const emit = defineEmits(['close','addCategory','addWord']);
 
 //용어제목
-const wordTitle =ref('');
+const wordTitle = ref('');
-const addCategory =ref('');
+const addCategory = ref('');
 const content = ref('');
 const imageUrls = ref([]);
 
 //용어 Vaildation용
 const wordTitleAlert = ref(false);
-const addcateAlert =ref(false);
+const wordContentAlert = ref(false);
 const addCategoryAlert = ref(false);
+
 //선택 카테고리
 const selectCategory = ref('');
 
@@ -77,27 +86,41 @@ const toggleInput = () => {
 
 // 카테고리 저장
 const saveInput = () => {
-    if( addCategory.value == ''){
+    if(addCategory.value == ''){
         addCategoryAlert.value = true;
         return;
     }
-    console.log('입력값 저장됨!',addCategory.value);
+    // console.log('입력값 저장됨!',addCategory.value);
     emit('addCategory', addCategory.value);
     showInput.value = false;
 };
 
 const onChange = (newValue) => {
-    selectCategory.value =newValue.target.value;
+    selectCategory.value = newValue.target.value;
 };
 
 //용어 등록
 const saveWord = () => {
-    //validation 체크후 emit전송 수정해야함
+    //validation
+
+    // 용어 체크
+    if(wordTitle.value == ''){
+        wordTitleAlert.value = true;
+        return;
+    }
+
+    // 내용 체크
+    if(content.value == ''){
+        wordContentAlert.value = true;
+        return;
+    }
+
     const wordData = {
         title: wordTitle.value,
         category: selectCategory.value,
         content: content.value,
     };
+
     emit('addWord', wordData);
 };
 </script>

src/views/wordDict/wordDict.vue

@@ -30,7 +30,7 @@
 
             <!-- 작성 -->
             <div v-if="isWriteVisible" class="mt-5">
-                <DictWrite @close="isWriteVisible = false" :dataList="cateList" @addCategory="addCategory"/>
+                <DictWrite @close="isWriteVisible = false" :dataList="cateList" @addCategory="addCategory" @addWord="addWord"/>
             </div>
         </div>
 
@@ -61,7 +61,7 @@
 </template>
 
 <script setup>
-    import { ref, watchEffect, computed, onMounted } from 'vue';
+    import { ref, watchEffect, computed, onMounted, getCurrentInstance } from 'vue';
     import axios from '@api';
     import SearchBar from '@c/search/SearchBar.vue';
     import WriteButton from '@c/button/WriteBtn.vue';
@@ -71,6 +71,9 @@
     import DictAlphabetFilter from '@/components/wordDict/DictAlphabetFilter.vue';
     import { useToastStore } from '@s/toastStore';
 
+    const { appContext } = getCurrentInstance();
+    const $common = appContext.config.globalProperties.$common;
+
     const toastStore = useToastStore();
 
     // 공통
@@ -166,16 +169,36 @@
 
         axios.post('worddict/insertCategory',{
             CMNCODNAM: data
-        }).then(res=>{
+        }).then(res => {
             if(res.data.data == '1'){
                 toastStore.onToast('카테고리가 추가 등록 되었습니다.', 's');
-                const newCategory = { CMNCODNAM: data, CMNCODVAL: newValue.toString()   };  // Assuming CMNCODVAL is the same as CMNCODNAM
+                const newCategory = { CMNCODNAM: data, CMNCODVAL: newValue.toString() };  // Assuming CMNCODVAL is the same as CMNCODNAM
                 cateList.value.unshift(newCategory);
                 selectCategory.value = newCategory.CMNCODVAL;
             }
         })
     }
     //용어 등록
+    const addWord = (wordData) => {
+
+        // console.log('단어 추가됨:', wordData.category); // WRDDICCAT
+        // console.log('단어 추가됨:', wordData.content); // WRDDICCON
+        // console.log('단어 추가됨:', wordData.title); // WRDDICTTL
+
+        axios.post('worddict/insertWord',{
+            WRDDICCAT : wordData.category,
+            WRDDICTTL : wordData.title,
+            WRDDICCON : $common.deltaAsJson(wordData.content),
+        }).then(res => {
+            if(res.data.data == '1'){
+                toastStore.onToast('용어가 등록 되었습니다.', 's');
+                isWriteVisible.value = false
+                // const newCategory = { CMNCODNAM: data, CMNCODVAL: newValue.toString() };
+                // cateList.value.unshift(newCategory);
+                // selectCategory.value = newCategory.CMNCODVAL;
+            }
+        })
+    };
 
 </script>