From 439b86fa204e2d2e6185bc57d172755adec86d7b Mon Sep 17 00:00:00 2001
From: thedevluffy <thedevluffy@gmail.com>
Date: Sat, 22 Feb 2020 21:59:59 +0900
Subject: [PATCH] =?UTF-8?q?[#3]=20feat=20-=20=EB=8F=84=EC=84=9C=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=EC=A1=B0=ED=9A=8C=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/books/index.tsx                         | 13 +++-------
 ...kCardHeader.tsx => BookListCardHeader.tsx} | 10 +++++---
 ...ageButtons.tsx => BookListPageButtons.tsx} | 10 ++++----
 .../organisms/BookListCardFooter.tsx          | 12 +++++++++
 .../organisms/LibraryBookCardFooter.tsx       | 12 ---------
 .../templates/BookListCardTemplate.tsx        | 25 +++++++++++++++++++
 ...ageContext.tsx => BookListPageContext.tsx} |  4 +--
 7 files changed, 55 insertions(+), 31 deletions(-)
 rename src/components/molecules/{LibraryBookCardHeader.tsx => BookListCardHeader.tsx} (82%)
 rename src/components/molecules/{LibraryBookPageButtons.tsx => BookListPageButtons.tsx} (72%)
 create mode 100644 src/components/organisms/BookListCardFooter.tsx
 delete mode 100644 src/components/organisms/LibraryBookCardFooter.tsx
 create mode 100644 src/components/templates/BookListCardTemplate.tsx
 rename src/contexts/{LibraryBookPageContext.tsx => BookListPageContext.tsx} (55%)

diff --git a/pages/books/index.tsx b/pages/books/index.tsx
index ab84829..19157e5 100644
--- a/pages/books/index.tsx
+++ b/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>
     );
diff --git a/src/components/molecules/LibraryBookCardHeader.tsx b/src/components/molecules/BookListCardHeader.tsx
similarity index 82%
rename from src/components/molecules/LibraryBookCardHeader.tsx
rename to src/components/molecules/BookListCardHeader.tsx
index 5ca437d..eccc705 100644
--- a/src/components/molecules/LibraryBookCardHeader.tsx
+++ b/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;
\ No newline at end of file
+export default BookListCardHeader;
\ No newline at end of file
diff --git a/src/components/molecules/LibraryBookPageButtons.tsx b/src/components/molecules/BookListPageButtons.tsx
similarity index 72%
rename from src/components/molecules/LibraryBookPageButtons.tsx
rename to src/components/molecules/BookListPageButtons.tsx
index 14d8606..301cb4e 100644
--- a/src/components/molecules/LibraryBookPageButtons.tsx
+++ b/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;
\ No newline at end of file
+export default BookListPageButtons;
\ No newline at end of file
diff --git a/src/components/organisms/BookListCardFooter.tsx b/src/components/organisms/BookListCardFooter.tsx
new file mode 100644
index 0000000..eeab415
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/components/organisms/LibraryBookCardFooter.tsx b/src/components/organisms/LibraryBookCardFooter.tsx
deleted file mode 100644
index 83f085f..0000000
--- a/src/components/organisms/LibraryBookCardFooter.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import LibraryBookPageContext from "../../contexts/LibraryBookPageContext";
-import LibraryBookPageButtons from "../molecules/LibraryBookPageButtons";
-import * as React from "react";
-
-
-const LibraryBookCardFooter = ({page, onPageDown, onPageUp}) => (
-    <LibraryBookPageContext.Provider value={{page, onPageDown, onPageUp}}>
-        <LibraryBookPageButtons/>
-    </LibraryBookPageContext.Provider>
-);
-
-export default LibraryBookCardFooter;
\ No newline at end of file
diff --git a/src/components/templates/BookListCardTemplate.tsx b/src/components/templates/BookListCardTemplate.tsx
new file mode 100644
index 0000000..c4ab590
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/contexts/LibraryBookPageContext.tsx b/src/contexts/BookListPageContext.tsx
similarity index 55%
rename from src/contexts/LibraryBookPageContext.tsx
rename to src/contexts/BookListPageContext.tsx
index 69f68f0..75f1c11 100644
--- a/src/contexts/LibraryBookPageContext.tsx
+++ b/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;
\ No newline at end of file
+export default BookListPageContext;
\ No newline at end of file