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

TheDevLuffy · Feb 4, 2020 · 63435fb · 63435fb
1 parent 887ab2d
commit 63435fb
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 38 deletions.
diff --git a/components/atoms/HistoryItem.tsx → components/atoms/RentHistoryItem.tsx b/components/atoms/HistoryItem.tsx → components/atoms/RentHistoryItem.tsx
@@ -7,10 +7,10 @@ interface IProps {
     i?: number;
 }
 
-const HistoryItem = ({sm, i, children}: IProps) => (
+const RentHistoryItem = ({sm, i, children}: IProps) => (
     <Col id={`history-item-${i}`} sm={sm} style={{textAlign: 'center'}}>
         {children}
     </Col>
 );
 
-export default HistoryItem;
+export default RentHistoryItem;
diff --git a/components/molecules/RentHistoryElement.tsx b/components/molecules/RentHistoryElement.tsx
@@ -0,0 +1,31 @@
+import {Row} from "react-bootstrap";
+import RentHistoryItem from "../atoms/RentHistoryItem";
+import * as React from "react";
+import {IHistory} from "../../pages/dashboard";
+
+const RentHistoryElement = (history: IHistory) => {
+
+    const formatDate = (rentDate: string) => {
+        const date = new Date(rentDate);
+        return `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일`
+    };
+
+    const calculateTerm = (criteria: string) => {
+        const now = new Date();
+        const past = new Date(criteria);
+        const diff = Math.abs(now.getTime() - past.getTime());
+        return Math.ceil(diff / (1000 * 3600 * 24)).toString();
+    };
+
+    return (
+        <Row className="rent-history-element">
+            <RentHistoryItem sm={3}>{`${formatDate(history.rentDate)}`}</RentHistoryItem>
+            <RentHistoryItem sm={2}>{`${calculateTerm(history.rentDate)} 일 전`}</RentHistoryItem>
+            <RentHistoryItem sm={3}>{history.title}</RentHistoryItem>
+            <RentHistoryItem sm={2}>{history.serialNumber}</RentHistoryItem>
+            <RentHistoryItem sm={2}>{history.userName}</RentHistoryItem>
+        </Row>
+    );
+};
+
+export default RentHistoryElement
diff --git a/components/organisms/RentHistoryList.tsx b/components/organisms/RentHistoryList.tsx
@@ -0,0 +1,23 @@
+import {ListGroup} from "react-bootstrap";
+import RentHistoryElement from "../molecules/RentHistoryElement";
+import * as React from "react";
+import {IHistory} from "../../pages/dashboard";
+
+interface IProps {
+    histories: IHistory[];
+}
+
+const RentHistoryList = ({histories}: IProps) => (
+    <ListGroup className="rent-history-list" variant="flush">
+        {histories.map((history: IHistory, i: number) => (
+            <ListGroup.Item key={i}>
+                <RentHistoryElement rentDate={history.rentDate}
+                                    title={history.title}
+                                    serialNumber={history.serialNumber}
+                                    userName={history.userName}/>
+            </ListGroup.Item>
+        ))}
+    </ListGroup>
+);
+
+export default RentHistoryList;
diff --git a/components/templates/LongTermRentHistories.tsx b/components/templates/LongTermRentHistories.tsx
@@ -0,0 +1,19 @@
+import {Card} from "react-bootstrap";
+import RentHistoryList from "../organisms/RentHistoryList";
+import * as React from "react";
+import {IHistory} from "../../pages/dashboard";
+
+interface IProps {
+    histories: IHistory[];
+}
+
+const LongTermRentHistories = ({histories}: IProps) => (
+    <Card style={{height: '270px'}}>
+        <Card.Header as="h5">장기 대여자</Card.Header>
+        <div style={{overflow: 'scroll'}}>
+            <RentHistoryList histories={histories}/>
+        </div>
+    </Card>
+);
+
+export default LongTermRentHistories;
diff --git a/pages/dashboard/index.tsx b/pages/dashboard/index.tsx
@@ -1,38 +1,39 @@
 import * as React from "react";
 import AppBarLayout from "../../components/templates/AppBarLayout";
 import ContentLayout from "../../components/templates/ContentLayout";
-import {Card, Col, Row, Image, ListGroup} from "react-bootstrap";
-import HistoryItem from "../../components/atoms/HistoryItem";
+import {Card, Col, Image, ListGroup, Row} from "react-bootstrap";
+import RentHistoryItem from "../../components/atoms/RentHistoryItem";
+import LongTermRentHistories from "../../components/templates/LongTermRentHistories";
+
+const longTerms: IHistory[] = [
+    {
+        rentDate: '1980-01-01T01:01:00.000',
+        title: '객체지향의 사실과 오해',
+        serialNumber: '1',
+        userName: '루피'
+    },
+    {
+        rentDate: '2000-01-01T01:01:00.000',
+        title: '오브젝트',
+        serialNumber: '132',
+        userName: '루피'
+    },
+];
+
+export interface IHistory {
+    rentDate: string;
+    title: string;
+    serialNumber: string;
+    userName: string;
+}
 
 const Index = () => {
     return (
         <AppBarLayout isLoggedIn={true}>
             <ContentLayout>
                 <Row>
                     <Col sm={8}>
-                        <Card style={{height: '270px'}}>
-                            <Card.Header as="h5">장기 대여자</Card.Header>
-                            <div style={{overflow: 'scroll'}}>
-                                <ListGroup variant="flush">
-                                    <ListGroup.Item>
-                                        <Row>
-                                            <HistoryItem sm={3}>대여일 - "대여일"</HistoryItem>
-                                            <HistoryItem sm={3}>대여 기간 - "대여 기간"</HistoryItem>
-                                            <HistoryItem sm={3}>"제목"</HistoryItem>
-                                            <HistoryItem sm={3}>"대여자"</HistoryItem>
-                                        </Row>
-                                    </ListGroup.Item>
-                                    <ListGroup.Item>
-                                        <Row>
-                                            <HistoryItem sm={3}>대여일 - "대여일"</HistoryItem>
-                                            <HistoryItem sm={3}>대여 기간 - "대여 기간"</HistoryItem>
-                                            <HistoryItem sm={3}>"제목"</HistoryItem>
-                                            <HistoryItem sm={3}>"대여자"</HistoryItem>
-                                        </Row>
-                                    </ListGroup.Item>
-                                </ListGroup>
-                            </div>
-                        </Card>
+                        <LongTermRentHistories histories={longTerms}/>
                     </Col>
                     <Col sm={4}>
                         <Card body style={{height: '270px'}}>
@@ -57,22 +58,34 @@ const Index = () => {
                                     </Col>
                                 </Row>
                                 <Card.Text>
-                                    Some quick example text to build on the card title and make up the bulk of
-                                    the card's content.
+                                    관리자 모드
                                 </Card.Text>
-                                <Card.Link href="#">로그아웃</Card.Link>
-                                <Card.Link href="#">내 정보 관리</Card.Link>
+                                <Row style={{alignSelf: 'flex-end'}}>
+                                    <Card.Link href="#">로그아웃</Card.Link>
+                                    <Card.Link href="#">내 정보 관리</Card.Link>
+                                </Row>
                             </Card.Body>
                         </Card>
                     </Col>
                 </Row>
-                <Row>
-                    <Col>
-                        대시보드
-                        <div>1. 어드민 회원 정보</div>
-                        <div>2. 희망 도서 정보</div>
-                        <div>3. 장기 대여자 정보</div>
-                        <div>4. 관련 사이트 링크</div>
+                <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>
                     </Col>
                 </Row>
             </ContentLayout>