Skip to content

Commit 6d46b20

Browse files
Seono-NaSeono-Na
authored
Merge pull request #22 from nettee-space/feature/post-list
무한 스크롤 기능 구현 및 공용 UI, 유틸, API 관련 파일 추가
2 parents cc23ffe + 8ca94b4 commit 6d46b20

File tree

10 files changed

+274
-12
lines changed

10 files changed

+274
-12
lines changed

‎apps/web/app/page.tsx

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,26 @@
1-
export default function Page() {
1+
import Link from 'next/link';
2+
3+
import { getInfiniteScrollData } from '@/features/post/post-list/api/post-infinite-scroll';
4+
import { InfiniteScroll } from '@/features/post/post-list/ui/infinite-scroll';
5+
import { Button } from '@/shared/ui/button';
6+
7+
export default async function Home() {
8+
const { data, nextCursor, hasMore } = await getInfiniteScrollData('', 10);
9+
210
return (
3-
<div className="min-h-svh flex items-center justify-center">
4-
<div className="flex flex-col items-center justify-center gap-4">
5-
<h1 className="flex flex-col justify-center text-2xl font-bold">
6-
Hello World
7-
</h1>
8-
{/* <Button size="sm">Button</Button> */}
9-
<div className="flex items-center bg-blue-500 p-4 hover:bg-blue-700">
10-
Test
11-
</div>
12-
</div>
13-
</div>
11+
<>
12+
<Button
13+
divClassName="text-right mr-8"
14+
buttonClassName="bg-black text-white font-semibold text-base p-2 rounded"
15+
>
16+
<Link href="/posts/write">새 글 작성</Link>
17+
</Button>
18+
19+
<InfiniteScroll
20+
postList={data}
21+
lastPostId={nextCursor}
22+
hasMore={hasMore}
23+
/>
24+
</>
1425
);
1526
}

‎apps/web/components/stykle.css

Whitespace-only changes.

‎apps/web/entities/post/model/api.ts

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { httpClient } from '@/shared/api/http-client';
2+
import { CreatePostDTO, Post, UpdatePostDTO } from '@/shared/types/post-types';
3+
4+
// 게시글 생성 (POST /posts)
5+
export const createPost = async (postData: CreatePostDTO): Promise<Post> => {
6+
return httpClient<Post>('/posts', {
7+
method: 'POST',
8+
body: JSON.stringify(postData),
9+
});
10+
};
11+
12+
// 모든 게시글 조회 (GET /posts)
13+
export const getPosts = async (): Promise<Post[]> => {
14+
return httpClient<Post[]>('/posts');
15+
};
16+
17+
// 특정 게시글 조회 (GET /posts/{id})
18+
export const getPostById = async (postId: string): Promise<Post> => {
19+
return httpClient<Post>(`/posts/${postId}`);
20+
};
21+
22+
// 게시글 수정 (PUT /posts/{id})
23+
export const updatePost = async (
24+
postId: string,
25+
updatedData: UpdatePostDTO
26+
): Promise<Post> => {
27+
return httpClient<Post>(`/posts/${postId}`, {
28+
method: 'PUT',
29+
body: JSON.stringify(updatedData),
30+
});
31+
};
32+
33+
// 게시글 삭제 (DELETE /posts/{id})
34+
export const deletePost = async (
35+
postId: string
36+
): Promise<{ message: string }> => {
37+
return httpClient<{ message: string }>(`/posts/${postId}`, {
38+
method: 'DELETE',
39+
});
40+
};

‎apps/web/features/post/post-list/api/post-infinite-scroll.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { BASE_URL } from '@/shared/api/http-client';
2+
import { GetPostsCursor } from '@/shared/types/post-types';
3+
4+
const commonHeaders = new Headers();
5+
commonHeaders.append('Content-Type', 'application/json');
6+
7+
export async function getInfiniteScrollData(
8+
cursor?: string,
9+
limit?: number
10+
): Promise<GetPostsCursor> {
11+
const followingURL = `/posts/infinite?${new URLSearchParams({
12+
...(cursor && { cursor }), // cursor가 있으면 추가, undefined or null이면 추가 안 함
13+
...(limit && { limit: limit.toString() }), // limit가 있으면 추가
14+
})}`;
15+
16+
const response = await fetch(`${BASE_URL}${followingURL}`, {
17+
method: 'GET',
18+
headers: commonHeaders,
19+
});
20+
21+
if (!response.ok) {
22+
throw new Error(`${response.status} ${response.statusText}`);
23+
}
24+
25+
return response.json();
26+
}

‎apps/web/features/post/post-list/ui/infinite-scroll.tsx

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
'use client';
2+
3+
import { useCallback, useEffect, useRef, useState } from 'react';
4+
5+
import { getInfiniteScrollData } from '@/features/post/post-list/api/post-infinite-scroll';
6+
import { PostItem } from '@/features/post/post-list/ui/post-item';
7+
import { formatToLocaleDate } from '@/shared/lib/format-date';
8+
import { Post } from '@/shared/types/post-types';
9+
10+
type InfiniteScrollProps = {
11+
postList: Post[];
12+
lastPostId: string | null;
13+
hasMore: boolean;
14+
};
15+
16+
export function InfiniteScroll({
17+
postList,
18+
lastPostId,
19+
hasMore,
20+
}: InfiniteScrollProps) {
21+
const [loading, setLoading] = useState(false);
22+
const [posts, setPosts] = useState<Post[]>(postList);
23+
const [cursor, setCursor] = useState(lastPostId ? lastPostId : null);
24+
25+
const loadMorePosts = useCallback(async () => {
26+
if (!hasMore || loading || !cursor) return;
27+
28+
setLoading(true);
29+
30+
try {
31+
const { data } = await getInfiniteScrollData(cursor, 10);
32+
setPosts((prevPosts) => [...prevPosts, ...data]);
33+
const lastItem = data.at(-1);
34+
setCursor(lastItem ? lastItem.id : null);
35+
} catch (error) {
36+
console.error('Failed to fetch more posts:', error);
37+
} finally {
38+
setLoading(false);
39+
}
40+
}, [cursor, hasMore, loading]);
41+
42+
const target = useRef<HTMLHeadingElement>(null);
43+
44+
useEffect(() => {
45+
const observer = new IntersectionObserver((entries) => {
46+
const firstEntry = entries[0];
47+
if (firstEntry?.isIntersecting) loadMorePosts();
48+
});
49+
50+
const currentTarget = target.current;
51+
if (currentTarget) observer.observe(currentTarget);
52+
53+
return () => {
54+
if (currentTarget) observer.unobserve(currentTarget);
55+
};
56+
}, [loadMorePosts]);
57+
58+
return (
59+
<div>
60+
{posts.map(({ id, title, content, author, createdAt }) => {
61+
const localeCreatedAt = formatToLocaleDate(createdAt);
62+
return (
63+
<PostItem
64+
key={id}
65+
linkPostId={id}
66+
title={title}
67+
content={content}
68+
author={author}
69+
localeCreatedAt={localeCreatedAt}
70+
/>
71+
);
72+
})}
73+
<h3
74+
ref={target}
75+
className="mx-8 mb-4 mt-8 text-center text-9xl font-semibold"
76+
>
77+
{posts.at(-1)?.id === cursor
78+
? '*************더 많은 게시글 로딩 중****************'
79+
: ''}
80+
</h3>
81+
</div>
82+
);
83+
}

‎apps/web/features/post/post-list/ui/post-item.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import Link from 'next/link';
2+
3+
export function PostItem({
4+
linkPostId = '',
5+
title = '',
6+
content = '',
7+
author = '',
8+
localeCreatedAt = '',
9+
}) {
10+
return (
11+
<div className="mx-8 my-4 rounded border border-gray-400 p-4">
12+
<Link href={`/posts/${linkPostId}`}>
13+
<h3 className="pb-4 font-semibold">{title}</h3>
14+
<hr />
15+
<p className="pt-4">{content}</p>
16+
<br></br>
17+
<div className="flex flex-col gap-2">
18+
<span className="rounded border border-gray-300 bg-gray-300 px-2 py-0.5 italic">
19+
{author}
20+
</span>
21+
<time>{localeCreatedAt}</time>
22+
</div>
23+
</Link>
24+
</div>
25+
);
26+
}

‎apps/web/shared/api/http-client.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export const BASE_URL = 'http://localhost:4000/api';
2+
3+
export const httpClient = async <T>(
4+
endpoint: string,
5+
options?: RequestInit
6+
): Promise<T> => {
7+
const response = await fetch(`${BASE_URL}${endpoint}`, {
8+
headers: {
9+
'Content-Type': 'application/json',
10+
},
11+
...options,
12+
});
13+
14+
if (!response.ok) {
15+
throw new Error(`API 요청 실패: ${response.status}`);
16+
}
17+
18+
return response.json();
19+
};

‎apps/web/shared/lib/format-date.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export function formatToLocaleDate(dateString: string): string {
2+
const date = new Date(dateString);
3+
return date.toLocaleString('ko-KR');
4+
}

‎apps/web/shared/types/post-types.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export interface Post {
2+
id: string;
3+
title: string;
4+
content: string;
5+
author: string;
6+
createdAt: string;
7+
updatedAt?: string;
8+
}
9+
10+
export type CreatePostDTO = Pick<Post, 'title' | 'content' | 'author'>;
11+
export type UpdatePostDTO = Partial<CreatePostDTO>;
12+
13+
interface CursorPaginationResponse<T> {
14+
data: T[];
15+
nextCursor: string | null;
16+
hasMore: boolean;
17+
}
18+
interface OffsetPaginationResponse<T> {
19+
data: T[];
20+
currentPage: number;
21+
totalPages: number;
22+
hasMore: boolean;
23+
}
24+
25+
export type GetPostsCursor = CursorPaginationResponse<Post>;
26+
export type GetPostsOffset = OffsetPaginationResponse<Post>;

‎apps/web/shared/ui/button.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
'use client';
2+
3+
import { MouseEventHandler } from 'react';
4+
5+
interface ButtonProps {
6+
divClassName?: string;
7+
buttonClassName?: string;
8+
onClick?: MouseEventHandler<HTMLButtonElement>;
9+
children: React.ReactNode;
10+
}
11+
12+
const Button = ({
13+
divClassName = '',
14+
buttonClassName = '',
15+
onClick,
16+
children,
17+
}: ButtonProps) => {
18+
return (
19+
<div className={divClassName}>
20+
<button onClick={onClick} className={buttonClassName}>
21+
{children}
22+
</button>
23+
</div>
24+
);
25+
};
26+
27+
export { Button };

0 commit comments

Comments
 (0)