diff --git a/pages/books/[id].tsx b/pages/books/[id].tsx index 7c33713..affe952 100644 --- a/pages/books/[id].tsx +++ b/pages/books/[id].tsx @@ -1,20 +1,42 @@ import * as React from "react"; +import {useEffect, 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 {useRouter} from "next/router"; +import {ILibraryBook} from "../../src/models/interfaces"; +import BookRentListCard from "../../src/components/organisms/BookRentListCard"; +import BookDetailCard from "../../src/components/organisms/BookDetailCard"; + +const mockLibraryBook: ILibraryBook = { + id: 8, + title: "개발자의 글쓰기 (변수 네이밍부터 릴리스 노트, 장애 보고서, 기술 블로그까지, 프로그래머의 글쓰기 고민 끝!)", + image: "https://bookthumb-phinf.pstatic.net/cover/155/135/15513595.jpg?type=m1&udate=20191213", + author: "김철수", + publisher: "위키북스", + isbn: "1158391749 9791158391744", + description: "오직 개발자를 위한 글쓰기의 모든 것을 담았습니다!이 책은 개발자의 글쓰기 능력을 종합적으로 향상하기 위한 책이다. 코드 안에서는 함수와 변수... 외주 개발을 하는 개발자를 위해 SI 제안서의 기술 부문을 설득력 있게 쓰는 법도 놓치지 않았다. 블로그를 운영하려는 개발자나 IT기업을 위해 기술 블로그를... ", + hasMany: 1, +}; const Index = () => { const router = useRouter(); + const {id} = router.query; + const [libraryBook, setLibraryBook] = useState(); + + useEffect(() => { + setLibraryBook(mockLibraryBook) + }, [router]); + + const addSerialBtnClickHandler = () => { + console.log('add serial edit') + }; return ( - - 장서 상세 정보 - 조회 할 책 id - {id} - + + ); 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 ( - - + - - - + ); diff --git a/src/components/atoms/BookDetailRow.tsx b/src/components/atoms/BookDetailRow.tsx new file mode 100644 index 0000000..7f5d2de --- /dev/null +++ b/src/components/atoms/BookDetailRow.tsx @@ -0,0 +1,15 @@ +import * as React from "react"; + +interface IProps { + title: string; + children: string; +} + +const BookDetailRow = ({title, children}: IProps) => ( +
+
{title}
+
{children}
+
+); + +export default BookDetailRow; \ No newline at end of file diff --git a/src/components/atoms/BookRentStatusBadge.tsx b/src/components/atoms/BookRentStatusBadge.tsx new file mode 100644 index 0000000..dd5a88c --- /dev/null +++ b/src/components/atoms/BookRentStatusBadge.tsx @@ -0,0 +1,12 @@ +import {Badge} from "react-bootstrap"; +import * as React from "react"; + +const BookRentStatusBadge = ({rentStatus}: any) => ( +
+ {rentStatus + ? 대여중 + : 비치중} +
+); + +export default BookRentStatusBadge; \ No newline at end of file diff --git a/src/components/molecules/BookDetailCardBody.tsx b/src/components/molecules/BookDetailCardBody.tsx new file mode 100644 index 0000000..ed1e6df --- /dev/null +++ b/src/components/molecules/BookDetailCardBody.tsx @@ -0,0 +1,26 @@ +import {ILibraryBook} from "../../models/interfaces"; +import {Image} from "react-bootstrap"; +import BookDetailRow from "../atoms/BookDetailRow"; +import * as React from "react"; + + +interface IProps { + libraryBook: ILibraryBook; +} + +const BookDetailCardBody = ({libraryBook}: IProps) => ( +
+
+ +
+
+ {libraryBook ? libraryBook.title : ''} + {libraryBook ? libraryBook.author : ''} + {libraryBook ? libraryBook.publisher : ''} + {libraryBook ? libraryBook.isbn : ''} + {libraryBook ? libraryBook.description : ''} +
+
+); + +export default BookDetailCardBody; \ No newline at end of file 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 = () => {
- 장서 목록 + {children}
@@ -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 ( - + {({page, onPageDown, onPageUp}) => (
@@ -14,8 +14,8 @@ const LibraryBookPageButtons = () => {
)} - + ) }; -export default LibraryBookPageButtons; \ No newline at end of file +export default BookListPageButtons; \ No newline at end of file diff --git a/src/components/molecules/BookRentListCardBody.tsx b/src/components/molecules/BookRentListCardBody.tsx new file mode 100644 index 0000000..dbd462b --- /dev/null +++ b/src/components/molecules/BookRentListCardBody.tsx @@ -0,0 +1,32 @@ +import {ISerialInfo} from "../../models/interfaces"; +import BookSerialElement from "./BookSerialElement"; +import * as React from "react"; +import {CSSProperties} from "react"; + +interface IProps { + serials: ISerialInfo[] +} + +const style: CSSProperties = { + display: 'flex', + flexDirection: 'column', + minHeight: '250px', + maxHeight: '350px', + height: 'fill-content', + textAlign: 'center', + overflow: 'scroll' +}; + +const BookRentListCardBody = ({serials}: IProps) => ( +
+ {serials.map((serial: ISerialInfo, i: number) => ( + + ))} +
+); + +export default BookRentListCardBody; \ No newline at end of file diff --git a/src/components/molecules/BookSerialElement.tsx b/src/components/molecules/BookSerialElement.tsx new file mode 100644 index 0000000..b6fa5ed --- /dev/null +++ b/src/components/molecules/BookSerialElement.tsx @@ -0,0 +1,45 @@ +import * as React from "react"; +import BookRentStatusBadge from "../atoms/BookRentStatusBadge"; +import {Button} from "react-bootstrap"; +import Divider from "../atoms/Divider"; +import {CSSProperties} from "react"; + +interface IProps { + serialNumber: number; + rentStatus: boolean; + rentUser: string; +} + +const itemStyle: CSSProperties = { + flex: 1, + padding: '4px', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center' +}; + +const BookSerialElement = ({serialNumber, rentStatus, rentUser}: IProps) => ( +
+
+
+
{serialNumber}
+
+
+ +
+
+
{rentUser ? rentUser : ''}
+
+
+
+ +
+ +
+
+
+ +
+); + +export default BookSerialElement; \ No newline at end of file diff --git a/src/components/molecules/CardButtonHeader.tsx b/src/components/molecules/CardButtonHeader.tsx new file mode 100644 index 0000000..ed4aebf --- /dev/null +++ b/src/components/molecules/CardButtonHeader.tsx @@ -0,0 +1,25 @@ +import {Button, Card} from "react-bootstrap"; +import * as React from "react"; + +interface IProps { + title: string; + buttonName: string; + buttonOnClick?: any; + disabled?: boolean; +} + +const CardButtonHeader = ({title, buttonName, buttonOnClick, disabled}: IProps) => ( + +
+
+
{title}
+
+
+ +
+
+ +); + +export default CardButtonHeader; \ No newline at end of file diff --git a/src/components/organisms/BookDetailCard.tsx b/src/components/organisms/BookDetailCard.tsx new file mode 100644 index 0000000..0a997f3 --- /dev/null +++ b/src/components/organisms/BookDetailCard.tsx @@ -0,0 +1,18 @@ +import {ILibraryBook} from "../../models/interfaces"; +import {Card} from "react-bootstrap"; +import CardButtonHeader from "../molecules/CardButtonHeader"; +import BookDetailCardBody from "../molecules/BookDetailCardBody"; +import * as React from "react"; + +interface IProps { + libraryBook: ILibraryBook; +} + +const BookDetailCard = ({libraryBook}: IProps) => ( + + + + +); + +export default BookDetailCard; \ 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}) => ( + + + +); + +export default BookListCardFooter; \ No newline at end of file diff --git a/src/components/organisms/BookRentListCard.tsx b/src/components/organisms/BookRentListCard.tsx new file mode 100644 index 0000000..2518304 --- /dev/null +++ b/src/components/organisms/BookRentListCard.tsx @@ -0,0 +1,48 @@ +import {Card} from "react-bootstrap"; +import CardButtonHeader from "../molecules/CardButtonHeader"; +import BookRentListCardBody from "../molecules/BookRentListCardBody"; +import * as React from "react"; +import {ISerialInfo} from "../../models/interfaces"; +import {useState} from "react"; +import BookListCardFooter from "./BookListCardFooter"; +import Divider from "../atoms/Divider"; + +interface IProps { + bookId: string | string[]; + onClick?: any; +} + +const mockSerials: ISerialInfo[] = [ + {serialNumber: 1, rentStatus: true, rentUser: '루피'}, + {serialNumber: 2, rentStatus: false, rentUser: null}, + {serialNumber: 3, rentStatus: true, rentUser: '루피'}, +]; + +const BookRentListCard = ({bookId, onClick}: IProps) => { + + const [page, setPage] = useState(1); + const [serials, setSerials] = useState(mockSerials); + + const onPageDown = () => { + if (page <= 1) { + return; + } + setPage(page - 1); + console.log('on Page Down'); + }; + + const onPageUp = () => { + console.log('on page up'); + }; + + return ( + + + + + + + ); +}; + +export default BookRentListCard; \ 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}) => ( - - - -); - -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 ( + + {title} + {children} + + + + ) +}; + +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 diff --git a/src/models/interfaces/index.tsx b/src/models/interfaces/index.tsx index 3e4c494..301d269 100644 --- a/src/models/interfaces/index.tsx +++ b/src/models/interfaces/index.tsx @@ -35,4 +35,10 @@ export interface ILibraryBook { isbn: string; description: string; hasMany: number; +} + +export interface ISerialInfo { + serialNumber: number; + rentStatus: boolean; + rentUser: string; } \ No newline at end of file