Merge branch 'dev' of https://github.com/LikeLion-KNU/knufest into dev

src/components/navigation/Pagination.tsx

@@ -8,7 +8,7 @@ import { Dispatch } from "@reduxjs/toolkit";
 
 export const Pagination: React.FC = () => {
     const dispatch: Dispatch = useDispatch();
-    const { currentPage, page, perPage } = useSelector((state: RootState) => state.page);
+    const { currentPage, page, perPage, maxPage } = useSelector((state: RootState) => state.page);
 
     const handlePageBtnClick = useCallback(
         (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -29,11 +29,15 @@ export const Pagination: React.FC = () => {
         <PaginationContainer>
             <PageSkipButton onClick={handlePrevBtnClick}>{"<"}</PageSkipButton>
             {Array.from({ length: perPage }, (_, k) => page + k).map((page) => {
-                return (
-                    <PageButton active={page === currentPage} onClick={handlePageBtnClick}>
-                        {page}
-                    </PageButton>
-                );
+                if (page <= maxPage) {
+                    return (
+                        <PageButton active={page === currentPage} onClick={handlePageBtnClick}>
+                            {page}
+                        </PageButton>
+                    );
+                } else {
+                    return <></>;
+                }
             })}
             <PageSkipButton onClick={handleNextBtnClick}>{">"}</PageSkipButton>
         </PaginationContainer>

src/pages/BoothDetailPage.tsx

@@ -98,8 +98,8 @@ export default function BoothDetailPage() {
                         commentInputRef.current.value = "";
                     }}
                 >
-                    <input ref={commentInputRef} placeholder="댓글 기능이 현재 비활성화되었습니다." disabled />
-                    <SubBtn type="submit" disabled>
+                    <input ref={commentInputRef} placeholder="댓글을 입력해주세요!" />
+                    <SubBtn type="submit">
                         <SendImg src={sendImg} />
                     </SubBtn>
                 </ContentContainer>

src/pages/BoothListPage.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 
 import { Variants } from "framer-motion";
@@ -12,6 +13,8 @@ import { Text } from "@/components/typography/Text";
 import { useAllBooth } from "@/services/booth/booth.hooks";
 
 import { BoothSearchInput, VisibleList } from "./BoothListPage.styled";
+import { pageActions } from "@/store/page.slice";
+import { Dispatch } from "@reduxjs/toolkit";
 
 const listVariants: Variants = {
     hidden: {
@@ -34,6 +37,13 @@ const BoothListPage: React.FC = () => {
     }, []);
 
     const { isPending, boothList } = useAllBooth();
+
+    const dispatch: Dispatch = useDispatch();
+
+    useEffect(() => {
+        dispatch(pageActions.setPage(1));
+    }, [dispatch]);
+
     return (
         <>
             <Paragraph size="m" weight="bold" variant="darkpurple">

src/services/booth/booth.hooks.ts

@@ -1,10 +1,13 @@
 import { useCallback, useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
 import { useParams } from "react-router-dom";
 
 import { useVisitor } from "@/hooks/useVisitor";
 
 import { boothService } from "./booth.service";
 import { IBoothItem, IReadBoothByIdResponse } from "./booth.types";
+import { pageActions } from "@/store/page.slice";
+import { Dispatch } from "@reduxjs/toolkit";
 
 export const useAllBooth = () => {
     const [isPending, setIsPending] = useState<boolean>(false);
@@ -46,6 +49,8 @@ export const useLikes = (initLikeable: boolean, category: string, boothId: numbe
 };
 
 export const useBoothDetail = () => {
+    const dispatch: Dispatch = useDispatch();
+
     const { category, boothId } = useParams();
     const { visitorId } = useVisitor();
 
@@ -57,12 +62,13 @@ export const useBoothDetail = () => {
         boothService
             .readBoothById(category as string, parseInt(boothId as string), visitorId as string)
             .then((data) => {
+                dispatch(pageActions.setMaxPage(Math.ceil(data.commentCount / 20)));
                 setBoothDetail(data);
             })
             .finally(() => {
                 setIsPending(false);
             });
-    }, [category, boothId, visitorId]);
+    }, [category, boothId, visitorId, dispatch]);
 
     return { isPending, boothDetail };
 };

src/services/booth/booth.types.ts

@@ -23,4 +23,5 @@ export interface IReadBoothByIdResponse {
     urls: string[];
     likable: boolean;
     boothDescription?: string;
+    commentCount: number;
 }

src/services/comment/comment.hooks.ts

@@ -1,14 +1,17 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 
 import { useVisitor } from "@/hooks/useVisitor";
 
 import { commentService } from "./comment.service";
 import { IComment } from "./comment.types";
 import { RootState } from "@/store/store";
+import { Dispatch } from "@reduxjs/toolkit";
 
 export const useComment = () => {
+    const dispatch: Dispatch = useDispatch();
+
     const commentInputRef = useRef<HTMLInputElement>(null);
 
     const { visitorId } = useVisitor();
@@ -51,7 +54,7 @@ export const useComment = () => {
                 setIsPending(false);
                 setRefetch(false);
             });
-    }, [category, currentPage, visitorId, boothId, refetch]);
+    }, [category, currentPage, visitorId, boothId, refetch, dispatch]);
 
     return { isPending, comments, handleCommentSubmit, handleCommentDelete, commentInputRef };
 };

src/store/page.slice.ts

@@ -11,7 +11,7 @@ const initialState: IPageState = {
     currentPage: 1,
     page: 1,
     perPage: 5,
-    maxPage: 20,
+    maxPage: 0,
 };
 
 export const pageSlice = createSlice({