2020-1-capstone-design1 / Wico_Project1

Go to a project
Toggle navigation Toggle navigation pinning
조민지
1c15422c 1 parent 00e802c7

ui: 스타일 수정

Expand all
Inline Side-by-side
Showing 18 changed files with 121 additions and 115 deletions
...@@ -5,6 +5,10 @@ ...@@ -5,6 +5,10 @@
5 # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm 5 # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm
6 # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 6 # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
7 7
8 +build
9 +build/
10 +.idea
11 +
8 # User-specific stuff 12 # User-specific stuff
9 .idea 13 .idea
10 .idea/**/workspace.xml 14 .idea/**/workspace.xml
......
...@@ -1377,7 +1377,7 @@ body > .navbar-collapse[data-color="purple"]:after { ...@@ -1377,7 +1377,7 @@ body > .navbar-collapse[data-color="purple"]:after {
1377 .navbar .btn-simple { 1377 .navbar .btn-simple {
1378 font-size: 16px; } 1378 font-size: 16px; }
1379 .navbar.fixed { 1379 .navbar.fixed {
1380 - width: calc(100% - $sidebar-width); 1380 + width: calc(100% - #{$sidebar-width});
1381 right: 0; 1381 right: 0;
1382 left: auto; 1382 left: auto;
1383 border-radius: 0; } 1383 border-radius: 0; }
......
This diff could not be displayed because it is too large.
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
65 } 65 }
66 66
67 &.fixed{ 67 &.fixed{
68 - width: calc(100% - $sidebar-width); 68 + width: calc(100% - #{$sidebar-width});
69 right: 0; 69 right: 0;
70 left: auto; 70 left: auto;
71 border-radius: 0; 71 border-radius: 0;
......
...@@ -22,7 +22,7 @@ export class Card extends Component { ...@@ -22,7 +22,7 @@ export class Card extends Component {
22 return ( 22 return (
23 <div className={"card" + (this.props.plain ? " card-plain" : "")}> 23 <div className={"card" + (this.props.plain ? " card-plain" : "")}>
24 <div className={"header" + (this.props.hCenter ? " text-center" : "")}> 24 <div className={"header" + (this.props.hCenter ? " text-center" : "")}>
25 - <h4 className="title">{this.props.title}</h4> 25 + <h4 className="title" style={{fontWeight: 400}}>{this.props.title}</h4>
26 <p className="category">{this.props.category}</p> 26 <p className="category">{this.props.category}</p>
27 </div> 27 </div>
28 <div 28 <div
......
...@@ -26,25 +26,18 @@ class Footer extends Component { ...@@ -26,25 +26,18 @@ class Footer extends Component {
26 <nav className="pull-left"> 26 <nav className="pull-left">
27 <ul> 27 <ul>
28 <li> 28 <li>
29 - <a href="#pablo">Home</a> 29 + <a href="http://mate.ryulth.com/admin/kickboard">Home</a>
30 </li> 30 </li>
31 <li> 31 <li>
32 - <a href="#pablo">Company</a> 32 + <a href="http://mate.ryulth.com/admin/kickboard">Company</a>
33 - </li>
34 - <li>
35 - <a href="#pablo">Portfolio</a>
36 - </li>
37 - <li>
38 - <a href="#pablo">Blog</a>
39 </li> 33 </li>
40 </ul> 34 </ul>
41 </nav> 35 </nav>
42 <p className="copyright pull-right"> 36 <p className="copyright pull-right">
43 &copy; {new Date().getFullYear()}{" "} 37 &copy; {new Date().getFullYear()}{" "}
44 - <a href="http://www.creative-tim.com?ref=lbr-footer"> 38 + <a href="#">
45 - Creative Tim 39 + Wico
46 </a> 40 </a>
47 - , made with love for a better web
48 </p> 41 </p>
49 </Grid> 42 </Grid>
50 </footer> 43 </footer>
......
...@@ -6,22 +6,6 @@ let map; ...@@ -6,22 +6,6 @@ let map;
6 let markers = []; 6 let markers = [];
7 let infoWindow; 7 let infoWindow;
8 8
9 -const getGroupUrlStringByGroup = group => {
10 - if (group === "renting") {
11 - // 사용중
12 - return "_inuse";
13 - } else if (group === "ready") {
14 - // 대기중
15 - return "";
16 - } else if (group === "target") {
17 - // 수거대상
18 - return "_pickup";
19 - } else if (group === "collect") {
20 - // 수거
21 - return "_deactive";
22 - }
23 -};
24 -
25 const getBatteryUrlStringByBattery = battery => { 9 const getBatteryUrlStringByBattery = battery => {
26 if (battery >= 0 && battery < 25) { 10 if (battery >= 0 && battery < 25) {
27 return "0-25"; 11 return "0-25";
...@@ -47,7 +31,7 @@ class GoogleMap extends React.Component { ...@@ -47,7 +31,7 @@ class GoogleMap extends React.Component {
47 // .then(d => { 31 // .then(d => {
48 // if(!d.success || !d.data.length) return; 32 // if(!d.success || !d.data.length) return;
49 // 33 //
50 - // console.log(d.data) 34 + // // console.log(d.data)
51 // this.setState({ 35 // this.setState({
52 // kickboards: d.data 36 // kickboards: d.data
53 // }) 37 // })
...@@ -79,7 +63,7 @@ class GoogleMap extends React.Component { ...@@ -79,7 +63,7 @@ class GoogleMap extends React.Component {
79 infoWindow = new window.google.maps.InfoWindow({}); 63 infoWindow = new window.google.maps.InfoWindow({});
80 64
81 map = new google.maps.Map(document.getElementById("map"), { 65 map = new google.maps.Map(document.getElementById("map"), {
82 - zoom: 11, 66 + zoom: 8,
83 center: {lat: -34.397, lng: 150.644}, 67 center: {lat: -34.397, lng: 150.644},
84 disableDefaultUI: true, 68 disableDefaultUI: true,
85 zoomControl: true 69 zoomControl: true
...@@ -109,20 +93,21 @@ class GoogleMap extends React.Component { ...@@ -109,20 +93,21 @@ class GoogleMap extends React.Component {
109 } 93 }
110 94
111 drawMarkers() { 95 drawMarkers() {
112 - if (map == null) return; 96 + if (map === null) return;
113 - const selectedMarker = new window.google.maps.Marker({}); 97 + // const selectedMarker = new window.google.maps.Marker({});
114 98
115 markers = this.state.kickboards.map(item => { 99 markers = this.state.kickboards.map(item => {
100 +
116 const marker = new window.google.maps.Marker({ 101 const marker = new window.google.maps.Marker({
117 position: new window.google.maps.LatLng({ 102 position: new window.google.maps.LatLng({
118 - lat: item.coordinates.lat, 103 + lat: item.coordinates.y,
119 - lng: item.coordinates.lon 104 + lng: item.coordinates.x
120 }) 105 })
121 }); 106 });
122 107
123 const markerContent = ` 108 const markerContent = `
124 <div> 109 <div>
125 - <div style="color:black"> 시리얼번호: ${item.serialNumber} </div> 110 + <div style="color:black"> 시리얼번호: ${item.serial_number} </div>
126 </div> 111 </div>
127 `; 112 `;
128 113
...@@ -134,14 +119,18 @@ class GoogleMap extends React.Component { ...@@ -134,14 +119,18 @@ class GoogleMap extends React.Component {
134 infoWindow.close(); 119 infoWindow.close();
135 infoWindow.setContent(markerContent); 120 infoWindow.setContent(markerContent);
136 infoWindow.open(map, marker); 121 infoWindow.open(map, marker);
137 - this.props.setKbId(item.serialNumber); 122 + this.props.setKbId(item.serial_number);
138 }); 123 });
139 124
140 window.google.maps.event.addListener(marker, "mouseover", () => { 125 window.google.maps.event.addListener(marker, "mouseover", () => {
126 + infoWindow.close();
127 + infoWindow.setContent(markerContent);
128 + infoWindow.open(map, marker);
141 this.highlightMarker(marker); 129 this.highlightMarker(marker);
142 }); 130 });
143 131
144 window.google.maps.event.addListener(marker, "mouseout", () => { 132 window.google.maps.event.addListener(marker, "mouseout", () => {
133 + infoWindow.close();
145 this.renderMarker(marker); 134 this.renderMarker(marker);
146 }); 135 });
147 136
...@@ -151,31 +140,59 @@ class GoogleMap extends React.Component { ...@@ -151,31 +140,59 @@ class GoogleMap extends React.Component {
151 } 140 }
152 141
153 renderMarker(marker) { 142 renderMarker(marker) {
154 - const { group, battery } = marker.item; 143 + const { battery } = marker.item;
155 -
156 - const groupString = getGroupUrlStringByGroup(group);
157 const batteryString = getBatteryUrlStringByBattery(battery); 144 const batteryString = getBatteryUrlStringByBattery(battery);
158 145
159 - const iconUrl = require(`../../assets/marker/ic_map_pin_battery${batteryString}${groupString}.png`); 146 + const iconUrl = require(`../../assets/marker/ic_map_pin_battery${batteryString}.png`);
160 marker.setIcon(iconUrl); 147 marker.setIcon(iconUrl);
161 } 148 }
162 149
163 -
164 highlightMarker(marker) { 150 highlightMarker(marker) {
165 - const { group, battery } = marker.item; 151 + const { battery } = marker.item;
166 -
167 - const groupString = getGroupUrlStringByGroup(group);
168 const batteryString = getBatteryUrlStringByBattery(battery); 152 const batteryString = getBatteryUrlStringByBattery(battery);
169 153
170 - const iconUrl = require(`../../assets/marker/ic_map_pin_battery${batteryString}${groupString}_selected.png`); 154 + const iconUrl = require(`../../assets/marker/ic_map_pin_battery${batteryString}_selected.png`);
171 marker.setIcon(iconUrl); 155 marker.setIcon(iconUrl);
172 } 156 }
173 157
158 + moveToMarker(kbId) {
159 + if (map == null || markers.length === 0) {
160 + return;
161 + }
162 +
163 + const searchedMarker = markers.find(
164 + marker => marker.item.serial_number === kbId
165 + );
166 +
167 + if(!searchedMarker) return;
168 + const markerContent = `
169 + <div>
170 + <div style="color:black"> 시리얼번호: ${kbId} </div>
171 + </div>
172 + `;
173 +
174 + infoWindow.close();
175 + infoWindow.setContent(markerContent);
176 + infoWindow.open(map, searchedMarker);
177 +
178 + map.setCenter(
179 + new window.google.maps.LatLng({
180 + lat: searchedMarker.item.coordinates.y,
181 + lng: searchedMarker.item.coordinates.x
182 + })
183 + );
184 + map.setZoom(14);
185 + }
186 +
187 + componentDidUpdate(prevProps, prevState, snapshot) {
188 + this.moveToMarker(this.props.kbId);
189 + }
190 +
174 render() { 191 render() {
175 this.drawMarkers(); 192 this.drawMarkers();
176 193
177 return ( 194 return (
178 - <div id="map" style={{height:this.props.containerWidth, backgroundColor:'pink'}}> 195 + <div id="map" style={{height:this.props.containerWidth}}>
179 </div> 196 </div>
180 ) 197 )
181 } 198 }
......
...@@ -3,6 +3,7 @@ import { Card } from "components/Card/Card.jsx"; ...@@ -3,6 +3,7 @@ import { Card } from "components/Card/Card.jsx";
3 import Dimensions from 'react-dimensions' 3 import Dimensions from 'react-dimensions'
4 import moment from 'moment'; 4 import moment from 'moment';
5 import GoogleMap from './GoogleMap'; 5 import GoogleMap from './GoogleMap';
6 +import KickboardStatusCard from "./KickboardStatusCard";
6 7
7 const GoogleMapCard = (props) => { 8 const GoogleMapCard = (props) => {
8 const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`; 9 const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`;
...@@ -11,11 +12,10 @@ const GoogleMapCard = (props) => { ...@@ -11,11 +12,10 @@ const GoogleMapCard = (props) => {
11 <Card 12 <Card
12 id="chartActivity" 13 id="chartActivity"
13 title="서비스 현황" 14 title="서비스 현황"
14 - category="All products including Taxes"
15 stats={getStats} 15 stats={getStats}
16 statsIcon="fa fa-history" 16 statsIcon="fa fa-history"
17 content={ 17 content={
18 - <GoogleMap setKbId={props.setKbId}/> 18 + <GoogleMap kbId={props.kbId} setKbId={props.setKbId}/>
19 } 19 }
20 /> 20 />
21 ); 21 );
......
1 import React from "react"; 1 import React from "react";
2 import {Table} from "react-bootstrap"; 2 import {Table} from "react-bootstrap";
3 import { Card } from "components/Card/Card.jsx"; 3 import { Card } from "components/Card/Card.jsx";
4 -import { tdArray } from "variables/Variables.jsx"; 4 +import styled from "styled-components";
5 +
6 +const A = styled.a`
7 + color: #333;
8 + text-decoration: underline;
9 + font-weight: 500;
10 +`;
5 11
6 const UserDataKey = { 12 const UserDataKey = {
7 user_id: '유저ID', 13 user_id: '유저ID',
...@@ -25,7 +31,7 @@ const KickboardHistoryTable = (props) => { ...@@ -25,7 +31,7 @@ const KickboardHistoryTable = (props) => {
25 31
26 return ( 32 return (
27 <Card 33 <Card
28 - title={`${kbId}번 킥보드 사용자 히스토리`} 34 + title={`${kbId}번 킥보드 사용자 대여 히스토리`}
29 ctTableFullWidth 35 ctTableFullWidth
30 ctTableResponsive 36 ctTableResponsive
31 content={ 37 content={
...@@ -40,10 +46,11 @@ const KickboardHistoryTable = (props) => { ...@@ -40,10 +46,11 @@ const KickboardHistoryTable = (props) => {
40 <tbody> 46 <tbody>
41 {historyData.map((data, idx) => { 47 {historyData.map((data, idx) => {
42 const {user_id, rent_datetime, return_datetime, rental_time, rental_distance, rental_fee} = data; 48 const {user_id, rent_datetime, return_datetime, rental_time, rental_distance, rental_fee} = data;
49 + const userHistoryUrl = `http://mate.ryulth.com/admin/user/?userId=${user_id}`;
43 50
44 return ( 51 return (
45 <tr key={idx}> 52 <tr key={idx}>
46 - <td>{user_id}</td> 53 + <td><A href={userHistoryUrl}>{user_id}</A></td>
47 <td>{timestampToString(rent_datetime)}</td> 54 <td>{timestampToString(rent_datetime)}</td>
48 <td>{timestampToString(return_datetime)}</td> 55 <td>{timestampToString(return_datetime)}</td>
49 <td>{rental_time}분</td> 56 <td>{rental_time}분</td>
......
...@@ -35,11 +35,12 @@ const SearchButton = (props) => { ...@@ -35,11 +35,12 @@ const SearchButton = (props) => {
35 const inputEl = useRef(null); 35 const inputEl = useRef(null);
36 36
37 const searchKickboard = (e) => { 37 const searchKickboard = (e) => {
38 - const searchText = e.target.value; 38 + const searchText = inputEl.current.value;
39 +
39 fetch(`http://1.201.143.67:5901/kickboard/${searchText}`) 40 fetch(`http://1.201.143.67:5901/kickboard/${searchText}`)
40 .then(r => r.json()) 41 .then(r => r.json())
41 .then(d => { 42 .then(d => {
42 - if(d.success && d.data.length) setKbId(); 43 + if(d.success && d.data.length) setKbId(searchText);
43 else window.alert('해당 번호의 킥보드가 존재하지 않습니다!') 44 else window.alert('해당 번호의 킥보드가 존재하지 않습니다!')
44 }) 45 })
45 .catch(err => console.log(err)); 46 .catch(err => console.log(err));
......
This diff is collapsed. Click to expand it.
...@@ -49,7 +49,7 @@ class Header extends Component { ...@@ -49,7 +49,7 @@ class Header extends Component {
49 <Navbar fluid> 49 <Navbar fluid>
50 <Navbar.Header> 50 <Navbar.Header>
51 <Navbar.Brand> 51 <Navbar.Brand>
52 - <a href="#pablo">{this.props.brandText}</a> 52 + <a href="#pablo" style={{color: '#333333'}}>{this.props.brandText}</a>
53 </Navbar.Brand> 53 </Navbar.Brand>
54 <Navbar.Toggle onClick={this.mobileSidebarToggle} /> 54 <Navbar.Toggle onClick={this.mobileSidebarToggle} />
55 </Navbar.Header> 55 </Navbar.Header>
......
...@@ -20,55 +20,9 @@ import { NavItem, Nav, NavDropdown, MenuItem } from "react-bootstrap"; ...@@ -20,55 +20,9 @@ import { NavItem, Nav, NavDropdown, MenuItem } from "react-bootstrap";
20 20
21 class AdminNavbarLinks extends Component { 21 class AdminNavbarLinks extends Component {
22 render() { 22 render() {
23 - const notification = (
24 - <div>
25 - <i className="fa fa-globe" />
26 - <b className="caret" />
27 - <span className="notification">5</span>
28 - <p className="hidden-lg hidden-md">Notification</p>
29 - </div>
30 - );
31 return ( 23 return (
32 <div> 24 <div>
33 - <Nav>
34 - <NavItem eventKey={1} href="#">
35 - <i className="fa fa-dashboard" />
36 - <p className="hidden-lg hidden-md">Dashboard</p>
37 - </NavItem>
38 - <NavDropdown
39 - eventKey={2}
40 - title={notification}
41 - noCaret
42 - id="basic-nav-dropdown"
43 - >
44 - <MenuItem eventKey={2.1}>Notification 1</MenuItem>
45 - <MenuItem eventKey={2.2}>Notification 2</MenuItem>
46 - <MenuItem eventKey={2.3}>Notification 3</MenuItem>
47 - <MenuItem eventKey={2.4}>Notification 4</MenuItem>
48 - <MenuItem eventKey={2.5}>Another notifications</MenuItem>
49 - </NavDropdown>
50 - <NavItem eventKey={3} href="#">
51 - <i className="fa fa-search" />
52 - <p className="hidden-lg hidden-md">Search</p>
53 - </NavItem>
54 - </Nav>
55 <Nav pullRight> 25 <Nav pullRight>
56 - <NavItem eventKey={1} href="#">
57 - Account
58 - </NavItem>
59 - <NavDropdown
60 - eventKey={2}
61 - title="Dropdown"
62 - id="basic-nav-dropdown-right"
63 - >
64 - <MenuItem eventKey={2.1}>Action</MenuItem>
65 - <MenuItem eventKey={2.2}>Another action</MenuItem>
66 - <MenuItem eventKey={2.3}>Something</MenuItem>
67 - <MenuItem eventKey={2.4}>Another action</MenuItem>
68 - <MenuItem eventKey={2.5}>Something</MenuItem>
69 - <MenuItem divider />
70 - <MenuItem eventKey={2.5}>Separated link</MenuItem>
71 - </NavDropdown>
72 <NavItem eventKey={3} href="#"> 26 <NavItem eventKey={3} href="#">
73 Log out 27 Log out
74 </NavItem> 28 </NavItem>
......
...@@ -35,7 +35,7 @@ class Sidebar extends Component { ...@@ -35,7 +35,7 @@ class Sidebar extends Component {
35 > 35 >
36 <div className="logo" style={{display: 'flex',justifyContent: 'center', alignItems: 'center'}}> 36 <div className="logo" style={{display: 'flex',justifyContent: 'center', alignItems: 'center'}}>
37 <a 37 <a
38 - href="https://www.creative-tim.com?ref=lbd-sidebar" 38 + href="http://mate.ryulth.com/admin/kickboard"
39 > 39 >
40 <img src={mate_logo} alt="logo_image" style={{width: '135px'}}/> 40 <img src={mate_logo} alt="logo_image" style={{width: '135px'}}/>
41 </a> 41 </a>
......
...@@ -40,34 +40,34 @@ const UserDataCard = (props) => { ...@@ -40,34 +40,34 @@ const UserDataCard = (props) => {
40 <div> 40 <div>
41 <Row> 41 <Row>
42 <Col md={6} sm={6} xs={12}> 42 <Col md={6} sm={6} xs={12}>
43 - <UserData>이름 : {name}</UserData> 43 + <UserData><strong>이름 : </strong>{name}</UserData>
44 </Col> 44 </Col>
45 <Col md={6} sm={6} xs={12}> 45 <Col md={6} sm={6} xs={12}>
46 - <UserData>사용자 ID : {user_id}</UserData> 46 + <UserData><strong>사용자 ID : </strong>{user_id}</UserData>
47 </Col> 47 </Col>
48 </Row> 48 </Row>
49 <Row> 49 <Row>
50 <Col md={6} sm={6} xs={12}> 50 <Col md={6} sm={6} xs={12}>
51 - <UserData>전화번호 : {phone_number}</UserData> 51 + <UserData><strong>전화번호 : </strong>{phone_number}</UserData>
52 </Col> 52 </Col>
53 <Col md={6} sm={6} xs={12}> 53 <Col md={6} sm={6} xs={12}>
54 - <UserData>이메일 : {email}</UserData> 54 + <UserData><strong>이메일 : </strong>{email}</UserData>
55 </Col> 55 </Col>
56 </Row> 56 </Row>
57 <Row> 57 <Row>
58 <Col md={6} sm={6} xs={12}> 58 <Col md={6} sm={6} xs={12}>
59 - <UserData>가입 날짜 : {timestampToString(created_datetime)}</UserData> 59 + <UserData><strong>가입 날짜 : </strong>{timestampToString(created_datetime)}</UserData>
60 </Col> 60 </Col>
61 <Col md={6} sm={6} xs={12}> 61 <Col md={6} sm={6} xs={12}>
62 - <UserData>최근 로그인 날짜 : {timestampToString(recent_login_datetime)}</UserData> 62 + <UserData><strong>최근 로그인 날짜 : </strong>{timestampToString(recent_login_datetime)}</UserData>
63 </Col> 63 </Col>
64 </Row> 64 </Row>
65 <Row> 65 <Row>
66 <Col md={6} sm={6} xs={12}> 66 <Col md={6} sm={6} xs={12}>
67 - <UserData>면허증 등록 여부 : {license_registered ? '등록됨' : '미등록'}</UserData> 67 + <UserData><strong>면허증 등록 여부 : </strong>{license_registered ? '등록됨' : '미등록'}</UserData>
68 </Col> 68 </Col>
69 <Col md={6} sm={6} xs={12}> 69 <Col md={6} sm={6} xs={12}>
70 - <UserData>카드 등록 여부 : {license_registered ? '등록됨' : '미등록'}</UserData> 70 + <UserData><strong>카드 등록 여부 : </strong>{license_registered ? '등록됨' : '미등록'}</UserData>
71 </Col> 71 </Col>
72 </Row> 72 </Row>
73 </div> 73 </div>
......
...@@ -23,7 +23,7 @@ const dashboardRoutes = [ ...@@ -23,7 +23,7 @@ const dashboardRoutes = [
23 // layout: "/admin" 23 // layout: "/admin"
24 // }, 24 // },
25 { 25 {
26 - path: "/table", 26 + path: "/user",
27 name: "사용자 정보", 27 name: "사용자 정보",
28 icon: "pe-7s-users", 28 icon: "pe-7s-users",
29 component: UserHistory, 29 component: UserHistory,
......
...@@ -8,6 +8,7 @@ import SearchButton from '../components/Kickboard/SearchButton'; ...@@ -8,6 +8,7 @@ import SearchButton from '../components/Kickboard/SearchButton';
8 8
9 const Kickboard = () => { 9 const Kickboard = () => {
10 const [kbId, setKbId] = useState('-1'); 10 const [kbId, setKbId] = useState('-1');
11 +
11 const [kbData, setKbData] = useState({}); 12 const [kbData, setKbData] = useState({});
12 const [historyData, setHistoryData] = useState([]); 13 const [historyData, setHistoryData] = useState([]);
13 14
...@@ -26,11 +27,16 @@ const Kickboard = () => { ...@@ -26,11 +27,16 @@ const Kickboard = () => {
26 .catch(err => console.log(err)); 27 .catch(err => console.log(err));
27 },[kbId]); 28 },[kbId]);
28 29
29 - if(Number(kbId)<0) { 30 + if(kbId<0) {
30 return ( 31 return (
31 <div className="content"> 32 <div className="content">
32 <Grid fluid> 33 <Grid fluid>
33 <Row> 34 <Row>
35 + <Col md={4} mdOffset={8} sm={3} smOffset={9} style={{marginBottom:15}}>
36 + <SearchButton setKbId={setKbId}/>
37 + </Col>
38 + </Row>
39 + <Row>
34 <Col md={8} mdOffset={2}> 40 <Col md={8} mdOffset={2}>
35 <GoogleMapCard setKbId={setKbId}/> 41 <GoogleMapCard setKbId={setKbId}/>
36 </Col> 42 </Col>
...@@ -51,7 +57,7 @@ const Kickboard = () => { ...@@ -51,7 +57,7 @@ const Kickboard = () => {
51 </Row> 57 </Row>
52 <Row> 58 <Row>
53 <Col md={6}> 59 <Col md={6}>
54 - <GoogleMapCard setKbId={setKbId}/> 60 + <GoogleMapCard kbId={kbId} setKbId={setKbId}/>
55 </Col> 61 </Col>
56 <Col md={6}> 62 <Col md={6}>
57 <KickboardStatusCard kbId={kbId} kbData={kbData}/> 63 <KickboardStatusCard kbId={kbId} kbData={kbData}/>
......
...@@ -5,20 +5,44 @@ import UserHistoryCard from '../components/UserHistory/UserHistoryCard'; ...@@ -5,20 +5,44 @@ import UserHistoryCard from '../components/UserHistory/UserHistoryCard';
5 import SearchButton from "../components/UserHistory/SearchButton"; 5 import SearchButton from "../components/UserHistory/SearchButton";
6 import Fallback from '../components/UserHistory/Fallback'; 6 import Fallback from '../components/UserHistory/Fallback';
7 7
8 +const convertQueryStringToObject = s => {
9 + const hashParams = {};
10 + let e;
11 + const a = /\+/g, // Regex for replacing addition symbol with a space
12 + r = /([^&;=]+)=?([^&;]*)/g,
13 + d = function(s) {
14 + return decodeURIComponent(s.replace(a, ' '));
15 + },
16 + q = s.replace(/\?/g, '');
17 +
18 + while ((e = r.exec(q))) hashParams[d(e[1])] = d(e[2]);
19 +
20 + return hashParams;
21 +};
22 +
8 const UserHistory = () => { 23 const UserHistory = () => {
9 const [userId, setUserId] = useState('0'); 24 const [userId, setUserId] = useState('0');
10 const [userData, setUserData] = useState({}); 25 const [userData, setUserData] = useState({});
11 const [rentData, setRentData] = useState([]); 26 const [rentData, setRentData] = useState([]);
12 27
13 useEffect(() => { 28 useEffect(() => {
14 - // TODO: componentDidMount > 쿼리 검사하기 29 + // component did mount
30 + console.log('component did mount')
31 + const queryString = window.location.href.split('?')[1];
32 + const queryObject = queryString ? convertQueryStringToObject(queryString) : {};
33 +
34 + if(queryObject && queryObject.userId) {
35 + setTimeout(() => setUserId(queryObject.userId), 300)
36 + }
15 },[]); 37 },[]);
16 38
17 useEffect(() => { 39 useEffect(() => {
18 if(Number(userId)<0) return; 40 if(Number(userId)<0) return;
41 + console.log(userId);
19 fetch(`http://1.201.143.67:5901/user/${userId}`) 42 fetch(`http://1.201.143.67:5901/user/${userId}`)
20 .then(r => r.json()) 43 .then(r => r.json())
21 .then(d => { 44 .then(d => {
45 + console.log(d);
22 if(!d.success) setUserId('0'); // 유효하지 않은 userId인 경우 46 if(!d.success) setUserId('0'); // 유효하지 않은 userId인 경우
23 if(d.data && d.data.length) setUserData(d.data[0]); 47 if(d.data && d.data.length) setUserData(d.data[0]);
24 48
......