ui: 스타일 수정

@@ -5,6 +5,10 @@
 # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm
 # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
 
+build
+build/
+.idea
+
 # User-specific stuff
 .idea
 .idea/**/workspace.xml

@@ -1377,7 +1377,7 @@ body > .navbar-collapse[data-color="purple"]:after {
   .navbar .btn-simple {
     font-size: 16px; }
   .navbar.fixed {
-    width: calc(100% - $sidebar-width);
+    width: calc(100% - #{$sidebar-width});
     right: 0;
     left: auto;
     border-radius: 0; }

@@ -65,7 +65,7 @@
     }
     
     &.fixed{
-        width: calc(100% - $sidebar-width);
+        width: calc(100% - #{$sidebar-width});
         right: 0;
         left: auto;
         border-radius: 0;

@@ -22,7 +22,7 @@ export class Card extends Component {
     return (
       <div className={"card" + (this.props.plain ? " card-plain" : "")}>
         <div className={"header" + (this.props.hCenter ? " text-center" : "")}>
-          <h4 className="title">{this.props.title}</h4>
+          <h4 className="title" style={{fontWeight: 400}}>{this.props.title}</h4>
           <p className="category">{this.props.category}</p>
         </div>
         <div

@@ -26,25 +26,18 @@ class Footer extends Component {
           <nav className="pull-left">
             <ul>
               <li>
-                <a href="#pablo">Home</a>
+                <a href="http://mate.ryulth.com/admin/kickboard">Home</a>
               </li>
               <li>
-                <a href="#pablo">Company</a>
-              </li>
-              <li>
-                <a href="#pablo">Portfolio</a>
-              </li>
-              <li>
-                <a href="#pablo">Blog</a>
+                <a href="http://mate.ryulth.com/admin/kickboard">Company</a>
               </li>
             </ul>
           </nav>
           <p className="copyright pull-right">
             &copy; {new Date().getFullYear()}{" "}
-            <a href="http://www.creative-tim.com?ref=lbr-footer">
-              Creative Tim
+            <a href="#">
+              Wico
             </a>
-            , made with love for a better web
           </p>
         </Grid>
       </footer>

@@ -6,22 +6,6 @@ let map;
 let markers = [];
 let infoWindow;
 
-const getGroupUrlStringByGroup = group => {
-  if (group === "renting") {
-    // 사용중
-    return "_inuse";
-  } else if (group === "ready") {
-    // 대기중
-    return "";
-  } else if (group === "target") {
-    // 수거대상
-    return "_pickup";
-  } else if (group === "collect") {
-    // 수거
-    return "_deactive";
-  }
-};
-
 const getBatteryUrlStringByBattery = battery => {
   if (battery >= 0 && battery < 25) {
     return "0-25";
@@ -47,7 +31,7 @@ class GoogleMap extends React.Component {
     //   .then(d => {
     //     if(!d.success || !d.data.length) return;
     //
-    //     console.log(d.data)
+    //     // console.log(d.data)
     //     this.setState({
     //       kickboards: d.data
     //     })
@@ -79,7 +63,7 @@ class GoogleMap extends React.Component {
     infoWindow = new window.google.maps.InfoWindow({});
 
     map = new google.maps.Map(document.getElementById("map"), {
-      zoom: 11,
+      zoom: 8,
       center: {lat: -34.397, lng: 150.644},
       disableDefaultUI: true,
       zoomControl: true
@@ -109,20 +93,21 @@ class GoogleMap extends React.Component {
   }
 
   drawMarkers() {
-    if (map == null) return;
-    const selectedMarker = new window.google.maps.Marker({});
+    if (map === null) return;
+    // const selectedMarker = new window.google.maps.Marker({});
 
     markers = this.state.kickboards.map(item => {
+
       const marker = new window.google.maps.Marker({
         position: new window.google.maps.LatLng({
-          lat: item.coordinates.lat,
-          lng: item.coordinates.lon
+          lat: item.coordinates.y,
+          lng: item.coordinates.x
         })
       });
 
       const markerContent = `
         <div>
-          <div style="color:black"> 시리얼번호: ${item.serialNumber} </div>
+          <div style="color:black"> 시리얼번호: ${item.serial_number} </div>
         </div>
       `;
 
@@ -134,14 +119,18 @@ class GoogleMap extends React.Component {
         infoWindow.close();
         infoWindow.setContent(markerContent);
         infoWindow.open(map, marker);
-        this.props.setKbId(item.serialNumber);
+        this.props.setKbId(item.serial_number);
       });
 
       window.google.maps.event.addListener(marker, "mouseover", () => {
+        infoWindow.close();
+        infoWindow.setContent(markerContent);
+        infoWindow.open(map, marker);
         this.highlightMarker(marker);
       });
 
       window.google.maps.event.addListener(marker, "mouseout", () => {
+        infoWindow.close();
         this.renderMarker(marker);
       });
 
@@ -151,31 +140,59 @@ class GoogleMap extends React.Component {
   }
 
   renderMarker(marker) {
-    const { group, battery } = marker.item;
-
-    const groupString = getGroupUrlStringByGroup(group);
+    const { battery } = marker.item;
     const batteryString = getBatteryUrlStringByBattery(battery);
 
-    const iconUrl = require(`../../assets/marker/ic_map_pin_battery${batteryString}${groupString}.png`);
+    const iconUrl = require(`../../assets/marker/ic_map_pin_battery${batteryString}.png`);
     marker.setIcon(iconUrl);
   }
 
-
   highlightMarker(marker) {
-    const { group, battery } = marker.item;
-
-    const groupString = getGroupUrlStringByGroup(group);
+    const { battery } = marker.item;
     const batteryString = getBatteryUrlStringByBattery(battery);
 
-    const iconUrl = require(`../../assets/marker/ic_map_pin_battery${batteryString}${groupString}_selected.png`);
+    const iconUrl = require(`../../assets/marker/ic_map_pin_battery${batteryString}_selected.png`);
     marker.setIcon(iconUrl);
   }
 
+  moveToMarker(kbId) {
+    if (map == null || markers.length === 0) {
+      return;
+    }
+
+    const searchedMarker = markers.find(
+      marker => marker.item.serial_number === kbId
+    );
+
+    if(!searchedMarker) return;
+    const markerContent = `
+      <div>
+        <div style="color:black"> 시리얼번호: ${kbId} </div>
+      </div>
+    `;
+
+    infoWindow.close();
+    infoWindow.setContent(markerContent);
+    infoWindow.open(map, searchedMarker);
+
+    map.setCenter(
+      new window.google.maps.LatLng({
+        lat: searchedMarker.item.coordinates.y,
+        lng: searchedMarker.item.coordinates.x
+      })
+    );
+    map.setZoom(14);
+  }
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    this.moveToMarker(this.props.kbId);
+  }
+
   render() {
     this.drawMarkers();
 
     return (
-      <div id="map" style={{height:this.props.containerWidth, backgroundColor:'pink'}}>
+      <div id="map" style={{height:this.props.containerWidth}}>
       </div>
     )
   }

@@ -3,6 +3,7 @@ import { Card } from "components/Card/Card.jsx";
 import Dimensions from 'react-dimensions'
 import moment from 'moment';
 import GoogleMap from './GoogleMap';
+import KickboardStatusCard from "./KickboardStatusCard";
 
 const GoogleMapCard = (props) => {
   const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`;
@@ -11,11 +12,10 @@ const GoogleMapCard = (props) => {
     <Card
       id="chartActivity"
       title="서비스 현황"
-      category="All products including Taxes"
       stats={getStats}
       statsIcon="fa fa-history"
       content={
-        <GoogleMap setKbId={props.setKbId}/>
+        <GoogleMap kbId={props.kbId} setKbId={props.setKbId}/>
       }
     />
   );

 import React from "react";
 import {Table} from "react-bootstrap";
 import { Card } from "components/Card/Card.jsx";
-import { tdArray } from "variables/Variables.jsx";
+import styled from "styled-components";
+
+const A = styled.a`
+  color: #333;
+  text-decoration: underline;
+  font-weight: 500;
+`;
 
 const UserDataKey = {
   user_id: '유저ID',
@@ -25,7 +31,7 @@ const KickboardHistoryTable = (props) => {
 
   return (
     <Card
-      title={`${kbId}번 킥보드 사용자 히스토리`}
+      title={`${kbId}번 킥보드 사용자 대여 히스토리`}
       ctTableFullWidth
       ctTableResponsive
       content={
@@ -40,10 +46,11 @@ const KickboardHistoryTable = (props) => {
           <tbody>
           {historyData.map((data, idx) => {
             const {user_id, rent_datetime, return_datetime, rental_time, rental_distance, rental_fee} = data;
+            const userHistoryUrl = `http://mate.ryulth.com/admin/user/?userId=${user_id}`;
 
             return (
               <tr key={idx}>
-                <td>{user_id}</td>
+                <td><A href={userHistoryUrl}>{user_id}</A></td>
                 <td>{timestampToString(rent_datetime)}</td>
                 <td>{timestampToString(return_datetime)}</td>
                 <td>{rental_time}분</td>

@@ -35,11 +35,12 @@ const SearchButton = (props) => {
   const inputEl = useRef(null);
 
   const searchKickboard = (e) => {
-    const searchText = e.target.value;
+    const searchText = inputEl.current.value;
+
     fetch(`http://1.201.143.67:5901/kickboard/${searchText}`)
       .then(r => r.json())
       .then(d => {
-        if(d.success && d.data.length) setKbId();
+        if(d.success && d.data.length) setKbId(searchText);
         else window.alert('해당 번호의 킥보드가 존재하지 않습니다!')
       })
       .catch(err => console.log(err));

@@ -49,7 +49,7 @@ class Header extends Component {
       <Navbar fluid>
         <Navbar.Header>
           <Navbar.Brand>
-            <a href="#pablo">{this.props.brandText}</a>
+            <a href="#pablo" style={{color: '#333333'}}>{this.props.brandText}</a>
           </Navbar.Brand>
           <Navbar.Toggle onClick={this.mobileSidebarToggle} />
         </Navbar.Header>

@@ -20,55 +20,9 @@ import { NavItem, Nav, NavDropdown, MenuItem } from "react-bootstrap";
 
 class AdminNavbarLinks extends Component {
   render() {
-    const notification = (
-      <div>
-        <i className="fa fa-globe" />
-        <b className="caret" />
-        <span className="notification">5</span>
-        <p className="hidden-lg hidden-md">Notification</p>
-      </div>
-    );
     return (
       <div>
-        <Nav>
-          <NavItem eventKey={1} href="#">
-            <i className="fa fa-dashboard" />
-            <p className="hidden-lg hidden-md">Dashboard</p>
-          </NavItem>
-          <NavDropdown
-            eventKey={2}
-            title={notification}
-            noCaret
-            id="basic-nav-dropdown"
-          >
-            <MenuItem eventKey={2.1}>Notification 1</MenuItem>
-            <MenuItem eventKey={2.2}>Notification 2</MenuItem>
-            <MenuItem eventKey={2.3}>Notification 3</MenuItem>
-            <MenuItem eventKey={2.4}>Notification 4</MenuItem>
-            <MenuItem eventKey={2.5}>Another notifications</MenuItem>
-          </NavDropdown>
-          <NavItem eventKey={3} href="#">
-            <i className="fa fa-search" />
-            <p className="hidden-lg hidden-md">Search</p>
-          </NavItem>
-        </Nav>
         <Nav pullRight>
-          <NavItem eventKey={1} href="#">
-            Account
-          </NavItem>
-          <NavDropdown
-            eventKey={2}
-            title="Dropdown"
-            id="basic-nav-dropdown-right"
-          >
-            <MenuItem eventKey={2.1}>Action</MenuItem>
-            <MenuItem eventKey={2.2}>Another action</MenuItem>
-            <MenuItem eventKey={2.3}>Something</MenuItem>
-            <MenuItem eventKey={2.4}>Another action</MenuItem>
-            <MenuItem eventKey={2.5}>Something</MenuItem>
-            <MenuItem divider />
-            <MenuItem eventKey={2.5}>Separated link</MenuItem>
-          </NavDropdown>
           <NavItem eventKey={3} href="#">
             Log out
           </NavItem>

@@ -35,7 +35,7 @@ class Sidebar extends Component {
       >
         <div className="logo" style={{display: 'flex',justifyContent: 'center', alignItems: 'center'}}>
           <a
-            href="https://www.creative-tim.com?ref=lbd-sidebar"
+            href="http://mate.ryulth.com/admin/kickboard"
           >
             <img src={mate_logo} alt="logo_image" style={{width: '135px'}}/>
           </a>

@@ -40,34 +40,34 @@ const UserDataCard = (props) => {
         <div>
           <Row>
             <Col md={6} sm={6} xs={12}>
-              <UserData>이름 : {name}</UserData>
+              <UserData><strong>이름 : </strong>{name}</UserData>
             </Col>
             <Col md={6} sm={6} xs={12}>
-              <UserData>사용자 ID : {user_id}</UserData>
+              <UserData><strong>사용자 ID : </strong>{user_id}</UserData>
             </Col>
           </Row>
           <Row>
             <Col md={6} sm={6} xs={12}>
-              <UserData>전화번호 : {phone_number}</UserData>
+              <UserData><strong>전화번호 : </strong>{phone_number}</UserData>
             </Col>
             <Col md={6} sm={6} xs={12}>
-              <UserData>이메일 : {email}</UserData>
+              <UserData><strong>이메일 : </strong>{email}</UserData>
             </Col>
           </Row>
           <Row>
             <Col md={6} sm={6} xs={12}>
-              <UserData>가입 날짜 : {timestampToString(created_datetime)}</UserData>
+              <UserData><strong>가입 날짜 : </strong>{timestampToString(created_datetime)}</UserData>
             </Col>
             <Col md={6} sm={6} xs={12}>
-              <UserData>최근 로그인 날짜 : {timestampToString(recent_login_datetime)}</UserData>
+              <UserData><strong>최근 로그인 날짜 : </strong>{timestampToString(recent_login_datetime)}</UserData>
             </Col>
           </Row>
           <Row>
             <Col md={6} sm={6} xs={12}>
-              <UserData>면허증 등록 여부 : {license_registered ? '등록됨' : '미등록'}</UserData>
+              <UserData><strong>면허증 등록 여부 : </strong>{license_registered ? '등록됨' : '미등록'}</UserData>
             </Col>
             <Col md={6} sm={6} xs={12}>
-              <UserData>카드 등록 여부 : {license_registered ? '등록됨' : '미등록'}</UserData>
+              <UserData><strong>카드 등록 여부 : </strong>{license_registered ? '등록됨' : '미등록'}</UserData>
             </Col>
           </Row>
         </div>

@@ -23,7 +23,7 @@ const dashboardRoutes = [
   //   layout: "/admin"
   // },
   {
-    path: "/table",
+    path: "/user",
     name: "사용자 정보",
     icon: "pe-7s-users",
     component: UserHistory,

@@ -8,6 +8,7 @@ import SearchButton from '../components/Kickboard/SearchButton';
 
 const Kickboard = () => {
   const [kbId, setKbId] = useState('-1');
+
   const [kbData, setKbData] = useState({});
   const [historyData, setHistoryData] = useState([]);
 
@@ -26,11 +27,16 @@ const Kickboard = () => {
       .catch(err => console.log(err));
     },[kbId]);
 
-  if(Number(kbId)<0) {
+  if(kbId<0) {
     return (
       <div className="content">
         <Grid fluid>
           <Row>
+            <Col md={4} mdOffset={8} sm={3} smOffset={9} style={{marginBottom:15}}>
+              <SearchButton setKbId={setKbId}/>
+            </Col>
+          </Row>
+          <Row>
             <Col md={8} mdOffset={2}>
               <GoogleMapCard setKbId={setKbId}/>
             </Col>
@@ -51,7 +57,7 @@ const Kickboard = () => {
         </Row>
         <Row>
           <Col md={6}>
-            <GoogleMapCard setKbId={setKbId}/>
+            <GoogleMapCard kbId={kbId} setKbId={setKbId}/>
           </Col>
           <Col md={6}>
             <KickboardStatusCard kbId={kbId} kbData={kbData}/>

@@ -5,20 +5,44 @@ import UserHistoryCard from '../components/UserHistory/UserHistoryCard';
 import SearchButton from "../components/UserHistory/SearchButton";
 import Fallback from '../components/UserHistory/Fallback';
 
+const convertQueryStringToObject = s => {
+  const hashParams = {};
+  let e;
+  const a = /\+/g, // Regex for replacing addition symbol with a space
+    r = /([^&;=]+)=?([^&;]*)/g,
+    d = function(s) {
+      return decodeURIComponent(s.replace(a, ' '));
+    },
+    q = s.replace(/\?/g, '');
+
+  while ((e = r.exec(q))) hashParams[d(e[1])] = d(e[2]);
+
+  return hashParams;
+};
+
 const UserHistory = () => {
   const [userId, setUserId] = useState('0');
   const [userData, setUserData] = useState({});
   const [rentData, setRentData] = useState([]);
 
   useEffect(() => {
-    // TODO: componentDidMount > 쿼리 검사하기
+    // component did mount
+    console.log('component did mount')
+    const queryString = window.location.href.split('?')[1];
+    const queryObject = queryString ? convertQueryStringToObject(queryString) : {};
+
+    if(queryObject && queryObject.userId) {
+      setTimeout(() => setUserId(queryObject.userId), 300)
+    }
   },[]);
 
   useEffect(() => {
     if(Number(userId)<0) return;
+    console.log(userId);
     fetch(`http://1.201.143.67:5901/user/${userId}`)
       .then(r => r.json())
       .then(d => {
+        console.log(d);
         if(!d.success) setUserId('0'); // 유효하지 않은 userId인 경우
         if(d.data && d.data.length) setUserData(d.data[0]);