Merge pull request #60 from Qfeed-Dev/feature/#35

[Feat] 무한스크롤 구현

src/apis/questions/index.ts

@@ -11,7 +11,7 @@ export const getQuestions = async (offset: number, limit: number) => {
         })
         .then(({ data }) => data)
         .catch((err) => err.response);
-    return data;
+    return { data: data, idx: offset };
 };
 
 export const postQuestions = async (body: any) =>
@@ -63,10 +63,17 @@ export const getQuestionsIdChoices = async (id: number) =>
         .then(({ data }) => data)
         .catch((err) => err.response);
 
-export const getUserQuestions = async (id: number, qtype: Qtype) => {
+export const getUserQuestions = async (
+    id: number,
+    qtype: Qtype,
+    offset: number,
+    limit: number
+) => {
     const response = await qFeedAxios.get(`/questions/user/${id}`, {
         params: {
-            Qtype: qtype
+            Qtype: qtype,
+            offset: offset,
+            limit: limit
         }
     });
     return response.data;

src/components/GridWrapper/index.tsx

@@ -5,73 +5,41 @@ import Flex from "src/components/common/Flex";
 
 import QfeedFrame from "src/pages-edit/home/components/QfeedFrame";
 import { enterComponentVariants } from "src/constants/animation";
-import { QuestionItem, Questions } from "src/models/questions";
-import { useEffect, useState } from "react";
 
 const QuestionGrid = ({
     questions,
-    detail = false
+    detail = false,
+    colorStart = 1
 }: {
-    questions: Questions;
+    questions: any;
     detail?: boolean;
+    colorStart?: number;
 }) => {
-    const [sortedData, setSortedData] = useState<QuestionItem[] | undefined>(
-        undefined
-    );
-    useEffect(() => {
-        sortedData === undefined && setSortedData(questions.data.reverse());
-    }, []);
-
     return (
         <GridWrapper
             variants={enterComponentVariants}
             initial="hidden"
             animate="visible"
             exit="exit"
         >
-            <QFeedGridOdd direction="column" gap={12}>
-                {sortedData
-                    ?.filter((data: any, idx: number) => idx % 2 === 0)
-                    .map((data: any, idx: number) => (
-                        <QfeedFrame
-                            key={idx}
-                            idx={data.id}
-                            colorIdx={idx}
-                            data={data}
-                            detail={detail}
-                        />
-                    ))}
-            </QFeedGridOdd>
-            <QFeedGridEven direction="column" gap={12}>
-                {sortedData
-                    ?.filter((data: any, idx: number) => idx % 2 === 1)
-                    .map((data: any, idx: number) => (
-                        <QfeedFrame
-                            key={idx}
-                            idx={data.id}
-                            colorIdx={idx + 4}
-                            data={data}
-                            detail={detail}
-                        />
-                    ))}
-            </QFeedGridEven>
+            {questions.map((data: any, idx: number) => (
+                <QfeedFrame
+                    key={idx}
+                    idx={data.id}
+                    colorIdx={idx + colorStart}
+                    data={data}
+                    detail={detail}
+                />
+            ))}
         </GridWrapper>
     );
 };
 
 const GridWrapper = styled(motion.div)`
     width: 100%;
     display: flex;
+    flex-direction: column;
     gap: 12px;
-    align-items: start;
-`;
-
-const QFeedGridOdd = styled(Flex)`
-    width: 100%;
-`;
-
-const QFeedGridEven = styled(Flex)`
-    width: 100%;
 `;
 
 export default QuestionGrid;

src/components/Textarea/Textarea.tsx

@@ -30,11 +30,17 @@ const Textarea = ({
     };
 
     return (
-        <TextareaWrapper>
+        <TextareaWrapper
+            size={size}
+            backgroundColor={match(type)
+                .with("question-friend", () => colors.line_black_5)
+                .with("add-question", () => colors.line_white_5)
+                .with("add-question-image", () => colors.line_white_50)
+                .otherwise(() => colors.line_black_5)}
+        >
             <TextareaBox
                 value={value}
                 placeholder={placeholder}
-                size={size}
                 onChange={handleOnChange}
                 maxLength={limit}
                 color={match(type)
@@ -47,11 +53,6 @@ const Textarea = ({
                     .with("add-question", () => colors.light_gray2)
                     .with("add-question-image", () => colors.light_qblack)
                     .otherwise(() => colors.light_qblack)}
-                backgroundColor={match(type)
-                    .with("question-friend", () => colors.line_black_5)
-                    .with("add-question", () => colors.line_white_5)
-                    .with("add-question-image", () => colors.line_white_50)
-                    .otherwise(() => colors.line_black_5)}
             />
             <TextareaCount>
                 {count !== 0 && (
@@ -73,18 +74,14 @@ const Textarea = ({
     );
 };
 
-const TextareaWrapper = styled.div`
-    width: 100%;
-    position: relative;
-`;
-
-const TextareaBox = styled.textarea<{
+const TextareaWrapper = styled.div<{
     size: any;
-    color: string;
-    placeholderColor: string;
     backgroundColor: string;
     onChange?: any;
 }>`
+    width: 100%;
+    position: relative;
+
     width: 100%;
     height: ${({ size }) => size + "px"};
     margin: 0;
@@ -94,12 +91,26 @@ const TextareaBox = styled.textarea<{
     resize: none;
 
     border-radius: 10px;
-    color: ${({ color }) => color};
     background-color: ${({ backgroundColor }) => backgroundColor};
+`;
 
+const TextareaBox = styled.textarea<{
+    placeholderColor: string;
+    color: string;
+}>`
+    width: 104vw;
+    height: 120%;
     &::placeholder {
         color: ${({ placeholderColor }) => placeholderColor};
     }
+    color: ${({ color }) => color};
+
+    transform: scale(0.8);
+    transform-origin: left top;
+
+    background: transparent;
+    border: 0;
+    outline: 0;
 `;
 
 const TextareaCount = styled.div`

src/hooks/questions/useGetQuestions.ts

@@ -1,13 +1,19 @@
-import { useQuery } from "@tanstack/react-query";
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { getQuestions } from "src/apis/questions";
 import { questionKeys } from "src/constants/queryKeys/questionKeys";
-import { Questions } from "src/models/questions";
 
 export const useGetQuestions = () => {
-    const { data, isLoading, error, refetch } = useQuery<Questions>(
+    const { data, fetchNextPage, hasNextPage, isFetched } = useInfiniteQuery(
         questionKeys.all,
-        () => getQuestions(1, 100)
+        ({ pageParam = 1 }) => getQuestions(pageParam, 10),
+        {
+            getNextPageParam: (lastPage) => {
+                return lastPage.data.count > lastPage.idx + 10
+                    ? lastPage.idx + 10
+                    : undefined;
+            }
+        }
     );
 
-    return { data, isLoading, error, refetch };
+    return { data, fetchNextPage, hasNextPage, isFetched };
 };

src/hooks/questions/useGetUserQQuery.ts

@@ -1,25 +1,23 @@
-import { useQuery } from "@tanstack/react-query";
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 
 import { Qtype } from "src/models/questions";
 import { questionKeys } from "src/constants/queryKeys/questionKeys";
 import { getUserQuestions } from "src/apis/questions";
 
 const useGetUserQQuery = (id: number, qtype: Qtype) => {
-    const {
-        data: questions,
-        isLoading,
-        refetch
-    } = useQuery<any>(
+    const { data, fetchNextPage, hasNextPage, isFetched } = useInfiniteQuery(
         questionKeys.qtype(id, qtype),
-        () => getUserQuestions(id, qtype),
+        ({ pageParam = 1 }) => getUserQuestions(id, qtype, pageParam, 10),
         {
-            onError: (error: any) => {
-                alert(error);
+            getNextPageParam: (lastPage) => {
+                return lastPage.data.count > lastPage.idx + 10
+                    ? lastPage.idx + 10
+                    : undefined;
             }
         }
     );
 
-    return { questions, isLoading, refetch };
+    return { data, fetchNextPage, hasNextPage, isFetched };
 };
 
 export default useGetUserQQuery;

src/pages-edit/home/Home.tsx

@@ -45,17 +45,17 @@ export default function Home() {
         router.push(Route.ADD_QUESTION());
     };
 
-    const { data, isLoading, refetch } = useGetQuestions();
+    const { data, fetchNextPage, hasNextPage, isFetched } = useGetQuestions();
     const user = useUserQuery();
     const { ref, inView } = useInView();
 
-    // useEffect(() => {
-    //     if (inView) {
-    //         refetch();
-    //     }
-    // }, [inView]);
+    useEffect(() => {
+        if (inView && hasNextPage) {
+            fetchNextPage();
+        }
+    }, [inView]);
 
-    return isLoading || user.isLoading ? (
+    return user.isLoading ? (
         <></>
     ) : (
         <Flex direction="column">
@@ -73,12 +73,35 @@ export default function Home() {
                 <Spacing size={20} />
 
                 {/* <Filter isSort={isSort} setIsSort={setIsSort} /> */}
-                {isLoading ? <></> : data && <QuestionGrid questions={data} />}
-                {isLoading ? (
-                    <></>
-                ) : (
-                    <div ref={ref} style={{ height: "5px" }}></div>
-                )}
+                <Flex gap={12} align="start">
+                    <Flex direction="column" gap={12} align="start">
+                        {isFetched &&
+                            data?.pages.map((question, idx) => (
+                                <QuestionGrid
+                                    key={idx}
+                                    questions={question.data.data.filter(
+                                        (data: any, idx: number) =>
+                                            idx % 2 === 1
+                                    )}
+                                    colorStart={1}
+                                />
+                            ))}
+                    </Flex>
+                    <Flex direction="column" gap={12} align="start">
+                        {isFetched &&
+                            data?.pages.map((question, idx) => (
+                                <QuestionGrid
+                                    key={idx}
+                                    questions={question.data.data.filter(
+                                        (data: any, idx: number) =>
+                                            idx % 2 === 0
+                                    )}
+                                    colorStart={4}
+                                />
+                            ))}
+                    </Flex>
+                </Flex>
+                <div ref={ref} style={{ height: "5px" }}></div>
                 <Spacing size={globalValue.bottomSheetHeight + 12} />
             </>
 

src/pages-edit/home/components/CheckOfficial.tsx

@@ -20,9 +20,9 @@ const CheckOfficial = (props: OfficialProp) => {
     const userQ = useGetUserQQuery(props.id, "official");
     const cursor = useQsetCursorQuery();
 
-    return userQ.isLoading || cursor.isLoading ? (
+    return !userQ.isFetched || cursor.isLoading ? (
         <></>
-    ) : userQ.questions.count ? (
+    ) : userQ.data?.pages[0].count ? (
         <BasicQuestionWrapper
             onClick={props.onClick}
             color={colors.light_qwhite}
@@ -32,7 +32,7 @@ const CheckOfficial = (props: OfficialProp) => {
                     나를 선택한 큐피드
                 </Text>
                 <Text typo="Caption1r" color="light_qblack">
-                    총 {userQ.questions.count}번 선택받았어요!
+                    총 {userQ.data?.pages[0].count}번 선택받았어요!
                 </Text>
                 <ImageWrapper>
                     <Icon

src/pages-edit/home/components/MakeOfficial.tsx

@@ -36,7 +36,9 @@ const MakeOfficial = (props: QuestionProps) => {
 
     const getTime = () => {
         const date = new Date();
-        const times = new Date(endTime + 24 * 60 * 60 * 1000 - +date);
+        const times = new Date(
+            endTime + 24 * 60 * 60 * 1000 + 15 * 60 * 60 * 1000 - +date
+        );
 
         if (+times <= 0) {
             newQSet.mutate();

src/pages-edit/home/components/QfeedFrame.tsx

@@ -20,12 +20,24 @@ const QfeedFrame = ({ idx, colorIdx, data, detail }: Props) => {
     const router = useRouter();
     const imageurl = data.backgroundImage;
 
-    const writeDay = new Date(data.createdAt);
+    const writeDay = Date.parse(data.createdAt);
     const today = new Date();
 
-    const pastTime = Math.round(
-        (today.getTime() - writeDay.getTime()) / (1000 * 60 * 60)
-    );
+    const getTime = () => {
+        const pastTime = Math.round(
+            (today.getTime() - writeDay - 9000 * 60 * 60) / (1000 * 60 * 60)
+        );
+        if (pastTime === 0) {
+            const pastMin = Math.round(
+                (today.getTime() - writeDay - 9000 * 60 * 60) / (1000 * 60)
+            );
+            return pastMin ? `${pastMin}분 전` : "방금 전";
+        } else {
+            return `${pastTime}시간 전`;
+        }
+    };
+
+    const time = getTime();
 
     const handleClickFrame = () => {
         // router.push(Route.QUESTION());
@@ -61,7 +73,7 @@ const QfeedFrame = ({ idx, colorIdx, data, detail }: Props) => {
                         typo="Caption1r"
                         color={imageurl ? "light_qwhite" : "light_qblack"}
                     >
-                        {pastTime}시간 전
+                        {time}
                     </Text>
                     <Spacing size={27} />
                     <CountWrapper>