Merge branch 'main' into login

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

@@ -1,18 +1,38 @@
 <template>
     <div class="d-flex">
-        <FormSelect :isLabel="false" :data="formattedDataList" :isCommon="true" name="용어집 카테고리" title="용어집 카테고리"/>
+        <FormSelect
-        <button @click="toggleInput">+</button>
+            name="cate"
+            title="카테고리"
+            :data="formattedDataList"
+            :is-common="true"
+            @update:data="selectCategory = $event"
+            @change="onChange"
+        />
+
+        <PlusBtn @click="toggleInput"/>
+        
         <div class="d-flex" v-if="showInput">
-            <FormInput :isLabel="false" title="용어집 입력" name="용어집 입력"/>
+            <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>
-        <FormInput title="내용" name="용어집 내용 입력"/>
+        <FormInput
+                title="용어"
+                type="text"
+                name="word"
+                :is-essential="true"
+                :is-alert="wordTitleAlert"
+                @update:modelValue="wordTitle = $event"
+            />
     </div>
     <div>
-        <QEditor/>
+        <QEditor @update:data="content = $event" @update:imageUrls="imageUrls = $event"  :is-alert="wordContentAlert" />
-        <button>저장</button>
+        <button class="btn btn-primary" @click="saveWord">
+            <i class="bx bx-check"></i>
+        </button>
         <button @click="$emit('close')">취소</button>
     </div>
 </template>
@@ -23,8 +43,23 @@ 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']);
+const emit = defineEmits(['close','addCategory','addWord']);
+
+//용어제목
+const wordTitle = ref('');
+const addCategory = ref('');
+const content = ref('');
+const imageUrls = ref([]);
+
+//용어 Vaildation용
+const wordTitleAlert = ref(false);
+const wordContentAlert = ref(false);
+const addCategoryAlert = ref(false);
+
+//선택 카테고리
+const selectCategory = ref('');
 
 const props = defineProps({
     dataList: {
@@ -46,12 +81,46 @@ const showInput = ref(false);
 
 // 카테고리 입력 토글
 const toggleInput = () => {
-    howInput.value = !showInput.value;
+    showInput.value = !showInput.value;
 };
 
 // 카테고리 저장
 const saveInput = () => {
-    console.log('입력값 저장됨!');
+    if(addCategory.value == ''){
+        addCategoryAlert.value = true;
+        return;
+    }
+    // console.log('입력값 저장됨!',addCategory.value);
+    emit('addCategory', addCategory.value);
     showInput.value = false;
 };
-</script>
+
+const onChange = (newValue) => {
+    selectCategory.value = newValue.target.value;
+};
+
+//용어 등록
+const saveWord = () => {
+    //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"/>
+                <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';
@@ -69,7 +69,12 @@
     import DictCard from '@/components/wordDict/DictCard.vue';
     import DictWrite from '@/components/wordDict/DictWrite.vue';
     import DictAlphabetFilter from '@/components/wordDict/DictAlphabetFilter.vue';
+    import { useToastStore } from '@s/toastStore';
 
+    const { appContext } = getCurrentInstance();
+    const $common = appContext.config.globalProperties.$common;
+
+    const toastStore = useToastStore();
 
     // 공통
     const loading = ref(false);
@@ -87,7 +92,7 @@
 
     //선택된 알파벳
     const selectedAlphabet = ref('');
-    
+
     // 검색
     const searchText = ref('');
 
@@ -99,12 +104,12 @@
         getwordList();
         getwordCategory();
     });
-    
+
     //용어 목록
     const getwordList = (searchKeyword='', indexKeyword='', category='') => {
         axios.get('worddict/getWordList',{
             //목록조회시 파라미터 전달
-            params: { 
+            params: {
                         searchKeyword : searchKeyword,
                         indexKeyword :indexKeyword,
                         category : category
@@ -157,6 +162,43 @@
         isWriteVisible.value = !isWriteVisible.value;
     };
 
+    //카테고리 등록
+    const addCategory = (data) =>{
+        const lastCategory = cateList.value[cateList.value.length - 1];
+        const newValue = lastCategory ? parseInt(lastCategory.CMNCODVAL) + 1 : 600101;
+
+        axios.post('worddict/insertCategory',{
+            CMNCODNAM: data
+        }).then(res => {
+            if(res.data.data == '1'){
+                toastStore.onToast('카테고리가 추가 등록 되었습니다.', 's');
+                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>
 
@@ -172,4 +214,4 @@
         margin-bottom: 0.5rem !important;
     }
 }
-</style>
+</style>