[milzipmoza-developers#3] feat - 도서 목록 조회 페이지 리팩토링

pages/books/index.tsx

@@ -2,13 +2,10 @@ import * as React from "react";
 import {useState} from "react";
 import AppBarContainer from "../../src/components/organisms/containers/AppBarContainer";
 import ContentContainer from "../../src/components/organisms/containers/ContentContainer";
-import {Card} from "react-bootstrap";
 import {ILibraryBook} from "../../src/models/interfaces";
-import Divider from "../../src/components/atoms/Divider";
 import {useRouter} from "next/router";
-import LibraryBookCardFooter from "../../src/components/organisms/LibraryBookCardFooter";
 import LibraryBookCardBody from "../../src/components/organisms/LibraryBookCardBody";
-import LibraryBookCardHeader from "../../src/components/molecules/LibraryBookCardHeader";
+import BookListCardTemplate from "../../src/components/templates/BookListCardTemplate";
 
 const remoteSearchBooks: ILibraryBook[] = [
     {
@@ -135,15 +132,13 @@ const Index = () => {
     const selectBookClickHandler = (id: number) => () => {
         router.push(`/books/${id}`);
     };
+
     return (
         <AppBarContainer isLoggedIn={true}>
             <ContentContainer>
-                <Card>
-                    <LibraryBookCardHeader/>
+                <BookListCardTemplate title="장서 목록" page={page} onPageDown={onPageDown} onPageUp={onPageUp}>
                     <LibraryBookCardBody books={books} onClick={selectBookClickHandler}/>
-                    <Divider/>
-                    <LibraryBookCardFooter page={page} onPageDown={onPageDown} onPageUp={onPageUp}/>
-                </Card>
+                </BookListCardTemplate>
             </ContentContainer>
         </AppBarContainer>
     );

src/components/molecules/LibraryBookCardHeader.tsx → src/components/molecules/BookListCardHeader.tsx

@@ -2,7 +2,11 @@ import {useRouter} from "next/router";
 import {Button, Card} from "react-bootstrap";
 import * as React from "react";
 
-const LibraryBookCardHeader = () => {
+interface IProps {
+    children: string;
+}
+
+const BookListCardHeader = ({children}: IProps) => {
     const router = useRouter();
 
     const enrollButtonClickHandler = () => {
@@ -14,7 +18,7 @@ const LibraryBookCardHeader = () => {
             <div style={{display: 'flex', flexDirection: 'row'}}>
                 <div style={{flex: 13, display: 'flex', flexDirection: 'column', justifyContent: 'center'}}>
                     <div style={{width: 'fit-content'}}>
-                        장서 목록
+                        {children}
                     </div>
                 </div>
                 <div style={{flex: 1}}>
@@ -25,4 +29,4 @@ const LibraryBookCardHeader = () => {
     );
 };
 
-export default LibraryBookCardHeader;
+export default BookListCardHeader;

src/components/molecules/LibraryBookPageButtons.tsx → src/components/molecules/BookListPageButtons.tsx

@@ -1,10 +1,10 @@
-import LibraryBookPageContext from "../../contexts/LibraryBookPageContext";
+import BookListPageContext from "../../contexts/BookListPageContext";
 import {Button, ButtonGroup} from "react-bootstrap";
 import * as React from "react";
 
-const LibraryBookPageButtons = () => {
+const BookListPageButtons = () => {
     return (
-        <LibraryBookPageContext.Consumer>
+        <BookListPageContext.Consumer>
             {({page, onPageDown, onPageUp}) => (
                 <div style={{height: '40px', display: 'flex', flexDirection: 'row', justifyContent: 'center'}}>
                     <ButtonGroup aria-label="Basic example">
@@ -14,8 +14,8 @@ const LibraryBookPageButtons = () => {
                     </ButtonGroup>
                 </div>
             )}
-        </LibraryBookPageContext.Consumer>
+        </BookListPageContext.Consumer>
     )
 };
 
-export default LibraryBookPageButtons;
+export default BookListPageButtons;

src/components/organisms/BookListCardFooter.tsx

@@ -0,0 +1,12 @@
+import BookListPageContext from "../../contexts/BookListPageContext";
+import BookListPageButtons from "../molecules/BookListPageButtons";
+import * as React from "react";
+
+
+const BookListCardFooter = ({page, onPageDown, onPageUp}) => (
+    <BookListPageContext.Provider value={{page, onPageDown, onPageUp}}>
+        <BookListPageButtons/>
+    </BookListPageContext.Provider>
+);
+
+export default BookListCardFooter;

src/components/templates/BookListCardTemplate.tsx

@@ -0,0 +1,25 @@
+import BookListCardFooter from "../organisms/BookListCardFooter";
+import Divider from "../atoms/Divider";
+import BookListCardHeader from "../molecules/BookListCardHeader";
+import {Card} from "react-bootstrap";
+
+interface IProps {
+    title: string;
+    page: number;
+    onPageDown: any;
+    onPageUp: any;
+    children: any;
+}
+
+const BookListCardTemplate = ({title, page, onPageDown, onPageUp, children}: IProps) => {
+    return (
+        <Card>
+            <BookListCardHeader>{title}</BookListCardHeader>
+            {children}
+            <Divider/>
+            <BookListCardFooter page={page} onPageDown={onPageDown} onPageUp={onPageUp}/>
+        </Card>
+    )
+};
+
+export default BookListCardTemplate;

src/contexts/LibraryBookPageContext.tsx → src/contexts/BookListPageContext.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-const LibraryBookPageContext = React.createContext({
+const BookListPageContext = React.createContext({
     page: 1,
     onPageDown: () => {
 
@@ -10,4 +10,4 @@ const LibraryBookPageContext = React.createContext({
     },
 });
 
-export default LibraryBookPageContext;
+export default BookListPageContext;