조민지

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

......@@ -134,6 +134,7 @@ class GoogleMap extends React.Component {
infoWindow.close();
infoWindow.setContent(markerContent);
infoWindow.open(map, marker);
this.props.setKbId(item.serialNumber);
});
window.google.maps.event.addListener(marker, "mouseover", () => {
......
......@@ -15,7 +15,7 @@ const GoogleMapCard = (props) => {
stats={getStats}
statsIcon="fa fa-history"
content={
<GoogleMap/>
<GoogleMap setKbId={props.setKbId}/>
}
/>
);
......
......@@ -12,7 +12,7 @@ const Wrapper = styled.div`
`;
const EmptyImage = styled.img`
max-width: 100%;
max-width: 70%;
height: auto !important;
`;
......@@ -21,10 +21,10 @@ const SearchButton = (props) => {
<Card
content={
<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"/>
</Col>
<Col md={12}>
<Col md={12} sm={12} xs={12}>
<Wrapper>
{
Number(props.userId)<0
......
......@@ -7,7 +7,7 @@ import KickboardHistoryTable from '../components/Kickboard/KickboardHistoryTable
import SearchButton from '../components/Kickboard/SearchButton';
const Kickboard = () => {
const [kbId, setKbId] = useState('000165');
const [kbId, setKbId] = useState('-1');
const [kbData, setKbData] = useState({});
const [historyData, setHistoryData] = useState([]);
......@@ -26,6 +26,20 @@ const Kickboard = () => {
.catch(err => console.log(err));
},[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 요청
return (
<div className="content">
......@@ -37,7 +51,7 @@ const Kickboard = () => {
</Row>
<Row>
<Col md={6}>
<GoogleMapCard/>
<GoogleMapCard setKbId={setKbId}/>
</Col>
<Col md={6}>
<KickboardStatusCard kbId={kbId} kbData={kbData}/>
......