Merge pull request #99 from Funssion-SWM/develop

Refactor: question page, series page useInfinity scroll 커스텀 훅 적용
Funssion-SWM · Feb 23, 2024 · 101daaa · 101daaa
2 parents 93a4082 + d96e6fd
commit 101daaa
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 100 deletions.
diff --git a/src/app/series/hot/page.tsx b/src/app/series/hot/page.tsx
@@ -4,10 +4,5 @@ import { getSeriesArray } from '@/service/series';
 export default async function SeriesHotpage() {
   let seriesArray = await getSeriesArray('month', 'hot');
 
-  if ('code' in seriesArray) {
-    seriesArray = [];
-    console.error('Error when get seriesArr');
-  }
-
   return <SeriesContainer seriesArray={seriesArray} type="hot" />;
 }
diff --git a/src/app/series/new/page.tsx b/src/app/series/new/page.tsx
@@ -4,10 +4,5 @@ import { getSeriesArray } from '@/service/series';
 export default async function SeriesNewPage() {
   let seriesArray = await getSeriesArray('month', 'new');
 
-  if ('code' in seriesArray) {
-    seriesArray = [];
-    console.error('Error when get seriesArr');
-  }
-
   return <SeriesContainer seriesArray={seriesArray} type="new" />;
 }
diff --git a/src/components/question/QuestionsContainer.tsx b/src/components/question/QuestionsContainer.tsx
@@ -2,54 +2,19 @@
 
 import { Question, QuestionOrderBy } from '@/types/question';
 import QuestionsList from './QuestionsList';
-import { useEffect, useRef, useState } from 'react';
 import { getQuestions } from '@/service/questions';
-import useObserver from '@/hooks/useObserver';
-import { QUESTION_NUMBER_PER_PAGE_FOR_INFINITY_SCROLL } from '@/utils/const';
 import CategoryLink from '../shared/CategoryLink';
+import { useInfinityScroll } from '@/hooks/useInfinityScroll';
 
 type Props = {
   questions: Question[];
   type: QuestionOrderBy;
 };
 
 export default function QuestionsContainer({ questions, type }: Props) {
-  const [questionData, setQuestionData] = useState<Question[]>(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 (
     <div>
@@ -67,7 +32,7 @@ export default function QuestionsContainer({ questions, type }: Props) {
           isSelected={type === 'HOT'}
         />
       </div>
-      <QuestionsList questions={questionData} size="big" />
+      <QuestionsList questions={data} size="big" />
       {isEnd ? <></> : <div ref={setTarget} />}
     </div>
   );

diff --git a/src/components/series/SeriesContainer.tsx b/src/components/series/SeriesContainer.tsx
@@ -1,65 +1,21 @@
 '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[];
   type: Orderby;
 };
 
 export default function SeriesContainer({ seriesArray, type }: Props) {
-  const [currentSeriesArray, setCurrentSeriesArray] =
-    useState<Series[]>(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 (
     <div>
@@ -77,7 +33,7 @@ export default function SeriesContainer({ seriesArray, type }: Props) {
           isSelected={type === 'hot'}
         />
       </div>
-      <SeriesGrid seriesArr={currentSeriesArray} colNum={4} />
+      <SeriesGrid seriesArr={data} colNum={4} />
       {isEnd ? <></> : <div ref={setTarget} />}
     </div>
   );

diff --git 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<Series[] | ErrorResponse> {
+): Promise<Series[]> {
   const url = new URL(`${process.env.NEXT_PUBLIC_SERVER_IP_ADDRESS}/series`);
   const params = {
     period: period,