Feat: 게시물 단일 페이지 만듦 #65

puppypawpaw · Oct 22, 2023 · 415ea34 · 415ea34
1 parent 1238355
commit 415ea34
Show file tree

Hide file tree

Showing 12 changed files with 152 additions and 19 deletions.
diff --git a/app/(main)/board/[boardId]/page.tsx b/app/(main)/board/[boardId]/page.tsx
@@ -0,0 +1,13 @@
+import Board from '@/components/pages/board';
+
+export default async function BoardPage({
+  params: { boardId },
+}: {
+  params: { boardId: number };
+}) {
+  return (
+    <main className="flex flex-1 w-screen">
+      <Board boardId={boardId} />
+    </main>
+  );
+}
diff --git a/components/pages/board/index.tsx b/components/pages/board/index.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import BoardIdCard from '@/components/ui/BoardCard/BoardIdCard';
+// import useGetBoard from '@/hooks/queries/useGetBoard';
+
+export default function Board({ boardId }: { boardId: number }) {
+  // const { data } = useGetBoard(boardId);
+  // if (data) {
+  return (
+    <div className="w-full">
+      <BoardIdCard boardId={boardId} />
+    </div>
+  );
+  // }
+}
diff --git a/components/pages/main/Feed/BoardsList/index.tsx b/components/pages/main/Feed/BoardsList/index.tsx
@@ -48,7 +48,7 @@ export default function BoardsList({
       )}
       {hasNextPage ? null : <div>🐾 더이상 게시물이 없어요 🐾</div>}
       <Observer>
-        <div>로딩스피너...</div>
+        <div>로딩중...🐾</div>
       </Observer>
     </FlexBox>
   );

diff --git a/components/ui/BoardCard/BoardCardPackage/BoardCardIdPackage/index.tsx b/components/ui/BoardCard/BoardCardPackage/BoardCardIdPackage/index.tsx
@@ -0,0 +1,23 @@
+import FlexBox from '@/components/ui/FlexBox';
+import Header from '../Header';
+import Content from '../Content';
+import { BoardCardCommentWrapper } from '../CommentWrapper';
+import BoardCardModalComments from '../BoardCardModalPackage/ModalComments';
+
+export default function BoardCardIdWrapper({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <FlexBox direction="column" justify="between" className="w-full gap-4 p-9">
+      {children}
+    </FlexBox>
+  );
+}
+export const BoardCardId = Object.assign(BoardCardIdWrapper, {
+  Header,
+  Content,
+  BoardCardCommentWrapper,
+  BoardCardModalComments,
+});
diff --git a/components/ui/BoardCard/BoardCardPackage/CommentWrapper.tsx b/components/ui/BoardCard/BoardCardPackage/CommentWrapper.tsx
@@ -30,7 +30,7 @@ export function BoardCardCommentWrapper({
   const postNewComment = () => {
     commentMutate({
       boardId,
-      parentId: 1,
+      parentId: boardId,
       content: commentText,
     });
     setCommentText('');

diff --git a/components/ui/BoardCard/BoardCardPackage/Content.tsx b/components/ui/BoardCard/BoardCardPackage/Content.tsx
@@ -19,7 +19,7 @@ export default function BoardCardContent({
   onClickModal,
 }: {
   children: React.ReactNode;
-  type: 'mainPC' | 'modal' | 'myPage';
+  type: 'mainPC' | 'modal' | 'myPage' | 'id';
   content: string;
   imgs: string[];
   onClickModal?: () => void;
@@ -44,9 +44,9 @@ export default function BoardCardContent({
     <FlexBox
       direction="column"
       align="start"
-      className={`${(type === 'mainPC' || type === 'myPage') && 'w-full'} ${
-        type === 'modal' && 'w-[375px] h-full'
-      } gap-3`}
+      className={`${
+        (type === 'mainPC' || type === 'myPage' || type === 'id') && 'w-full'
+      } ${type === 'modal' && 'w-[375px] h-full'} gap-3`}
     >
       <div
         className={`body3 text-grey-800 ${
@@ -73,9 +73,9 @@ export default function BoardCardContent({
           </div>
         )}
 
-        {type === 'modal' && (
-          <FlexBox className="gap-9">
-            <div className="relative w-[545px] h-[574px]">
+        {(type === 'modal' || type === 'id') && (
+          <FlexBox className="w-full gap-9">
+            <div className="relative w-full h-[574px]">
               <Image
                 src={imgs[imgNum]}
                 alt="게시글 사진"

diff --git a/components/ui/BoardCard/BoardIdCard.tsx b/components/ui/BoardCard/BoardIdCard.tsx
@@ -0,0 +1,47 @@
+// import { Board } from '@/types/types';
+import useGetBoard from '@/hooks/queries/useGetBoard';
+import useGetCommentList from '@/hooks/queries/useGetCommentList';
+import { BoardCardId } from './BoardCardPackage/BoardCardIdPackage';
+
+// interface MyBoardCardProps {
+//   board: Board;
+// }
+
+export default function BoardIdCard({ boardId }: { boardId: number }) {
+  const { data: board } = useGetBoard(boardId);
+  const { data: commentList, Observer } = useGetCommentList(boardId);
+
+  if (board) {
+    return (
+      <BoardCardId>
+        <BoardCardId.Header board={board} />
+        <BoardCardId.Content
+          type="id"
+          content={board.content}
+          imgs={board.fileNames}
+        >
+          <BoardCardId.BoardCardCommentWrapper
+            isModal
+            boardId={board.id}
+            commentsCount={board.replyCount}
+            likedCount={board.likedCount}
+            isLiked={board.boardLiked}
+          >
+            {commentList?.pages.map((page) =>
+              page.content.map((comment) => (
+                <BoardCardId.BoardCardModalComments
+                  id={comment.id}
+                  userName={comment.nickname}
+                  content={comment.content}
+                  // TODO: 유저 프로필 사진 연결!
+                  userImage="/Feed/desktop/tempProfilePic.svg"
+                />
+              )),
+            )}
+            <Observer>로딩중...</Observer>
+          </BoardCardId.BoardCardCommentWrapper>
+        </BoardCardId.Content>
+      </BoardCardId>
+    );
+  }
+}
diff --git a/constant/query-keys.ts b/constant/query-keys.ts
@@ -1,4 +1,6 @@
 export const queryKeys = {
+  BOARD_LIST: 'boardList',
+  BOARD: 'board',
   ENTERED_CHAT_LIST: 'enteredChatList',
   RECOMMEND_CHAT_LIST: 'recommendChatlist',
   TRENDING_CHAT_LIST: 'trendingChatList',

diff --git a/hooks/common/useInfiniteScroll.tsx b/hooks/common/useInfiniteScroll.tsx
@@ -5,7 +5,7 @@ import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
 interface InfiniteScrollProps<T> {
-  queryKey: string;
+  queryKey: string[];
   firstPageParam: number;
   queryFn: (pageNumber: number, ...params: number[]) => Promise<T>;
   getNextPageParamFn: (page: T) => void;
@@ -21,7 +21,7 @@ export default function useInfiniteScroll<T>({
 }: InfiniteScrollProps<T>) {
   const { data, fetchNextPage, isLoading, hasNextPage, isFetchingNextPage } =
     useInfiniteQuery({
-      queryKey: [queryKey],
+      queryKey,
       queryFn: ({ pageParam = firstPageParam }): Promise<T> =>
         queryFn(pageParam, ...params),
       getNextPageParam: getNextPageParamFn,

diff --git a/hooks/queries/useGetBoard.ts b/hooks/queries/useGetBoard.ts
@@ -0,0 +1,11 @@
+import { queryKeys } from '@/constant/query-keys';
+import { getBoard } from '@/service/board';
+import { useQuery } from '@tanstack/react-query';
+
+export default function useGetBoard(boardId: number) {
+  const { data, isLoading } = useQuery({
+    queryKey: [queryKeys.BOARD, boardId],
+    queryFn: () => getBoard(boardId),
+  });
+  return { data, isLoading };
+}
diff --git a/hooks/queries/useGetBoardList.ts b/hooks/queries/useGetBoardList.ts
@@ -2,12 +2,13 @@
 
 import { getBoardList } from '@/service/board';
 import { BoardList } from '@/types/types';
+import { queryKeys } from '@/constant/query-keys';
 import useInfiniteScroll from '../common/useInfiniteScroll';
 
 export default function useGetBoardList() {
   const { data, isLoading, Observer, hasNextPage } =
     useInfiniteScroll<BoardList>({
-      queryKey: 'boardList',
+      queryKey: [queryKeys.BOARD_LIST],
       firstPageParam: 0,
       queryFn: getBoardList,
       getNextPageParamFn: (boardList) =>

diff --git a/service/board.ts b/service/board.ts
@@ -1,13 +1,14 @@
 import { AuthError } from '@/lib/error';
 import {
+  Board,
   CommentList,
   PostBoardType,
   PostCommentType,
   PostImageType,
 } from '@/types/types';
 
 export async function postBoard(postBoardData: PostBoardType) {
-  const url = `endpoint/api/board/register`;
+  const url = `/endpoint/api/board/register`;
 
   const response = await fetch(url, {
     method: 'POST',
@@ -24,7 +25,7 @@ export async function postImageBoard(
   boardId: number,
   postImageData: PostImageType,
 ) {
-  const url = `endpoint/api/file/upload?boardId=${boardId}`;
+  const url = `/endpoint/api/file/upload?boardId=${boardId}`;
   const response = await fetch(url, {
     method: 'POST',
     credentials: 'include',
@@ -56,6 +57,26 @@ export async function getBoardList(pageParam: number) {
   }
 }
 
+export async function getBoard(boardId: number): Promise<Board> {
+  const url = `/endpoint/api/board/${boardId}`;
+  try {
+    const response = await fetch(url);
+    if (response.status === 401) {
+      throw new AuthError('로그인이 필요한 서비스입니다.');
+    }
+    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;
+  }
+}
+
 export async function deleteBoard(boardId: number) {
   const url = `/endpoint/api/board/remove/${boardId}`;
   try {
@@ -83,7 +104,7 @@ export async function deleteBoard(boardId: number) {
 }
 
 export async function postComment(postCommentData: PostCommentType) {
-  const url = `endpoint/api/reply/register`;
+  const url = `/endpoint/api/reply/register`;
   const response = await fetch(url, {
     method: 'POST',
     credentials: 'include',
@@ -148,7 +169,7 @@ export async function deleteComment(boardId: number, replyId: number) {
 }
 
 export async function addBookmarkBoard(boardId: number) {
-  const url = `endpoint/api/bookmark/add?boardId=${boardId}`;
+  const url = `/endpoint/api/bookmark/add?boardId=${boardId}`;
   try {
     const response = await fetch(url, {
       method: 'POST',
@@ -174,7 +195,7 @@ export async function addBookmarkBoard(boardId: number) {
 }
 
 export async function deleteBookmarkBoard(boardId: number) {
-  const url = `endpoint/api/bookmark/delete?boardId=${boardId}`;
+  const url = `/endpoint/api/bookmark/delete?boardId=${boardId}`;
   try {
     const response = await fetch(url, {
       method: 'DELETE',
@@ -200,7 +221,7 @@ export async function deleteBookmarkBoard(boardId: number) {
 }
 
 export async function updateBoardLike(boardId: number) {
-  const url = `endpoint/api/boardLike/like?boardId=${boardId}`;
+  const url = `/endpoint/api/boardLike/like?boardId=${boardId}`;
   try {
     const response = await fetch(url, {
       method: 'POST',
@@ -226,7 +247,7 @@ export async function updateBoardLike(boardId: number) {
 }
 
 export async function deleteBoardLike(boardId: number) {
-  const url = `endpoint/api/boardLike/deleteLike?boardId=${boardId}`;
+  const url = `/endpoint/api/boardLike/deleteLike?boardId=${boardId}`;
   try {
     const response = await fetch(url, {
       method: 'DELETE',