feat: 사용자 페이지 데이터 구성

@@ -8,10 +8,10 @@ const thArray = ['유저ID', '대여 시각', '반납 시각', '대여 시간',
 
 
 const KickboardHistoryTable = () => {
 const KickboardHistoryTable = () => {
 
 
+  // category="Here is a subtitle for this table"
   return (
   return (
     <Card
     <Card
-      title="Striped Table with Hover"
-      category="Here is a subtitle for this table"
+      title="000000번 킥보드 사용자 히스토리"
       ctTableFullWidth
       ctTableFullWidth
       ctTableResponsive
       ctTableResponsive
       content={
       content={

@@ -6,6 +6,7 @@ import moment from "moment";
 
 
 // border: 1px solid #E3E3E3;
 // border: 1px solid #E3E3E3;
 const KickboardButton = styled.div`
 const KickboardButton = styled.div`
+    font-size: 16px;
     background-color: #e7e7e7;
     background-color: #e7e7e7;
     border-radius: 4px;
     border-radius: 4px;
     color: #565656;
     color: #565656;
@@ -74,8 +75,7 @@ const KickboardStatusCard = () => {
           </KickboardDataList>
           </KickboardDataList>
         </Row>
         </Row>
       }
       }
-    >
-    </Card>
+    />
   );
   );
 };
 };
 
 

+import React from "react";
+import styled from "styled-components";
+
+const SearchButtonWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+const SearchInput = styled.input`
+  width: 60%;
+`;
+
+const ApplyButton = styled.div`
+  width: 17%;
+  background-color: #e7e7e7;
+  border-radius: 4px;
+  color: #565656;
+  text-align: center;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &:hover {
+  background-color: #565656;
+  color: white;
+  cursor: pointer;
+`;
+
+const SelectBox = styled.select`
+  width: 17%;
+  color: #333333;
+  border-color: #E3E3E3;
+  border-radius: 4px;
+`;
+
+
+const SearchButton = () => {
+  return (
+    <SearchButtonWrapper>
+      <SelectBox>
+        <option value="전화 번호">전화 번호</option>
+        <option value="이메일">이메일</option>
+      </SelectBox>
+      <SearchInput type="text" className="form-control" placeholder={"킥보드 번호로 검색하기"}/>
+      <ApplyButton><span>검색</span></ApplyButton>
+    </SearchButtonWrapper>
+  );
+};
+
+export default SearchButton;
+
+

+import React from "react";
+import { Card } from "components/Card/Card.jsx";
+import {Col, Row} from "react-bootstrap";
+import styled from "styled-components"
+import moment from "moment";
+
+const UserData = styled.div`
+  padding: 4px 0;
+  font-size: 15px;
+`;
+
+const UserDataCard = () => {
+  const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`;
+
+  return (
+    <Card
+      title={'000000번 사용자'}
+      stats={getStats}
+      statsIcon="fa fa-history"
+      content={
+        <div>
+          <Row>
+            <Col md={6} sm={6} xs={12}>
+              <UserData>이름</UserData>
+            </Col>
+            <Col md={6} sm={6} xs={12}>
+              <UserData>사용자 ID</UserData>
+            </Col>
+          </Row>
+          <Row>
+            <Col md={6} sm={6} xs={12}>
+              <UserData>전화번호</UserData>
+            </Col>
+            <Col md={6} sm={6} xs={12}>
+              <UserData>이메일 가입 날짜</UserData>
+            </Col>
+          </Row>
+          <Row>
+            <Col md={6} sm={6} xs={12}>
+              <UserData>가입 날짜</UserData>
+            </Col>
+            <Col md={6} sm={6} xs={12}>
+              <UserData>최근 로그인 날짜</UserData>
+            </Col>
+          </Row>
+          <Row>
+            <Col md={6} sm={6} xs={12}>
+              <UserData>면허증 등록 여부</UserData>
+            </Col>
+            <Col md={6} sm={6} xs={12}>
+              <UserData>카드 등록 여부</UserData>
+            </Col>
+          </Row>
+        </div>
+      }
+    />
+  );
+};
+
+export default UserDataCard;
\ No newline at end of file

-/*!
-
-=========================================================
-* Light Bootstrap Dashboard React - v1.3.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
-* Copyright 2019 Creative Tim (https://www.creative-tim.com)
-* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
-
-* Coded by Creative Tim
-
-=========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-*/
 import React, { Component } from "react";
 import React, { Component } from "react";
 import { Grid, Row, Col, Table } from "react-bootstrap";
 import { Grid, Row, Col, Table } from "react-bootstrap";
 
 
 import Card from "components/Card/Card.jsx";
 import Card from "components/Card/Card.jsx";
-import { thArray, tdArray } from "variables/Variables.jsx";
+import { tdArray } from "variables/Variables.jsx";
 
 
-class TableList extends Component {
+const thArray = ['킥보드 시리얼 번호', '대여 시각', '반납 시각', '대여 시간', '이동 거리', '대여 금액'];
+
+class UserHistoryCard extends Component {
   render() {
   render() {
     return (
     return (
-      <div className="content">
-        <Grid fluid>
-          <Row>
-            <Col md={12}>
-              <Card
-                title="Striped Table with Hover"
-                category="Here is a subtitle for this table"
-                ctTableFullWidth
-                ctTableResponsive
-                content={
-                  <Table striped hover>
-                    <thead>
-                      <tr>
-                        {thArray.map((prop, key) => {
-                          return <th key={key}>{prop}</th>;
-                        })}
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {tdArray.map((prop, key) => {
-                        return (
-                          <tr key={key}>
-                            {prop.map((prop, key) => {
-                              return <td key={key}>{prop}</td>;
-                            })}
-                          </tr>
-                        );
-                      })}
-                    </tbody>
-                  </Table>
-                }
-              />
-            </Col>
-
-            <Col md={12}>
-              <Card
-                plain
-                title="Striped Table with Hover"
-                category="Here is a subtitle for this table"
-                ctTableFullWidth
-                ctTableResponsive
-                content={
-                  <Table hover>
-                    <thead>
-                      <tr>
-                        {thArray.map((prop, key) => {
-                          return <th key={key}>{prop}</th>;
-                        })}
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {tdArray.map((prop, key) => {
-                        return (
-                          <tr key={key}>
-                            {prop.map((prop, key) => {
-                              return <td key={key}>{prop}</td>;
-                            })}
-                          </tr>
-                        );
-                      })}
-                    </tbody>
-                  </Table>
-                }
-              />
-            </Col>
-          </Row>
-        </Grid>
-      </div>
+      <Card
+        title="Striped Table with Hover"
+        category="Here is a subtitle for this table"
+        ctTableFullWidth
+        ctTableResponsive
+        content={
+          <Table striped hover>
+            <thead>
+            <tr>
+              {thArray.map((prop, key) => {
+                return <th key={key}>{prop}</th>;
+              })}
+            </tr>
+            </thead>
+            <tbody>
+            {tdArray.map((prop, key) => {
+              return (
+                <tr key={key}>
+                  {prop.map((prop, key) => {
+                    return <td key={key}>{prop}</td>;
+                  })}
+                </tr>
+              );
+            })}
+            </tbody>
+          </Table>
+        }
+      />
     );
     );
   }
   }
 }
 }
 
 
-export default TableList;
+export default UserHistoryCard;

 import Dashboard from "views/Dashboard.jsx";
 import Dashboard from "views/Dashboard.jsx";
 import UserProfile from "views/UserProfile.jsx";
 import UserProfile from "views/UserProfile.jsx";
-import TableList from "views/TableList.jsx";
+import UserHistory from "views/UserHistory.jsx";
 import Typography from "views/Typography.jsx";
 import Typography from "views/Typography.jsx";
 import Icons from "views/Icons.jsx";
 import Icons from "views/Icons.jsx";
 import Maps from "views/Maps.jsx";
 import Maps from "views/Maps.jsx";
@@ -24,9 +24,9 @@ const dashboardRoutes = [
   },
   },
   {
   {
     path: "/table",
     path: "/table",
-    name: "Table List",
-    icon: "pe-7s-note2",
-    component: TableList,
+    name: "사용자 정보",
+    icon: "pe-7s-users",
+    component: UserHistory,
     layout: "/admin"
     layout: "/admin"
   },
   },
   {
   {
@@ -59,8 +59,8 @@ const dashboardRoutes = [
   },
   },
   {
   {
     path: "/kickboard",
     path: "/kickboard",
-    name: "Kickboard",
-    icon: "pe-7s-bicycle",
+    name: "킥보드 정보",
+    icon: "pe-7s-map-2",
     component: Kickboard,
     component: Kickboard,
     layout: "/admin"
     layout: "/admin"
   },
   },

@@ -601,7 +601,7 @@ var legendBar = {
 module.exports = {
 module.exports = {
   style, // For notifications (App container and Notifications view)
   style, // For notifications (App container and Notifications view)
   thArray,
   thArray,
-  tdArray, // For tables (TableList view)
+  tdArray, // For tables (UserHistory view)
   iconsArray, // For icons (Icons view)
   iconsArray, // For icons (Icons view)
   dataPie,
   dataPie,
   legendPie,
   legendPie,

+import React, { useState, useEffect } from "react";
+import { Grid, Row, Col, Table } from "react-bootstrap";
+import UserDataCard from '../components/UserHistory/UserDataCard';
+import UserHistoryCard from '../components/UserHistory/UserHistoryCard';
+import SearchButton from "../components/UserHistory/SearchButton";
+
+const UserHistory = (props) => {
+  const [userId, setUserId] = useState('0');
+
+  useEffect(() => {
+    // componentDidMount > 쿼리 검사하기
+  },[]);
+
+  return (
+    <div className="content">
+      <Grid fluid>
+        <Row>
+          <Col md={4} mdOffset={8} sm={5} smOffset={7} style={{marginBottom:15}}>
+            <SearchButton/>
+          </Col>
+        </Row>
+        <Row>
+          <Col md={12}>
+            <UserDataCard/>
+          </Col>
+          <Col md={12}>
+            <UserHistoryCard/>
+          </Col>
+        </Row>
+      </Grid>
+    </div>
+  );
+};
+
+export default UserHistory;