용어집 입력 및 입력 수정 중

src/components/category/CategoryBtn.vue

@@ -9,17 +9,17 @@
                 type="button"
                 class="btn"
                 :class="{
-                    'btn-outline-primary': category !== selectedCategory,
+                    'btn-outline-primary': category.CMNCODVAL !== selectedCategory,
-                    'btn-primary': category === selectedCategory
+                    'btn-primary': category.CMNCODVAL === selectedCategory
                 }"
-                @click="selectCategory(category)"
+                @click="selectCategory(category.CMNCODVAL)"
             >{{ category.CMNCODNAM }}</button>
         </li>
     </ul>
 </template>
 
 <script setup>
-import { defineProps, ref  } from 'vue';
+import { defineProps, ref } from 'vue';
 
 // lists prop 정의
 const props = defineProps({
@@ -31,9 +31,10 @@ const props = defineProps({
 
 // 카테고리 선택
 const selectedCategory = ref(null);
-
+const emit = defineEmits();
-const selectCategory = (category) => {
+const selectCategory = (cate) => {
-    selectedCategory.value = category;
+    selectedCategory.value = selectedCategory.value === cate ? null : cate;
+    emit('update:data', selectedCategory.value);
 };
 </script>
 
@@ -42,8 +43,4 @@ const selectCategory = (category) => {
 .cate-list {
     margin-left: -0.25rem;
 }
-
-@media screen and  (max-width:450px) {
-    
-}
 </style>

src/components/wordDict/DictAlphabetFilter.vue

@@ -49,7 +49,7 @@ const selectAlphabet = (alphabet) => {
 
 @media (max-width: 768px) {
     .alphabet-list {
-        overflow: scroll;
+        overflow-x: scroll;
         flex-wrap: nowrap !important;
     }
 }

src/components/wordDict/DictCard.vue

@@ -2,7 +2,7 @@
     <li class="mt-5 card p-5">
         <div class="d-flex align-items-center">
             <div class="w-100 d-flex align-items-center">
-                <span class="btn btn-primary">{{ item.category }}</span>
+                <span class="btn btn-primary pe-none">{{ item.category }}</span>
                 <strong class="mx-2 w-75">{{ item.WRDDICTTL }}</strong>
             </div>
             <EditBtn />

src/components/wordDict/DictWrite.vue

@@ -1,11 +1,14 @@
 <template>
-    <div>
+    <div class="d-flex">
-        <FormSelect/>
+        <FormSelect :isLabel="false" :data="formattedDataList" :isCommon="true" name="용어집 카테고리" title="용어집 카테고리"/>
-        <button>쇼핑몰</button>
+        <button @click="toggleInput">+</button>
-        <button>저장</button>
+        <div class="d-flex" v-if="showInput">
+            <FormInput :isLabel="false" title="용어집 입력" name="용어집 입력"/>
+            <button @click="saveInput">저장</button>
+        </div>
     </div>
     <div>
-        <FormInput/>
+        <FormInput title="내용" name="용어집 내용 입력"/>
     </div>
     <div>
         <QEditor/>
@@ -15,7 +18,40 @@
 </template>
 
 <script setup>
+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';
+
+const emit = defineEmits(['close']);
+
+const props = defineProps({
+    dataList: {
+        type: Array,
+        default: () => []
+    }
+});
+
+// 데이터 포맷 수정
+const formattedDataList = computed(() =>
+    props.dataList.map(item => ({
+        label: item.CMNCODNAM,
+        value: item.CMNCODVAL
+    }))
+);
+
+// 카테고리 입력 창
+const showInput = ref(false);
+
+// 카테고리 입력 토글
+const toggleInput = () => {
+    howInput.value = !showInput.value;
+};
+
+// 카테고리 저장
+const saveInput = () => {
+    console.log('입력값 저장됨!');
+    showInput.value = false;
+};
 </script>

src/views/wordDict/wordDict.vue

@@ -25,12 +25,12 @@
 
             <!-- 카테고리 -->
             <div v-if="cateList.length" class="mt-5">
-                <CategoryBtn :lists="cateList" />
+                <CategoryBtn :lists="cateList" @update:data="handleSelectedCategoryChange"/>
             </div>
 
             <!-- 작성 -->
             <div v-if="isWriteVisible" class="mt-5">
-                <DictWrite @close="isWriteVisible = false" />
+                <DictWrite @close="isWriteVisible = false" :dataList="cateList"/>
             </div>
         </div>
 
@@ -50,16 +50,9 @@
         :item="item"
         />
     </ul>
-    <!-- <ul v-if="wordList.length > 0" class="px-0 list-unstyled">
-        <DictCard
-        v-for="item in wordList"
-        :key="item.WRDDICSEQ"
-        :item="item"
-        />
-    </ul> -->
 
     <!-- 데이터가 없을 때 -->
-    <div v-else-if="!loading && !error">용어집의 용어가 없습니다.</div>
+    <div v-else-if="!loading && !error" class="card p-5 text-center">용어집의 용어가 없습니다.</div>
 
 </div>
 
@@ -84,12 +77,17 @@
 
     // 용어집
     const wordList = ref([]);
+
     //용어집 총개수
     const total = ref(0);
+
     // 카테고리
     const cateList = ref([]);
+    const selectedCategory = ref('');
+
     //선택된 알파벳
     const selectedAlphabet = ref('');
+    
     // 검색
     const searchText = ref('');
 
@@ -98,77 +96,61 @@
 
     // 데이터 로드
     onMounted(() => {
-        getwordList(); //용어목록조회
+        getwordList();
-        getwordCategory(); //카테고리목록조회
+        getwordCategory();
     });
+    
     //용어 목록
-    const getwordList = (searchKeyword='',indexKeyword='') => {
+    const getwordList = (searchKeyword='', indexKeyword='', category='') => {
         axios.get('worddict/getWordList',{
             //목록조회시 파라미터 전달
-            params: { searchKeyword: searchKeyword
+            params: { 
-                    ,indexKeyword:indexKeyword
+                        searchKeyword : searchKeyword,
+                        indexKeyword :indexKeyword,
+                        category : category
                     }
             })
             .then(res => {
-                wordList.value = res.data.data.data; // 용어 목록 저장
+                 // 용어 목록 저장
-                total.value = res.data.data.total; // 총 개수 저장
+                wordList.value = res.data.data.data;
+                 // 총 개수 저장
+                total.value = res.data.data.total;
                 loading.value = false;
             })
             .catch(err => {
                 console.error('데이터 로드 오류:', err);
                 error.value = '데이터를 가져오는 중 문제가 발생했습니다.';
-                loading.value = false; // 로딩 종료
+                loading.value = false;
             });
     };
     // 카테고리 목록
     const getwordCategory = () => {
         axios.get('worddict/getWordCategory')
             .then(res => {
-                cateList.value = res.data.data; // 카테고리 목록 저장
+                cateList.value = res.data.data;
             })
             .catch(err => {
                 console.error('카테고리 로드 오류:', err);
                 error.value = '카테고리 데이터를 가져오는 중 문제가 발생했습니다.';
             });
     };
-    const handleSelectedAlphabetChange = (newAlphabet) => {
-        selectedAlphabet.value = newAlphabet;
-        getwordList(searchText.value,selectedAlphabet.value);
-    };
     // 검색
     const search = (e) => {
         searchText.value = e.trim();
-        getwordList(searchText.value,selectedAlphabet.value);
+        getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value);
     };
 
+    // 알파벳 선택
+    const handleSelectedAlphabetChange = (newAlphabet) => {
+        selectedAlphabet.value = newAlphabet;
+        getwordList(searchText.value, selectedAlphabet.value,  selectedCategory.value);
+    };
 
-    // 용어집 및 카테고리 목록 통합 API 호출
+    // 카테고리 선택
-    // const fetchAllData = async () => {
+    const handleSelectedCategoryChange = (category) => {
-    //     loading.value = true;
+        selectedCategory.value = category;
-    //     error.value = '';
+        getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value)
-    //     try {
+    }
-    //         // 용어집
-    //        // const wordResponse = await axios.get('worddict/getWordList');
-    //         //wordList.value = wordResponse.data.data.data;
-    //         //console.log('용어집 데이터:', wordList.value);
-
-    //         // 카테고리
-    //         const categoryResponse = await axios.get('worddict/getWordCategory');
-    //         cateList.value = categoryResponse.data.data;
-    //         console.log('카테고리 데이터:', cateList.value);
-    //     } catch (err) {
-    //         error.value = '데이터를 가져오는 중 문제가 발생했습니다.';
-    //     } finally {
-    //         loading.value = false;
-    //     }
-    // };
-
-    // 검색
-    // const filteredList = computed(() =>
-    //     wordList.value.filter(item =>
-    //         item.WRDDICTTL.toLowerCase().includes(searchText.value.toLowerCase())
-    //     )
-    // );
 
     // 작성 toggle
     const toggleWriteForm = () => {