diff --git a/src/api/index.js b/src/api/index.js index 277a85a..26f35c8 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -3,7 +3,7 @@ import axios from 'axios' const api = axios.create({ baseURL: '/api' }) export const wordsApi = { - getAll: (category) => api.get('/words', { params: { category } }), + getAll: (category, page = 1, limit = 50) => api.get('/words', { params: { category, page, limit } }), getDaily: () => api.get('/words/daily'), getQuiz: (count = 5) => api.get('/words/quiz', { params: { count } }), getCategories: () => api.get('/words/categories'), diff --git a/src/views/WordsView.vue b/src/views/WordsView.vue index 941fd4f..e0eb592 100644 --- a/src/views/WordsView.vue +++ b/src/views/WordsView.vue @@ -8,20 +8,30 @@
불러오는 중...
-
-
-
-
{{ word.english }}
- {{ word.difficulty }} -
-
[{{ word.pronunciation }}]
-
{{ word.korean }}
-
- {{ word.example_en }}
- {{ word.example_ko }} -
+
+
+ 전체 {{ total }}개 단어 중 {{ (page - 1) * limit + 1 }}–{{ Math.min(page * limit, total) }}번째 +
+
+
+
+
{{ word.english }}
+ {{ word.difficulty }} +
+
[{{ word.pronunciation }}]
+
{{ word.korean }}
+
+ {{ word.example_en }}
+ {{ word.example_ko }} +
+
+
단어가 없습니다
+
+
+ + {{ page }} / {{ totalPages }} +
-
단어가 없습니다
@@ -36,18 +46,33 @@ const words = ref([]) const categories = ref([]) const selected = ref('') const loading = ref(false) +const page = ref(1) +const total = ref(0) +const totalPages = ref(1) +const limit = 50 -const select = async (cat) => { - selected.value = cat +const fetchWords = async (cat, p) => { loading.value = true - const res = await wordsApi.getAll(cat || undefined) - words.value = res.data + const res = await wordsApi.getAll(cat || undefined, p, limit) + words.value = res.data.data + total.value = res.data.total + totalPages.value = res.data.totalPages + page.value = p loading.value = false } +const select = async (cat) => { + selected.value = cat + await fetchWords(cat, 1) +} + +const changePage = async (p) => { + await fetchWords(selected.value, p) + window.scrollTo({ top: 0, behavior: 'smooth' }) +} + onMounted(async () => { - const [w, c] = await Promise.all([wordsApi.getAll(), wordsApi.getCategories()]) - words.value = w.data + const [, c] = await Promise.all([fetchWords('', 1), wordsApi.getCategories()]) categories.value = c.data questApi.complete({ session_id: session.id, type: 'word' }) })