Feat: 게시물 변수명 변경#65

puppypawpaw · Oct 12, 2023 · 99406be · 99406be
1 parent 10a303a
commit 99406be
Show file tree

Hide file tree

Showing 10 changed files with 172 additions and 25 deletions.
diff --git a/components/pages/main/Feed/BoardsList/BoardModal.tsx b/components/pages/main/Feed/BoardsList/BoardModal.tsx
@@ -32,7 +32,7 @@ export default function BoardModal({
         </FlexBox>
         {board ? (
           <ModalBoardCard
-            userId={board.userName}
+            userId={board.writer}
             imgs={[
               // TODO: 이미지 연결
               '/Feed/desktop/tempPostPic/tempPostPic1.svg',

diff --git a/components/pages/main/Feed/BoardsList/index.tsx b/components/pages/main/Feed/BoardsList/index.tsx
@@ -29,12 +29,13 @@ export default function BoardsList({
           className="w-full"
         >
           <FeedBoardCard
-            userId={board.userName}
+            userId={board.writer}
             content={board.title}
             // TODO: 이미지 연결
             imgs={[]}
             setShowModal={setShowModal}
-            comments={board.comments}
+            comments={board.replyListDto}
+            commentsCount={board.replyCount}
           />
         </div>
       ))}

diff --git a/components/pages/main/Feed/index.tsx b/components/pages/main/Feed/index.tsx
@@ -25,7 +25,7 @@ export default function Feed() {
         showModal={showModal}
         setShowModal={setShowModal}
         board={selectedBoard}
-        comments={selectedBoard?.comments}
+        comments={selectedBoard?.replyListDto}
       />
     </FlexBox>
   );

diff --git a/components/pages/mypage/MyPageMain/MyBoardsList/index.tsx b/components/pages/mypage/MyPageMain/MyBoardsList/index.tsx
@@ -0,0 +1,47 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+import { Dispatch, SetStateAction } from 'react';
+import useGetBoardListInfiniteData from '@/hooks/queries/useGetBoardListInfiniteData';
+import { BoardList } from '@/types/types';
+import MyBoardCard from '@/components/ui/BoardCard/MyBoardCard';
+import FlexBox from '../../../../ui/FlexBox';
+
+export default function MyBoardsList({
+  setSelectedBoard,
+  setShowModal,
+}: {
+  setSelectedBoard: Dispatch<SetStateAction<BoardList | null>>;
+  setShowModal: Dispatch<SetStateAction<boolean>>;
+}) {
+  const { Observer, data: boards } = useGetBoardListInfiniteData({
+    infiniteQueryKey: ['boards'],
+  });
+
+  return (
+    <FlexBox direction="column" className="gap-10">
+      {boards?.pages?.map((board) => (
+        <div
+          key={board.id}
+          onClick={() => {
+            setSelectedBoard(board);
+          }}
+          className="w-full"
+        >
+          <MyBoardCard
+            userName={board.writer}
+            content={board.content}
+            // TODO: 이미지 연결
+            imgs={[]}
+            // setShowModal={setShowModal}
+            // comments={board.replyListDto}
+            commentsCount={board.replyCount}
+          />
+        </div>
+      ))}
+      <Observer>
+        <div>로딩스피너...</div>
+      </Observer>
+    </FlexBox>
+  );
+}
diff --git a/components/ui/BoardCard/BoardCardPackage/CommentWrapper.tsx b/components/ui/BoardCard/BoardCardPackage/CommentWrapper.tsx
@@ -66,9 +66,9 @@ export function BoardCardCommentWrapper({
 }
 
 export function MyPageBoardCardCommentWrapper({
-  commentsNum,
+  commentsCount,
 }: {
-  commentsNum: number;
+  commentsCount: number;
 }) {
   return (
     <FlexBox
@@ -81,7 +81,7 @@ export function MyPageBoardCardCommentWrapper({
         <FlexBox className="gap-5">
           <FlexBox className="gap-2 body3 text-grey-500">
             <div>댓글</div>
-            <div>{commentsNum}</div>
+            <div>{commentsCount}</div>
           </FlexBox>
           <FlexBox className="gap-2 body3 text-grey-500">
             <div>좋아요</div>

diff --git a/components/ui/BoardCard/FeedBoardCard.tsx b/components/ui/BoardCard/FeedBoardCard.tsx
@@ -9,6 +9,7 @@ interface FeedBoardCardProps {
   imgs: string[];
   setShowModal: Dispatch<SetStateAction<boolean>>;
   comments: Comment[] | undefined;
+  commentsCount: number;
 }
 
 export default function FeedBoardCard({
@@ -17,8 +18,8 @@ export default function FeedBoardCard({
   imgs,
   setShowModal,
   comments,
+  commentsCount,
 }: FeedBoardCardProps) {
-  const commentsCount = comments ? comments.length : 0;
   return (
     <FlexBox
       direction="column"
@@ -41,7 +42,7 @@ export default function FeedBoardCard({
             {comments?.map((comment) => (
               <BoardCard.Comments
                 key={comment.id}
-                userName={comment.userName}
+                userName={comment.nickname}
                 content={comment.content}
                 onClickModal={() => setShowModal(true)}
               />

diff --git a/components/ui/BoardCard/MyBoardCard.tsx b/components/ui/BoardCard/MyBoardCard.tsx
@@ -1,15 +1,30 @@
 import { BoardCard } from '@/components/ui/BoardCard/BoardCardPackage';
+// import { Dispatch, SetStateAction } from 'react';
 
-export default function MyBoardCard() {
+interface MyBoardCardProps {
+  userName: string;
+  content: string;
+  imgs: string[];
+  // setShowModal: Dispatch<SetStateAction<boolean>>;
+  // comments: Comment[] | undefined;
+  commentsCount: number;
+}
+
+export default function MyBoardCard({
+  userName,
+  content,
+  imgs,
+  // setShowModal,
+  // comments,
+  commentsCount,
+}: MyBoardCardProps) {
   return (
     <BoardCard>
-      <BoardCard.Header userId="id" />
-      <BoardCard.Content
-        type="myPage"
-        content="천재고양이 구름이를 소개합니다. 누구 고양이길래 이렇게 귀엽고"
-        imgs={['/Feed/desktop/tempPostPic/tempPostPic1.svg']}
-      >
-        <BoardCard.MyPageBoardCardCommentWrapper commentsNum={13} />
+      <BoardCard.Header userId={userName} />
+      <BoardCard.Content type="myPage" content={content} imgs={imgs}>
+        <BoardCard.MyPageBoardCardCommentWrapper
+          commentsCount={commentsCount}
+        />
       </BoardCard.Content>
     </BoardCard>
   );

diff --git a/hooks/queries/useGetMyBoardListInfiniteData.tsx b/hooks/queries/useGetMyBoardListInfiniteData.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import getMyBoardList from '@/service/myPage';
+
+interface InfiniteScrollProps {
+  infiniteQueryKey: string[];
+  pageParameter?: number;
+  pageSize?: number;
+  inViewThreshold?: number;
+}
+
+export default function useGetMyBoardListInfiniteData({
+  infiniteQueryKey,
+  pageParameter = 1,
+  pageSize = 5,
+  inViewThreshold = 1,
+}: InfiniteScrollProps) {
+  const { data, fetchNextPage, isLoading, hasNextPage, isFetchingNextPage } =
+    useInfiniteQuery({
+      queryKey: infiniteQueryKey,
+      queryFn: ({ pageParam = pageParameter }) =>
+        getMyBoardList({ pageParam, pageSize }),
+      getNextPageParam: (lastPage, allPages) =>
+        allPages.length < 20 ? allPages.length + 1 : undefined,
+      select: (d) => ({
+        pages: d.pages.flatMap((page) => page),
+        pageParams: d.pageParams,
+      }),
+    });
+
+  // 무한 스크롤 화면 가장 아래 부분 탐지하는 observer
+  function Observer({ children }: { children: React.ReactNode }) {
+    const { ref, inView } = useInView({ threshold: inViewThreshold });
+
+    useEffect(() => {
+      if (inView && hasNextPage) {
+        fetchNextPage();
+      }
+    }, [inView]);
+
+    if (!hasNextPage || !data) return null;
+    return (
+      <div ref={ref}>{isLoading || isFetchingNextPage ? children : null}</div>
+    );
+  }
+
+  return {
+    Observer,
+    data,
+  };
+}
diff --git a/service/myPage.ts b/service/myPage.ts
@@ -0,0 +1,27 @@
+import { AuthError } from '@/lib/error';
+import { MyBoardList } from '@/types/types';
+
+interface TempPostListApiProps {
+  pageParam: number;
+  pageSize: number;
+}
+
+export default async function getMyBoardList({
+  pageParam,
+  pageSize,
+}: TempPostListApiProps): Promise<MyBoardList[]> {
+  try {
+    const url = `/endpoint/api/board/myPage?pageNumber=${pageParam}&pageSize=${pageSize}`;
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`서버오류:${response.status}`);
+    }
+    return await response.json();
+  } catch (error) {
+    if (error instanceof AuthError) {
+      window.location.replace('/auth/login');
+      alert(error.message);
+    }
+    throw error;
+  }
+}
diff --git a/types/types.ts b/types/types.ts
@@ -15,22 +15,24 @@ export interface BoardList {
   id: number;
   title: string;
   content: string;
-  userName: string;
-  comments: Comment[];
-  image: string[];
-  likeNum: number;
-  commentNum: number;
-  created: string;
-  modified: string;
+  writer: string;
+  replyListDto: Comment[];
+  fileNames: string[];
+  likedCount: number;
+  replyCount: number;
+  createdDate: string;
+  modifiedDate: string;
 }
 
 export interface Comment {
   id: number;
   content: string;
-  userName: string;
+  nickname: string;
   children: string[];
 }
 
+export interface MyBoardList extends BoardList {}
+
 export interface LocationInfoType {
   predictions: string[];
   location: {