feat: 사용자 페이지 API 연동

@@ -9,9 +9,27 @@ const UserData = styled.div`
   font-size: 15px;
 `;
 
+function makeTimestampToString(stamp) {
+  if (!stamp) return '';
+  const date = stamp.split('T')[0];
+  const time = stamp.split('T')[1].split('.')[0];
+
+  return `${date} ${time}`;
+}
+
 const UserDataCard = (props) => {
   const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`;
-  const {userId} = props;
+  const {userId, userData} = props;
+  const {name, user_id, phone_number, email, created_datetime, recent_login_datetime, license_registered, card_registered} = userData;
+
+  // card_registered: false
+  // created_datetime: "2020-05-03T15:13:07.429Z"
+  // email: "song@naver.com"
+  // license_registered: false
+  // name: "송봉수"
+  // phone_number: "+821088643678"
+  // recent_login_datetime: "2020-05-07T07:19:52.302Z"
+  // user_id: 7569
 
   return (
     <Card
@@ -22,34 +40,34 @@ const UserDataCard = (props) => {
         <div>
           <Row>
             <Col md={6} sm={6} xs={12}>
-              <UserData>이름</UserData>
+              <UserData>이름 : {name}</UserData>
             </Col>
             <Col md={6} sm={6} xs={12}>
-              <UserData>사용자 ID</UserData>
+              <UserData>사용자 ID : {user_id}</UserData>
             </Col>
           </Row>
           <Row>
             <Col md={6} sm={6} xs={12}>
-              <UserData>전화번호</UserData>
+              <UserData>전화번호 : {phone_number}</UserData>
             </Col>
             <Col md={6} sm={6} xs={12}>
-              <UserData>이메일 가입 날짜</UserData>
+              <UserData>이메일 : {email}</UserData>
             </Col>
           </Row>
           <Row>
             <Col md={6} sm={6} xs={12}>
-              <UserData>가입 날짜</UserData>
+              <UserData>가입 날짜 : {makeTimestampToString(created_datetime)}</UserData>
             </Col>
             <Col md={6} sm={6} xs={12}>
-              <UserData>최근 로그인 날짜</UserData>
+              <UserData>최근 로그인 날짜 : {makeTimestampToString(recent_login_datetime)}</UserData>
             </Col>
           </Row>
           <Row>
             <Col md={6} sm={6} xs={12}>
-              <UserData>면허증 등록 여부</UserData>
+              <UserData>면허증 등록 여부 : {license_registered ? '등록됨' : '미등록'}</UserData>
             </Col>
             <Col md={6} sm={6} xs={12}>
-              <UserData>카드 등록 여부</UserData>
+              <UserData>카드 등록 여부 : {license_registered ? '등록됨' : '미등록'}</UserData>
             </Col>
           </Row>
         </div>

@@ -3,17 +3,21 @@ import { Grid, Row, Col, Table } from "react-bootstrap";
 import styled from "styled-components";
 import Card from "components/Card/Card.jsx";
 import { tdArray } from "variables/Variables.jsx";
+import moment from "moment";
 
-const thArray = ['킥보드 시리얼 번호', '대여 시각', '반납 시각', '대여 시간', '이동 거리', '대여 금액'];
+const thArray = ['킥보드 시리얼 번호', '대여 시각', '반납 시각', '총 대여 시간', '이동 거리', '대여 금액'];
 
 const UserHistoryCard = (props) => {
-  const {userId} = props;
+  const {userId, rentData} = props;
+  const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`;
 
   return (
     <Card
       title={`${userId}번 사용자 킥보드 사용 히스토리`}
       ctTableFullWidth
       ctTableResponsive
+      stats={getStats}
+      statsIcon="fa fa-history"
       content={
         <Table striped hover>
           <thead>
@@ -24,15 +28,16 @@ const UserHistoryCard = (props) => {
           </tr>
           </thead>
           <tbody>
-          {tdArray.map((prop, key) => {
-            return (
-              <tr key={key}>
-                {prop.map((prop, key) => {
-                  return <td key={key}>{prop}</td>;
-                })}
+          {rentData.map((data, idx) => (
+              <tr key={idx}>
+                <td>{data.serial_number}</td>
+                <td>{data.rent_datetime}</td>
+                <td>{data.return_datetime}</td>
+                <td>{data.rental_time}</td>
+                <td>{data.rental_distance}</td>
+                <td>{data.rental_fee}</td>
               </tr>
-            );
-          })}
+            ))}
           </tbody>
         </Table>
       }

@@ -5,12 +5,30 @@ import UserHistoryCard from '../components/UserHistory/UserHistoryCard';
 import SearchButton from "../components/UserHistory/SearchButton";
 
 const UserHistory = () => {
-  const [userId, setUserId] = useState(0);
+  const [userId, setUserId] = useState(7575);
+  const [userData, setUserData] = useState({});
+  const [rentData, setRentData] = useState([]);
 
   useEffect(() => {
-    // componentDidMount > 쿼리 검사하기
+    // TODO: componentDidMount > 쿼리 검사하기
   },[]);
 
+  useEffect(() => {
+    fetch(`http://1.201.143.67:5901/user/${userId}`)
+      .then(r => r.json())
+      .then(d => {
+        console.log('userData',d.data[0])
+        if(d.data && d.data.length) setUserData(d.data[0]);
+
+        fetch(`http://1.201.143.67:5901/user/rent/${userId}`)
+          .then(r => r.json())
+          .then(d => {
+            console.log('rentData',d.data);
+            if(d.data && d.data.length) setRentData(d.data);
+          })
+      })
+      .catch(err => console.log(err));  },[userId]);
+
   return (
     <div className="content">
       <Grid fluid>
@@ -21,10 +39,10 @@ const UserHistory = () => {
         </Row>
         <Row>
           <Col md={12}>
-            <UserDataCard userId={userId}/>
+            <UserDataCard userId={userId} userData={userData}/>
           </Col>
           <Col md={12}>
-            <UserHistoryCard userId={userId}/>
+            <UserHistoryCard userId={userId} rentData={rentData}/>
           </Col>
         </Row>
       </Grid>