Skip to content

Commit 565d139

Browse files
jiyeeeahjiyeeeah
committedOct 12, 2023
Feat: 게시글 부분 api 연결 #65 
1 parent b209ee3 commit 565d139

File tree

11 files changed

+106
-120
lines changed

11 files changed

+106
-120
lines changed
 

‎components/pages/main/Feed/BoardsList/BoardCard/FeedBoardCard.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { BoardCard } from '@/components/ui/BoardCard';
44
import FlexBox from '../../../../../ui/FlexBox';
55

66
interface FeedBoardCardProps {
7-
userId: number;
7+
userId: string;
88
content: string;
99
imgs: string[];
1010
setShowModal: Dispatch<SetStateAction<boolean>>;
@@ -41,7 +41,7 @@ export default function FeedBoardCard({
4141
{comments?.map((comment) => (
4242
<BoardCard.Comments
4343
key={comment.id}
44-
userName={comment.User.name}
44+
userName={comment.userName}
4545
content={comment.content}
4646
onClickModal={() => setShowModal(true)}
4747
/>

‎components/pages/main/Feed/BoardsList/BoardCard/ModalBoardCard.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { BoardCard } from '@/components/ui/BoardCard';
33
import FlexBox from '../../../../../ui/FlexBox';
44

55
interface ModalBoardCardProps {
6-
userId: number;
6+
userId: string;
77
imgs?: string[];
88
content: string;
99
comments: Comment[] | undefined;
@@ -29,7 +29,7 @@ export default function ModalBoardCard({
2929
{comments?.map((comment) => (
3030
<BoardCard.ModalComments
3131
id={comment.id}
32-
userName={comment.User.name}
32+
userName={comment.userName}
3333
content={comment.content}
3434
userImg="/Feed/desktop/tempProfilePic.svg"
3535
/>

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

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
/* eslint-disable react/no-array-index-key */
22
import { Dispatch, SetStateAction } from 'react';
33
import Image from 'next/image';
4-
import { Comment, Board } from '@/types/types';
4+
import { Comment, BoardList } from '@/types/types';
55
import ModalBoardCard from '@/components/pages/main/Feed/BoardsList/BoardCard/ModalBoardCard';
66
import FlexBox from '../../../../ui/FlexBox';
77
import Modal from '../../../../ui/Modal';
88

99
export default function BoardModal({
1010
showModal,
1111
setShowModal,
12-
post,
12+
board,
1313
comments,
1414
}: {
1515
showModal: boolean;
1616
setShowModal: Dispatch<SetStateAction<boolean>>;
17-
post: Board | null;
17+
board: BoardList | null;
1818
comments: Comment[] | undefined;
1919
}) {
2020
return (
@@ -30,15 +30,15 @@ export default function BoardModal({
3030
/>
3131
</button>
3232
</FlexBox>
33-
{post ? (
33+
{board ? (
3434
<ModalBoardCard
35-
userId={post.albumId}
35+
userId={board.userName}
3636
imgs={[
37-
post.url,
37+
board.image[0],
3838
'/Feed/desktop/tempPostPic/tempPostPic1.svg',
3939
'/Feed/desktop/tempPostPic/tempPostPic3.svg',
4040
]}
41-
content={post.title}
41+
content={board.title}
4242
comments={comments}
4343
/>
4444
) : (

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

+22-33
Original file line numberDiff line numberDiff line change
@@ -2,52 +2,41 @@
22
/* eslint-disable jsx-a11y/click-events-have-key-events */
33

44
import { Dispatch, SetStateAction } from 'react';
5-
import useCommentsQuery from '@/hooks/queries/PostCommentsQuery';
6-
import useGetInfiniteData from '@/hooks/queries/InfiniteData';
7-
import { Comment, Board } from '@/types/types';
5+
import useGetBoardListInfiniteData from '@/hooks/queries/useGetBoardListInfiniteData';
6+
import { BoardList } from '@/types/types';
87
import FlexBox from '../../../../ui/FlexBox';
98
import FeedBoardCard from './BoardCard/FeedBoardCard';
109

1110
export default function BoardsList({
1211
setSelectedBoard,
13-
setSelectedComments,
1412
setShowModal,
1513
}: {
16-
setSelectedBoard: Dispatch<SetStateAction<Board | null>>;
17-
setSelectedComments: Dispatch<SetStateAction<Comment[] | undefined>>;
14+
setSelectedBoard: Dispatch<SetStateAction<BoardList | null>>;
1815
setShowModal: Dispatch<SetStateAction<boolean>>;
1916
}) {
20-
const { Observer, data: posts } = useGetInfiniteData({
21-
infiniteQueryKey: ['posts'],
17+
const { Observer, data: boards } = useGetBoardListInfiniteData({
18+
infiniteQueryKey: ['boards'],
2219
});
23-
const { data: comments } = useCommentsQuery();
2420

2521
return (
2622
<FlexBox direction="column" className="gap-10">
27-
{posts?.pages?.map((post) => {
28-
// 댓글을 위한 부분인데 나중에 실제 api 연결하면 바뀔 예정
29-
const filteredComments = comments?.filter(
30-
(comment) => comment.PostId === post.id,
31-
);
32-
return (
33-
<div
34-
key={post.id}
35-
onClick={() => {
36-
setSelectedBoard(post);
37-
setSelectedComments(filteredComments);
38-
}}
39-
className="w-full"
40-
>
41-
<FeedBoardCard
42-
userId={post.albumId}
43-
content={post.title}
44-
imgs={[post.url, post.url, post.url]}
45-
setShowModal={setShowModal}
46-
comments={filteredComments}
47-
/>
48-
</div>
49-
);
50-
})}
23+
{boards?.pages?.map((board) => (
24+
<div
25+
key={board.id}
26+
onClick={() => {
27+
setSelectedBoard(board);
28+
}}
29+
className="w-full"
30+
>
31+
<FeedBoardCard
32+
userId={board.userName}
33+
content={board.title}
34+
imgs={[board.image[0], board.image[1], board.image[2]]}
35+
setShowModal={setShowModal}
36+
comments={board.comments}
37+
/>
38+
</div>
39+
))}
5140
<Observer>
5241
<div>로딩스피너...</div>
5342
</Observer>

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

+5-8
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,28 @@ import { useState } from 'react';
44
import PostsList from '@/components/pages/main/Feed/BoardsList';
55
import FlexBox from '@/components/ui/FlexBox';
66
import FeedHeader from '@/components/pages/main/Feed/FeedHeader';
7-
import { Board, Comment } from '@/types/types';
7+
import { BoardList } from '@/types/types';
88
import PostModal from './BoardsList/BoardModal';
99

1010
export default function Feed() {
1111
const [showModal, setShowModal] = useState(false);
12-
const [selectedBoard, setSelectedBoard] = useState<Board | null>(null);
13-
const [selectedComments, setSelectedComments] = useState<
14-
Comment[] | undefined
15-
>(undefined);
12+
const [selectedBoard, setSelectedBoard] = useState<BoardList | null>(null);
13+
1614
return (
1715
<FlexBox
1816
direction="column"
1917
className={`gap-10 ${showModal ? 'overflow-hidden' : null}`}
2018
>
2119
<FeedHeader />
2220
<PostsList
23-
setSelectedComments={setSelectedComments}
2421
setShowModal={setShowModal}
2522
setSelectedBoard={setSelectedBoard}
2623
/>
2724
<PostModal
2825
showModal={showModal}
2926
setShowModal={setShowModal}
30-
post={selectedBoard}
31-
comments={selectedComments}
27+
board={selectedBoard}
28+
comments={selectedBoard?.comments}
3229
/>
3330
</FlexBox>
3431
);

‎components/ui/BoardCard/Header.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Button from '../Button';
33
import FlexBox from '../FlexBox';
44
import BoardCardDropdown from './BoardCardDropdown';
55

6-
export default function BoardCardHeader({ userId }: { userId: number }) {
6+
export default function BoardCardHeader({ userId }: { userId: string }) {
77
return (
88
<FlexBox justify="between" className="w-full">
99
<FlexBox className="gap-[10px]">

‎hooks/queries/PostCommentsQuery.tsx

-17
This file was deleted.

‎hooks/queries/InfiniteData.tsx ‎hooks/queries/useGetBoardListInfiniteData.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { useEffect } from 'react';
44
import { useInView } from 'react-intersection-observer';
55
import { useInfiniteQuery } from '@tanstack/react-query';
6-
import tempPostListApi from '@/service/tempPostListApi';
6+
import getBoardList from '@/service/board';
77

88
interface InfiniteScrollProps {
99
infiniteQueryKey: string[];
@@ -12,7 +12,7 @@ interface InfiniteScrollProps {
1212
inViewThreshold?: number;
1313
}
1414

15-
export default function useGetInfiniteData({
15+
export default function useGetBoardListInfiniteData({
1616
infiniteQueryKey,
1717
pageParameter = 1,
1818
pageSize = 5,
@@ -22,7 +22,7 @@ export default function useGetInfiniteData({
2222
useInfiniteQuery({
2323
queryKey: infiniteQueryKey,
2424
queryFn: ({ pageParam = pageParameter }) =>
25-
tempPostListApi({ pageParam, pageSize }),
25+
getBoardList({ pageParam, pageSize }),
2626
getNextPageParam: (lastPage, allPages) =>
2727
allPages.length < 20 ? allPages.length + 1 : undefined,
2828
select: (d) => ({

‎service/board.ts

+43-25
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,46 @@
1-
// interface PostType {
2-
// 게시글 제목 : string;
3-
// }
1+
import { AuthError } from '@/lib/error';
2+
import { BoardList } from '@/types/types';
43

5-
// export async function postChatRoom(chatRoomData: ChatRoomType) {
6-
// const url = `/endpoint/api/chatroom`;
7-
// const formData = new FormData();
8-
// const { body, image } = chatRoomData;
9-
// formData.append(
10-
// 'body',
11-
// new Blob([JSON.stringify({ ...body })], { type: 'application/json' }),
12-
// );
13-
// formData.append('image', image);
4+
interface PostBoardType {
5+
title: string;
6+
content: string;
7+
}
148

15-
// const response = await fetch(url, {
16-
// method: 'POST',
17-
// credentials: 'include',
18-
// body: formData,
19-
// });
20-
// return response.json();
21-
// }
9+
interface TempPostListApiProps {
10+
pageParam: number;
11+
pageSize: number;
12+
}
2213

23-
// export async function getChatroomUserList(chatRoomId: string) {
24-
// const url = `/endpoint/api/chatroom/${chatRoomId}/participants`;
25-
// const response = await fetch(url);
26-
// const data = await response.json();
27-
// return data;
28-
// }
14+
export async function postBoard(postBoardData: PostBoardType) {
15+
const url = `/endpoint/api/board/register`;
16+
const formData = new FormData();
17+
const { title, content } = postBoardData;
18+
formData.append(title, content);
19+
20+
const response = await fetch(url, {
21+
method: 'POST',
22+
credentials: 'include',
23+
body: formData,
24+
});
25+
return response.json();
26+
}
27+
28+
export default async function getBoardList({
29+
pageParam,
30+
pageSize,
31+
}: TempPostListApiProps): Promise<BoardList[]> {
32+
try {
33+
const url = `/endpoint/api/board/list?_page=${pageParam}&_limit=${pageSize}`;
34+
const response = await fetch(url);
35+
if (!response.ok) {
36+
throw new Error(`서버오류:${response.status}`);
37+
}
38+
return await response.json();
39+
} catch (error) {
40+
if (error instanceof AuthError) {
41+
window.location.replace('/auth/login');
42+
alert(error.message);
43+
}
44+
throw error;
45+
}
46+
}

‎service/tempPostListApi.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { Board, TempPostListApiProps } from '@/types/types';
1+
// import { Board, TempPostListApiProps } from '@/types/types';
22

3-
export default async function tempPostListApi({
4-
pageParam,
5-
pageSize,
6-
}: TempPostListApiProps): Promise<Board> {
7-
const res = await fetch(
8-
`https://jsonplaceholder.typicode.com/photos?_page=${pageParam}&_limit=${pageSize}`,
9-
);
10-
return res.json();
11-
}
3+
// export default async function tempPostListApi({
4+
// pageParam,
5+
// pageSize,
6+
// }: TempPostListApiProps): Promise<Board> {
7+
// const res = await fetch(
8+
// `https://jsonplaceholder.typicode.com/photos?_page=${pageParam}&_limit=${pageSize}`,
9+
// );
10+
// return res.json();
11+
// }

‎types/types.ts

+11-12
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,24 @@ export interface SidebarProps {
1111
pathname: string;
1212
}
1313

14-
export interface Board {
15-
albumId: number;
14+
export interface BoardList {
1615
id: number;
1716
title: string;
18-
url: string;
19-
}
20-
21-
export interface TempPostListApiProps {
22-
pageParam: number;
23-
pageSize: number;
17+
content: string;
18+
userName: string;
19+
comments: Comment[];
20+
image: string[];
21+
likeNum: number;
22+
commentNum: number;
23+
created: string;
24+
modified: string;
2425
}
2526

2627
export interface Comment {
2728
id: number;
2829
content: string;
29-
PostId: number;
30-
User: {
31-
name: string;
32-
};
30+
userName: string;
31+
children: string[];
3332
}
3433

3534
export interface LocationInfoType {

0 commit comments

Comments
 (0)
Please sign in to comment.