feat: 킥보드 마커 클릭하여 킥보드 상세 정보 보여주도록 수정

@@ -134,6 +134,7 @@ class GoogleMap extends React.Component {
         infoWindow.close();
         infoWindow.close();
         infoWindow.setContent(markerContent);
         infoWindow.setContent(markerContent);
         infoWindow.open(map, marker);
         infoWindow.open(map, marker);
+        this.props.setKbId(item.serialNumber);
       });
       });
 
 
       window.google.maps.event.addListener(marker, "mouseover", () => {
       window.google.maps.event.addListener(marker, "mouseover", () => {

@@ -15,7 +15,7 @@ const GoogleMapCard = (props) => {
       stats={getStats}
       stats={getStats}
       statsIcon="fa fa-history"
       statsIcon="fa fa-history"
       content={
       content={
-        <GoogleMap/>
+        <GoogleMap setKbId={props.setKbId}/>
       }
       }
     />
     />
   );
   );

@@ -12,7 +12,7 @@ const Wrapper = styled.div`
 `;
 `;
 
 
 const EmptyImage = styled.img`
 const EmptyImage = styled.img`
-  max-width: 100%;
+  max-width: 70%;
   height: auto !important;
   height: auto !important;
 `;
 `;
 
 
@@ -21,10 +21,10 @@ const SearchButton = (props) => {
     <Card
     <Card
       content={
       content={
         <Row>
         <Row>
-          <Col md={8} mdOffset={2}>
+          <Col md={8} mdOffset={2} sm={8} smOffset={2} xs={8} xsOffset={2} style={{display: 'flex', justifyContent: 'center'}}>
             <EmptyImage src="https://raw.githubusercontent.com/devSoyoung/whale-extension-keycrab/master/images/empty.png" alt="empty"/>
             <EmptyImage src="https://raw.githubusercontent.com/devSoyoung/whale-extension-keycrab/master/images/empty.png" alt="empty"/>
           </Col>
           </Col>
-          <Col md={12}>
+          <Col md={12} sm={12} xs={12}>
             <Wrapper>
             <Wrapper>
               {
               {
                 Number(props.userId)<0
                 Number(props.userId)<0

@@ -7,7 +7,7 @@ import KickboardHistoryTable from '../components/Kickboard/KickboardHistoryTable
 import SearchButton from '../components/Kickboard/SearchButton';
 import SearchButton from '../components/Kickboard/SearchButton';
 
 
 const Kickboard = () => {
 const Kickboard = () => {
-  const [kbId, setKbId] = useState('000165');
+  const [kbId, setKbId] = useState('-1');
   const [kbData, setKbData] = useState({});
   const [kbData, setKbData] = useState({});
   const [historyData, setHistoryData] = useState([]);
   const [historyData, setHistoryData] = useState([]);
 
 
@@ -26,6 +26,20 @@ const Kickboard = () => {
       .catch(err => console.log(err));
       .catch(err => console.log(err));
     },[kbId]);
     },[kbId]);
 
 
+  if(Number(kbId)<0) {
+    return (
+      <div className="content">
+        <Grid fluid>
+          <Row>
+            <Col md={8} mdOffset={2}>
+              <GoogleMapCard setKbId={setKbId}/>
+            </Col>
+          </Row>
+        </Grid>
+      </div>
+    )
+  }
+
   // 여기 API 요청
   // 여기 API 요청
   return (
   return (
     <div className="content">
     <div className="content">
@@ -37,7 +51,7 @@ const Kickboard = () => {
         </Row>
         </Row>
         <Row>
         <Row>
           <Col md={6}>
           <Col md={6}>
-            <GoogleMapCard/>
+            <GoogleMapCard setKbId={setKbId}/>
           </Col>
           </Col>
           <Col md={6}>
           <Col md={6}>
             <KickboardStatusCard kbId={kbId} kbData={kbData}/>
             <KickboardStatusCard kbId={kbId} kbData={kbData}/>