Pagination 기능 구현 및 Books 페이지 개선

설명:
- Pagination 컴포넌트 구현:
  - 페이지네이션 기능을 담당하는 Pagination 컴포넌트가 완성되었습니다.
  - URLSearchParams를 활용하여 페이지 이동을 처리합니다.
  - 현재 페이지를 시각적으로 강조하며, 클릭 가능한 페이지 버튼을 표시합니다.
- Books 페이지 수정:
  - Books 페이지에서 Pagination 컴포넌트를 활용하여 페이지네이션을 표시합니다.
  - Pagination 컴포넌트에 필요한 pagination 데이터를 전달합니다.
- useBooks hook 수정:
  - Pagination에 필요한 pagination 데이터를 포함하도록 수정했습니다.
- Books 페이지 스타일링:
  - Books 페이지의 전체 레이아웃과 필터 영역 스타일을 조정했습니다.

관련 변경 사항:
- client/src/components/books/Pagination.tsx 파일 수정
- client/src/hooks/useBooks.ts 파일 수정
- client/src/pages/Books.tsx 파일 수정

client/src/components/books/Pagination.tsx

@@ -1,13 +1,64 @@
+import { useSearchParams } from "react-router-dom";
 import { styled } from "styled-components";
+import { Pagination as IPagination } from "../../models/pagination.model";
+import Button from "../common/Button";
+import { LIMIT } from "../constants/pagination";
+import { QUERYSTRING } from "../constants/querystring";
+
+interface Props {
+  pagination: IPagination
+}
+
+const Pagination = ({ pagination }: Props) => {
+  const [searchparams, setSearchParams] = useSearchParams()
+  const { totalCount, currentPage } = pagination || {};
+  const pages: number = Math.ceil(totalCount / LIMIT)
+
+  const handleClickPage = (page: number) => {
+    const newSearchParams = new URLSearchParams(searchparams);
+
+    newSearchParams.set(QUERYSTRING.PAGE, page.toString())
+
+    setSearchParams(newSearchParams);
+  }
 
-const Pagination = () => {
   return (
-    <div>
-      <h1>Pagination</h1>
-    </div>
+    <PaginationStyle>
+      {
+        pages > 0 && (
+          <ol>
+            {Array(pages)
+              .fill(0)
+              .map((_, index) => (
+                <li key={index}>
+                  <Button
+                    size="small"
+                    scheme={currentPage ? "primary" : "normal"}
+                    onClick={() => handleClickPage(index + 1)}
+                    >
+                    {index + 1}
+                  </Button>
+                </li>
+              ))}
+          </ol>
+        )
+      }
+    </PaginationStyle>
   );
 };
 
-const Paginationstyled = styled.div``;
+const PaginationStyle = styled.div`
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  padding: 24px 0;
+
+  ol {
+    list-style: none;
+    display: flex;
+    gap: 8px;
+    margin: 0;
+  }
+`;
 
 export default Pagination;

client/src/hooks/useBooks.ts

@@ -15,7 +15,7 @@ export const useBooks = () => {
 		currentPage: 1,
 	})
 
-	const [ isEmpty, setIsEmpry] = useState(true)
+	const [isEmpty, setIsEmpty] = useState(true)
 
 	useEffect(() => {
 		const params = new URLSearchParams(location.search)
@@ -28,7 +28,7 @@ export const useBooks = () => {
 		}).then((res) => {
 			setBooks(res.books);
 			setPagination(res.pagination)
-			setIsEmpry(res.books.length === 0)
+			setIsEmpty(res.books.length === 0)
 		})
 	}, [location.search])
 

client/src/pages/Books.tsx

@@ -2,6 +2,7 @@ import styled from "styled-components";
 import BooksEmpty from "../components/books/BooksEmpty";
 import BooksFilter from "../components/books/BooksFilter";
 import BooksList from "../components/books/BooksList";
+import BooksViewSwitcher from "../components/books/BooksViewSwitcher";
 import Pagination from "../components/books/Pagination";
 import Title from "../components/common/Title";
 import { useBooks } from "../hooks/useBooks";
@@ -14,14 +15,27 @@ const Books = () => {
       <Title size="large">도서 검색 결과</Title>
       <BooksStyled>
         <BooksFilter />
+        <BooksViewSwitcher/>
         {!isEmpty && <BooksList books={books}/>}
         {isEmpty && <BooksEmpty />}
-        {!isEmpty && <Pagination />}
+        {!isEmpty && <Pagination pagination={pagination}/>}
       </BooksStyled>
     </>
   );
 };
 
-const BooksStyled = styled.div``;
+const BooksStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 24px;
+
+  .filter {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 0;
+  }
+`;
 
 export default Books;