front, 댓글 pagination 완료 :push

board-front/src/components/Pagination/index.tsx

@@ -1,16 +1,43 @@
-import React from "react";
+import React, { Dispatch, SetStateAction } from "react";
 import "./style.css";
 
+//          interface: 페이지네이션 컴포넌트 properties           //
+interface Props {
+  currentPage: number;
+  currentSection: number;
+  setCurrentPage: Dispatch<SetStateAction<number>>;
+  setCurrentSection: Dispatch<SetStateAction<number>>;
+
+  viewPageList: number[];
+  totalSection: number;
+}
+
 //          component: 페이지네이션 컴포넌트          //
-export default function Pagination() {
+export default function Pagination(props: Props) {
+  //          state: Properties           //
+  const { currentPage, currentSection, viewPageList, totalSection } = props;
+  const { setCurrentPage, setCurrentSection } = props;
+
   //          event handler: 페이지 번호 클릭 이벤트 처리           //
-  const onPageClickHandler = (page: number) => {};
+  const onPageClickHandler = (page: number) => {
+    setCurrentPage(page);
+  };
 
   //          event handler: 이전 버튼 클릭 이벤트 처리           //
-  const onPreviousClickHandler = () => {};
+  const onPreviousClickHandler = () => {
+    if (currentSection === 1) return;
+    /* 2섹션이면 11~20페이지 이전버튼 클릭 시 10페이지로 가야함 */
+    setCurrentPage((currentSection - 1) * 10);
+    setCurrentSection(currentSection - 1);
+  };
 
-  //          event handler: 이전 버튼 클릭 이벤트 처리           //
-  const onNextClickHandler = () => {};
+  //          event handler: 다음 버튼 클릭 이벤트 처리           //
+  const onNextClickHandler = () => {
+    if (currentSection === totalSection) return;
+    /* 2섹션이면 11~20페이지 다음버튼 클릭 시 21페이지로 가야함 */
+    setCurrentPage(currentSection * 10 + 1);
+    setCurrentSection(currentSection + 1);
+  };
 
   //          render: 페이지네이션 컴포넌트 렌더링          //
   return (
@@ -28,10 +55,18 @@ export default function Pagination() {
       </div>
       <div className="pagination-divider">{"|"}</div>
 
-      <div className="pagination-text-active">{1}</div>
-      <div className="pagination-text" onClick={() => onPageClickHandler(2)}>
-        {2}
-      </div>
+      {viewPageList.map((page) =>
+        page === currentPage ? (
+          <div className="pagination-text-active">{page}</div>
+        ) : (
+          <div
+            className="pagination-text"
+            onClick={() => onPageClickHandler(page)}
+          >
+            {page}
+          </div>
+        )
+      )}
 
       <div className="pagination-divider">{"|"}</div>
       <div className="pagination-change-link-box">

board-front/src/hooks/index.ts

@@ -0,0 +1,3 @@
+import usePagination from "./pagination.hook";
+
+export { usePagination };

board-front/src/views/Board/Detail/index.tsx

@@ -32,6 +32,7 @@ import {
 import dayjs from "dayjs";
 import { useCookies } from "react-cookie";
 import { PostCommentRequestDto } from "apis/request/board";
+import { usePagination } from "hooks";
 
 //          component: 게시물 상세화면 컴포넌트          //
 export default function BoardDetail() {
@@ -221,8 +222,20 @@ export default function BoardDetail() {
     const commentRef = useRef<HTMLTextAreaElement | null>(null);
     //          state: 좋아요 리스트 상태              //
     const [favoriteList, setFavoriteList] = useState<FavoriteListItem[]>([]);
-    //          state: 댓글 리스트 상태(임시)              //
-    const [commentList, setCommentList] = useState<CommentListItem[]>([]);
+    //          state: 페이지네이션 관련 상태              //
+    const {
+      currentPage /* 현재 페이지가 어떤 위치에 있는지 */,
+      setCurrentPage,
+      currentSection,
+      setCurrentSection,
+      viewList /* 현재 보여줄 리스트 */,
+      viewPageList,
+      totalSection /* 전체 섹션이 몇개인지 */,
+      setTotalList,
+    } =
+      usePagination<CommentListItem>(
+        5
+      ); /* ()안의 숫자 하나의 페이지에 몇개의 요소를 보여줄 건지 */
     //          state: 좋아요 상태              //
     const [isFavorite, setFavorite] = useState(false);
     //          state: 좋아요 상자 보기 상태              //
@@ -231,6 +244,8 @@ export default function BoardDetail() {
     const [showComment, setShowComment] = useState(false);
     //          state: 댓글 상태              //
     const [comment, setComment] = useState<string>("");
+    //          state: 댓글 개수 상태              //
+    const [totalCommentCount, setTotalCommentCount] = useState<number>(0);
 
     //          function: getFavoriteListResponse 처리 함수           //
     const getFavoriteListResponse = (
@@ -266,7 +281,8 @@ export default function BoardDetail() {
       if (code !== "SU") return;
 
       const { commentList } = responseBody as GetCommentListResponseDto;
-      setCommentList(commentList);
+      setTotalList(commentList);
+      setTotalCommentCount(commentList.length);
     };
 
     //            function: PutFavoriteResponse 처리 함수                 //
@@ -376,7 +392,7 @@ export default function BoardDetail() {
             <div className="icon-button">
               <div className="icon comment-icon"></div>
             </div>
-            <div className="board-detail-botton-button-text">{`댓글 ${commentList.length}`}</div>
+            <div className="board-detail-botton-button-text">{`댓글 ${totalCommentCount}`}</div>
             <div className="icon-button" onClick={onShowCommentClickhandler}>
               {showComment ? (
                 <div className="icon up-light-icon"></div>
@@ -406,17 +422,24 @@ export default function BoardDetail() {
             <div className="board-detail-bottom-comment-container">
               <div className="board-detail-bottom-comment-title">
                 {"댓글 "}
-                <span className="emphasis">{commentList.length}</span>
+                <span className="emphasis">{totalCommentCount}</span>
               </div>
               <div className="board-detail-bottom-comment-list-container">
-                {commentList.map((item) => (
+                {viewList.map((item) => (
                   <CommentItem commentListItem={item} />
                 ))}
               </div>
             </div>
             <div className="divider"></div>
             <div className="board-detail-bottom-comment-pagination-box">
-              <Pagination />
+              <Pagination
+                currentPage={currentPage}
+                currentSection={currentSection}
+                setCurrentPage={setCurrentPage}
+                setCurrentSection={setCurrentSection}
+                viewPageList={viewPageList}
+                totalSection={totalSection}
+              />
             </div>
             {loginUser !== null && (
               <div className="board-detail-bottom-comment-input-box">