무한 스크롤 기능 구현 및 공용 UI, 유틸, API 관련 파일 추가

apps/web/app/page.tsx

@@ -1,15 +1,26 @@
-export default function Page() {
+import Link from 'next/link';
+
+import { getInfiniteScrollData } from '@/features/post/post-list/api/post-infinite-scroll';
+import { InfiniteScroll } from '@/features/post/post-list/ui/infinite-scroll';
+import { Button } from '@/shared/ui/button';
+
+export default async function Home() {
+  const { data, nextCursor, hasMore } = await getInfiniteScrollData('', 10);
+
   return (
-    <div className="min-h-svh flex items-center justify-center">
-      <div className="flex flex-col items-center justify-center gap-4">
-        <h1 className="flex flex-col justify-center text-2xl font-bold">
-          Hello World
-        </h1>
-        {/* <Button size="sm">Button</Button> */}
-        <div className="flex items-center bg-blue-500 p-4 hover:bg-blue-700">
-          Test
-        </div>
-      </div>
-    </div>
+    <>
+      <Button
+        divClassName="text-right mr-8"
+        buttonClassName="bg-black text-white font-semibold text-base p-2 rounded"
+      >
+        <Link href="/posts/write">새 글 작성</Link>
+      </Button>
+
+      <InfiniteScroll
+        postList={data}
+        lastPostId={nextCursor}
+        hasMore={hasMore}
+      />
+    </>
   );
 }

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

@@ -0,0 +1,40 @@
+import { httpClient } from '@/shared/api/http-client';
+import { CreatePostDTO, Post, UpdatePostDTO } from '@/shared/types/post-types';
+
+// 게시글 생성 (POST /posts)
+export const createPost = async (postData: CreatePostDTO): Promise<Post> => {
+  return httpClient<Post>('/posts', {
+    method: 'POST',
+    body: JSON.stringify(postData),
+  });
+};
+
+// 모든 게시글 조회 (GET /posts)
+export const getPosts = async (): Promise<Post[]> => {
+  return httpClient<Post[]>('/posts');
+};
+
+// 특정 게시글 조회 (GET /posts/{id})
+export const getPostById = async (postId: string): Promise<Post> => {
+  return httpClient<Post>(`/posts/${postId}`);
+};
+
+// 게시글 수정 (PUT /posts/{id})
+export const updatePost = async (
+  postId: string,
+  updatedData: UpdatePostDTO
+): Promise<Post> => {
+  return httpClient<Post>(`/posts/${postId}`, {
+    method: 'PUT',
+    body: JSON.stringify(updatedData),
+  });
+};
+
+// 게시글 삭제 (DELETE /posts/{id})
+export const deletePost = async (
+  postId: string
+): Promise<{ message: string }> => {
+  return httpClient<{ message: string }>(`/posts/${postId}`, {
+    method: 'DELETE',
+  });
+};

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

@@ -0,0 +1,26 @@
+import { BASE_URL } from '@/shared/api/http-client';
+import { GetPostsCursor } from '@/shared/types/post-types';
+
+const commonHeaders = new Headers();
+commonHeaders.append('Content-Type', 'application/json');
+
+export async function getInfiniteScrollData(
+  cursor?: string,
+  limit?: number
+): Promise<GetPostsCursor> {
+  const followingURL = `/posts/infinite?${new URLSearchParams({
+    ...(cursor && { cursor }), // cursor가 있으면 추가, undefined or null이면 추가 안 함
+    ...(limit && { limit: limit.toString() }), // limit가 있으면 추가
+  })}`;
+
+  const response = await fetch(`${BASE_URL}${followingURL}`, {
+    method: 'GET',
+    headers: commonHeaders,
+  });
+
+  if (!response.ok) {
+    throw new Error(`${response.status} ${response.statusText}`);
+  }
+
+  return response.json();
+}

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

@@ -0,0 +1,83 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { getInfiniteScrollData } from '@/features/post/post-list/api/post-infinite-scroll';
+import { PostItem } from '@/features/post/post-list/ui/post-item';
+import { formatToLocaleDate } from '@/shared/lib/format-date';
+import { Post } from '@/shared/types/post-types';
+
+type InfiniteScrollProps = {
+  postList: Post[];
+  lastPostId: string | null;
+  hasMore: boolean;
+};
+
+export function InfiniteScroll({
+  postList,
+  lastPostId,
+  hasMore,
+}: InfiniteScrollProps) {
+  const [loading, setLoading] = useState(false);
+  const [posts, setPosts] = useState<Post[]>(postList);
+  const [cursor, setCursor] = useState(lastPostId ? lastPostId : null);
+
+  const loadMorePosts = useCallback(async () => {
+    if (!hasMore || loading || !cursor) return;
+
+    setLoading(true);
+
+    try {
+      const { data } = await getInfiniteScrollData(cursor, 10);
+      setPosts((prevPosts) => [...prevPosts, ...data]);
+      const lastItem = data.at(-1);
+      setCursor(lastItem ? lastItem.id : null);
+    } catch (error) {
+      console.error('Failed to fetch more posts:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [cursor, hasMore, loading]);
+
+  const target = useRef<HTMLHeadingElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries) => {
+      const firstEntry = entries[0];
+      if (firstEntry?.isIntersecting) loadMorePosts();
+    });
+
+    const currentTarget = target.current;
+    if (currentTarget) observer.observe(currentTarget);
+
+    return () => {
+      if (currentTarget) observer.unobserve(currentTarget);
+    };
+  }, [loadMorePosts]);
+
+  return (
+    <div>
+      {posts.map(({ id, title, content, author, createdAt }) => {
+        const localeCreatedAt = formatToLocaleDate(createdAt);
+        return (
+          <PostItem
+            key={id}
+            linkPostId={id}
+            title={title}
+            content={content}
+            author={author}
+            localeCreatedAt={localeCreatedAt}
+          />
+        );
+      })}
+      <h3
+        ref={target}
+        className="mx-8 mb-4 mt-8 text-center text-9xl font-semibold"
+      >
+        {posts.at(-1)?.id === cursor
+          ? '*************더 많은 게시글 로딩 중****************'
+          : ''}
+      </h3>
+    </div>
+  );
+}

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

@@ -0,0 +1,26 @@
+import Link from 'next/link';
+
+export function PostItem({
+  linkPostId = '',
+  title = '',
+  content = '',
+  author = '',
+  localeCreatedAt = '',
+}) {
+  return (
+    <div className="mx-8 my-4 rounded border border-gray-400 p-4">
+      <Link href={`/posts/${linkPostId}`}>
+        <h3 className="pb-4 font-semibold">{title}</h3>
+        <hr />
+        <p className="pt-4">{content}</p>
+        <br></br>
+        <div className="flex flex-col gap-2">
+          <span className="rounded border border-gray-300 bg-gray-300 px-2 py-0.5 italic">
+            {author}
+          </span>
+          <time>{localeCreatedAt}</time>
+        </div>
+      </Link>
+    </div>
+  );
+}

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

@@ -0,0 +1,19 @@
+export const BASE_URL = 'http://localhost:4000/api';
+
+export const httpClient = async <T>(
+  endpoint: string,
+  options?: RequestInit
+): Promise<T> => {
+  const response = await fetch(`${BASE_URL}${endpoint}`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    ...options,
+  });
+
+  if (!response.ok) {
+    throw new Error(`API 요청 실패: ${response.status}`);
+  }
+
+  return response.json();
+};

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

@@ -0,0 +1,4 @@
+export function formatToLocaleDate(dateString: string): string {
+  const date = new Date(dateString);
+  return date.toLocaleString('ko-KR');
+}

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

@@ -0,0 +1,26 @@
+export interface Post {
+  id: string;
+  title: string;
+  content: string;
+  author: string;
+  createdAt: string;
+  updatedAt?: string;
+}
+
+export type CreatePostDTO = Pick<Post, 'title' | 'content' | 'author'>;
+export type UpdatePostDTO = Partial<CreatePostDTO>;
+
+interface CursorPaginationResponse<T> {
+  data: T[];
+  nextCursor: string | null;
+  hasMore: boolean;
+}
+interface OffsetPaginationResponse<T> {
+  data: T[];
+  currentPage: number;
+  totalPages: number;
+  hasMore: boolean;
+}
+
+export type GetPostsCursor = CursorPaginationResponse<Post>;
+export type GetPostsOffset = OffsetPaginationResponse<Post>;

apps/web/shared/ui/button.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { MouseEventHandler } from 'react';
+
+interface ButtonProps {
+  divClassName?: string;
+  buttonClassName?: string;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  children: React.ReactNode;
+}
+
+const Button = ({
+  divClassName = '',
+  buttonClassName = '',
+  onClick,
+  children,
+}: ButtonProps) => {
+  return (
+    <div className={divClassName}>
+      <button onClick={onClick} className={buttonClassName}>
+        {children}
+      </button>
+    </div>
+  );
+};
+
+export { Button };