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' })
})