용어집 목록 수정
This commit is contained in:
Dang
parent
11d936bcc5
commit
e6efc307ca
@ -1,18 +1,25 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 한글 버튼들 -->
|
||||
<ul>
|
||||
<li v-for="char in koreanChars" :key="char" >
|
||||
<button type="button" class="nav-link" @click="filterByKoreanChar(char)">
|
||||
<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'"
|
||||
@click="selectAlphabet(char)"
|
||||
>
|
||||
{{ char }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- 영어 버튼들 -->
|
||||
<ul>
|
||||
<li v-for="char in englishChars" :key="char">
|
||||
<button type="button" class="nav-link" @click="filterByEnglishChar(char)">
|
||||
<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'"
|
||||
@click="selectAlphabet(char)"
|
||||
>
|
||||
{{ char }}
|
||||
</button>
|
||||
</li>
|
||||
@ -21,28 +28,27 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const emit = defineEmits();
|
||||
const koreanChars = ['ㄱ', 'ㄴ', 'ㄷ', 'ㄹ', 'ㅁ', 'ㅂ', 'ㅅ', 'ㅇ', 'ㅈ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ'];
|
||||
const englishChars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
|
||||
|
||||
const koreanChars = ['ㄱ', 'ㄴ', 'ㄷ', 'ㄹ'];
|
||||
const englishChars = ['a', 'b', 'c', 'd', 'e'];
|
||||
const selectedAlphabet = ref(null);
|
||||
|
||||
// 한글 필터링
|
||||
const filterByKoreanChar = (char) => {
|
||||
emit('filter', char, 'korean');
|
||||
};
|
||||
|
||||
// 영어 필터링
|
||||
const filterByEnglishChar = (char) => {
|
||||
emit('filter', char, 'english');
|
||||
const selectAlphabet = (alphabet) => {
|
||||
selectedAlphabet.value = selectedAlphabet.value === alphabet ? null : alphabet;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.nav-pills {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
.alphabet-list {
|
||||
margin-left: -0.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.alphabet-list {
|
||||
overflow: scroll;
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<li class="mt-5">
|
||||
<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>
|
||||
@ -7,7 +7,7 @@
|
||||
</div>
|
||||
<EditBtn />
|
||||
</div>
|
||||
<p class="mt-5">{{ item.WRDDICCON }}</p>
|
||||
<p class="mt-5" v-html="$common.contentToHtml(item.WRDDICCON)"></p>
|
||||
<div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
|
||||
<div class="d-flex flex-wrap align-items-center mb-50">
|
||||
<div class="avatar avatar-sm me-2">
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
|
||||
<div class="card">
|
||||
<div class="card p-5">
|
||||
<!-- 타이틀, 검색 -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-6">
|
||||
<h5 class="mb-0">용어집</h5>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<h5 class="mb-0 title">용어집</h5>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="col-12 col-md-6">
|
||||
<SearchBar @update:data="search"/>
|
||||
</div>
|
||||
</div>
|
||||
@ -32,30 +32,30 @@
|
||||
<div v-if="isWriteVisible" class="mt-5">
|
||||
<DictWrite @close="isWriteVisible = false" />
|
||||
</div>
|
||||
|
||||
<!-- 용어 리스트 -->
|
||||
<div class="mt-10">
|
||||
<!-- 로딩 중일 때 -->
|
||||
<div v-if="loading">로딩 중...</div>
|
||||
|
||||
<!-- 에러 메시지 -->
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
|
||||
<!-- 단어 목록 -->
|
||||
<ul v-if="filteredList.length" class="px-0 list-unstyled">
|
||||
<DictCard
|
||||
v-for="item in filteredList"
|
||||
:key="item.WRDDICSEQ"
|
||||
:item="item"
|
||||
/>
|
||||
</ul>
|
||||
|
||||
<!-- 데이터가 없을 때 -->
|
||||
<div v-else-if="!loading && !error">용어집의 용어가 없습니다.</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 용어 리스트 -->
|
||||
<div class="mt-10">
|
||||
<!-- 로딩 중일 때 -->
|
||||
<div v-if="loading">로딩 중...</div>
|
||||
|
||||
<!-- 에러 메시지 -->
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
|
||||
<!-- 단어 목록 -->
|
||||
<ul v-if="filteredList.length" class="px-0 list-unstyled">
|
||||
<DictCard
|
||||
v-for="item in filteredList"
|
||||
:key="item.WRDDICSEQ"
|
||||
:item="item"
|
||||
/>
|
||||
</ul>
|
||||
|
||||
<!-- 데이터가 없을 때 -->
|
||||
<div v-else-if="!loading && !error">용어집의 용어가 없습니다.</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@ -95,6 +95,7 @@
|
||||
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;
|
||||
@ -137,12 +138,14 @@
|
||||
|
||||
<style scoped>
|
||||
|
||||
.card > div {
|
||||
padding: 0 30px
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.title {
|
||||
margin-bottom: 0.5rem !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user