feat: 킥보드 페이지 API 연동

 import React from "react";
 import {Table} from "react-bootstrap";
 import { Card } from "components/Card/Card.jsx";
-
 import { tdArray } from "variables/Variables.jsx";
 
-const thArray = ['유저ID', '대여 시각', '반납 시각', '대여 시간', '이동 거리', '대여 금액'];
+const UserDataKey = {
+  user_id: '유저ID',
+  rent_datetime: '대여 시각',
+  return_datetime: '반납 시각',
+  rental_time: '대여 시간',
+  rental_distance: '이동 거리',
+  rental_fee: '대여 금액',
+};
 
-const KickboardHistoryTable = (props) => {
-  const {kbId} = props;
+class KickboardHistoryTable extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: []
+    };
+  }
+
+  componentDidMount() {
+    fetch(`http://1.201.143.67:5901/kickboard/rent/${this.props.kbId}`)
+      .then(r => r.json())
+      .then(d => {
+        if(d.data && d.data.length) this.setState({data: d.data});
+      })
+      .catch(err => console.log(err));
+  }
 
-  // category="Here is a subtitle for this table"
+  render() {
     return (
       <Card
-      title={`${kbId}번 킥보드 사용자 히스토리`}
+        title={`${this.props.kbId}번 킥보드 사용자 히스토리`}
         ctTableFullWidth
         ctTableResponsive
         content={
           <Table striped hover>
             <thead>
             <tr>
-            {thArray.map((prop, key) => {
+              {Object.values(UserDataKey).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>;
-                })}
+            {this.state.data.map((data, idx) => (
+              <tr key={idx}>
+                <td>{data.user_id}</td>
+                <td>{data.rent_datetime}</td>
+                <td>{data.return_datetime}</td>
+                <td>{data.rental_time}</td>
+                <td>{data.rental_distance}</td>
+                <td>{data.rental_fee}</td>
               </tr>
-            );
-          })}
+            ))}
             </tbody>
           </Table>
         }
       />
     )
+  }
 };
 
 export default KickboardHistoryTable;

-import React from "react";
+import React, {useState, useEffect} from "react";
 import { Card } from "components/Card/Card.jsx";
 import {Col, Row} from "react-bootstrap";
 import styled from "styled-components"
@@ -15,7 +15,7 @@ const KickboardButton = styled.div`
     box-shadow: none;
     margin: 0 auto;
     text-align: center;
-    margin-bottom: 10px;
+    margin-bottom: 20px;
     
     &:hover {
       background-color: #565656;
@@ -29,31 +29,72 @@ const KickboardDataList = styled.ul`
 `;
 
 const KickboardData = styled.li`
-  padding: 3px 0;
+  padding: 5px 0;
 `;
 
 const kickboardDataKey = {
-  a: '배터리',
-  b: '킥보드 위치',
-  c: '킥보드 상태',
-  d: '킥보드 자세 여부',
-  e: '총 누적 이동 거리',
-  f: '총 누적 대여 시간',
-  g: '신호 양호 여부',
-  h: '현재 네트워크 연결 여부',
-  i: '최근 gps 업데이트 시각',
-  j: '최근 연결 업데이트 시각',
-  k: '모델명',
-  l: '최근 업데이트 시각',
+  battery: '배터리',
+  coordinates: '킥보드 위치',
+  states: '킥보드 상태',
+  is_good_posture: '킥보드 자세 상태',
+  total_driven_distance: '총 누적 이동 거리',
+  total_driven_time: '총 누적 대여 시간',
+  is_good_gps_signal: 'GPS 신호 양호 여부',
+  connected: '현재 네트워크 연결 여부',
+  updated_coordinates_datetime: '최근 gps 업데이트 시각',
+  connection_updated_datetime: '최근 연결 업데이트 시각',
+  model_name: '모델명',
+  updated_datetime: '최근 업데이트 시각',
 };
 
-const KickboardStatusCard = (props) => {
-  const {kbId} = props;
+// "serial_number":"000165",
+// "coordinates":{"x":126.64504,"y":37.39101},
+// "states":"{}",
+// "model_name":"MA01",
+// "is_good_gps_signal":true,
+// "updated_coordinates_datetime":"2020-04-19T15:27:39.427Z",
+// "connection_updated_datetime":"2020-04-18T12:43:00.393Z",
+// "is_good_posture":true,
+// "connected":true,
+// "total_driven_distance":3534,
+// "total_driven_time":162636,
+// "updated_datetime":"2020-06-12T10:00:28.715Z",
+// "battery":72
+
+function makeTimestampToString(stamp) {
+  if (!stamp) return '';
+  const date = stamp.split('T')[0];
+  const time = stamp.split('T')[1].split('.')[0];
+
+  return `${date} ${time}`;
+}
+
+class KickboardStatusCard extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: {}
+    };
+  }
+
+  componentDidMount() {
+    fetch(`http://1.201.143.67:5901/kickboard/${this.props.kbId}`)
+     .then(r => r.json())
+     .then(d => {
+       if(d.data && d.data.length) this.setState({data: d.data[0]});
+     })
+     .catch(err => console.log(err));
+  }
+
+  render() {
     const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`;
+    const { battery, coordinates, states, is_good_posture, total_driven_distance,
+      total_driven_time, is_good_gps_signal, connected, updated_coordinates_datetime,
+      connection_updated_datetime, model_name, updated_datetime } = this.state.data;
 
     return (
       <Card
-      title={`${kbId}번 킥보드`}
+      title={`${this.props.kbId}번 킥보드`}
       stats={getStats}
       statsIcon="fa fa-history"
       content={
@@ -68,16 +109,24 @@ const KickboardStatusCard = (props) => {
             <KickboardButton>운행 종료하기</KickboardButton>
           </Col>
           <KickboardDataList>
-            {
-              Object.keys(kickboardDataKey).map(key => {
-                return <KickboardData>{kickboardDataKey[key]} : {key}</KickboardData>
-              })
-            }
+            <KickboardData>{kickboardDataKey.battery} : {battery}%</KickboardData>
+            <KickboardData>{kickboardDataKey.coordinates} : {JSON.stringify(coordinates)}</KickboardData>
+            <KickboardData>{kickboardDataKey.states} : {states}</KickboardData>
+            <KickboardData>{kickboardDataKey.is_good_posture} : {is_good_posture ? '양호' : '불량'}</KickboardData>
+            <KickboardData>{kickboardDataKey.total_driven_distance} : {total_driven_distance}</KickboardData>
+            <KickboardData>{kickboardDataKey.total_driven_time} : {total_driven_time}분</KickboardData>
+            <KickboardData>{kickboardDataKey.is_good_gps_signal} : {is_good_gps_signal  ? '양호' : '불량'}</KickboardData>
+            <KickboardData>{kickboardDataKey.connected} : {connected  ? '연결됨' : '연결되지 않음'}</KickboardData>
+            <KickboardData>{kickboardDataKey.updated_coordinates_datetime} : {makeTimestampToString(updated_coordinates_datetime)}</KickboardData>
+            <KickboardData>{kickboardDataKey.connection_updated_datetime} : {makeTimestampToString(connection_updated_datetime)}</KickboardData>
+            <KickboardData>{kickboardDataKey.model_name} : {model_name}</KickboardData>
+            <KickboardData>{kickboardDataKey.updated_datetime} : {makeTimestampToString(updated_datetime)}</KickboardData>
           </KickboardDataList>
         </Row>
       }
       />
     );
+  }
 };
 
 export default KickboardStatusCard;
\ No newline at end of file

@@ -24,14 +24,14 @@ class Sidebar extends Component {
   }
   render() {
     const sidebarBackground = {
-      backgroundImage: "url(" + this.props.image + ")"
+      backgroundColor: 'rgb(217,94,45)'
     };
+
+    console.log(this.props.color);
     return (
       <div
         id="sidebar"
         className="sidebar"
-        data-color={this.props.color}
-        data-image={this.props.image}
       >
           {this.props.hasImage ? (
             <div className="sidebar-background" style={sidebarBackground} />

@@ -7,7 +7,7 @@ import KickboardHistoryTable from '../components/Kickboard/KickboardHistoryTable
 import SearchButton from '../components/Kickboard/SearchButton';
 
 const Kickboard = () => {
-  const [kbId, setKbId] = useState('000000');
+  const [kbId, setKbId] = useState('000165');
 
   // 여기 API 요청
   return (