Skip to content

Commit

Permalink
Feat: 게시글 부분 api 연결 #65
Browse files Browse the repository at this point in the history
  • Loading branch information
jiyeeeah committed Oct 12, 2023
1 parent d3973d9 commit 6dfaa81
Show file tree
Hide file tree
Showing 11 changed files with 106 additions and 120 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { BoardCard } from '@/components/ui/BoardCard';
import FlexBox from '../../../../../ui/FlexBox';

interface FeedBoardCardProps {
userId: number;
userId: string;
content: string;
imgs: string[];
setShowModal: Dispatch<SetStateAction<boolean>>;
Expand Down Expand Up @@ -41,7 +41,7 @@ export default function FeedBoardCard({
{comments?.map((comment) => (
<BoardCard.Comments
key={comment.id}
userName={comment.User.name}
userName={comment.userName}
content={comment.content}
onClickModal={() => setShowModal(true)}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { BoardCard } from '@/components/ui/BoardCard';
import FlexBox from '../../../../../ui/FlexBox';

interface ModalBoardCardProps {
userId: number;
userId: string;
imgs?: string[];
content: string;
comments: Comment[] | undefined;
Expand All @@ -29,7 +29,7 @@ export default function ModalBoardCard({
{comments?.map((comment) => (
<BoardCard.ModalComments
id={comment.id}
userName={comment.User.name}
userName={comment.userName}
content={comment.content}
userImg="/Feed/desktop/tempProfilePic.svg"
/>
Expand Down
14 changes: 7 additions & 7 deletions components/pages/main/Feed/BoardsList/BoardModal.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
/* eslint-disable react/no-array-index-key */
import { Dispatch, SetStateAction } from 'react';
import Image from 'next/image';
import { Comment, Board } from '@/types/types';
import { Comment, BoardList } from '@/types/types';
import ModalBoardCard from '@/components/pages/main/Feed/BoardsList/BoardCard/ModalBoardCard';
import FlexBox from '../../../../ui/FlexBox';
import Modal from '../../../../ui/Modal';

export default function BoardModal({
showModal,
setShowModal,
post,
board,
comments,
}: {
showModal: boolean;
setShowModal: Dispatch<SetStateAction<boolean>>;
post: Board | null;
board: BoardList | null;
comments: Comment[] | undefined;
}) {
return (
Expand All @@ -30,15 +30,15 @@ export default function BoardModal({
/>
</button>
</FlexBox>
{post ? (
{board ? (
<ModalBoardCard
userId={post.albumId}
userId={board.userName}
imgs={[
post.url,
board.image[0],
'/Feed/desktop/tempPostPic/tempPostPic1.svg',
'/Feed/desktop/tempPostPic/tempPostPic3.svg',
]}
content={post.title}
content={board.title}
comments={comments}
/>
) : (
Expand Down
55 changes: 22 additions & 33 deletions components/pages/main/Feed/BoardsList/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,52 +2,41 @@
/* eslint-disable jsx-a11y/click-events-have-key-events */

import { Dispatch, SetStateAction } from 'react';
import useCommentsQuery from '@/hooks/queries/PostCommentsQuery';
import useGetInfiniteData from '@/hooks/queries/InfiniteData';
import { Comment, Board } from '@/types/types';
import useGetBoardListInfiniteData from '@/hooks/queries/useGetBoardListInfiniteData';
import { BoardList } from '@/types/types';
import FlexBox from '../../../../ui/FlexBox';
import FeedBoardCard from './BoardCard/FeedBoardCard';

export default function BoardsList({
setSelectedBoard,
setSelectedComments,
setShowModal,
}: {
setSelectedBoard: Dispatch<SetStateAction<Board | null>>;
setSelectedComments: Dispatch<SetStateAction<Comment[] | undefined>>;
setSelectedBoard: Dispatch<SetStateAction<BoardList | null>>;
setShowModal: Dispatch<SetStateAction<boolean>>;
}) {
const { Observer, data: posts } = useGetInfiniteData({
infiniteQueryKey: ['posts'],
const { Observer, data: boards } = useGetBoardListInfiniteData({
infiniteQueryKey: ['boards'],
});
const { data: comments } = useCommentsQuery();

return (
<FlexBox direction="column" className="gap-10">
{posts?.pages?.map((post) => {
// 댓글을 위한 부분인데 나중에 실제 api 연결하면 바뀔 예정
const filteredComments = comments?.filter(
(comment) => comment.PostId === post.id,
);
return (
<div
key={post.id}
onClick={() => {
setSelectedBoard(post);
setSelectedComments(filteredComments);
}}
className="w-full"
>
<FeedBoardCard
userId={post.albumId}
content={post.title}
imgs={[post.url, post.url, post.url]}
setShowModal={setShowModal}
comments={filteredComments}
/>
</div>
);
})}
{boards?.pages?.map((board) => (
<div
key={board.id}
onClick={() => {
setSelectedBoard(board);
}}
className="w-full"
>
<FeedBoardCard
userId={board.userName}
content={board.title}
imgs={[board.image[0], board.image[1], board.image[2]]}
setShowModal={setShowModal}
comments={board.comments}
/>
</div>
))}
<Observer>
<div>로딩스피너...</div>
</Observer>
Expand Down
13 changes: 5 additions & 8 deletions components/pages/main/Feed/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 +4,28 @@ import { useState } from 'react';
import PostsList from '@/components/pages/main/Feed/BoardsList';
import FlexBox from '@/components/ui/FlexBox';
import FeedHeader from '@/components/pages/main/Feed/FeedHeader';
import { Board, Comment } from '@/types/types';
import { BoardList } from '@/types/types';
import PostModal from './BoardsList/BoardModal';

export default function Feed() {
const [showModal, setShowModal] = useState(false);
const [selectedBoard, setSelectedBoard] = useState<Board | null>(null);
const [selectedComments, setSelectedComments] = useState<
Comment[] | undefined
>(undefined);
const [selectedBoard, setSelectedBoard] = useState<BoardList | null>(null);

return (
<FlexBox
direction="column"
className={`gap-10 ${showModal ? 'overflow-hidden' : null}`}
>
<FeedHeader />
<PostsList
setSelectedComments={setSelectedComments}
setShowModal={setShowModal}
setSelectedBoard={setSelectedBoard}
/>
<PostModal
showModal={showModal}
setShowModal={setShowModal}
post={selectedBoard}
comments={selectedComments}
board={selectedBoard}
comments={selectedBoard?.comments}
/>
</FlexBox>
);
Expand Down
2 changes: 1 addition & 1 deletion components/ui/BoardCard/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Button from '../Button';
import FlexBox from '../FlexBox';
import BoardCardDropdown from './BoardCardDropdown';

export default function BoardCardHeader({ userId }: { userId: number }) {
export default function BoardCardHeader({ userId }: { userId: string }) {
return (
<FlexBox justify="between" className="w-full">
<FlexBox className="gap-[10px]">
Expand Down
17 changes: 0 additions & 17 deletions hooks/queries/PostCommentsQuery.tsx

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { useEffect } from 'react';
import { useInView } from 'react-intersection-observer';
import { useInfiniteQuery } from '@tanstack/react-query';
import tempPostListApi from '@/service/tempPostListApi';
import getBoardList from '@/service/board';

interface InfiniteScrollProps {
infiniteQueryKey: string[];
Expand All @@ -12,7 +12,7 @@ interface InfiniteScrollProps {
inViewThreshold?: number;
}

export default function useGetInfiniteData({
export default function useGetBoardListInfiniteData({
infiniteQueryKey,
pageParameter = 1,
pageSize = 5,
Expand All @@ -22,7 +22,7 @@ export default function useGetInfiniteData({
useInfiniteQuery({
queryKey: infiniteQueryKey,
queryFn: ({ pageParam = pageParameter }) =>
tempPostListApi({ pageParam, pageSize }),
getBoardList({ pageParam, pageSize }),
getNextPageParam: (lastPage, allPages) =>
allPages.length < 20 ? allPages.length + 1 : undefined,
select: (d) => ({
Expand Down
68 changes: 43 additions & 25 deletions service/board.ts
Original file line number Diff line number Diff line change
@@ -1,28 +1,46 @@
// interface PostType {
// 게시글 제목 : string;
// }
import { AuthError } from '@/lib/error';
import { BoardList } from '@/types/types';

// export async function postChatRoom(chatRoomData: ChatRoomType) {
// const url = `/endpoint/api/chatroom`;
// const formData = new FormData();
// const { body, image } = chatRoomData;
// formData.append(
// 'body',
// new Blob([JSON.stringify({ ...body })], { type: 'application/json' }),
// );
// formData.append('image', image);
interface PostBoardType {
title: string;
content: string;
}

// const response = await fetch(url, {
// method: 'POST',
// credentials: 'include',
// body: formData,
// });
// return response.json();
// }
interface TempPostListApiProps {
pageParam: number;
pageSize: number;
}

// export async function getChatroomUserList(chatRoomId: string) {
// const url = `/endpoint/api/chatroom/${chatRoomId}/participants`;
// const response = await fetch(url);
// const data = await response.json();
// return data;
// }
export async function postBoard(postBoardData: PostBoardType) {
const url = `/endpoint/api/board/register`;
const formData = new FormData();
const { title, content } = postBoardData;
formData.append(title, content);

const response = await fetch(url, {
method: 'POST',
credentials: 'include',
body: formData,
});
return response.json();
}

export default async function getBoardList({
pageParam,
pageSize,
}: TempPostListApiProps): Promise<BoardList[]> {
try {
const url = `/endpoint/api/board/list?_page=${pageParam}&_limit=${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;
}
}
20 changes: 10 additions & 10 deletions service/tempPostListApi.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { Board, TempPostListApiProps } from '@/types/types';
// import { Board, TempPostListApiProps } from '@/types/types';

export default async function tempPostListApi({
pageParam,
pageSize,
}: TempPostListApiProps): Promise<Board> {
const res = await fetch(
`https://jsonplaceholder.typicode.com/photos?_page=${pageParam}&_limit=${pageSize}`,
);
return res.json();
}
// export default async function tempPostListApi({
// pageParam,
// pageSize,
// }: TempPostListApiProps): Promise<Board> {
// const res = await fetch(
// `https://jsonplaceholder.typicode.com/photos?_page=${pageParam}&_limit=${pageSize}`,
// );
// return res.json();
// }
23 changes: 11 additions & 12 deletions types/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,25 +11,24 @@ export interface SidebarProps {
pathname: string;
}

export interface Board {
albumId: number;
export interface BoardList {
id: number;
title: string;
url: string;
}

export interface TempPostListApiProps {
pageParam: number;
pageSize: number;
content: string;
userName: string;
comments: Comment[];
image: string[];
likeNum: number;
commentNum: number;
created: string;
modified: string;
}

export interface Comment {
id: number;
content: string;
PostId: number;
User: {
name: string;
};
userName: string;
children: string[];
}

export interface LocationInfoType {
Expand Down

0 comments on commit 6dfaa81

Please sign in to comment.