localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

용어집 수정

Browse Source
This commit is contained in:
khj0414 2025-02-04 10:59:49 +09:00
parent 927b742fab
commit 64b0de3e7f
2 changed files with 99 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/wordDict/DictAlphabetFilter.vue
View File

@ -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>
</style>

128
src/views/wordDict/wordDict.vue
View File

@ -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>