2020-1-capstone-design1 / Wico_Project1

Go to a project
Toggle navigation Toggle navigation pinning
조민지
fb6746a3 1 parent 24e6af69

feat: 사용자 페이지 데이터 구성

Inline Side-by-side
Showing 8 changed files with 193 additions and 99 deletions
......@@ -8,10 +8,10 @@ const thArray = ['유저ID', '대여 시각', '반납 시각', '대여 시간',
const KickboardHistoryTable = () => {
// category="Here is a subtitle for this table"
return (
<Card
title="Striped Table with Hover"
category="Here is a subtitle for this table"
title="000000번 킥보드 사용자 히스토리"
ctTableFullWidth
ctTableResponsive
content={
......
......@@ -6,6 +6,7 @@ import moment from "moment";
// border: 1px solid #E3E3E3;
const KickboardButton = styled.div`
font-size: 16px;
background-color: #e7e7e7;
border-radius: 4px;
color: #565656;
......@@ -74,8 +75,7 @@ const KickboardStatusCard = () => {
</KickboardDataList>
</Row>
}
>
</Card>
/>
);
};
......
import React from "react";
import styled from "styled-components";
const SearchButtonWrapper = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
`;
const SearchInput = styled.input`
width: 60%;
`;
const ApplyButton = styled.div`
width: 17%;
background-color: #e7e7e7;
border-radius: 4px;
color: #565656;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background-color: #565656;
color: white;
cursor: pointer;
`;
const SelectBox = styled.select`
width: 17%;
color: #333333;
border-color: #E3E3E3;
border-radius: 4px;
`;
const SearchButton = () => {
return (
<SearchButtonWrapper>
<SelectBox>
<option value="전화 번호">전화 번호</option>
<option value="이메일">이메일</option>
</SelectBox>
<SearchInput type="text" className="form-control" placeholder={"킥보드 번호로 검색하기"}/>
<ApplyButton><span>검색</span></ApplyButton>
</SearchButtonWrapper>
);
};
export default SearchButton;
import React from "react";
import { Card } from "components/Card/Card.jsx";
import {Col, Row} from "react-bootstrap";
import styled from "styled-components"
import moment from "moment";
const UserData = styled.div`
padding: 4px 0;
font-size: 15px;
`;
const UserDataCard = () => {
const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`;
return (
<Card
title={'000000번 사용자'}
stats={getStats}
statsIcon="fa fa-history"
content={
<div>
<Row>
<Col md={6} sm={6} xs={12}>
<UserData>이름</UserData>
</Col>
<Col md={6} sm={6} xs={12}>
<UserData>사용자 ID</UserData>
</Col>
</Row>
<Row>
<Col md={6} sm={6} xs={12}>
<UserData>전화번호</UserData>
</Col>
<Col md={6} sm={6} xs={12}>
<UserData>이메일 가입 날짜</UserData>
</Col>
</Row>
<Row>
<Col md={6} sm={6} xs={12}>
<UserData>가입 날짜</UserData>
</Col>
<Col md={6} sm={6} xs={12}>
<UserData>최근 로그인 날짜</UserData>
</Col>
</Row>
<Row>
<Col md={6} sm={6} xs={12}>
<UserData>면허증 등록 여부</UserData>
</Col>
<Col md={6} sm={6} xs={12}>
<UserData>카드 등록 여부</UserData>
</Col>
</Row>
</div>
}
/>
);
};
export default UserDataCard;
\ No newline at end of file
/*!
=========================================================
* Light Bootstrap Dashboard React - v1.3.0
=========================================================
* Product Page: https://www.creative-tim.com/product/light-bootstrap-dashboard-react
* Copyright 2019 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/light-bootstrap-dashboard-react/blob/master/LICENSE.md)
* Coded by Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import React, { Component } from "react";
import { Grid, Row, Col, Table } from "react-bootstrap";
import Card from "components/Card/Card.jsx";
import { thArray, tdArray } from "variables/Variables.jsx";
import { tdArray } from "variables/Variables.jsx";
class TableList extends Component {
const thArray = ['킥보드 시리얼 번호', '대여 시각', '반납 시각', '대여 시간', '이동 거리', '대여 금액'];
class UserHistoryCard extends Component {
render() {
return (
<div className="content">
<Grid fluid>
<Row>
<Col md={12}>
<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>
);
})}
</tbody>
</Table>
}
/>
</Col>
<Col md={12}>
<Card
plain
title="Striped Table with Hover"
category="Here is a subtitle for this table"
ctTableFullWidth
ctTableResponsive
content={
<Table 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>
);
})}
</tbody>
</Table>
}
/>
</Col>
</Row>
</Grid>
</div>
<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>
);
})}
</tbody>
</Table>
}
/>
);
}
}
export default TableList;
export default UserHistoryCard;
......
import Dashboard from "views/Dashboard.jsx";
import UserProfile from "views/UserProfile.jsx";
import TableList from "views/TableList.jsx";
import UserHistory from "views/UserHistory.jsx";
import Typography from "views/Typography.jsx";
import Icons from "views/Icons.jsx";
import Maps from "views/Maps.jsx";
......@@ -24,9 +24,9 @@ const dashboardRoutes = [
},
{
path: "/table",
name: "Table List",
icon: "pe-7s-note2",
component: TableList,
name: "사용자 정보",
icon: "pe-7s-users",
component: UserHistory,
layout: "/admin"
},
{
......@@ -59,8 +59,8 @@ const dashboardRoutes = [
},
{
path: "/kickboard",
name: "Kickboard",
icon: "pe-7s-bicycle",
name: "킥보드 정보",
icon: "pe-7s-map-2",
component: Kickboard,
layout: "/admin"
},
......
......@@ -601,7 +601,7 @@ var legendBar = {
module.exports = {
style, // For notifications (App container and Notifications view)
thArray,
tdArray, // For tables (TableList view)
tdArray, // For tables (UserHistory view)
iconsArray, // For icons (Icons view)
dataPie,
legendPie,
......
import React, { useState, useEffect } from "react";
import { Grid, Row, Col, Table } from "react-bootstrap";
import UserDataCard from '../components/UserHistory/UserDataCard';
import UserHistoryCard from '../components/UserHistory/UserHistoryCard';
import SearchButton from "../components/UserHistory/SearchButton";
const UserHistory = (props) => {
const [userId, setUserId] = useState('0');
useEffect(() => {
// componentDidMount > 쿼리 검사하기
},[]);
return (
<div className="content">
<Grid fluid>
<Row>
<Col md={4} mdOffset={8} sm={5} smOffset={7} style={{marginBottom:15}}>
<SearchButton/>
</Col>
</Row>
<Row>
<Col md={12}>
<UserDataCard/>
</Col>
<Col md={12}>
<UserHistoryCard/>
</Col>
</Row>
</Grid>
</div>
);
};
export default UserHistory;