[milzipmoza-developers#1] refactor - WishBookSummaryCard 컴포넌트로 분리

TheDevLuffy · Feb 5, 2020 · a9d5f83 · a9d5f83
1 parent aa59e11
commit a9d5f83
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 24 deletions.
diff --git a/components/atoms/RentHistoryItem.tsx b/components/atoms/RentHistoryItem.tsx
@@ -1,15 +1,24 @@
 import {Col} from "react-bootstrap";
 import * as React from "react";
+import {CSSProperties} from "react";
 
 interface IProps {
     sm: number;
-    children: string;
-    i?: number;
+    children: any;
 }
 
-const RentHistoryItem = ({sm, i, children}: IProps) => (
-    <Col id={`history-item-${i}`} sm={sm} style={{textAlign: 'center'}}>
-        {children}
+const childrenWrapper: CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    height: '100%'
+};
+
+const RentHistoryItem = ({sm, children}: IProps) => (
+    <Col sm={sm} style={{textAlign: 'center'}}>
+        <div style={childrenWrapper}>
+            {children}
+        </div>
     </Col>
 );
 

diff --git a/components/molecules/WishBookSummaryElement.tsx b/components/molecules/WishBookSummaryElement.tsx
@@ -0,0 +1,35 @@
+import RentHistoryItem from "../atoms/RentHistoryItem";
+import {Button, Row} from "react-bootstrap";
+import * as React from "react";
+import {IWishBook} from "../../pages/dashboard";
+
+interface IProps {
+    wishBook: IWishBook;
+}
+
+const WishBookSummaryElement = ({wishBook}: IProps) => {
+    const buyLinkButtonHandler = (buyLink: string) => () => {
+        const newWindow = window.open(buyLink, '_blank')
+        newWindow.focus();
+    };
+
+    const enrollButtonHandler = (id: string) => () => {
+        console.log(id, '등록 되었습니다.');
+    };
+
+    return (
+        <Row>
+            <RentHistoryItem sm={4}>{wishBook.title}</RentHistoryItem>
+            <RentHistoryItem sm={3}>{wishBook.createTime}</RentHistoryItem>
+            <RentHistoryItem sm={3}>{wishBook.userName}</RentHistoryItem>
+            <RentHistoryItem sm={1}>
+                <Button variant="dark" onClick={buyLinkButtonHandler(wishBook.buyLink)}>구매</Button>
+            </RentHistoryItem>
+            <RentHistoryItem sm={1}>
+                <Button variant="dark" onClick={enrollButtonHandler(wishBook.id)}>등록</Button>
+            </RentHistoryItem>
+        </Row>
+    );
+};
+
+export default WishBookSummaryElement;
diff --git a/components/organisms/WishBookSummaryCard.tsx b/components/organisms/WishBookSummaryCard.tsx
@@ -0,0 +1,29 @@
+import {Card, ListGroup} from "react-bootstrap";
+import WishBookSummaryElement from "../molecules/WishBookSummaryElement";
+import * as React from "react";
+import {IWishBook} from "../../pages/dashboard";
+
+interface IProps {
+    wishBooks: IWishBook[];
+}
+
+const WishBookSummaryCardBody = ({wishBooks}: IProps) => (
+    <div style={{overflow: 'scroll'}}>
+        <ListGroup variant="flush">
+            {wishBooks.map((wishBook: IWishBook, i: number) => (
+                <ListGroup.Item key={i}>
+                    <WishBookSummaryElement wishBook={wishBook}/>
+                </ListGroup.Item>
+            ))}
+        </ListGroup>
+    </div>
+);
+
+const WishBookSummaryCard = ({wishBooks}: IProps) => (
+    <Card style={{width: '100%', maxHeight: '435px'}}>
+        <Card.Header as="h5">희망도서</Card.Header>
+        <WishBookSummaryCardBody wishBooks={wishBooks}/>
+    </Card>
+);
+
+export default WishBookSummaryCard;
diff --git a/pages/dashboard/index.tsx b/pages/dashboard/index.tsx
@@ -1,11 +1,10 @@
 import * as React from "react";
 import AppBarLayout from "../../components/templates/AppBarLayout";
 import ContentLayout from "../../components/templates/ContentLayout";
-import {Card, Col, Image, ListGroup, Row} from "react-bootstrap";
-import RentHistoryItem from "../../components/atoms/RentHistoryItem";
+import {Col, Row} from "react-bootstrap";
 import LongTermRentHistories from "../../components/templates/LongTermRentHistories";
-import ProfileCardHeader from "../../components/molecules/ProfileCardHeader";
 import LoginUserProfileCard from "../../components/organisms/LoginUserProfileCard";
+import WishBookSummaryCard from "../../components/organisms/WishBookSummaryCard";
 
 const longTerms: IHistory[] = [
     {
@@ -22,13 +21,73 @@ const longTerms: IHistory[] = [
     },
 ];
 
+const wishBooks: IWishBook[] = [
+    {
+        id: '1',
+        title: '세븐 데이터베이스',
+        userName: '루피',
+        buyLink: 'http://www.yes24.com/Product/Goods/8595403?Acode=101',
+        createTime: '2020-01-01T13:13:13.000',
+    },
+    {
+        id: '2',
+        title: '시작하세요! 도커/쿠버네티스',
+        userName: '루피',
+        buyLink: 'http://www.yes24.com/Product/Goods/84927385?Acode=101',
+        createTime: '2020-01-01T13:13:13.000',
+    },
+    {
+        id: '2',
+        title: '시작하세요! 도커/쿠버네티스',
+        userName: '루피',
+        buyLink: 'http://www.yes24.com/Product/Goods/84927385?Acode=101',
+        createTime: '2020-01-01T13:13:13.000',
+    },
+    {
+        id: '2',
+        title: '시작하세요! 도커/쿠버네티스',
+        userName: '루피',
+        buyLink: 'http://www.yes24.com/Product/Goods/84927385?Acode=101',
+        createTime: '2020-01-01T13:13:13.000',
+    },
+    {
+        id: '2',
+        title: '시작하세요! 도커/쿠버네티스',
+        userName: '루피',
+        buyLink: 'http://www.yes24.com/Product/Goods/84927385?Acode=101',
+        createTime: '2020-01-01T13:13:13.000',
+    },
+    {
+        id: '2',
+        title: '시작하세요! 도커/쿠버네티스',
+        userName: '루피',
+        buyLink: 'http://www.yes24.com/Product/Goods/84927385?Acode=101',
+        createTime: '2020-01-01T13:13:13.000',
+    },
+    {
+        id: '2',
+        title: '시작하세요! 도커/쿠버네티스',
+        userName: '루피',
+        buyLink: 'http://www.yes24.com/Product/Goods/84927385?Acode=101',
+        createTime: '2020-01-01T13:13:13.000',
+    },
+];
+
 export interface IHistory {
     rentDate: string;
     title: string;
     serialNumber: string;
     userName: string;
 }
 
+export interface IWishBook {
+    id: string;
+    title: string;
+    userName: string;
+    buyLink: string;
+    createTime: string;
+}
+
 const Index = () => {
     return (
         <AppBarLayout isLoggedIn={true}>
@@ -43,22 +102,7 @@ const Index = () => {
                 </Row>
                 <Row style={{marginTop: '24px'}}>
                     <Col sm={12}>
-                        <Card style={{width: '100%'}}>
-                            <Card.Header as="h5">희망도서</Card.Header>
-                            <div style={{overflow: 'scroll'}}>
-                                <ListGroup variant="flush">
-                                    <ListGroup.Item>
-                                        <Row>
-                                            <RentHistoryItem sm={4}>도서 제목 - "도서"</RentHistoryItem>
-                                            <RentHistoryItem sm={3}>신청 일시 - "대여 기간"</RentHistoryItem>
-                                            <RentHistoryItem sm={3}>신청자</RentHistoryItem>
-                                            <RentHistoryItem sm={1}>구매링크</RentHistoryItem>
-                                            <RentHistoryItem sm={1}>처리완료</RentHistoryItem>
-                                        </Row>
-                                    </ListGroup.Item>
-                                </ListGroup>
-                            </div>
-                        </Card>
+                        <WishBookSummaryCard wishBooks={wishBooks}/>
                     </Col>
                 </Row>
             </ContentLayout>