diff --git a/src/component/Pagination.jsx b/src/component/Pagination.jsx index e541bea..1454473 100644 --- 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 (
- - {pageNumbers.map((number) => ( + {showPrevButton && ( + )} + + {pageNumbers.map((pageNum) => ( + ))} - + + {showNextButton && ( + + )}
); }; +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 index 078cb95..9c14ad0 100644 --- 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 (
- - - + + +
); }; +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 index a1ea1bb..a56d8b3 100644 --- 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,10 +31,29 @@ 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 { @@ -43,6 +61,11 @@ const Community = () => { } }; + 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 = () => {

커뮤니티

- +