용어집 작업
This commit is contained in:
Dang
parent
ae2dbd4992
commit
3fed028259
@ -32,6 +32,10 @@ const routes = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/wordDict',
|
||||||
|
component: () => import('@v/wordDict/wordDict.vue'),
|
||||||
|
},
|
||||||
// 레이아웃 필요없을 때 예시
|
// 레이아웃 필요없을 때 예시
|
||||||
// {
|
// {
|
||||||
// path: '/login',
|
// path: '/login',
|
||||||
|
|||||||
207
src/views/wordDict/wordDict.vue
Normal file
207
src/views/wordDict/wordDict.vue
Normal file
@ -0,0 +1,207 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container-xxl flex-grow-1 container-p-y">
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<!-- 타이틀, 검색 -->
|
||||||
|
<div class="row mt-4">
|
||||||
|
<div class="col-6">
|
||||||
|
<h5 class="mb-0">용어집</h5>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<SearchBar @update:data="search"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 단어 갯수, 작성하기 -->
|
||||||
|
<div class="mt-4">
|
||||||
|
단어 : {{ filteredList.length }}
|
||||||
|
<WriteButton />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="nav-align-top">
|
||||||
|
<ul class="nav nav-pills" role="tablist">
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<button type="button" class="nav-link">ㄱ</button>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<button type="button" class="nav-link">ㄴ</button>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<button type="button" class="nav-link">ㄷ</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="nav nav-pills" role="tablist">
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<button type="button" class="nav-link">a</button>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<button type="button" class="nav-link">b</button>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item" role="presentation">
|
||||||
|
<button type="button" class="nav-link">c</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 카테고리 -->
|
||||||
|
<div>
|
||||||
|
<ul v-if="cateList.length">
|
||||||
|
<li v-for="item in cateList" :key="item.CMNCODVAL">
|
||||||
|
<button>{{ item.CMNCODNAM }}</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 용어 리스트 -->
|
||||||
|
<div>
|
||||||
|
<!-- 로딩 중일 때 -->
|
||||||
|
<div v-if="loading">로딩 중...</div>
|
||||||
|
|
||||||
|
<!-- 에러 메시지 -->
|
||||||
|
<div v-if="error" class="error">{{ error }}</div>
|
||||||
|
|
||||||
|
<!-- 단어 목록 -->
|
||||||
|
<ul v-if="filteredList.length" class="word-list">
|
||||||
|
<li v-for="item in filteredList" :key="item.WRDDICSEQ">
|
||||||
|
<div class="d-flex">
|
||||||
|
<div>
|
||||||
|
({{ item.category }}) <strong>{{ item.WRDDICTTL }}</strong>
|
||||||
|
</div>
|
||||||
|
<WriteButton />
|
||||||
|
</div>
|
||||||
|
<p>{{ item.WRDDICCON }}</p>
|
||||||
|
<div>
|
||||||
|
<img :src="'/img/avatars/' + item.author.profileImage" alt="최초 작성자" />
|
||||||
|
최초 작성자 {{ item.author.name }}
|
||||||
|
작성일 {{ new Date(item.author.createdAt).toLocaleString() }}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img :src="'/img/avatars/' + item.lastEditor.profileImage" alt="최근 수정자" />
|
||||||
|
최근 수정자 {{ item.lastEditor.name }}
|
||||||
|
수정일 {{ new Date(item.lastEditor.updatedAt).toLocaleString() }}
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<!-- 데이터가 없을 때 -->
|
||||||
|
<div v-else-if="!loading && !error">용어집의 용어가 없습니다.</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 작성 및 수정 -->
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<FormSelect/>
|
||||||
|
<button>쇼핑몰</button>
|
||||||
|
<button>저장</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<FormInput/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<QEditor/>
|
||||||
|
<button>저장</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, watchEffect, computed } from 'vue';
|
||||||
|
import axios from '@api';
|
||||||
|
import SearchBar from '@c/search/SearchBar.vue';
|
||||||
|
import WriteButton from '@c/button/WriteBtn.vue';
|
||||||
|
import QEditor from '@/components/editor/QEditor.vue';
|
||||||
|
import FormInput from '@/components/input/FormInput.vue';
|
||||||
|
import FormSelect from '@/components/input/FormSelect.vue';
|
||||||
|
|
||||||
|
// /** 상세로 이동 */
|
||||||
|
// const goDetail = idx => {
|
||||||
|
// router.push(`/board/get/${idx}`);
|
||||||
|
// };
|
||||||
|
|
||||||
|
// 용어집
|
||||||
|
const wordList = ref([]);
|
||||||
|
// 카테고리
|
||||||
|
const cateList = ref([]);
|
||||||
|
const loading = ref(false);
|
||||||
|
const error = ref('');
|
||||||
|
|
||||||
|
// 검색
|
||||||
|
const searchText = ref('');
|
||||||
|
|
||||||
|
// 단어 및 카테고리 목록 통합 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 search = (e) => {
|
||||||
|
const trimmedSearchText = e.trim();
|
||||||
|
if (trimmedSearchText.length === 0) {
|
||||||
|
alert('검색어를 입력해주세요.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
searchText.value = trimmedSearchText;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 검색
|
||||||
|
const filteredList = computed(() =>
|
||||||
|
wordList.value.filter(item =>
|
||||||
|
item.WRDDICTTL.toLowerCase().includes(searchText.value.toLowerCase())
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// `watchEffect`로 API 호출
|
||||||
|
watchEffect(() => {
|
||||||
|
fetchAllData();
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.card > div {
|
||||||
|
padding: 0 30px
|
||||||
|
}
|
||||||
|
|
||||||
|
.word-list {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
.word-list li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.word-list li ~ li {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
color: red;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user