Merge branch 'main' into login
This commit is contained in:
yoon
commit
f7d5f2d121
@ -32,6 +32,10 @@ const routes = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/wordDict',
|
||||
component: () => import('@v/wordDict/wordDict.vue'),
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
component: () => import('@v/user/TheLogin.vue'),
|
||||
|
||||
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