Fix: 게시물 리스트 조회 수정 #65

Author: jiyeeeah

components/pages/main/Feed/BoardsList/index.tsx

@@ -4,6 +4,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import useGetBoardList from '@/hooks/queries/useGetBoardList';
 import { Board } from '@/types/types';
+import FeedBoardLoading from '@/components/ui/Loading/FeedBoardLoading';
 import FlexBox from '../../../../ui/FlexBox';
 import FeedBoardCard from '../../../../ui/BoardCard/FeedBoardCard';
 
@@ -14,36 +15,45 @@ export default function BoardsList({
   setSelectedBoard: Dispatch<SetStateAction<Board | null>>;
   setShowModal: Dispatch<SetStateAction<boolean>>;
 }) {
-  const { Observer, data: boardList } = useGetBoardList({
+  const {
+    Observer,
+    data: boardList,
+    isLoading,
+  } = useGetBoardList({
     infiniteQueryKey: ['boards'],
   });
 
   return (
-    <FlexBox direction="column" className="gap-10">
-      {boardList?.pages ? (
+    <FlexBox direction="column" className="w-full gap-10">
+      {isLoading ? (
+        <FeedBoardLoading />
+      ) : (
+        boardList?.pages &&
         boardList?.pages?.map((page) =>
-          page.content.map((board) => (
-            <div
-              key={board.id}
-              onClick={() => {
-                setSelectedBoard(board);
-              }}
-              className="w-full"
-            >
-              <FeedBoardCard
-                userId={board.writer}
-                content={board.content}
-                // TODO: 이미지 연결
-                imgs={[]}
-                setShowModal={setShowModal}
-                comments={board.replyListDto}
-                commentsCount={board.replyCount}
-              />
-            </div>
-          )),
+          page.content.length > 0 ? (
+            page.content.map((board) => (
+              <div
+                key={board.id}
+                onClick={() => {
+                  setSelectedBoard(board);
+                }}
+                className="w-full"
+              >
+                <FeedBoardCard
+                  userId={board.writer}
+                  content={board.content}
+                  // TODO: 이미지 연결
+                  imgs={board.fileNames}
+                  setShowModal={setShowModal}
+                  comments={board.replyListDto}
+                  commentsCount={board.replyCount}
+                />
+              </div>
+            ))
+          ) : (
+            <div>아직 게시물이 없어요ㅠㅠ</div>
+          ),
         )
-      ) : (
-        <div>아직 게시물이 없어요ㅠㅠ</div>
       )}
       <Observer>
         <div>로딩스피너...</div>

components/pages/main/Feed/index.tsx

@@ -4,17 +4,17 @@ import { useState } from 'react';
 import BoardsList from '@/components/pages/main/Feed/BoardsList';
 import FlexBox from '@/components/ui/FlexBox';
 import FeedHeader from '@/components/pages/main/Feed/FeedHeader';
-import { BoardList } from '@/types/types';
+import { Board } from '@/types/types';
 import BoardModal from '../../../ui/BoardModal';
 
 export default function Feed() {
   const [showModal, setShowModal] = useState(false);
-  const [selectedBoard, setSelectedBoard] = useState<BoardList | null>(null);
+  const [selectedBoard, setSelectedBoard] = useState<Board | null>(null);
 
   return (
     <FlexBox
       direction="column"
-      className={`gap-10 ${showModal ? 'overflow-hidden' : null}`}
+      className={`gap-10 w-full ${showModal ? 'overflow-hidden' : null}`}
     >
       <FeedHeader />
       <BoardsList

components/ui/BoardCard/BoardCardPackage/Content.tsx

@@ -21,7 +21,7 @@ export default function BoardCardContent({
   children: React.ReactNode;
   type: 'mainPC' | 'modal' | 'myPage';
   content: string;
-  imgs?: string[];
+  imgs: string[];
   onClickModal?: () => void;
 }) {
   const [imgNum, setImgNum] = useState(0);
@@ -59,7 +59,7 @@ export default function BoardCardContent({
     </FlexBox>
   );
 
-  if (imgs) {
+  if (imgs.length > 0) {
     // 이미지가 있는 경우
     return (
       // eslint-disable-next-line react/jsx-no-useless-fragment

hooks/queries/useGetBoardList.tsx

@@ -4,6 +4,7 @@ import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import getBoardList from '@/service/board';
+import { BoardList } from '@/types/types';
 
 interface InfiniteScrollProps {
   infiniteQueryKey: string[];
@@ -16,15 +17,14 @@ export default function useGetBoardList({
   infiniteQueryKey,
   pageParameter = 1,
   pageSize = 5,
-  inViewThreshold = 1,
 }: InfiniteScrollProps) {
   const { data, fetchNextPage, isLoading, hasNextPage, isFetchingNextPage } =
     useInfiniteQuery({
       queryKey: infiniteQueryKey,
-      queryFn: ({ pageParam = pageParameter }) =>
+      queryFn: ({ pageParam = pageParameter }): Promise<BoardList> =>
         getBoardList({ pageParam, pageSize }),
-      getNextPageParam: (lastPage, allPages) =>
-        allPages.length < 20 ? allPages.length + 1 : undefined,
+      getNextPageParam: (boardlist) =>
+        boardlist.last ? undefined : boardlist.number + 1,
       select: (d) => ({
         pages: d.pages.flatMap((page) => page),
         pageParams: d.pageParams,
@@ -33,7 +33,7 @@ export default function useGetBoardList({
 
   // 무한 스크롤 화면 가장 아래 부분 탐지하는 observer
   function Observer({ children }: { children: React.ReactNode }) {
-    const { ref, inView } = useInView({ threshold: inViewThreshold });
+    const { ref, inView } = useInView({ threshold: 1 });
 
     useEffect(() => {
       if (inView && hasNextPage) {
@@ -50,5 +50,6 @@ export default function useGetBoardList({
   return {
     Observer,
     data,
+    isLoading,
   };
 }

service/board.ts

@@ -1,5 +1,4 @@
 import { AuthError } from '@/lib/error';
-import { BoardList } from '@/types/types';
 
 interface PostBoardType {
   title: string;
@@ -26,15 +25,13 @@ export async function postBoard(postBoardData: PostBoardType) {
     },
     body: formData,
   });
-  // return response.json();
-  const data = await response.json();
-  console.log(data);
+  return response.json();
 }
 
 export default async function getBoardList({
   pageParam,
   pageSize,
-}: TempPostListApiProps): Promise<BoardList[]> {
+}: TempPostListApiProps) {
   try {
     const url = `/endpoint/api/board/list?_page=${pageParam}&_limit=${pageSize}`;
     const response = await fetch(url);