(questions);
- const [pageNum, setPageNum] = useState(1);
- const [isEnd, setIsEnd] = useState(false);
- const [isLoading, setIsLoading] = useState(false);
- const isInitialMount = useRef(true);
-
- const fetchQuestions = () => {
- if (isLoading || isEnd) return;
- setIsLoading(true);
- getQuestions(type, pageNum, QUESTION_NUMBER_PER_PAGE_FOR_INFINITY_SCROLL)
- .then((data) => {
- setIsLoading(false);
- if (!data.length) setIsEnd(true);
- else {
- setQuestionData([...questionData, ...data]);
- }
- })
- .catch(() => {
- setIsLoading(false);
- });
- };
-
- useEffect(() => {
- if (isInitialMount.current) {
- isInitialMount.current = false;
- } else {
- fetchQuestions();
- }
- }, [pageNum]);
-
- const onIntersect: IntersectionObserverCallback = ([entry]) => {
- if (isEnd || isLoading) return;
- entry.isIntersecting && setPageNum(pageNum + 1);
- };
-
- const { setTarget } = useObserver({ onIntersect });
+ const [data, isEnd, setTarget] = useInfinityScroll(questions, (pageNum) =>
+ getQuestions(type, pageNum)
+ );
return (
@@ -67,7 +32,7 @@ export default function QuestionsContainer({ questions, type }: Props) {
isSelected={type === 'HOT'}
/>
-
+
{isEnd ? <>> : }
);
diff --git a/src/components/series/SeriesContainer.tsx b/src/components/series/SeriesContainer.tsx
index 772d13d..09e0ded 100644
--- a/src/components/series/SeriesContainer.tsx
+++ b/src/components/series/SeriesContainer.tsx
@@ -1,13 +1,11 @@
'use client';
import { Orderby } from '@/types';
-import { useEffect, useRef, useState } from 'react';
import SeriesGrid from './SeriesGrid';
import { Series } from '@/types/series';
import { getSeriesArray } from '@/service/series';
-import useObserver from '@/hooks/useObserver';
-import { SERIES_NUMBER_PER_PAGE_FOR_INFINITY_SCROLL } from '@/utils/const';
import CategoryLink from '../shared/CategoryLink';
+import { useInfinityScroll } from '@/hooks/useInfinityScroll';
type Props = {
seriesArray: Series[];
@@ -15,51 +13,9 @@ type Props = {
};
export default function SeriesContainer({ seriesArray, type }: Props) {
- const [currentSeriesArray, setCurrentSeriesArray] =
- useState(seriesArray);
- const [pageNum, setPageNum] = useState(1);
- const [isEnd, setIsEnd] = useState(false);
- const [isLoading, setIsLoading] = useState(false);
- const isInitialMount = useRef(true);
-
- const fetchSeries = () => {
- if (isLoading || isEnd) return;
- setIsLoading(true);
- getSeriesArray(
- 'month',
- type,
- pageNum,
- SERIES_NUMBER_PER_PAGE_FOR_INFINITY_SCROLL
- )
- .then((data) => {
- if ('code' in data) {
- return;
- }
- setIsLoading(false);
- if (!data.length) setIsEnd(true);
- else {
- setCurrentSeriesArray([...currentSeriesArray, ...data]);
- }
- })
- .catch(() => {
- setIsLoading(false);
- });
- };
-
- useEffect(() => {
- if (isInitialMount.current) {
- isInitialMount.current = false;
- } else {
- fetchSeries();
- }
- }, [pageNum]);
-
- const onIntersect: IntersectionObserverCallback = ([entry]) => {
- if (isEnd || isLoading) return;
- entry.isIntersecting && setPageNum(pageNum + 1);
- };
-
- const { setTarget } = useObserver({ onIntersect });
+ const [data, isEnd, setTarget] = useInfinityScroll(seriesArray, (pageNum) =>
+ getSeriesArray('month', type, pageNum)
+ );
return (
@@ -77,7 +33,7 @@ export default function SeriesContainer({ seriesArray, type }: Props) {
isSelected={type === 'hot'}
/>
-
+
{isEnd ? <>> : }
);
diff --git a/src/service/series.ts b/src/service/series.ts
index 1dfa466..aae4ba8 100644
--- a/src/service/series.ts
+++ b/src/service/series.ts
@@ -11,7 +11,7 @@ export async function getSeriesArray(
orderBy: Orderby = 'new',
pageNum: number = 0,
resultCntPerPage: number = SERIES_NUMBER_PER_PAGE_FOR_INFINITY_SCROLL
-): Promise {
+): Promise {
const url = new URL(`${process.env.NEXT_PUBLIC_SERVER_IP_ADDRESS}/series`);
const params = {
period: period,