Merge pull request #45 from nettee-space/feature/post-list

오프셋 기반 게시글 목록 조회 및 페이지네이션 추가

Author: rmkim7

apps/web/app/page.tsx

@@ -3,6 +3,7 @@ import Link from 'next/link';
 
 import { getInfiniteScrollData } from '@/features/post/post-list';
 import { PostInfiniteScroll } from '@/features/post/post-list';
+import { PostListPagination } from '@/features/post/post-list/ui/post-list-pagination';
 
 export default async function Home() {
   const { data, nextCursor, hasMore } = await getInfiniteScrollData('', 10);
@@ -19,7 +20,7 @@ export default async function Home() {
           </Button>
         </div>
       </div>
-
+      <PostListPagination />
       <PostInfiniteScroll
         postList={data}
         lastPostId={nextCursor}

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

@@ -1,4 +1,9 @@
-import type { CreatePostDTO, Post, UpdatePostDTO } from '@/entities/post';
+import type {
+  CreatePostDTO,
+  GetPostsOffset,
+  Post,
+  UpdatePostDTO,
+} from '@/entities/post';
 import { httpClient } from '@/shared/api';
 
 // 게시글 생성 (POST /posts)
@@ -38,3 +43,13 @@ export const deletePost = async (
     method: 'DELETE',
   });
 };
+
+// 오프셋 기반 게시글 목록 조회 (현재 페이지와 전체 페이지 정보 포함)
+export const getPostsByPage = async (
+  page: number = 1,
+  limit: number = 10
+): Promise<GetPostsOffset> => {
+  return httpClient<GetPostsOffset>(
+    `/posts/paginated?page=${page}&limit=${limit}`
+  );
+};

apps/web/entities/post/index.ts

@@ -1,4 +1,10 @@
-export { createPost, getPostById, getPosts, updatePost } from './api/post-api';
+export {
+  createPost,
+  getPostById,
+  getPosts,
+  getPostsByPage,
+  updatePost,
+} from './api/post-api';
 export { ERROR_MESSAGES } from './lib/error-messages';
 export {
   extractFormData,
@@ -9,7 +15,9 @@ export {
 export type {
   CreatePostDTO,
   GetPostsCursor,
+  GetPostsOffset,
   Post,
   UpdatePostDTO,
 } from './model/post-types';
+export type { PostViewModel } from './model/post-view-model';
 export { mapPostToViewModel } from './model/post-view-model';

apps/web/entities/post/lib/error-messages.ts

@@ -1,4 +1,5 @@
 export const ERROR_MESSAGES = {
+  FETCH_FAILED: '게시글을 불러오는 데 실패했습니다',
   INVALID_TYPE: '유효하지 않은 입력 형식입니다.',
   INVALID_ID: '유효하지 않은 게시글 입니다.',
   REQUIRED_TITLE: '제목을 입력해주세요',

apps/web/features/post/post-list/index.ts

@@ -1,3 +1,4 @@
 export { getInfiniteScrollData } from './api/post-infinite-scroll';
 export { PostInfiniteScroll } from './ui/post-infinite-scroll';
 export { PostItem } from './ui/post-item';
+export { PostListPagination } from './ui/post-list-pagination';

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

@@ -0,0 +1,64 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import {
+  ERROR_MESSAGES,
+  getPostsByPage,
+  mapPostToViewModel,
+  PostViewModel,
+} from '@/entities/post';
+import { PostItem } from '@/features/post/post-list';
+import { usePagination } from '@/shared/hooks/usePagination';
+
+export function PostListPagination() {
+  const [posts, setPosts] = useState<PostViewModel[]>([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [isLoading, setIsLoading] = useState(false);
+  const postsPerPage = 10;
+
+  const { paginationButtons } = usePagination(
+    currentPage,
+    totalPages,
+    setCurrentPage
+  );
+
+  useEffect(() => {
+    const fetchPosts = async () => {
+      setIsLoading(true);
+      try {
+        const response = await getPostsByPage(currentPage, postsPerPage);
+        setPosts(response.data.map(mapPostToViewModel));
+        setTotalPages(response.totalPages);
+      } catch (error) {
+        console.error(`❌ ${ERROR_MESSAGES.FETCH_FAILED}:`, error);
+      }
+      setIsLoading(false);
+    };
+
+    fetchPosts();
+  }, [currentPage]);
+
+  return (
+    <div className="flex flex-col items-center">
+      <ul className="w-full">
+        {isLoading ? (
+          <p className="text-center text-gray-500">로딩 중...</p>
+        ) : (
+          posts.map((post) => (
+            <PostItem
+              key={post.id}
+              linkPostId={post.id}
+              title={post.title}
+              content={post.content}
+              author={post.author}
+              localeCreatedAt={post.localeCreatedAt}
+            />
+          ))
+        )}
+      </ul>
+      <div className="mt-6 flex items-center gap-2">{paginationButtons}</div>
+    </div>
+  );
+}

apps/web/shared/hooks/index.ts

@@ -0,0 +1 @@
+export { usePagination } from './usePagination';

apps/web/shared/hooks/usePagination.tsx

@@ -0,0 +1,63 @@
+import { useMemo } from 'react';
+
+export function usePagination(
+  currentPage: number,
+  totalPages: number,
+  setPage: (page: number) => void
+) {
+  const maxPageButtons = 5;
+  const currentGroup = Math.floor((currentPage - 1) / maxPageButtons);
+  const startPage = currentGroup * maxPageButtons + 1;
+  const endPage = Math.min(startPage + maxPageButtons - 1, totalPages);
+
+  const paginationButtons = useMemo(
+    () =>
+      [
+        { label: '<<', page: 1, isNav: true, disabled: currentPage === 1 },
+        {
+          label: '<',
+          page: Math.max(startPage - 1, 1),
+          isNav: true,
+          disabled: currentPage === 1,
+        },
+        ...Array.from({ length: endPage - startPage + 1 }).map((_, idx) => ({
+          label: (startPage + idx).toString(),
+          page: startPage + idx,
+          isNav: false,
+          disabled: currentPage === startPage + idx,
+        })),
+        {
+          label: '>',
+          page: Math.min(startPage + maxPageButtons, totalPages),
+          isNav: true,
+          disabled: currentPage === totalPages,
+        },
+        {
+          label: '>>',
+          page: totalPages,
+          isNav: true,
+          disabled: currentPage === totalPages,
+        },
+      ].map(({ label, page, isNav, disabled }) => (
+        <button
+          key={label}
+          onClick={() => !disabled && setPage(page)}
+          disabled={disabled}
+          className={`rounded-md border px-3 py-1 transition ${
+            disabled
+              ? isNav
+                ? 'text-gray-400' // <<, <, >, >> 버튼이 비활성화되면 글씨만 회색
+                : 'bg-gray-900 text-white underline' // 페이지 번호 버튼이 비활성화되면 배경 변경
+              : currentPage === page
+                ? 'bg-black font-bold text-white underline' // 현재 페이지 버튼 스타일
+                : 'bg-white hover:bg-gray-100' // 기본 버튼 스타일
+          }`}
+        >
+          {label}
+        </button>
+      )),
+    [currentPage, endPage, setPage, startPage, totalPages]
+  );
+
+  return { paginationButtons, goToPage: setPage };
+}