Merge pull request #148 from jihwooon/issue-76

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

.github/workflows/deploy.yml → .github/workflows/server.yml

@@ -1,4 +1,4 @@
-name: server
+name: book-store Server
 
 on:
     push:

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;