Merge pull request #356 from ttaerrim/355-pagination

[Feat] 페이지네이션 추가

app/frontend/src/components/Pagination/index.tsx

@@ -10,19 +10,21 @@ type PaginationProps = {
   onClickPrev: () => void;
   onClickNext: () => void;
   onClickItem: React.MouseEventHandler<HTMLButtonElement>;
+  className?: string;
 };
 
 export function Pagination({
   currentPage,
   onClickPrev,
   onClickNext,
   onClickItem,
+  className,
 }: PaginationProps) {
   const [start, end] = get10UnitRange(currentPage);
   const array = createRangeArray(start, end);
   const arrow = <Arrow width={16} height={16} fill={grayscale200} />;
   return (
-    <div className={styles.container}>
+    <div className={`${styles.container} ${className}`}>
       <button type="button" onClick={onClickPrev}>
         {arrow}
       </button>

app/frontend/src/hooks/usePagination.ts

@@ -1,8 +1,26 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { createSearchParams, useLocation, useNavigate } from 'react-router-dom';
+
+const useNavigateSearch = () => {
+  const navigate = useNavigate();
+  return (pathname: string, params: { page: string }) =>
+    navigate({ pathname, search: `?${createSearchParams(params)}` });
+};
 
 export const usePagination = () => {
+  const location = useLocation();
+  const navigationSearch = useNavigateSearch();
+
   const [currentPage, setCurrentPage] = useState(1);
 
+  useEffect(() => {
+    const searchParams = new URLSearchParams(location.search);
+    const page = searchParams.get('page');
+    if (page) {
+      setCurrentPage(Number(page));
+    }
+  }, [location]);
+
   const onClickNext = () => {
     setCurrentPage(currentPage + 1);
   };
@@ -12,7 +30,9 @@ export const usePagination = () => {
   };
 
   const onClickItem = (e: React.MouseEvent<HTMLButtonElement>) => {
-    setCurrentPage(Number(e.currentTarget.value));
+    const page = e.currentTarget.value;
+    setCurrentPage(Number(page));
+    navigationSearch('', { page });
   };
 
   return { currentPage, onClickItem, onClickNext, onClickPrev };

app/frontend/src/pages/Mogaco/MogacoList.tsx

@@ -5,9 +5,13 @@ import { queryKeys } from '@/queries';
 
 import * as styles from './MogacoList.css';
 
-export function MogacoList() {
+type MogacoListProp = {
+  currentPage: number;
+};
+
+export function MogacoList({ currentPage }: MogacoListProp) {
   const { data: mogacoList, isLoading } = useQuery(
-    queryKeys.mogaco.list({ page: '1' }),
+    queryKeys.mogaco.list({ page: currentPage.toString() }),
   );
 
   if (isLoading) {

app/frontend/src/pages/Mogaco/index.css.ts

@@ -7,3 +7,7 @@ export const container = style({
   maxWidth: '80rem',
   margin: '0 auto',
 });
+
+export const pagination = style({
+  marginTop: '2rem',
+});

app/frontend/src/pages/Mogaco/index.tsx

@@ -1,12 +1,24 @@
+import { Pagination } from '@/components';
+import { usePagination } from '@/hooks';
+
 import * as styles from './index.css';
 import { MogacoList } from './MogacoList';
 import { MogacoListHeader } from './MogacoListHeader';
 
 export function MogacoPage() {
+  const { currentPage, onClickItem, onClickNext, onClickPrev } =
+    usePagination();
   return (
     <div className={styles.container}>
       <MogacoListHeader />
-      <MogacoList />
+      <MogacoList currentPage={currentPage} />
+      <Pagination
+        className={styles.pagination}
+        currentPage={currentPage}
+        onClickItem={onClickItem}
+        onClickNext={onClickNext}
+        onClickPrev={onClickPrev}
+      />
     </div>
   );
 }