From a5da7b1c3750888213602bc98b147e7e26351740 Mon Sep 17 00:00:00 2001
From: geun <1416geun@naver.com>
Date: Mon, 6 Nov 2023 16:10:39 +0900
Subject: [PATCH] =?UTF-8?q?=ED=86=B5=EA=B3=84=EC=9E=91=EC=97=85=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/custom.css          |  13 +++
 src/views/statistics/FlightView.js | 160 ++++++++++++++++++++++++++++-
 2 files changed, 172 insertions(+), 1 deletion(-)

diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css
index 6b1cdf4..2a3c224 100644
--- a/src/assets/css/custom.css
+++ b/src/assets/css/custom.css
@@ -1113,3 +1113,16 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
 .notam-modal table tbody tr{border-bottom:1px solid #ddd;}
 .notam-modal table tbody tr th{font-weight:500;background:#f4f4f4;font-size:0.875rem;border-right:1px solid #ddd;min-width:150px;text-align:center;}
 .notam-modal table tbody tr td{border:0;background:#fff;font-size:0.875rem;}
+
+.statistics-table{width:100%;border:1px solid #ddd}
+.statistics-table tr th, .statistics-table tr td{vertical-align:middle;background:#fff;}
+.statistics-table tr + tr{border-top:1px solid #ddd}
+.statistics-table tr span{display:block;font-size:0.875rem}
+.statistics-table tr th{background:#f4f4f4;text-align:center;padding:1rem 0.4rem;width:90px;border-right:1px solid #ddd}
+.statistics-table tr th svg{font-size: 20px;margin-bottom:6px}
+.statistics-table tr th span{font-weight:500;line-height:1.3}
+.statistics-table tr td{padding:0.4rem 0.8rem}
+.statistics-table tr td + td{border-left:1px solid #ddd}
+.statistics-table tr td span{font-size:1rem}
+.statistics-table .date{font-size:0.75rem;line-height:1}
+.statistics-table .date-data{text-align:right;font-weight:400}
\ No newline at end of file
diff --git a/src/views/statistics/FlightView.js b/src/views/statistics/FlightView.js
index e09eb9e..950ff29 100644
--- a/src/views/statistics/FlightView.js
+++ b/src/views/statistics/FlightView.js
@@ -2,7 +2,165 @@ import '../../assets/css/custom.css';
 import '@styles/react/libs/flatpickr/flatpickr.scss';
 import '@styles/react/libs/tables/react-dataTable-component.scss';
 import { CustomMainLayout } from '../../components/layout/CustomMainLayout';
+import {
+  Button,
+  Col,
+  Row,
+  Card,
+  CardBody,
+  FormGroup,
+  Input,
+  CustomInput,
+  Label
+} from 'reactstrap';
+import { Search } from 'react-feather';
+import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc';
 
 export default function Flight() {
-  return <CustomMainLayout></CustomMainLayout>;
+  const titleName = '비행 통계';
+  return (
+    <CustomMainLayout title={titleName}>
+      <div className='pal-card-box'>
+        <div>
+          <Row>
+            <Col md='4'>
+              <div>
+                <table className='statistics-table'>
+                  <tr>
+                    <th rowspan='2'>
+                      <span>
+                        <FcAlarmClock />
+                      </span>
+                      <span>총 비행시간</span>
+                      <span>PA0001</span>
+                    </th>
+                    <td colspan='3'>
+                      <span className='date'>년</span>
+                      <span className='date-data'>8일 10시간 35분 12초</span>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <span className='date'>월</span>
+                      <span className='date-data'>1일 35분 12초</span>
+                    </td>
+                    <td>
+                      <span className='date'>일</span>
+                      <span className='date-data'>35분 12초</span>
+                    </td>
+                  </tr>
+                </table>
+              </div>
+            </Col>
+            <Col md='4'>
+              <div>
+                <table className='statistics-table'>
+                  <tr>
+                    <th rowspan='2'>
+                      <span>
+                        <FcWorkflow />
+                      </span>
+                      <span>총 비행거리</span>
+                      <span>PA0002</span>
+                    </th>
+                    <td colspan='3'>
+                      <span className='date'>년</span>
+                      <span className='date-data'>10,845m</span>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <span className='date'>월</span>
+                      <span className='date-data'>1,201m</span>
+                    </td>
+                    <td>
+                      <span className='date'>일</span>
+                      <span className='date-data'>53m</span>
+                    </td>
+                  </tr>
+                </table>
+              </div>
+            </Col>
+            <Col md='4'>
+              <div>
+                <table className='statistics-table'>
+                  <tr>
+                    <th rowspan='2'>
+                      <span>
+                        <FcBarChart />
+                      </span>
+                      <span>총 비행횟수</span>
+                      <span>PA0002</span>
+                    </th>
+                    <td colspan='3'>
+                      <span className='date'>년</span>
+                      <span className='date-data'>1,024,845건</span>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <span className='date'>월</span>
+                      <span className='date-data'>111,201건</span>
+                    </td>
+                    <td>
+                      <span className='date'>일</span>
+                      <span className='date-data'>153건</span>
+                    </td>
+                  </tr>
+                </table>
+              </div>
+            </Col>
+          </Row>
+        </div>
+        <div>
+          <Row>
+            <Col>
+              <div className='mt-2 cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+                <div>
+                  <h4>검색조건</h4>
+                </div>
+                <div className='d-flex align-items-center'>
+                  <Button.Ripple color='primary' size='sm'>
+                    <Search size={16} />
+                    검색
+                  </Button.Ripple>
+                </div>
+              </div>
+              <Card>
+                <CardBody className='pal-card-body'>
+                  <div className='search-cont'>
+                    <dl>
+                      <dt>
+                        <div className='search-box'>
+                          <div className='search-list-ti'>검색조건</div>
+                          <div className='search-list'>
+                            <div className='search-list-cont'>
+                              <Row>
+                                <Col className='list-input' md='4' sm='12'>
+                                  <CustomInput
+                                    inline
+                                    type='select'
+                                    id=''
+                                    bsSize='sm'
+                                  >
+                                    <option>비행시간</option>
+                                    <option>비행거리</option>
+                                    <option>비행횟수</option>
+                                  </CustomInput>
+                                </Col>
+                              </Row>
+                            </div>
+                          </div>
+                        </div>
+                      </dt>
+                    </dl>
+                  </div>
+                </CardBody>
+              </Card>
+            </Col>
+          </Row>
+        </div>
+      </div>
+    </CustomMainLayout>
+  );
 }