[milzipmoza-developers#3] feat - 도서 상세 관리 페이지 리팩토링

TheDevLuffy · Mar 1, 2020 · 26f8387 · 26f8387
1 parent 439b86f
commit 26f8387
Show file tree

Hide file tree

Showing 7 changed files with 207 additions and 3 deletions.
diff --git a/pages/books/[id].tsx b/pages/books/[id].tsx
@@ -1,20 +1,56 @@
 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 {Card, Image} from "react-bootstrap";
 import {useRouter} from "next/router";
+import {ILibraryBook} from "../../src/models/interfaces";
+import BookRentListCard from "../../src/components/organisms/BookRentListCard";
+import CardButtonHeader from "../../src/components/molecules/CardButtonHeader";
+
+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 (
         <AppBarContainer isLoggedIn={true}>
             <ContentContainer>
                 <Card>
-                    <Card.Header as="h5">장서 상세 정보</Card.Header>
-                    조회 할 책 id - {id}
+                    <CardButtonHeader title="장서 상세 정보" buttonName="정보 수정" disabled={true}/>
+                    <div style={{display: 'flex', flexDirection: 'row'}}>
+                        <div style={{flex: 2, minHeight: '250px', maxHeight: '250px'}}>
+                            <Image src={libraryBook ? libraryBook.image : null} fluid style={{width: '100%', height: '100%'}}/>
+                        </div>
+                        <div style={{flex: 9, padding: '12px', display: 'flex', flexDirection: 'column'}}>
+                            <div style={{display: 'flex', flexDirection: 'row'}}>
+                                <div style={{flex: 2}}>제목</div>
+                                <div style={{flex: 10}}>글쓰기</div>
+                            </div>
+                        </div>
+                    </div>
                 </Card>
+                <BookRentListCard bookId={id} onClick={addSerialBtnClickHandler}/>
             </ContentContainer>
         </AppBarContainer>
     );

diff --git a/src/components/atoms/BookRentStatusBadge.tsx b/src/components/atoms/BookRentStatusBadge.tsx
@@ -0,0 +1,12 @@
+import {Badge} from "react-bootstrap";
+import * as React from "react";
+
+const BookRentStatusBadge = ({rentStatus}: any) => (
+    <div style={{fontSize: '24px', lineHeight: '24px'}}>
+        {rentStatus
+            ? <Badge variant="warning">대여중</Badge>
+            : <Badge variant="success">비치중</Badge>}
+    </div>
+);
+
+export default BookRentStatusBadge;
diff --git a/src/components/molecules/BookRentListCardBody.tsx 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) => (
+    <div style={style}>
+        {serials.map((serial: ISerialInfo, i: number) => (
+            <BookSerialElement
+                key={i}
+                serialNumber={serial.serialNumber}
+                rentStatus={serial.rentStatus}
+                rentUser={serial.rentUser}/>
+        ))}
+    </div>
+);
+
+export default BookRentListCardBody;
diff --git a/src/components/molecules/BookSerialElement.tsx 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) => (
+    <div>
+        <div style={{height: '50px', display: 'flex', flexDirection: 'row', padding: '4px'}}>
+            <div style={itemStyle}>
+                <div>{serialNumber}</div>
+            </div>
+            <div style={{flex: 2, padding: '4px', display: 'flex', flexDirection: 'column', justifyContent: 'center'}}>
+                <BookRentStatusBadge rentStatus={rentStatus}/>
+            </div>
+            <div style={itemStyle}>
+                <div>{rentUser ? rentUser : ''}</div>
+            </div>
+            <div style={itemStyle}>
+                <div style={{display: 'flex', flexDirection: 'row', justifyContent: 'center'}}>
+                    <Button variant="primary" size="sm" style={{width: '71.25px'}} disabled={!rentStatus}>반납 요청</Button>
+                    <div style={{width: '16px'}}/>
+                    <Button variant="primary" size="sm" style={{width: '71.25px'}}>삭제</Button>
+                </div>
+            </div>
+        </div>
+        <Divider/>
+    </div>
+);
+
+export default BookSerialElement;
diff --git a/src/components/molecules/CardButtonHeader.tsx 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) => (
+    <Card.Header as="h5">
+        <div style={{display: 'flex', flexDirection: 'row'}}>
+            <div style={{flex: 13, display: 'flex', flexDirection: 'column', justifyContent: 'center'}}>
+                <div style={{width: 'fit-content'}}>{title}</div>
+            </div>
+            <div style={{flex: 1, display: 'flex', flexDirection: 'column'}}>
+                <Button variant="primary" size="sm" onClick={buttonOnClick}
+                        disabled={disabled ? disabled : false}>{buttonName}</Button>
+            </div>
+        </div>
+    </Card.Header>
+);
+
+export default CardButtonHeader;
diff --git a/src/components/organisms/BookRentListCard.tsx 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<ISerialInfo[]>(mockSerials);
+
+    const onPageDown = () => {
+        if (page <= 1) {
+            return;
+        }
+        setPage(page - 1);
+        console.log('on Page Down');
+    };
+
+    const onPageUp = () => {
+        console.log('on page up');
+    };
+
+    return (
+        <Card style={{marginTop: '20px'}}>
+            <CardButtonHeader title="시리얼 정보" buttonName="추가" buttonOnClick={onClick}/>
+            <BookRentListCardBody serials={serials}/>
+            <Divider/>
+            <BookListCardFooter page={page} onPageDown={onPageDown} onPageUp={onPageUp}/>
+        </Card>
+    );
+};
+
+export default BookRentListCard;
diff --git 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;
 }