Skip to content

Commit 415ea34

Browse files
jiyeeeahjiyeeeah
committed
Feat: 게시물 단일 페이지 만듦 #65 
1 parent 1238355 commit 415ea34

File tree

12 files changed

+152
-19
lines changed

12 files changed

+152
-19
lines changed

‎app/(main)/board/[boardId]/page.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Board from '@/components/pages/board';
2+
3+
export default async function BoardPage({
4+
params: { boardId },
5+
}: {
6+
params: { boardId: number };
7+
}) {
8+
return (
9+
<main className="flex flex-1 w-screen">
10+
<Board boardId={boardId} />
11+
</main>
12+
);
13+
}

‎components/pages/board/index.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
'use client';
2+
3+
import BoardIdCard from '@/components/ui/BoardCard/BoardIdCard';
4+
// import useGetBoard from '@/hooks/queries/useGetBoard';
5+
6+
export default function Board({ boardId }: { boardId: number }) {
7+
// const { data } = useGetBoard(boardId);
8+
// if (data) {
9+
return (
10+
<div className="w-full">
11+
<BoardIdCard boardId={boardId} />
12+
</div>
13+
);
14+
// }
15+
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default function BoardsList({
4848
)}
4949
{hasNextPage ? null : <div>🐾 더이상 게시물이 없어요 🐾</div>}
5050
<Observer>
51-
<div>로딩스피너...</div>
51+
<div>로딩중...🐾</div>
5252
</Observer>
5353
</FlexBox>
5454
);

‎components/ui/BoardCard/BoardCardPackage/BoardCardIdPackage/index.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import FlexBox from '@/components/ui/FlexBox';
2+
import Header from '../Header';
3+
import Content from '../Content';
4+
import { BoardCardCommentWrapper } from '../CommentWrapper';
5+
import BoardCardModalComments from '../BoardCardModalPackage/ModalComments';
6+
7+
export default function BoardCardIdWrapper({
8+
children,
9+
}: {
10+
children: React.ReactNode;
11+
}) {
12+
return (
13+
<FlexBox direction="column" justify="between" className="w-full gap-4 p-9">
14+
{children}
15+
</FlexBox>
16+
);
17+
}
18+
export const BoardCardId = Object.assign(BoardCardIdWrapper, {
19+
Header,
20+
Content,
21+
BoardCardCommentWrapper,
22+
BoardCardModalComments,
23+
});

‎components/ui/BoardCard/BoardCardPackage/CommentWrapper.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export function BoardCardCommentWrapper({
3030
const postNewComment = () => {
3131
commentMutate({
3232
boardId,
33-
parentId: 1,
33+
parentId: boardId,
3434
content: commentText,
3535
});
3636
setCommentText('');

‎components/ui/BoardCard/BoardCardPackage/Content.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default function BoardCardContent({
1919
onClickModal,
2020
}: {
2121
children: React.ReactNode;
22-
type: 'mainPC' | 'modal' | 'myPage';
22+
type: 'mainPC' | 'modal' | 'myPage' | 'id';
2323
content: string;
2424
imgs: string[];
2525
onClickModal?: () => void;
@@ -44,9 +44,9 @@ export default function BoardCardContent({
4444
<FlexBox
4545
direction="column"
4646
align="start"
47-
className={`${(type === 'mainPC' || type === 'myPage') && 'w-full'} ${
48-
type === 'modal' && 'w-[375px] h-full'
49-
} gap-3`}
47+
className={`${
48+
(type === 'mainPC' || type === 'myPage' || type === 'id') && 'w-full'
49+
} ${type === 'modal' && 'w-[375px] h-full'} gap-3`}
5050
>
5151
<div
5252
className={`body3 text-grey-800 ${
@@ -73,9 +73,9 @@ export default function BoardCardContent({
7373
</div>
7474
)}
7575

76-
{type === 'modal' && (
77-
<FlexBox className="gap-9">
78-
<div className="relative w-[545px] h-[574px]">
76+
{(type === 'modal' || type === 'id') && (
77+
<FlexBox className="w-full gap-9">
78+
<div className="relative w-full h-[574px]">
7979
<Image
8080
src={imgs[imgNum]}
8181
alt="게시글 사진"

‎components/ui/BoardCard/BoardIdCard.tsx

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
// import { Board } from '@/types/types';
2+
import useGetBoard from '@/hooks/queries/useGetBoard';
3+
import useGetCommentList from '@/hooks/queries/useGetCommentList';
4+
import { BoardCardId } from './BoardCardPackage/BoardCardIdPackage';
5+
6+
// interface MyBoardCardProps {
7+
// board: Board;
8+
// }
9+
10+
export default function BoardIdCard({ boardId }: { boardId: number }) {
11+
const { data: board } = useGetBoard(boardId);
12+
const { data: commentList, Observer } = useGetCommentList(boardId);
13+
14+
if (board) {
15+
return (
16+
<BoardCardId>
17+
<BoardCardId.Header board={board} />
18+
<BoardCardId.Content
19+
type="id"
20+
content={board.content}
21+
imgs={board.fileNames}
22+
>
23+
<BoardCardId.BoardCardCommentWrapper
24+
isModal
25+
boardId={board.id}
26+
commentsCount={board.replyCount}
27+
likedCount={board.likedCount}
28+
isLiked={board.boardLiked}
29+
>
30+
{commentList?.pages.map((page) =>
31+
page.content.map((comment) => (
32+
<BoardCardId.BoardCardModalComments
33+
id={comment.id}
34+
userName={comment.nickname}
35+
content={comment.content}
36+
// TODO: 유저 프로필 사진 연결!
37+
userImage="/Feed/desktop/tempProfilePic.svg"
38+
/>
39+
)),
40+
)}
41+
<Observer>로딩중...</Observer>
42+
</BoardCardId.BoardCardCommentWrapper>
43+
</BoardCardId.Content>
44+
</BoardCardId>
45+
);
46+
}
47+
}

‎constant/query-keys.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
export const queryKeys = {
2+
BOARD_LIST: 'boardList',
3+
BOARD: 'board',
24
ENTERED_CHAT_LIST: 'enteredChatList',
35
RECOMMEND_CHAT_LIST: 'recommendChatlist',
46
TRENDING_CHAT_LIST: 'trendingChatList',

‎hooks/common/useInfiniteScroll.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useEffect } from 'react';
55
import { useInView } from 'react-intersection-observer';
66

77
interface InfiniteScrollProps<T> {
8-
queryKey: string;
8+
queryKey: string[];
99
firstPageParam: number;
1010
queryFn: (pageNumber: number, ...params: number[]) => Promise<T>;
1111
getNextPageParamFn: (page: T) => void;
@@ -21,7 +21,7 @@ export default function useInfiniteScroll<T>({
2121
}: InfiniteScrollProps<T>) {
2222
const { data, fetchNextPage, isLoading, hasNextPage, isFetchingNextPage } =
2323
useInfiniteQuery({
24-
queryKey: [queryKey],
24+
queryKey,
2525
queryFn: ({ pageParam = firstPageParam }): Promise<T> =>
2626
queryFn(pageParam, ...params),
2727
getNextPageParam: getNextPageParamFn,

‎hooks/queries/useGetBoard.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { queryKeys } from '@/constant/query-keys';
2+
import { getBoard } from '@/service/board';
3+
import { useQuery } from '@tanstack/react-query';
4+
5+
export default function useGetBoard(boardId: number) {
6+
const { data, isLoading } = useQuery({
7+
queryKey: [queryKeys.BOARD, boardId],
8+
queryFn: () => getBoard(boardId),
9+
});
10+
return { data, isLoading };
11+
}

‎hooks/queries/useGetBoardList.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@
22

33
import { getBoardList } from '@/service/board';
44
import { BoardList } from '@/types/types';
5+
import { queryKeys } from '@/constant/query-keys';
56
import useInfiniteScroll from '../common/useInfiniteScroll';
67

78
export default function useGetBoardList() {
89
const { data, isLoading, Observer, hasNextPage } =
910
useInfiniteScroll<BoardList>({
10-
queryKey: 'boardList',
11+
queryKey: [queryKeys.BOARD_LIST],
1112
firstPageParam: 0,
1213
queryFn: getBoardList,
1314
getNextPageParamFn: (boardList) =>

‎service/board.ts

+28-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { AuthError } from '@/lib/error';
22
import {
3+
Board,
34
CommentList,
45
PostBoardType,
56
PostCommentType,
67
PostImageType,
78
} from '@/types/types';
89

910
export async function postBoard(postBoardData: PostBoardType) {
10-
const url = `endpoint/api/board/register`;
11+
const url = `/endpoint/api/board/register`;
1112

1213
const response = await fetch(url, {
1314
method: 'POST',
@@ -24,7 +25,7 @@ export async function postImageBoard(
2425
boardId: number,
2526
postImageData: PostImageType,
2627
) {
27-
const url = `endpoint/api/file/upload?boardId=${boardId}`;
28+
const url = `/endpoint/api/file/upload?boardId=${boardId}`;
2829
const response = await fetch(url, {
2930
method: 'POST',
3031
credentials: 'include',
@@ -56,6 +57,26 @@ export async function getBoardList(pageParam: number) {
5657
}
5758
}
5859

60+
export async function getBoard(boardId: number): Promise<Board> {
61+
const url = `/endpoint/api/board/${boardId}`;
62+
try {
63+
const response = await fetch(url);
64+
if (response.status === 401) {
65+
throw new AuthError('로그인이 필요한 서비스입니다.');
66+
}
67+
if (!response.ok) {
68+
throw new Error(`서버오류:${response.status}`);
69+
}
70+
return await response.json();
71+
} catch (error) {
72+
if (error instanceof AuthError) {
73+
window.location.replace('/auth/login');
74+
alert(error.message);
75+
}
76+
throw error;
77+
}
78+
}
79+
5980
export async function deleteBoard(boardId: number) {
6081
const url = `/endpoint/api/board/remove/${boardId}`;
6182
try {
@@ -83,7 +104,7 @@ export async function deleteBoard(boardId: number) {
83104
}
84105

85106
export async function postComment(postCommentData: PostCommentType) {
86-
const url = `endpoint/api/reply/register`;
107+
const url = `/endpoint/api/reply/register`;
87108
const response = await fetch(url, {
88109
method: 'POST',
89110
credentials: 'include',
@@ -148,7 +169,7 @@ export async function deleteComment(boardId: number, replyId: number) {
148169
}
149170

150171
export async function addBookmarkBoard(boardId: number) {
151-
const url = `endpoint/api/bookmark/add?boardId=${boardId}`;
172+
const url = `/endpoint/api/bookmark/add?boardId=${boardId}`;
152173
try {
153174
const response = await fetch(url, {
154175
method: 'POST',
@@ -174,7 +195,7 @@ export async function addBookmarkBoard(boardId: number) {
174195
}
175196

176197
export async function deleteBookmarkBoard(boardId: number) {
177-
const url = `endpoint/api/bookmark/delete?boardId=${boardId}`;
198+
const url = `/endpoint/api/bookmark/delete?boardId=${boardId}`;
178199
try {
179200
const response = await fetch(url, {
180201
method: 'DELETE',
@@ -200,7 +221,7 @@ export async function deleteBookmarkBoard(boardId: number) {
200221
}
201222

202223
export async function updateBoardLike(boardId: number) {
203-
const url = `endpoint/api/boardLike/like?boardId=${boardId}`;
224+
const url = `/endpoint/api/boardLike/like?boardId=${boardId}`;
204225
try {
205226
const response = await fetch(url, {
206227
method: 'POST',
@@ -226,7 +247,7 @@ export async function updateBoardLike(boardId: number) {
226247
}
227248

228249
export async function deleteBoardLike(boardId: number) {
229-
const url = `endpoint/api/boardLike/deleteLike?boardId=${boardId}`;
250+
const url = `/endpoint/api/boardLike/deleteLike?boardId=${boardId}`;
230251
try {
231252
const response = await fetch(url, {
232253
method: 'DELETE',

0 commit comments

Comments
 (0)