From 020c754479427606bb906c2d267b7573652f29db Mon Sep 17 00:00:00 2001 From: jhynsoo Date: Mon, 12 Aug 2024 09:53:28 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20QnA=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EB=84=A4=EC=9D=B4=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/constants.js | 2 +- frontend/src/hooks/api/useFreeboards.js | 2 +- frontend/src/hooks/api/useNotices.js | 2 +- frontend/src/hooks/api/useQnas.js | 14 ++++++++++---- .../LearningLectureDetailPage.jsx | 2 +- .../src/pages/LectureInfoPage/LectureInfoPage.jsx | 1 - .../pages/QuestionListPage/QuestionListPage.jsx | 6 ++++-- 7 files changed, 18 insertions(+), 11 deletions(-) diff --git a/frontend/src/constants.js b/frontend/src/constants.js index 5d1e496..28cfc62 100644 --- a/frontend/src/constants.js +++ b/frontend/src/constants.js @@ -2,4 +2,4 @@ export const API_URL = import.meta.env.VITE_API_URL; export const ROOM_URL = import.meta.env.VITE_ROOM_URL; export const CHAT_URL = import.meta.env.VITE_CHAT_URL; export const STATIC_URL = import.meta.env.VITE_STATIC_URL; -export const PAGE_SIZE = 20; +export const PAGE_SIZE = import.meta.env.VITE_PAGE_SIZE || 10; diff --git a/frontend/src/hooks/api/useFreeboards.js b/frontend/src/hooks/api/useFreeboards.js index a998be4..bfd7793 100644 --- a/frontend/src/hooks/api/useFreeboards.js +++ b/frontend/src/hooks/api/useFreeboards.js @@ -11,7 +11,7 @@ export function useFreeboards(lectureId, page = 0) { if (lastPage.data.length < PAGE_SIZE) { return undefined; } - return allPages.length + 1; + return allPages.length; }, }); } diff --git a/frontend/src/hooks/api/useNotices.js b/frontend/src/hooks/api/useNotices.js index 7d7010f..64d66cc 100644 --- a/frontend/src/hooks/api/useNotices.js +++ b/frontend/src/hooks/api/useNotices.js @@ -11,7 +11,7 @@ export function useNotices(lectureId) { if (lastPage.data.length < PAGE_SIZE) { return undefined; } - return allPages.length + 1; + return allPages.length; }, }); } diff --git a/frontend/src/hooks/api/useQnas.js b/frontend/src/hooks/api/useQnas.js index 6ed2a4c..74a75a0 100644 --- a/frontend/src/hooks/api/useQnas.js +++ b/frontend/src/hooks/api/useQnas.js @@ -1,10 +1,16 @@ -import { useSuspenseQuery } from '@tanstack/react-query'; +import { useSuspenseInfiniteQuery } from '@tanstack/react-query'; import instance from '../../utils/axios/instance'; -import { API_URL } from '../../constants'; +import { API_URL, PAGE_SIZE } from '../../constants'; export function useQnas(id) { - return useSuspenseQuery({ + return useSuspenseInfiniteQuery({ queryKey: ['qnalist', id], - queryFn: () => instance.get(`${API_URL}/qna/all/${id}`), + queryFn: ({ pageParam = 0 }) => instance.get(`${API_URL}/qna/all/${id}?pageNo=${pageParam}`), + getNextPageParam: (lastPage, allPages) => { + if (lastPage.data.length < PAGE_SIZE) { + return undefined; + } + return allPages.length; + }, }); } diff --git a/frontend/src/pages/LearningLectureDetailPage/LearningLectureDetailPage.jsx b/frontend/src/pages/LearningLectureDetailPage/LearningLectureDetailPage.jsx index f9177df..ecbaa47 100644 --- a/frontend/src/pages/LearningLectureDetailPage/LearningLectureDetailPage.jsx +++ b/frontend/src/pages/LearningLectureDetailPage/LearningLectureDetailPage.jsx @@ -9,7 +9,7 @@ export default function LearningLectureDetailPage() { const { data: noticesData } = useNotices(lectureId); const notices = noticesData.pages[0]?.data.slice(0, 3); const { data: qnasData } = useQnas(lectureId); - const questions = qnasData?.data.slice(0, 3); + const questions = qnasData.pages[0]?.data.slice(0, 3); return (
diff --git a/frontend/src/pages/LectureInfoPage/LectureInfoPage.jsx b/frontend/src/pages/LectureInfoPage/LectureInfoPage.jsx index 2350b8e..d9bcca5 100644 --- a/frontend/src/pages/LectureInfoPage/LectureInfoPage.jsx +++ b/frontend/src/pages/LectureInfoPage/LectureInfoPage.jsx @@ -1,6 +1,5 @@ import styles from './LectureInfoPage.module.css'; import ClassInfo from '../../components/ClassInfo/ClassInfo'; -import { MaxWidthLayout } from '../../components/Layout'; import LectureHeader from '../../components/LectureHeader/LectureHeader'; import { useLectureInfo } from '../../hooks/api/useLectureInfo'; import { useParams, useNavigate } from 'react-router-dom'; diff --git a/frontend/src/pages/QuestionListPage/QuestionListPage.jsx b/frontend/src/pages/QuestionListPage/QuestionListPage.jsx index 3042af5..2841813 100644 --- a/frontend/src/pages/QuestionListPage/QuestionListPage.jsx +++ b/frontend/src/pages/QuestionListPage/QuestionListPage.jsx @@ -3,11 +3,12 @@ import ArticleBoard from '../../components/ArticleBoard/ArticleBoard'; import { useParams } from 'react-router-dom'; import { useQnas } from '../../hooks/api/useQnas'; import useBoundStore from '../../store'; +import IntersectionArea from '../../components/IntersectionArea/IntersectionObserver'; export default function QuestionListPage() { const { lectureId } = useParams(); - const { data } = useQnas(lectureId); - const questions = data?.data; + const { data, fetchNextPage, hasNextPage } = useQnas(lectureId); + const questions = data.pages.flatMap((page) => page.data); const userType = useBoundStore((state) => state.userType); return ( @@ -24,6 +25,7 @@ export default function QuestionListPage() { to={`${question.id}`} /> ))} + {hasNextPage && fetchNextPage()} />} ); }