feat: react hook 세팅

@@ -6,12 +6,13 @@ import { tdArray } from "variables/Variables.jsx";
 
 
 const thArray = ['유저ID', '대여 시각', '반납 시각', '대여 시간', '이동 거리', '대여 금액'];
 const thArray = ['유저ID', '대여 시각', '반납 시각', '대여 시간', '이동 거리', '대여 금액'];
 
 
-const KickboardHistoryTable = () => {
+const KickboardHistoryTable = (props) => {
+  const {kbId} = props;
 
 
   // category="Here is a subtitle for this table"
   // category="Here is a subtitle for this table"
   return (
   return (
     <Card
     <Card
-      title="000000번 킥보드 사용자 히스토리"
+      title={`${kbId}번 킥보드 사용자 히스토리`}
       ctTableFullWidth
       ctTableFullWidth
       ctTableResponsive
       ctTableResponsive
       content={
       content={

@@ -6,7 +6,7 @@ import moment from "moment";
 
 
 // border: 1px solid #E3E3E3;
 // border: 1px solid #E3E3E3;
 const KickboardButton = styled.div`
 const KickboardButton = styled.div`
-    font-size: 16px;
+    font-size: 15px;
     background-color: #e7e7e7;
     background-color: #e7e7e7;
     border-radius: 4px;
     border-radius: 4px;
     color: #565656;
     color: #565656;
@@ -47,12 +47,13 @@ const kickboardDataKey = {
   l: '최근 업데이트 시각',
   l: '최근 업데이트 시각',
 };
 };
 
 
-const KickboardStatusCard = () => {
+const KickboardStatusCard = (props) => {
+  const {kbId} = props;
   const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`;
   const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`;
 
 
   return (
   return (
     <Card
     <Card
-      title={'000000번 킥보드'}
+      title={`${kbId}번 킥보드`}
       stats={getStats}
       stats={getStats}
       statsIcon="fa fa-history"
       statsIcon="fa fa-history"
       content={
       content={

@@ -9,12 +9,13 @@ const UserData = styled.div`
   font-size: 15px;
   font-size: 15px;
 `;
 `;
 
 
-const UserDataCard = () => {
+const UserDataCard = (props) => {
   const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`;
   const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`;
+  const {userId} = props;
 
 
   return (
   return (
     <Card
     <Card
-      title={'000000번 사용자'}
+      title={`${userId}번 사용자`}
       stats={getStats}
       stats={getStats}
       statsIcon="fa fa-history"
       statsIcon="fa fa-history"
       content={
       content={

 import React, { Component } from "react";
 import React, { Component } from "react";
 import { Grid, Row, Col, Table } from "react-bootstrap";
 import { Grid, Row, Col, Table } from "react-bootstrap";
-
+import styled from "styled-components";
 import Card from "components/Card/Card.jsx";
 import Card from "components/Card/Card.jsx";
 import { tdArray } from "variables/Variables.jsx";
 import { tdArray } from "variables/Variables.jsx";
 
 
 const thArray = ['킥보드 시리얼 번호', '대여 시각', '반납 시각', '대여 시간', '이동 거리', '대여 금액'];
 const thArray = ['킥보드 시리얼 번호', '대여 시각', '반납 시각', '대여 시간', '이동 거리', '대여 금액'];
 
 
-class UserHistoryCard extends Component {
-  render() {
-    return (
-      <Card
-        title="Striped Table with Hover"
-        category="Here is a subtitle for this table"
-        ctTableFullWidth
-        ctTableResponsive
-        content={
-          <Table striped hover>
-            <thead>
-            <tr>
-              {thArray.map((prop, key) => {
-                return <th key={key}>{prop}</th>;
-              })}
-            </tr>
-            </thead>
-            <tbody>
-            {tdArray.map((prop, key) => {
-              return (
-                <tr key={key}>
-                  {prop.map((prop, key) => {
-                    return <td key={key}>{prop}</td>;
-                  })}
-                </tr>
-              );
+const UserHistoryCard = (props) => {
+  const {userId} = props;
+
+  return (
+    <Card
+      title={`${userId}번 사용자 킥보드 사용 히스토리`}
+      ctTableFullWidth
+      ctTableResponsive
+      content={
+        <Table striped hover>
+          <thead>
+          <tr>
+            {thArray.map((prop, key) => {
+              return <th key={key}>{prop}</th>;
             })}
             })}
-            </tbody>
-          </Table>
-        }
-      />
-    );
-  }
-}
+          </tr>
+          </thead>
+          <tbody>
+          {tdArray.map((prop, key) => {
+            return (
+              <tr key={key}>
+                {prop.map((prop, key) => {
+                  return <td key={key}>{prop}</td>;
+                })}
+              </tr>
+            );
+          })}
+          </tbody>
+        </Table>
+      }
+    />
+  );
+};
 
 
 export default UserHistoryCard;
 export default UserHistoryCard;

-import React from "react";
+import React, {useState, useEffect} from "react";
 import {Grid, Row, Col} from "react-bootstrap";
 import {Grid, Row, Col} from "react-bootstrap";
 
 
 import GoogleMapCard from '../components/Kickboard/GoogleMapCard';
 import GoogleMapCard from '../components/Kickboard/GoogleMapCard';
@@ -7,6 +7,8 @@ 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('000000');
+
   // 여기 API 요청
   // 여기 API 요청
   return (
   return (
     <div className="content">
     <div className="content">
@@ -21,17 +23,17 @@ const Kickboard = () => {
             <GoogleMapCard/>
             <GoogleMapCard/>
           </Col>
           </Col>
           <Col md={6}>
           <Col md={6}>
-            <KickboardStatusCard/>
+            <KickboardStatusCard kbId={kbId}/>
           </Col>
           </Col>
         </Row>
         </Row>
         <Row>
         <Row>
           <Col md={12}>
           <Col md={12}>
-            <KickboardHistoryTable/>
+            <KickboardHistoryTable kbId={kbId}/>
           </Col>
           </Col>
         </Row>
         </Row>
       </Grid>
       </Grid>
     </div>
     </div>
   );
   );
-}
+};
 
 
 export default Kickboard;
 export default Kickboard;

@@ -4,8 +4,8 @@ import UserDataCard from '../components/UserHistory/UserDataCard';
 import UserHistoryCard from '../components/UserHistory/UserHistoryCard';
 import UserHistoryCard from '../components/UserHistory/UserHistoryCard';
 import SearchButton from "../components/UserHistory/SearchButton";
 import SearchButton from "../components/UserHistory/SearchButton";
 
 
-const UserHistory = (props) => {
-  const [userId, setUserId] = useState('0');
+const UserHistory = () => {
+  const [userId, setUserId] = useState(0);
 
 
   useEffect(() => {
   useEffect(() => {
     // componentDidMount > 쿼리 검사하기
     // componentDidMount > 쿼리 검사하기
@@ -21,10 +21,10 @@ const UserHistory = (props) => {
         </Row>
         </Row>
         <Row>
         <Row>
           <Col md={12}>
           <Col md={12}>
-            <UserDataCard/>
+            <UserDataCard userId={userId}/>
           </Col>
           </Col>
           <Col md={12}>
           <Col md={12}>
-            <UserHistoryCard/>
+            <UserHistoryCard userId={userId}/>
           </Col>
           </Col>
         </Row>
         </Row>
       </Grid>
       </Grid>