feat: 무한 스크롤 기능 구현

Author: rmkim7

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/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>
+  );
+}