조민지

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

...@@ -134,6 +134,7 @@ class GoogleMap extends React.Component { ...@@ -134,6 +134,7 @@ class GoogleMap extends React.Component {
134 infoWindow.close(); 134 infoWindow.close();
135 infoWindow.setContent(markerContent); 135 infoWindow.setContent(markerContent);
136 infoWindow.open(map, marker); 136 infoWindow.open(map, marker);
137 + this.props.setKbId(item.serialNumber);
137 }); 138 });
138 139
139 window.google.maps.event.addListener(marker, "mouseover", () => { 140 window.google.maps.event.addListener(marker, "mouseover", () => {
......
...@@ -15,7 +15,7 @@ const GoogleMapCard = (props) => { ...@@ -15,7 +15,7 @@ const GoogleMapCard = (props) => {
15 stats={getStats} 15 stats={getStats}
16 statsIcon="fa fa-history" 16 statsIcon="fa fa-history"
17 content={ 17 content={
18 - <GoogleMap/> 18 + <GoogleMap setKbId={props.setKbId}/>
19 } 19 }
20 /> 20 />
21 ); 21 );
......
...@@ -12,7 +12,7 @@ const Wrapper = styled.div` ...@@ -12,7 +12,7 @@ const Wrapper = styled.div`
12 `; 12 `;
13 13
14 const EmptyImage = styled.img` 14 const EmptyImage = styled.img`
15 - max-width: 100%; 15 + max-width: 70%;
16 height: auto !important; 16 height: auto !important;
17 `; 17 `;
18 18
...@@ -21,10 +21,10 @@ const SearchButton = (props) => { ...@@ -21,10 +21,10 @@ const SearchButton = (props) => {
21 <Card 21 <Card
22 content={ 22 content={
23 <Row> 23 <Row>
24 - <Col md={8} mdOffset={2}> 24 + <Col md={8} mdOffset={2} sm={8} smOffset={2} xs={8} xsOffset={2} style={{display: 'flex', justifyContent: 'center'}}>
25 <EmptyImage src="https://raw.githubusercontent.com/devSoyoung/whale-extension-keycrab/master/images/empty.png" alt="empty"/> 25 <EmptyImage src="https://raw.githubusercontent.com/devSoyoung/whale-extension-keycrab/master/images/empty.png" alt="empty"/>
26 </Col> 26 </Col>
27 - <Col md={12}> 27 + <Col md={12} sm={12} xs={12}>
28 <Wrapper> 28 <Wrapper>
29 { 29 {
30 Number(props.userId)<0 30 Number(props.userId)<0
......
...@@ -7,7 +7,7 @@ import KickboardHistoryTable from '../components/Kickboard/KickboardHistoryTable ...@@ -7,7 +7,7 @@ import KickboardHistoryTable from '../components/Kickboard/KickboardHistoryTable
7 import SearchButton from '../components/Kickboard/SearchButton'; 7 import SearchButton from '../components/Kickboard/SearchButton';
8 8
9 const Kickboard = () => { 9 const Kickboard = () => {
10 - const [kbId, setKbId] = useState('000165'); 10 + const [kbId, setKbId] = useState('-1');
11 const [kbData, setKbData] = useState({}); 11 const [kbData, setKbData] = useState({});
12 const [historyData, setHistoryData] = useState([]); 12 const [historyData, setHistoryData] = useState([]);
13 13
...@@ -26,6 +26,20 @@ const Kickboard = () => { ...@@ -26,6 +26,20 @@ const Kickboard = () => {
26 .catch(err => console.log(err)); 26 .catch(err => console.log(err));
27 },[kbId]); 27 },[kbId]);
28 28
29 + if(Number(kbId)<0) {
30 + return (
31 + <div className="content">
32 + <Grid fluid>
33 + <Row>
34 + <Col md={8} mdOffset={2}>
35 + <GoogleMapCard setKbId={setKbId}/>
36 + </Col>
37 + </Row>
38 + </Grid>
39 + </div>
40 + )
41 + }
42 +
29 // 여기 API 요청 43 // 여기 API 요청
30 return ( 44 return (
31 <div className="content"> 45 <div className="content">
...@@ -37,7 +51,7 @@ const Kickboard = () => { ...@@ -37,7 +51,7 @@ const Kickboard = () => {
37 </Row> 51 </Row>
38 <Row> 52 <Row>
39 <Col md={6}> 53 <Col md={6}>
40 - <GoogleMapCard/> 54 + <GoogleMapCard setKbId={setKbId}/>
41 </Col> 55 </Col>
42 <Col md={6}> 56 <Col md={6}>
43 <KickboardStatusCard kbId={kbId} kbData={kbData}/> 57 <KickboardStatusCard kbId={kbId} kbData={kbData}/>
......