bug: 페이지네이션 정상작동(<을 1페이지로 인식)

Kakaotech-10 · Nov 7, 2024 · e6f3ef0 · e6f3ef0
1 parent 41d7119
commit e6f3ef0
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 54 deletions.
diff --git a/src/component/Pagination.jsx b/src/component/Pagination.jsx
@@ -1,38 +1,66 @@
-//Pagination.jsx
-
+// Pagination.jsx
+import PropTypes from "prop-types";
 import "./styles/Pagination.scss";
 
 const Pagination = ({ currentPage, totalPages, onPageChange }) => {
-  const pageNumbers = [];
-  for (let i = 1; i <= totalPages; i++) {
-    pageNumbers.push(i);
-  }
+  const getPageNumbers = () => {
+    const pageNumbers = [];
+    let startPage = Math.max(currentPage - 2, 0);
+    let endPage = Math.min(startPage + 4, totalPages - 1);
+
+    // 끝부분에 도달했을 때 시작 페이지 조정
+    if (endPage - startPage < 4) {
+      startPage = Math.max(endPage - 4, 0);
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      pageNumbers.push(i);
+    }
+
+    return pageNumbers;
+  };
+
+  const pageNumbers = getPageNumbers();
+  const showPrevButton = currentPage > 0;
+  const showNextButton = currentPage < totalPages - 1;
 
   return (
     <div className="pagination">
-      <button
-        onClick={() => onPageChange(currentPage - 1)}
-        disabled={currentPage === 1}
-      >
-        &lt;
-      </button>
-      {pageNumbers.map((number) => (
+      {showPrevButton && (
         <button
-          key={number}
-          onClick={() => onPageChange(number)}
-          className={currentPage === number ? "active" : ""}
+          onClick={() => onPageChange(currentPage - 1)}
+          className="nav-button"
         >
-          {number}
+          &lt;
+        </button>
+      )}
+
+      {pageNumbers.map((pageNum) => (
+        <button
+          key={pageNum}
+          onClick={() => onPageChange(pageNum)}
+          className={currentPage === pageNum ? "active" : ""}
+        >
+          {pageNum + 1}
         </button>
       ))}
-      <button
-        onClick={() => onPageChange(currentPage + 1)}
-        disabled={currentPage === totalPages}
-      >
-        &gt;
-      </button>
+
+      {showNextButton && (
+        <button
+          onClick={() => onPageChange(currentPage + 1)}
+          className="nav-button"
+        >
+          &gt;
+        </button>
+      )}
     </div>
   );
 };
 
+Pagination.propTypes = {
+  currentPage: PropTypes.number.isRequired,
+  totalPages: PropTypes.number.isRequired,
+  onPageChange: PropTypes.func.isRequired,
+};
+
 export default Pagination;
diff --git a/src/component/SortButtons.jsx b/src/component/SortButtons.jsx
@@ -1,15 +1,35 @@
-//SortButton.jsx
-
+// SortButtons.jsx
+import PropTypes from "prop-types";
 import "./styles/SortButtons.scss";
 
-const SortButtons = ({ onSort }) => {
+const SortButtons = ({ onSort, currentSort }) => {
   return (
     <div className="sort-buttons">
-      <button onClick={() => onSort("latest")}>최신순</button>
-      <button onClick={() => onSort("oldest")}>오래된 순</button>
-      <button onClick={() => onSort("popular")}>인기순</button>
+      <button
+        onClick={() => onSort("latest")}
+        className={currentSort === "latest" ? "active" : ""}
+      >
+        최신순
+      </button>
+      <button
+        onClick={() => onSort("oldest")}
+        className={currentSort === "oldest" ? "active" : ""}
+      >
+        오래된 순
+      </button>
+      <button
+        onClick={() => onSort("popular")}
+        className={currentSort === "popular" ? "active" : ""}
+      >
+        인기순
+      </button>
     </div>
   );
 };
 
+SortButtons.propTypes = {
+  onSort: PropTypes.func.isRequired,
+  currentSort: PropTypes.string.isRequired,
+};
+
 export default SortButtons;
diff --git a/src/containers/Community.jsx b/src/containers/Community.jsx
@@ -1,4 +1,3 @@
-// containers/Community.jsx
 import { useState, useEffect } from "react";
 import Sidebar from "./SideForm";
 import Search from "../component/Search";
@@ -32,17 +31,41 @@ const Community = () => {
   const fetchPosts = async () => {
     try {
       setIsLoading(true);
-      const data = await getPosts(currentPage, pageSize);
-      console.log("Fetched posts:", data.content); // 디버깅 로그 추가
-      setPosts(data.content);
-      setTotalPages(data.totalPages);
+      // sortBy 파라미터를 서버에 전달
+      const data = await getPosts(currentPage, pageSize, sortBy);
+
+      let sortedPosts;
+      if (sortBy === "oldest") {
+        // 오래된순일 때는 created_at 기준으로 오름차순 정렬
+        sortedPosts = [...data.content].sort(
+          (a, b) => new Date(a.created_at) - new Date(b.created_at)
+        );
+      } else if (sortBy === "latest") {
+        // 최신순일 때는 created_at 기준으로 내림차순 정렬
+        sortedPosts = [...data.content].sort(
+          (a, b) => new Date(b.created_at) - new Date(a.created_at)
+        );
+      } else {
+        // 인기순일 때는 likes 기준으로 정렬
+        sortedPosts = [...data.content].sort(
+          (a, b) => b.post_likes - a.post_likes
+        );
+      }
+
+      setPosts(sortedPosts);
+      setTotalPages(Math.ceil(data.totalPages));
     } catch (error) {
       console.error("Error fetching posts:", error);
     } finally {
       setIsLoading(false);
     }
   };
 
+  const handleSort = (sortType) => {
+    setSortBy(sortType);
+    setCurrentPage(0); // 정렬 변경 시 첫 페이지로 이동
+  };
+
   const handleWriteClick = () => {
     setShowWriteForm(true);
   };
@@ -61,7 +84,7 @@ const Community = () => {
         created_at: newPost.createdAt,
         updated_at: newPost.updatedAt,
         clean: newPost.clean,
-        imageUrls: newPost.imageUrls || [], // 이미지 URL 배열 추가
+        imageUrls: newPost.imageUrls || [],
         member: newPost.member,
       };
 
@@ -74,24 +97,12 @@ const Community = () => {
     }
   };
 
-  const handleSort = (sortType) => {
-    setSortBy(sortType);
-    setCurrentPage(0);
-  };
-
   const handleCommentsUpdate = async (updatedComments) => {
     try {
-      console.log("Received updated comments:", updatedComments);
-
-      // allComments 배열을 바로 사용하도록 수정
       if (Array.isArray(updatedComments)) {
-        // 새로운 댓글들로 상태 업데이트
-        console.log("Final organized comments:", updatedComments);
         setComments(updatedComments);
       } else {
-        // 단일 댓글이 전달된 경우, 기존 댓글 배열에 추가
         const newComments = [...comments, updatedComments];
-        console.log("Final organized comments:", newComments);
         setComments(newComments);
       }
     } catch (error) {
@@ -105,15 +116,11 @@ const Community = () => {
       setIsLoading(true);
       setCommentError(null);
 
-      console.log("Fetching post with ID:", postId);
       const [postData, commentsData] = await Promise.all([
         getPost(postId),
         getPostComments(postId),
       ]);
 
-      console.log("Received post data:", postData); // 로깅 추가
-      console.log("Post images:", postData.imageUrls); // 이미지 URL 로깅
-
       setSelectedPost(postData);
 
       if (commentsData.error) {
@@ -146,7 +153,7 @@ const Community = () => {
                 created_at: updatedPost.createdAt,
                 updated_at: updatedPost.updatedAt,
                 clean: updatedPost.clean,
-                imageUrls: updatedPost.imageUrls || [], // 이미지 URL 배열 추가
+                imageUrls: updatedPost.imageUrls || [],
                 member: updatedPost.member,
               }
             : post
@@ -207,7 +214,7 @@ const Community = () => {
         <div className="community-header">
           <h2>커뮤니티</h2>
           <div className="header-right">
-            <SortButtons onSort={handleSort} />
+            <SortButtons onSort={handleSort} currentSort={sortBy} />
             <div className="write-button-area">
               <button
                 className="write-button"
@@ -242,7 +249,7 @@ const Community = () => {
                 <Postlist
                   id={post.post_id}
                   title={post.post_title}
-                  imageUrls={post.imageUrls} // 이미지 URL 배열 전달
+                  imageUrls={post.imageUrls}
                   likes={(post.post_likes !== undefined
                     ? post.post_likes
                     : 0