From 64b0de3e7f9f24401b1c3045b86044e2ea635fc2 Mon Sep 17 00:00:00 2001
From: khj0414 <khj0414@local-host.co.kr>
Date: Tue, 4 Feb 2025 10:59:49 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9A=A9=EC=96=B4=EC=A7=91=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wordDict/DictAlphabetFilter.vue           |  22 +--
 src/views/wordDict/wordDict.vue               | 128 ++++++++++++------
 2 files changed, 99 insertions(+), 51 deletions(-)

diff --git a/src/components/wordDict/DictAlphabetFilter.vue b/src/components/wordDict/DictAlphabetFilter.vue
index d8f3f4e..5f4fae8 100644
--- a/src/components/wordDict/DictAlphabetFilter.vue
+++ b/src/components/wordDict/DictAlphabetFilter.vue
@@ -2,10 +2,10 @@
     <div>
         <ul class="alphabet-list list-unstyled d-flex flex-wrap mb-0">
             <li v-for="char in koreanChars" :key="char" class="mt-2 mx-1">
-                <button 
-                    type="button" 
-                    class="btn" 
-                    :class="selectedAlphabet === char ? 'btn-primary' : 'btn-outline-primary'" 
+                <button
+                    type="button"
+                    class="btn"
+                    :class="selectedAlphabet === char ? 'btn-primary' : 'btn-outline-primary'"
                     @click="selectAlphabet(char)"
                 >
                     {{ char }}
@@ -14,10 +14,10 @@
         </ul>
         <ul class="alphabet-list list-unstyled d-flex flex-wrap mb-0">
             <li v-for="char in englishChars" :key="char" class="mt-2 mx-1">
-                <button 
-                    type="button" 
-                    class="btn" 
-                    :class="selectedAlphabet === char ? 'btn-primary' : 'btn-outline-primary'" 
+                <button
+                    type="button"
+                    class="btn"
+                    :class="selectedAlphabet === char ? 'btn-primary' : 'btn-outline-primary'"
                     @click="selectAlphabet(char)"
                 >
                     {{ char }}
@@ -35,8 +35,12 @@ const englishChars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l'
 
 const selectedAlphabet = ref(null);
 
+//emit정의
+const emit = defineEmits();
+
 const selectAlphabet = (alphabet) => {
     selectedAlphabet.value = selectedAlphabet.value === alphabet ? null : alphabet;
+    emit('update:data',selectedAlphabet.value);
 };
 </script>
 
@@ -51,4 +55,4 @@ const selectAlphabet = (alphabet) => {
         flex-wrap: nowrap !important;
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/wordDict/wordDict.vue b/src/views/wordDict/wordDict.vue
index e68dbb3..bf76516 100644
--- a/src/views/wordDict/wordDict.vue
+++ b/src/views/wordDict/wordDict.vue
@@ -14,15 +14,15 @@
 
             <!-- 단어 갯수, 작성하기 -->
             <div class="mt-4">
-                단어 : {{ filteredList.length }}
+                단어 : {{ total }}
                 <WriteButton @click="toggleWriteForm" />
             </div>
 
             <!-- ㄱ ㄴ ㄷ ㄹ -->
             <div>
-                <DictAlphabetFilter/>
+                <DictAlphabetFilter @update:data="handleSelectedAlphabetChange" />
             </div>
-            
+
             <!-- 카테고리 -->
             <div v-if="cateList.length" class="mt-5">
                 <CategoryBtn :lists="cateList" />
@@ -43,13 +43,20 @@
     <div v-if="error" class="error">{{ error }}</div>
 
     <!-- 단어 목록 -->
-    <ul v-if="filteredList.length" class="px-0 list-unstyled">
+    <ul v-if="total > 0" class="px-0 list-unstyled">
         <DictCard
-        v-for="item in filteredList"
+        v-for="item in wordList"
         :key="item.WRDDICSEQ"
         :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>
@@ -57,11 +64,11 @@
 </div>
 
     </div>
-    
+
 </template>
 
 <script setup>
-    import { ref, watchEffect, computed } from 'vue';
+    import { ref, watchEffect, computed, onMounted } from 'vue';
     import axios from '@api';
     import SearchBar from '@c/search/SearchBar.vue';
     import WriteButton from '@c/button/WriteBtn.vue';
@@ -69,7 +76,7 @@
     import DictCard from '@/components/wordDict/DictCard.vue';
     import DictWrite from '@/components/wordDict/DictWrite.vue';
     import DictAlphabetFilter from '@/components/wordDict/DictAlphabetFilter.vue';
-    
+
 
     // 공통
     const loading = ref(false);
@@ -77,62 +84,99 @@
 
     // 용어집
     const wordList = ref([]);
+    //용어집 총개수
+    const total = ref(0);
     // 카테고리
     const cateList = ref([]);
-
+    //선택된 알파벳
+    const selectedAlphabet = ref('');
     // 검색
     const searchText = ref('');
 
     // 작성
     const isWriteVisible = ref(false);
 
-    // 용어집 및 카테고리 목록 통합 API 호출
-    const fetchAllData = async () => {
-        loading.value = true;
-        error.value = '';
-        try {
-            // 용어집
-            const wordResponse = await axios.get('worddict/getWordList');
-            wordList.value = wordResponse.data.data.data;
-            console.log('용어집 데이터:', wordList.value);
+    // 데이터 로드
+    onMounted(() => {
+        getwordList(); //용어목록조회
+        getwordCategory(); //카테고리목록조회
+    });
+    //용어 목록
+    const getwordList = (searchKeyword='',indexKeyword='') => {
+        axios.get('worddict/getWordList',{
+            //목록조회시 파라미터 전달
+            params: { searchKeyword: searchKeyword
+                    ,indexKeyword:indexKeyword
+                    }
+            })
+            .then(res => {
+                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; // 로딩 종료
+            });
+    };
 
-            // 카테고리
-            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 getwordCategory = () => {
+        axios.get('worddict/getWordCategory')
+            .then(res => {
+                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) => {
-        const trimmedSearchText = e.trim();
-        if (trimmedSearchText.length === 0) {
-            alert('검색어를 입력해주세요.');
-            return;
-        }
-        searchText.value = trimmedSearchText;
+        searchText.value = e.trim();
+        getwordList(searchText.value,selectedAlphabet.value);
     };
 
+
+    // 용어집 및 카테고리 목록 통합 API 호출
+    // const fetchAllData = async () => {
+    //     loading.value = true;
+    //     error.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())
-        )
-    );
+    // const filteredList = computed(() =>
+    //     wordList.value.filter(item =>
+    //         item.WRDDICTTL.toLowerCase().includes(searchText.value.toLowerCase())
+    //     )
+    // );
 
     // 작성 toggle
     const toggleWriteForm = () => {
         isWriteVisible.value = !isWriteVisible.value;
     };
 
-    // `watchEffect`로 API 호출
-    watchEffect(() => {
-        fetchAllData();
-    });
 
 </script>