Merge branch '3-front-end' into 'master'

Resolve "Front-end 스켈레톤 작성"

Closes #3

See merge request !1

+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  },
+  "include": ["src"]
+}

+{
+  "name": "khubox",
+  "author": "2020-1_KHU_CloudComputing_E",
+  "email": "16wjlee@khu.ac.kr",
+  "licence": "MIT",
+  "version": "0.0.1",
+  "private": false,
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "@material-ui/core": "^4.2.1",
+    "@material-ui/icons": "^4.2.1",
+    "@material-ui/styles": "^4.2.1",
+    "chart.js": "^2.8.0",
+    "clsx": "^1.0.4",
+    "history": "^4.9.0",
+    "moment": "2.24.0",
+    "moment-timezone": "^0.5.28",
+    "node-sass": "^4.12.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.6",
+    "react-chartjs-2": "^2.7.6",
+    "react-dom": "^16.8.6",
+    "react-perfect-scrollbar": "^1.5.3",
+    "react-router-dom": "^5.0.1",
+    "react-scripts": "^3.0.1",
+    "recompose": "^0.30.0",
+    "underscore": "^1.9.1",
+    "uuid": "^3.3.2",
+    "validate.js": "^0.13.1"
+  },
+  "devDependencies": {
+    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-react": "^7.12.4",
+    "prettier": "^1.17.1",
+    "prettier-eslint": "^8.8.2",
+    "prettier-eslint-cli": "^4.7.1",
+    "typescript": "^3.5.1"
+  }
+}

+/*    /index.html   200
\ No newline at end of file

+<svg width="133" height="36" viewBox="0 0 133 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 2">
+<g id="flex">
+<path id="Combined Shape" fill-rule="evenodd" clip-rule="evenodd" d="M0 18.1065C0 27.9411 8.05887 36 18.1065 36C27.9411 36 36 27.9411 36 18.1065C36 8.05887 27.9411 0 18.1065 0C8.05887 0 0 8.05887 0 18.1065ZM33.7263 18.1065C33.7263 26.6854 26.6854 33.7263 18.1065 33.7263C9.34353 33.7263 2.27368 26.714 2.27368 18.1065C2.27368 9.3146 9.3146 2.27368 18.1065 2.27368C26.714 2.27368 33.7263 9.34353 33.7263 18.1065Z" fill="white"/>
+<path id="Oval 3" fill-rule="evenodd" clip-rule="evenodd" d="M16.4288 13.5917C16.7107 13.359 17.0649 13.2318 17.4305 13.2318C17.7922 13.2318 18.1429 13.3564 18.4235 13.5846L22.6335 17.0082C23.0074 17.3123 23.5156 17.3923 23.9648 17.218L25.9502 16.4474C26.1292 16.3779 26.3302 16.4036 26.4851 16.517C27.0788 16.9516 28.5751 18.0497 29.1289 18.482C30.4861 19.5416 31.486 20.25 31.486 20.25C31.486 20.25 31.4686 19.8601 31.486 19.4401C31.846 10.718 25.2324 4.39017 17.8022 4.50144C10.3803 4.61568 4.38132 10.5662 4.50178 18.8354C4.51309 19.5319 4.6193 20.25 4.6193 20.25L6.50953 18.8354L8.80622 17.1806C9.12242 16.9528 9.54513 16.9393 9.87525 17.1464L10.7991 17.7261C11.0088 17.8577 11.2793 17.8402 11.4703 17.6826L16.4288 13.5917Z" fill="white"/>
+<path id="Oval 4" fill-rule="evenodd" clip-rule="evenodd" d="M16.6359 34.7904C18.8195 35.0437 20.6187 34.6644 21.2437 34.486C21.5288 34.4046 22.5941 34.144 22.8452 34.0596C23.6863 33.777 24.9699 33.1782 25.7013 32.7418C26.7957 32.0887 27.5685 31.4007 28.6388 30.4354C31.015 28.2924 32.625 24.3249 32.625 23.92C32.625 23.8287 28.2146 20.5068 26.9191 19.5329C26.7151 19.3796 26.4318 19.4032 26.253 19.5853C26.0843 19.7571 26.0583 20.0226 26.1911 20.2234C26.6343 20.894 27.5743 22.3246 27.6195 22.4617C27.792 22.9849 27.5465 23.2804 27.3009 23.1231C27.0553 22.9658 21.5646 19.2672 21.5646 19.2672L18.2802 16.9963C17.8686 16.7117 17.3068 17.0063 17.3068 17.5066C17.3068 17.5066 17.1957 19.1166 17.1957 20.1676C17.1957 20.5941 17.1518 21.1118 16.6359 21.246C16.3774 21.3132 15.7234 21.3527 15.7234 21.3527L10.1751 20.9334C9.79851 20.905 9.58736 21.358 9.85128 21.6281C9.85128 21.6281 17.1957 26.5849 17.1957 26.9884C17.1957 27.846 14.552 26.4718 12.4773 25.4639C9.95208 24.2372 7.14641 23.1341 6.44734 22.8633C6.34242 22.8227 6.22787 22.8316 6.13033 22.8877C5.52897 23.2335 3.35694 24.4869 3.37515 24.5407C4.0878 26.6437 5.97806 29.7235 8.8419 31.7745C9.987 32.5946 11.3079 33.3606 12.5939 33.8365C14.0645 34.3806 15.6064 34.7904 16.6359 34.7904Z" fill="white"/>
+</g>
+<path id="Devias Material Kit" d="M45.4453 25V10.7812H49.6445C50.901 10.7812 52.0143 11.0612 52.9844 11.6211C53.9609 12.181 54.7161 12.9753 55.25 14.0039C55.7839 15.0326 56.0508 16.2109 56.0508 17.5391V18.252C56.0508 19.5996 55.7806 20.7845 55.2402 21.8066C54.7064 22.8288 53.9414 23.6165 52.9453 24.1699C51.9557 24.7233 50.8197 25 49.5371 25H45.4453ZM47.916 12.7734V23.0273H49.5273C50.8229 23.0273 51.8158 22.6237 52.5059 21.8164C53.2025 21.0026 53.5573 19.8372 53.5703 18.3203V17.5293C53.5703 15.9863 53.235 14.8079 52.5645 13.9941C51.8939 13.1803 50.9206 12.7734 49.6445 12.7734H47.916ZM62.88 25.1953C61.3761 25.1953 60.1554 24.7233 59.2179 23.7793C58.2869 22.8288 57.8214 21.5658 57.8214 19.9902V19.6973C57.8214 18.6426 58.0232 17.7018 58.4269 16.875C58.837 16.0417 59.4099 15.3939 60.1456 14.9316C60.8813 14.4694 61.7016 14.2383 62.6066 14.2383C64.0454 14.2383 65.1554 14.6973 65.9366 15.6152C66.7244 16.5332 67.1183 17.832 67.1183 19.5117V20.4688H60.214C60.2856 21.3411 60.5753 22.0312 61.0831 22.5391C61.5974 23.0469 62.242 23.3008 63.0167 23.3008C64.1039 23.3008 64.9894 22.8613 65.673 21.9824L66.9523 23.2031C66.5291 23.8346 65.9627 24.3262 65.253 24.6777C64.5499 25.0228 63.7589 25.1953 62.88 25.1953ZM62.5968 16.1426C61.9457 16.1426 61.4184 16.3704 61.0148 16.8262C60.6176 17.2819 60.3637 17.9167 60.253 18.7305H64.7745V18.5547C64.7224 17.7604 64.5109 17.1615 64.1398 16.7578C63.7687 16.3477 63.2543 16.1426 62.5968 16.1426ZM72.5022 21.9922L74.7385 14.4336H77.1897L73.5276 25H71.467L67.7756 14.4336H70.2365L72.5022 21.9922ZM81.1478 25H78.7747V14.4336H81.1478V25ZM78.6283 11.6895C78.6283 11.3249 78.7422 11.0221 78.9701 10.7812C79.2044 10.5404 79.5365 10.4199 79.9661 10.4199C80.3958 10.4199 80.7279 10.5404 80.9622 10.7812C81.1966 11.0221 81.3138 11.3249 81.3138 11.6895C81.3138 12.0475 81.1966 12.347 80.9622 12.5879C80.7279 12.8223 80.3958 12.9395 79.9661 12.9395C79.5365 12.9395 79.2044 12.8223 78.9701 12.5879C78.7422 12.347 78.6283 12.0475 78.6283 11.6895ZM89.9985 25C89.8943 24.7982 89.8032 24.4694 89.725 24.0137C88.9698 24.8014 88.0454 25.1953 86.9516 25.1953C85.8904 25.1953 85.0245 24.8926 84.354 24.2871C83.6834 23.6816 83.3481 22.9329 83.3481 22.041C83.3481 20.9147 83.7648 20.0521 84.5981 19.4531C85.4379 18.8477 86.6359 18.5449 88.1918 18.5449H89.6469V17.8516C89.6469 17.3047 89.4939 16.8685 89.1879 16.543C88.8819 16.2109 88.4165 16.0449 87.7915 16.0449C87.2511 16.0449 86.8084 16.1816 86.4633 16.4551C86.1183 16.722 85.9457 17.0638 85.9457 17.4805H83.5727C83.5727 16.901 83.7648 16.3607 84.1489 15.8594C84.533 15.3516 85.0538 14.9544 85.7114 14.668C86.3754 14.3815 87.1144 14.2383 87.9282 14.2383C89.1651 14.2383 90.1515 14.5508 90.8872 15.1758C91.6228 15.7943 92.0004 16.6667 92.02 17.793V22.5586C92.02 23.5091 92.1534 24.2676 92.4204 24.834V25H89.9985ZM87.3911 23.291C87.8598 23.291 88.2993 23.1771 88.7094 22.9492C89.1261 22.7214 89.4386 22.4154 89.6469 22.0312V20.0391H88.3676C87.4887 20.0391 86.8279 20.1921 86.3852 20.498C85.9425 20.804 85.7211 21.237 85.7211 21.7969C85.7211 22.2526 85.8709 22.6172 86.1704 22.8906C86.4763 23.1576 86.8832 23.291 87.3911 23.291ZM100.373 22.1289C100.373 21.7057 100.197 21.3835 99.8453 21.1621C99.5002 20.9408 98.924 20.7454 98.1168 20.5762C97.3095 20.4069 96.6356 20.1921 96.0953 19.9316C94.9104 19.3587 94.3179 18.5286 94.3179 17.4414C94.3179 16.5299 94.702 15.7682 95.4703 15.1562C96.2385 14.5443 97.2151 14.2383 98.4 14.2383C99.663 14.2383 100.682 14.5508 101.457 15.1758C102.238 15.8008 102.628 16.6113 102.628 17.6074H100.255C100.255 17.1517 100.086 16.7741 99.7476 16.4746C99.4091 16.1686 98.9599 16.0156 98.4 16.0156C97.8791 16.0156 97.4527 16.1361 97.1207 16.377C96.7951 16.6178 96.6324 16.9401 96.6324 17.3438C96.6324 17.7083 96.7854 17.9915 97.0914 18.1934C97.3974 18.3952 98.0158 18.6003 98.9468 18.8086C99.8778 19.0104 100.607 19.2546 101.134 19.541C101.668 19.821 102.062 20.1595 102.316 20.5566C102.576 20.9538 102.707 21.4355 102.707 22.002C102.707 22.9525 102.313 23.724 101.525 24.3164C100.737 24.9023 99.7053 25.1953 98.4293 25.1953C97.5634 25.1953 96.7919 25.0391 96.1148 24.7266C95.4377 24.4141 94.9104 23.9844 94.5328 23.4375C94.1552 22.8906 93.9664 22.3014 93.9664 21.6699H96.271C96.3036 22.2298 96.5152 22.6628 96.9058 22.9688C97.2964 23.2682 97.814 23.418 98.4585 23.418C99.0835 23.418 99.5588 23.3008 99.8843 23.0664C100.21 22.8255 100.373 22.513 100.373 22.1289ZM113.963 18.8574L112.351 20.5664V25H109.881V10.7812H112.351V17.4512L113.719 15.7617L117.879 10.7812H120.867L115.584 17.0801L121.17 25H118.24L113.963 18.8574ZM124.737 25H122.364V14.4336H124.737V25ZM122.218 11.6895C122.218 11.3249 122.332 11.0221 122.559 10.7812C122.794 10.5404 123.126 10.4199 123.556 10.4199C123.985 10.4199 124.317 10.5404 124.552 10.7812C124.786 11.0221 124.903 11.3249 124.903 11.6895C124.903 12.0475 124.786 12.347 124.552 12.5879C124.317 12.8223 123.985 12.9395 123.556 12.9395C123.126 12.9395 122.794 12.8223 122.559 12.5879C122.332 12.347 122.218 12.0475 122.218 11.6895ZM130.248 11.8652V14.4336H132.113V16.1914H130.248V22.0898C130.248 22.4935 130.326 22.7865 130.482 22.9688C130.645 23.1445 130.932 23.2324 131.342 23.2324C131.615 23.2324 131.892 23.1999 132.172 23.1348V24.9707C131.632 25.1204 131.111 25.1953 130.609 25.1953C128.786 25.1953 127.875 24.1895 127.875 22.1777V16.1914H126.137V14.4336H127.875V11.8652H130.248Z" fill="white"/>
+</g>
+</svg>

+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto+Slab|Roboto:300,400,500,700"
+      rel="stylesheet"
+    />
+    <title>KHU Box</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

+import React, { Component } from 'react';
+import { Router } from 'react-router-dom';
+import { createBrowserHistory } from 'history';
+import { Chart } from 'react-chartjs-2';
+import { ThemeProvider } from '@material-ui/styles';
+import validate from 'validate.js';
+
+import { chartjs } from './helpers';
+import theme from './theme';
+import 'react-perfect-scrollbar/dist/css/styles.css';
+import './assets/scss/index.scss';
+import validators from './common/validators';
+import Routes from './Routes';
+
+const browserHistory = createBrowserHistory();
+
+Chart.helpers.extend(Chart.elements.Rectangle.prototype, {
+  draw: chartjs.draw
+});
+
+validate.validators = {
+  ...validate.validators,
+  ...validators
+};
+
+export default class App extends Component {
+  render() {
+    return (
+      <ThemeProvider theme={theme}>
+        <Router history={browserHistory}>
+          <Routes />
+        </Router>
+      </ThemeProvider>
+    );
+  }
+}

+import React from 'react';
+import { Switch, Redirect } from 'react-router-dom';
+
+import { RouteWithLayout } from './components';
+import { Main as MainLayout, Minimal as MinimalLayout } from './layouts';
+
+import {
+  Dashboard as DashboardView,
+  RecentFileList as RecentFileListView,
+  MyDrive as MyDriveView,
+  SharedFileList as SharedFileView,
+  Trash as TrashView,
+  Icons as IconsView,
+  Account as AccountView,
+  Settings as SettingsView,
+  SignUp as SignUpView,
+  SignIn as SignInView,
+  NotFound as NotFoundView
+} from './views';
+
+const Routes = () => {
+  return (
+    <Switch>
+      <Redirect
+        exact
+        from="/"
+        to="/my-drive"
+      />
+      <RouteWithLayout
+        component={MyDriveView}
+        exact
+        layout={MainLayout}
+        path="/my-drive"
+      />
+      <RouteWithLayout
+        component={SharedFileView}
+        exact
+        layout={MainLayout}
+        path="/share"
+      />
+      <RouteWithLayout
+        component={RecentFileListView}
+        exact
+        layout={MainLayout}
+        path="/recent"
+      />
+      <RouteWithLayout
+        component={TrashView}
+        exact
+        layout={MainLayout}
+        path="/trash"
+      />
+      <RouteWithLayout
+        component={AccountView}
+        exact
+        layout={MainLayout}
+        path="/account"
+      />
+      <RouteWithLayout
+        component={SettingsView}
+        exact
+        layout={MainLayout}
+        path="/settings"
+      />
+      <RouteWithLayout
+        component={SignUpView}
+        exact
+        layout={MinimalLayout}
+        path="/sign-up"
+      />
+      <RouteWithLayout
+        component={SignInView}
+        exact
+        layout={MinimalLayout}
+        path="/sign-in"
+      />
+      <RouteWithLayout
+        component={NotFoundView}
+        exact
+        layout={MinimalLayout}
+        path="/not-found"
+      />
+      <Redirect to="/not-found" />
+    </Switch>
+  );
+};
+
+export default Routes;

+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  height: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  background-color: #f4f6f8;
+  height: 100%;
+}
+
+a {
+  text-decoration: none;
+}
+
+#root {
+  height: 100%;
+}

+const checked = (value, options) => {
+  if (value !== true) {
+    return options.message || 'must be checked';
+  }
+};
+
+export default {
+  checked
+};

+import React from 'react';
+import { Route } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+const RouteWithLayout = props => {
+  const { layout: Layout, component: Component, ...rest } = props;
+
+  return (
+    <Route
+      {...rest}
+      render={matchProps => (
+        <Layout>
+          <Component {...matchProps} />
+        </Layout>
+      )}
+    />
+  );
+};
+
+RouteWithLayout.propTypes = {
+  component: PropTypes.any.isRequired,
+  layout: PropTypes.any.isRequired,
+  path: PropTypes.string
+};
+
+export default RouteWithLayout;

+export { default } from './RouteWithLayout';

+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/styles';
+import { Paper, Input } from '@material-ui/core';
+import SearchIcon from '@material-ui/icons/Search';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    borderRadius: '4px',
+    alignItems: 'center',
+    padding: theme.spacing(1),
+    display: 'flex',
+    flexBasis: 420
+  },
+  icon: {
+    marginRight: theme.spacing(1),
+    color: theme.palette.text.secondary
+  },
+  input: {
+    flexGrow: 1,
+    fontSize: '14px',
+    lineHeight: '16px',
+    letterSpacing: '-0.05px'
+  }
+}));
+
+const SearchInput = props => {
+  const { className, onChange, style, ...rest } = props;
+
+  const classes = useStyles();
+
+  return (
+    <Paper
+      {...rest}
+      className={clsx(classes.root, className)}
+      style={style}
+    >
+      <SearchIcon className={classes.icon} />
+      <Input
+        {...rest}
+        className={classes.input}
+        disableUnderline
+        onChange={onChange}
+      />
+    </Paper>
+  );
+};
+
+SearchInput.propTypes = {
+  className: PropTypes.string,
+  onChange: PropTypes.func,
+  style: PropTypes.object
+};
+
+export default SearchInput;

+export { default } from './SearchInput';

+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'inline-block',
+    borderRadius: '50%',
+    flexGrow: 0,
+    flexShrink: 0
+  },
+  sm: {
+    height: theme.spacing(1),
+    width: theme.spacing(1)
+  },
+  md: {
+    height: theme.spacing(2),
+    width: theme.spacing(2)
+  },
+  lg: {
+    height: theme.spacing(3),
+    width: theme.spacing(3)
+  },
+  neutral: {
+    backgroundColor: theme.palette.neutral
+  },
+  primary: {
+    backgroundColor: theme.palette.primary.main
+  },
+  info: {
+    backgroundColor: theme.palette.info.main
+  },
+  warning: {
+    backgroundColor: theme.palette.warning.main
+  },
+  danger: {
+    backgroundColor: theme.palette.error.main
+  },
+  success: {
+    backgroundColor: theme.palette.success.main
+  }
+}));
+
+const StatusBullet = props => {
+  const { className, size, color, ...rest } = props;
+
+  const classes = useStyles();
+
+  return (
+    <span
+      {...rest}
+      className={clsx(
+        {
+          [classes.root]: true,
+          [classes[size]]: size,
+          [classes[color]]: color
+        },
+        className
+      )}
+    />
+  );
+};
+
+StatusBullet.propTypes = {
+  className: PropTypes.string,
+  color: PropTypes.oneOf([
+    'neutral',
+    'primary',
+    'info',
+    'success',
+    'warning',
+    'danger'
+  ]),
+  size: PropTypes.oneOf(['sm', 'md', 'lg'])
+};
+
+StatusBullet.defaultProps = {
+  size: 'md',
+  color: 'default'
+};
+
+export default StatusBullet;

+export { default } from './StatusBullet'
\ No newline at end of file

+export { default as SearchInput } from './SearchInput';
+export { default as StatusBullet } from './StatusBullet';
+export { default as RouteWithLayout } from './RouteWithLayout';

+// ChartJS extension rounded bar chart
+// https://codepen.io/jedtrow/full/ygRYgo
+function draw() {
+  const { ctx } = this._chart;
+  const vm = this._view;
+  let { borderWidth } = vm;
+
+  let left;
+  let right;
+  let top;
+  let bottom;
+  let signX;
+  let signY;
+  let borderSkipped;
+  let radius;
+
+  // If radius is less than 0 or is large enough to cause drawing errors a max
+  //      radius is imposed. If cornerRadius is not defined set it to 0.
+  let { cornerRadius } = this._chart.config.options;
+  if (cornerRadius < 0) {
+    cornerRadius = 0;
+  }
+
+  if (typeof cornerRadius === 'undefined') {
+    cornerRadius = 0;
+  }
+
+  if (!vm.horizontal) {
+    // bar
+    left = vm.x - vm.width / 2;
+    right = vm.x + vm.width / 2;
+    top = vm.y;
+    bottom = vm.base;
+    signX = 1;
+    signY = bottom > top ? 1 : -1;
+    borderSkipped = vm.borderSkipped || 'bottom';
+  } else {
+    // horizontal bar
+    left = vm.base;
+    right = vm.x;
+    top = vm.y - vm.height / 2;
+    bottom = vm.y + vm.height / 2;
+    signX = right > left ? 1 : -1;
+    signY = 1;
+    borderSkipped = vm.borderSkipped || 'left';
+  }
+
+  // Canvas doesn't allow us to stroke inside the width so we can
+  // adjust the sizes to fit if we're setting a stroke on the line
+  if (borderWidth) {
+    // borderWidth shold be less than bar width and bar height.
+    const barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom));
+    borderWidth = borderWidth > barSize ? barSize : borderWidth;
+    const halfStroke = borderWidth / 2;
+    // Adjust borderWidth when bar top position is near vm.base(zero).
+    const borderLeft =
+      left + (borderSkipped !== 'left' ? halfStroke * signX : 0);
+    const borderRight =
+      right + (borderSkipped !== 'right' ? -halfStroke * signX : 0);
+    const borderTop = top + (borderSkipped !== 'top' ? halfStroke * signY : 0);
+    const borderBottom =
+      bottom + (borderSkipped !== 'bottom' ? -halfStroke * signY : 0);
+    // not become a vertical line?
+    if (borderLeft !== borderRight) {
+      top = borderTop;
+      bottom = borderBottom;
+    }
+    // not become a horizontal line?
+    if (borderTop !== borderBottom) {
+      left = borderLeft;
+      right = borderRight;
+    }
+  }
+
+  ctx.beginPath();
+  ctx.fillStyle = vm.backgroundColor;
+  ctx.strokeStyle = vm.borderColor;
+  ctx.lineWidth = borderWidth;
+
+  // Corner points, from bottom-left to bottom-right clockwise
+  // | 1 2 |
+  // | 0 3 |
+  const corners = [[left, bottom], [left, top], [right, top], [right, bottom]];
+
+  // Find first (starting) corner with fallback to 'bottom'
+  const borders = ['bottom', 'left', 'top', 'right'];
+  let startCorner = borders.indexOf(borderSkipped, 0);
+  if (startCorner === -1) {
+    startCorner = 0;
+  }
+
+  function cornerAt(index) {
+    return corners[(startCorner + index) % 4];
+  }
+
+  // Draw rectangle from 'startCorner'
+  let corner = cornerAt(0);
+  ctx.moveTo(corner[0], corner[1]);
+
+  for (let i = 1; i < 4; i += 1) {
+    corner = cornerAt(i);
+    let nextCornerId = i + 1;
+    if (nextCornerId === 4) {
+      nextCornerId = 0;
+    }
+
+    const width = corners[2][0] - corners[1][0];
+    const height = corners[0][1] - corners[1][1];
+    const x = corners[1][0];
+    const y = corners[1][1];
+
+    radius = cornerRadius;
+    // Fix radius being too large
+    if (radius > Math.abs(height) / 2) {
+      radius = Math.floor(Math.abs(height) / 2);
+    }
+    if (radius > Math.abs(width) / 2) {
+      radius = Math.floor(Math.abs(width) / 2);
+    }
+
+    if (height < 0) {
+      // Negative values in a standard bar chart
+      const xTl = x;
+      const xTr = x + width;
+      const yTl = y + height;
+      const yTr = y + height;
+
+      const xBl = x;
+      const xBr = x + width;
+      const yBl = y;
+      const yBr = y;
+
+      // Draw
+      ctx.moveTo(xBl + radius, yBl);
+      ctx.lineTo(xBr - radius, yBr);
+      ctx.quadraticCurveTo(xBr, yBr, xBr, yBr - radius);
+      ctx.lineTo(xTr, yTr + radius);
+      ctx.quadraticCurveTo(xTr, yTr, xTr - radius, yTr);
+      ctx.lineTo(xTl + radius, yTl);
+      ctx.quadraticCurveTo(xTl, yTl, xTl, yTl + radius);
+      ctx.lineTo(xBl, yBl - radius);
+      ctx.quadraticCurveTo(xBl, yBl, xBl + radius, yBl);
+    } else if (width < 0) {
+      // Negative values in a horizontal bar chart
+      const xTl = x + width;
+      const xTr = x;
+      const yTl = y;
+      const yTr = y;
+
+      const xBl = x + width;
+      const xBr = x;
+      const yBl = y + height;
+      const yBr = y + height;
+
+      // Draw
+      ctx.moveTo(xBl + radius, yBl);
+      ctx.lineTo(xBr - radius, yBr);
+      ctx.quadraticCurveTo(xBr, yBr, xBr, yBr - radius);
+      ctx.lineTo(xTr, yTr + radius);
+      ctx.quadraticCurveTo(xTr, yTr, xTr - radius, yTr);
+      ctx.lineTo(xTl + radius, yTl);
+      ctx.quadraticCurveTo(xTl, yTl, xTl, yTl + radius);
+      ctx.lineTo(xBl, yBl - radius);
+      ctx.quadraticCurveTo(xBl, yBl, xBl + radius, yBl);
+    } else {
+      // Positive Value
+      ctx.moveTo(x + radius, y);
+      ctx.lineTo(x + width - radius, y);
+      ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+      ctx.lineTo(x + width, y + height - radius);
+      ctx.quadraticCurveTo(
+        x + width,
+        y + height,
+        x + width - radius,
+        y + height
+      );
+      ctx.lineTo(x + radius, y + height);
+      ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+      ctx.lineTo(x, y + radius);
+      ctx.quadraticCurveTo(x, y, x + radius, y);
+    }
+  }
+
+  ctx.fill();
+  if (borderWidth) {
+    ctx.stroke();
+  }
+}
+
+export default {
+  draw
+};

+export default (name = '') =>
+  name
+    .replace(/\s+/, ' ')
+    .split(' ')
+    .slice(0, 2)
+    .map(v => v && v[0].toUpperCase())
+    .join('');

+export { default as chartjs } from './chartjs';
+export { default as getInitials } from './getInitials';

+import React from 'react';
+
+// Material components
+import { SvgIcon } from '@material-ui/core';
+
+export default function Facebook(props) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M9.53144612,22.005 L9.53144612,13.0552149 L6.44166667,13.0552149 L6.44166667,9.49875 L9.53144612,9.49875 L9.53144612,6.68484375 C9.53144612,5.19972656 9.95946769,4.04680661 10.8155103,3.22608401 C11.6715529,2.4053613 12.808485,1.995 14.2263057,1.995 C15.3766134,1.995 16.3129099,2.04710915 17.0351961,2.15132812 L17.0351961,5.3169726 L15.1090998,5.3169726 C14.3868137,5.3169726 13.8919142,5.47330073 13.6244006,5.78595698 C13.4103902,6.04650407 13.3033846,6.46337874 13.3033846,7.03658198 L13.3033846,9.49875 L16.71418,9.49875 L16.2326559,13.0552149 L13.3033846,13.0552149 L13.3033846,22.005 L9.53144612,22.005 Z" />
+    </SvgIcon>
+  );
+}

+import React from 'react';
+
+// Material components
+import { SvgIcon } from '@material-ui/core';
+
+export default function Google(props) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M21,12.2177419 C21,13.9112905 20.6311475,15.4233869 19.8934426,16.7540323 C19.1557377,18.0846776 18.1168031,19.1249998 16.7766393,19.875 C15.4364756,20.6250002 13.8934424,21 12.147541,21 C10.4999998,21 8.97540984,20.5947579 7.57377049,19.7842742 C6.17213115,18.9737905 5.05942604,17.8790323 4.23565574,16.5 C3.41188543,15.1209677 3,13.6209679 3,12 C3,10.3790321 3.41188543,8.87903226 4.23565574,7.5 C5.05942604,6.12096774 6.17213115,5.02620949 7.57377049,4.21572581 C8.97540984,3.40524212 10.4999998,3 12.147541,3 C14.5327871,3 16.5737705,3.78629051 18.2704918,5.35887097 L15.7991803,7.71774194 C15.0122953,6.96774175 14.0655738,6.52016129 12.9590164,6.375 C11.9262295,6.22983871 10.9057375,6.375 9.89754098,6.81048387 C8.88934445,7.24596774 8.07786904,7.89919355 7.46311475,8.77016129 C6.79918033,9.71370968 6.46721311,10.7903228 6.46721311,12 C6.46721311,13.0403228 6.72540984,13.9899192 7.24180328,14.8487903 C7.75819672,15.7076615 8.4467215,16.3971776 9.30737705,16.9173387 C10.1680326,17.4374998 11.1147541,17.6975806 12.147541,17.6975806 C13.2540984,17.6975806 14.2254096,17.455645 15.0614754,16.9717742 C15.7254098,16.5846772 16.2786885,16.0645161 16.7213115,15.4112903 C17.0409838,14.8790321 17.2499998,14.3467744 17.3483607,13.8145161 L12.147541,13.8145161 L12.147541,10.6935484 L20.852459,10.6935484 C20.9508199,11.2258066 21,11.7338712 21,12.2177419 Z" />
+    </SvgIcon>
+  );
+}

+export { default as Facebook } from './Facebook';
+export { default as Google } from './Google';

+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import * as serviceWorker from './serviceWorker';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+serviceWorker.unregister();

+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { makeStyles, useTheme } from '@material-ui/styles';
+import { useMediaQuery } from '@material-ui/core';
+
+import { Sidebar, Topbar, Footer } from './components';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    paddingTop: 56,
+    height: '100%',
+    [theme.breakpoints.up('sm')]: {
+      paddingTop: 64
+    }
+  },
+  shiftContent: {
+    paddingLeft: 240
+  },
+  content: {
+    height: '100%'
+  }
+}));
+
+const Main = props => {
+  const { children } = props;
+
+  const classes = useStyles();
+  const theme = useTheme();
+  const isDesktop = useMediaQuery(theme.breakpoints.up('lg'), {
+    defaultMatches: true
+  });
+
+  const [openSidebar, setOpenSidebar] = useState(false);
+
+  const handleSidebarOpen = () => {
+    setOpenSidebar(true);
+  };
+
+  const handleSidebarClose = () => {
+    setOpenSidebar(false);
+  };
+
+  const shouldOpenSidebar = isDesktop ? true : openSidebar;
+
+  return (
+    <div
+      className={clsx({
+        [classes.root]: true,
+        [classes.shiftContent]: isDesktop
+      })}
+    >
+      <Topbar onSidebarOpen={handleSidebarOpen} />
+      <Sidebar
+        onClose={handleSidebarClose}
+        open={shouldOpenSidebar}
+        variant={isDesktop ? 'persistent' : 'temporary'}
+      />
+      <main className={classes.content}>
+        {children}
+        <Footer />
+      </main>
+    </div>
+  );
+};
+
+Main.propTypes = {
+  children: PropTypes.node
+};
+
+export default Main;

+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/styles';
+import { Typography, Link } from '@material-ui/core';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    padding: theme.spacing(4)
+  }
+}));
+
+const Footer = props => {
+  const { className, ...rest } = props;
+
+  const classes = useStyles();
+
+  return (
+    <div
+      {...rest}
+      className={clsx(classes.root, className)}
+    >
+      <Typography variant="body1">
+        &copy;{' '}
+        <Link
+          component="a"
+          href="https://devias.io/"
+          target="_blank"
+        >
+          Devias IO
+        </Link>
+        . 2019
+      </Typography>
+      <Typography variant="caption">
+        Created with love for the environment. By designers and developers who
+        love to work together in offices!
+      </Typography>
+    </div>
+  );
+};
+
+Footer.propTypes = {
+  className: PropTypes.string
+};
+
+export default Footer;

+export { default } from './Footer';

+import React from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/styles';
+import { Divider, Drawer } from '@material-ui/core';
+import DashboardIcon from '@material-ui/icons/Dashboard';
+import PeopleIcon from '@material-ui/icons/People';
+import ShoppingBasketIcon from '@material-ui/icons/ShoppingBasket';
+import TextFieldsIcon from '@material-ui/icons/TextFields';
+import ImageIcon from '@material-ui/icons/Image';
+import AccountBoxIcon from '@material-ui/icons/AccountBox';
+import SettingsIcon from '@material-ui/icons/Settings';
+import LockOpenIcon from '@material-ui/icons/LockOpen';
+
+import { Profile, SidebarNav, UpgradePlan } from './components';
+
+const useStyles = makeStyles(theme => ({
+  drawer: {
+    width: 240,
+    [theme.breakpoints.up('lg')]: {
+      marginTop: 64,
+      height: 'calc(100% - 64px)'
+    }
+  },
+  root: {
+    backgroundColor: theme.palette.white,
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    padding: theme.spacing(2)
+  },
+  divider: {
+    margin: theme.spacing(2, 0)
+  },
+  nav: {
+    marginBottom: theme.spacing(2)
+  }
+}));
+
+const Sidebar = props => {
+  const { open, variant, onClose, className, ...rest } = props;
+
+  const classes = useStyles();
+
+  const pages = [
+    {
+      title: '내 드라이브',
+      href: '/my-drive',
+      icon: <DashboardIcon />
+    },
+    {
+      title: '공유함',
+      href: '/share',
+      icon: <PeopleIcon />
+    },
+    {
+      title: '최근 열어본 파일',
+      href: '/recent',
+      icon: <ShoppingBasketIcon />
+    },
+    {
+      title: '휴지통',
+      href: '/trash',
+      icon: <LockOpenIcon />
+    },
+    {
+      title: '계정',
+      href: '/account',
+      icon: <AccountBoxIcon />
+    },
+    {
+      title: '설정',
+      href: '/settings',
+      icon: <SettingsIcon />
+    }
+  ];
+
+  return (
+    <Drawer
+      anchor="left"
+      classes={{ paper: classes.drawer }}
+      onClose={onClose}
+      open={open}
+      variant={variant}
+    >
+      <div
+        {...rest}
+        className={clsx(classes.root, className)}
+      >
+        <Profile />
+        <Divider className={classes.divider} />
+        <SidebarNav
+          className={classes.nav}
+          pages={pages}
+        />
+      </div>
+    </Drawer>
+  );
+};
+
+Sidebar.propTypes = {
+  className: PropTypes.string,
+  onClose: PropTypes.func,
+  open: PropTypes.bool.isRequired,
+  variant: PropTypes.string.isRequired
+};
+
+export default Sidebar;

+import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/styles';
+import { Avatar, Typography } from '@material-ui/core';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    minHeight: 'fit-content'
+  },
+  avatar: {
+    width: 60,
+    height: 60
+  },
+  name: {
+    marginTop: theme.spacing(1)
+  }
+}));
+
+const Profile = props => {
+  const { className, ...rest } = props;
+
+  const classes = useStyles();
+
+  const user = {
+    name: '엄준식',
+    avatar: '/images/avatars/avatar_1.png',
+    membership: 'Basic Plan'
+  };
+
+  return (
+    <div
+      {...rest}
+      className={clsx(classes.root, className)}
+    >
+      <Avatar
+        alt="Person"
+        className={classes.avatar}
+        component={RouterLink}
+        src={user.avatar}
+        to="/settings"
+      />
+      <Typography
+        className={classes.name}
+        variant="h4"
+      >
+        {user.name}
+      </Typography>
+      <Typography variant="body2">{user.membership}</Typography>
+    </div>
+  );
+};
+
+Profile.propTypes = {
+  className: PropTypes.string
+};
+
+export default Profile;

+export { default } from './Profile';

+/* eslint-disable react/no-multi-comp */
+/* eslint-disable react/display-name */
+import React, { forwardRef } from 'react';
+import { NavLink as RouterLink } from 'react-router-dom';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/styles';
+import { List, ListItem, Button, colors } from '@material-ui/core';
+
+const useStyles = makeStyles(theme => ({
+  root: {},
+  item: {
+    display: 'flex',
+    paddingTop: 0,
+    paddingBottom: 0
+  },
+  button: {
+    color: colors.blueGrey[800],
+    padding: '10px 8px',
+    justifyContent: 'flex-start',
+    textTransform: 'none',
+    letterSpacing: 0,
+    width: '100%',
+    fontWeight: theme.typography.fontWeightMedium
+  },
+  icon: {
+    color: theme.palette.icon,
+    width: 24,
+    height: 24,
+    display: 'flex',
+    alignItems: 'center',
+    marginRight: theme.spacing(1)
+  },
+  active: {
+    color: theme.palette.primary.main,
+    fontWeight: theme.typography.fontWeightMedium,
+    '& $icon': {
+      color: theme.palette.primary.main
+    }
+  }
+}));
+
+const CustomRouterLink = forwardRef((props, ref) => (
+  <div
+    ref={ref}
+    style={{ flexGrow: 1 }}
+  >
+    <RouterLink {...props} />
+  </div>
+));
+
+const SidebarNav = props => {
+  const { pages, className, ...rest } = props;
+
+  const classes = useStyles();
+
+  return (
+    <List
+      {...rest}
+      className={clsx(classes.root, className)}
+    >
+      {pages.map(page => (
+        <ListItem
+          className={classes.item}
+          disableGutters
+          key={page.title}
+        >
+          <Button
+            activeClassName={classes.active}
+            className={classes.button}
+            component={CustomRouterLink}
+            to={page.href}
+          >
+            <div className={classes.icon}>{page.icon}</div>
+            {page.title}
+          </Button>
+        </ListItem>
+      ))}
+    </List>
+  );
+};
+
+SidebarNav.propTypes = {
+  className: PropTypes.string,
+  pages: PropTypes.array.isRequired
+};
+
+export default SidebarNav;

+export { default } from './SidebarNav';

+import React from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/styles';
+import { Typography, Button, colors } from '@material-ui/core';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    backgroundColor: colors.grey[50]
+  },
+  media: {
+    paddingTop: theme.spacing(2),
+    height: 80,
+    textAlign: 'center',
+    '& > img': {
+      height: '100%',
+      width: 'auto'
+    }
+  },
+  content: {
+    padding: theme.spacing(1, 2)
+  },
+  actions: {
+    padding: theme.spacing(1, 2),
+    display: 'flex',
+    justifyContent: 'center'
+  }
+}));
+
+const UpgradePlan = props => {
+  const { className, ...rest } = props;
+
+  const classes = useStyles();
+
+  return (
+    <div
+      {...rest}
+      className={clsx(classes.root, className)}
+    >
+      <div className={classes.media}>
+        <img
+          alt="Upgrade to PRO"
+          src="/images/undraw_resume_folder_2_arse.svg"
+        />
+      </div>
+      <div className={classes.content}>
+        <Typography
+          align="center"
+          gutterBottom
+          variant="h6"
+        >
+          Upgrade to PRO
+        </Typography>
+        <Typography
+          align="center"
+          variant="body2"
+        >
+          Upgrade to Devias Kit PRO and get even more components
+        </Typography>
+      </div>
+      <div className={classes.actions}>
+        <Button
+          color="primary"
+          component="a"
+          href="https://devias.io/products/devias-kit-pro"
+          variant="contained"
+        >
+          Upgrade
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+UpgradePlan.propTypes = {
+  className: PropTypes.string
+};
+
+export default UpgradePlan;

+export { default } from './UpgradePlan';

+export { default as Profile } from './Profile';
+export { default as SidebarNav } from './SidebarNav';
+export { default as UpgradePlan } from './UpgradePlan';

+export { default } from './Sidebar';

+import React, { useState } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/styles';
+import { AppBar, Toolbar, Badge, Hidden, IconButton } from '@material-ui/core';
+import MenuIcon from '@material-ui/icons/Menu';
+import NotificationsIcon from '@material-ui/icons/NotificationsOutlined';
+import InputIcon from '@material-ui/icons/Input';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    boxShadow: 'none'
+  },
+  flexGrow: {
+    flexGrow: 1
+  },
+  signOutButton: {
+    marginLeft: theme.spacing(1)
+  }
+}));
+
+const Topbar = props => {
+  const { className, onSidebarOpen, ...rest } = props;
+
+  const classes = useStyles();
+
+  const [notifications] = useState([]);
+
+  return (
+    <AppBar
+      {...rest}
+      className={clsx(classes.root, className)}
+    >
+      <Toolbar>
+        <RouterLink to="/">
+          <h1>KHU Box</h1>
+        </RouterLink>
+        <div className={classes.flexGrow} />
+        <Hidden mdDown>
+          <IconButton color="inherit">
+            <Badge
+              badgeContent={notifications.length}
+              color="primary"
+              variant="dot"
+            >
+              <NotificationsIcon />
+            </Badge>
+          </IconButton>
+          <IconButton
+            className={classes.signOutButton}
+            color="inherit"
+          >
+            <InputIcon />
+          </IconButton>
+        </Hidden>
+        <Hidden lgUp>
+          <IconButton
+            color="inherit"
+            onClick={onSidebarOpen}
+          >
+            <MenuIcon />
+          </IconButton>
+        </Hidden>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+Topbar.propTypes = {
+  className: PropTypes.string,
+  onSidebarOpen: PropTypes.func
+};
+
+export default Topbar;

+export { default } from './Topbar';

+export { default as Footer } from './Footer';
+export { default as Sidebar } from './Sidebar';
+export { default as Topbar } from './Topbar';

+export { default } from './Main';

+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/styles';
+
+import { Topbar } from './components';
+
+const useStyles = makeStyles(() => ({
+  root: {
+    paddingTop: 64,
+    height: '100%'
+  },
+  content: {
+    height: '100%'
+  }
+}));
+
+const Minimal = props => {
+  const { children } = props;
+
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Topbar />
+      <main className={classes.content}>{children}</main>
+    </div>
+  );
+};
+
+Minimal.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string
+};
+
+export default Minimal;

+import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/styles';
+import { AppBar, Toolbar } from '@material-ui/core';
+
+const useStyles = makeStyles(() => ({
+  root: {
+    boxShadow: 'none'
+  }
+}));
+
+const Topbar = props => {
+  const { className, ...rest } = props;
+
+  const classes = useStyles();
+
+  return (
+    <AppBar
+      {...rest}
+      className={clsx(classes.root, className)}
+      color="primary"
+      position="fixed"
+    >
+      <Toolbar>
+        <RouterLink to="/">
+          <img
+            alt="Logo"
+            src="/images/logos/logo--white.svg"
+          />
+        </RouterLink>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+Topbar.propTypes = {
+  className: PropTypes.string
+};
+
+export default Topbar;

+export { default } from './Topbar';

+export { default as Topbar } from './Topbar';

+export { default } from './Minimal';

+export { default as Main } from './Main';
+export { default as Minimal } from './Minimal';

+[{"id":1,"name":"MattisNibh.tiff","modifiedAt":"2019-12-20","size":334,"share":false,"sharedAt":"2019-11-19","sharedUser":"Vi de Lloyd"},
+{"id":2,"name":"UltricesPosuereCubilia.mpeg","modifiedAt":"2019-06-12","size":703,"share":true,"sharedAt":"2019-10-10","sharedUser":"Rogerio Baynon"},
+{"id":3,"name":"FuscePosuereFelis.tiff","modifiedAt":"2019-08-09","size":811,"share":true,"sharedAt":"2019-11-18","sharedUser":"Etheline Hynard"},
+{"id":4,"name":"HacHabitassePlatea.xls","modifiedAt":"2020-01-23","size":414,"share":false,"sharedAt":"2020-01-08","sharedUser":"Rudd Skellern"},
+{"id":5,"name":"Vivamus.xls","modifiedAt":"2020-03-14","size":351,"share":false,"sharedAt":"2019-12-12","sharedUser":"Carmelle Plumridege"},
+{"id":6,"name":"BlanditMi.ppt","modifiedAt":"2019-05-09","size":234,"share":false,"sharedAt":"2020-03-12","sharedUser":"Darla Hassey"},
+{"id":7,"name":"ErosVestibulumAc.ppt","modifiedAt":"2019-12-18","size":381,"share":true,"sharedAt":"2019-12-17","sharedUser":"Dame Alenikov"},
+{"id":8,"name":"AcTellusSemper.ppt","modifiedAt":"2019-05-07","size":706,"share":false,"sharedAt":"2020-02-10","sharedUser":"Jules Gutteridge"},
+{"id":9,"name":"SedTinciduntEu.xls","modifiedAt":"2019-07-24","size":746,"share":true,"sharedAt":"2020-04-19","sharedUser":"Peyton Wakeling"},
+{"id":10,"name":"Turpis.tiff","modifiedAt":"2019-12-14","size":132,"share":true,"sharedAt":"2019-07-10","sharedUser":"Felice Tethcote"},
+{"id":11,"name":"Nascetur.mp3","modifiedAt":"2019-12-28","size":218,"share":true,"sharedAt":"2019-05-19","sharedUser":"Lindie Balmann"},
+{"id":12,"name":"Est.ppt","modifiedAt":"2019-07-13","size":467,"share":true,"sharedAt":"2019-08-31","sharedUser":"Nathalia Heinritz"},
+{"id":13,"name":"Egestas.txt","modifiedAt":"2020-04-22","size":690,"share":true,"sharedAt":"2020-04-26","sharedUser":"Eloise Proschke"},
+{"id":14,"name":"Sed.doc","modifiedAt":"2019-10-09","size":691,"share":false,"sharedAt":"2019-08-27","sharedUser":"Janaye Aikin"},
+{"id":15,"name":"InFaucibus.ppt","modifiedAt":"2019-12-10","size":677,"share":false,"sharedAt":"2020-02-09","sharedUser":"Maurizia Swann"},
+{"id":16,"name":"EgetTempus.xls","modifiedAt":"2020-04-07","size":542,"share":false,"sharedAt":"2019-11-16","sharedUser":"Terrence Gummow"},
+{"id":17,"name":"AcNulla.tiff","modifiedAt":"2019-09-12","size":409,"share":true,"sharedAt":"2019-12-03","sharedUser":"Paulie Strawbridge"},
+{"id":18,"name":"LiberoNullam.mov","modifiedAt":"2019-11-29","size":700,"share":true,"sharedAt":"2019-07-07","sharedUser":"Peggi Guildford"},
+{"id":19,"name":"DuisBibendum.xls","modifiedAt":"2020-04-19","size":822,"share":true,"sharedAt":"2019-06-17","sharedUser":"Baron Colles"},
+{"id":20,"name":"AliquetPulvinar.ppt","modifiedAt":"2019-09-11","size":799,"share":true,"sharedAt":"2020-02-13","sharedUser":"Roxanna Elcombe"},
+{"id":21,"name":"Congue.ppt","modifiedAt":"2020-03-28","size":671,"share":true,"sharedAt":"2019-05-11","sharedUser":"Gleda Rabjohn"},
+{"id":22,"name":"IdNulla.xls","modifiedAt":"2019-06-05","size":810,"share":true,"sharedAt":"2019-08-18","sharedUser":"Constantia Windrass"},
+{"id":23,"name":"MaurisLaoreet.mov","modifiedAt":"2019-07-12","size":651,"share":false,"sharedAt":"2019-11-17","sharedUser":"Lynda Paoletto"},
+{"id":24,"name":"EuSapien.mp3","modifiedAt":"2019-08-19","size":50,"share":true,"sharedAt":"2019-10-23","sharedUser":"Bern Rizzello"},
+{"id":25,"name":"Eu.jpeg","modifiedAt":"2020-01-08","size":635,"share":true,"sharedAt":"2019-12-01","sharedUser":"Norah Dumini"},
+{"id":26,"name":"Cras.ppt","modifiedAt":"2020-04-28","size":37,"share":true,"sharedAt":"2019-11-26","sharedUser":"Kelsy Stebbings"},
+{"id":27,"name":"SapienUt.xls","modifiedAt":"2020-02-10","size":901,"share":true,"sharedAt":"2019-09-13","sharedUser":"Aveline Kemmis"},
+{"id":28,"name":"EgetTempus.ppt","modifiedAt":"2020-03-05","size":652,"share":false,"sharedAt":"2020-04-05","sharedUser":"Steffane Hussy"},
+{"id":29,"name":"ConvallisTortor.mpeg","modifiedAt":"2019-10-05","size":306,"share":false,"sharedAt":"2020-01-20","sharedUser":"Coral Lisciandro"},
+{"id":30,"name":"Sed.pdf","modifiedAt":"2020-03-22","size":965,"share":false,"sharedAt":"2020-02-25","sharedUser":"Dawna Ruprechter"},
+{"id":31,"name":"MollisMolestieLorem.ppt","modifiedAt":"2019-12-12","size":415,"share":true,"sharedAt":"2020-03-06","sharedUser":"Myra Fifield"},
+{"id":32,"name":"APedePosuere.tiff","modifiedAt":"2019-12-01","size":132,"share":false,"sharedAt":"2019-09-03","sharedUser":"Wolfy Boniface"},
+{"id":33,"name":"Proin.jpeg","modifiedAt":"2020-04-21","size":315,"share":false,"sharedAt":"2019-10-13","sharedUser":"Ozzie Orpin"},
+{"id":34,"name":"HacHabitassePlatea.mp3","modifiedAt":"2020-03-09","size":761,"share":false,"sharedAt":"2019-10-09","sharedUser":"Theadora Vaughan"},
+{"id":35,"name":"Vulputate.doc","modifiedAt":"2019-11-22","size":761,"share":false,"sharedAt":"2019-05-18","sharedUser":"Reina Copley"},
+{"id":36,"name":"SitAmet.tiff","modifiedAt":"2019-07-11","size":284,"share":true,"sharedAt":"2019-10-06","sharedUser":"Rhiamon Devon"},
+{"id":37,"name":"ConvallisNullaNeque.tiff","modifiedAt":"2019-12-23","size":201,"share":true,"sharedAt":"2019-05-19","sharedUser":"Dur Pocke"},
+{"id":38,"name":"RhoncusAliquet.xls","modifiedAt":"2019-10-11","size":635,"share":true,"sharedAt":"2019-07-31","sharedUser":"Dori Grellis"},
+{"id":39,"name":"TinciduntEuFelis.doc","modifiedAt":"2019-06-05","size":118,"share":true,"sharedAt":"2019-09-17","sharedUser":"Wylie Warbrick"},
+{"id":40,"name":"Erat.mp3","modifiedAt":"2020-02-13","size":285,"share":false,"sharedAt":"2019-10-06","sharedUser":"Chelsey Marzellano"},
+{"id":41,"name":"VestibulumSitAmet.jpeg","modifiedAt":"2020-04-23","size":262,"share":false,"sharedAt":"2019-11-03","sharedUser":"Marni Harpur"},
+{"id":42,"name":"PorttitorLacusAt.xls","modifiedAt":"2019-11-06","size":301,"share":false,"sharedAt":"2019-08-23","sharedUser":"Gerri Jest"},
+{"id":43,"name":"EratNulla.jpeg","modifiedAt":"2019-10-11","size":788,"share":true,"sharedAt":"2020-01-20","sharedUser":"Ginni Hillatt"},
+{"id":44,"name":"CubiliaCuraeMauris.ppt","modifiedAt":"2019-11-04","size":416,"share":true,"sharedAt":"2019-10-09","sharedUser":"Eolande Garstan"},
+{"id":45,"name":"QuisJusto.avi","modifiedAt":"2020-03-03","size":159,"share":false,"sharedAt":"2020-02-13","sharedUser":"Karl Lyness"},
+{"id":46,"name":"ElementumInHac.avi","modifiedAt":"2019-09-04","size":413,"share":true,"sharedAt":"2019-06-17","sharedUser":"Hugo Challicum"},
+{"id":47,"name":"Adipiscing.tiff","modifiedAt":"2020-01-16","size":510,"share":true,"sharedAt":"2019-08-30","sharedUser":"Leela Larmouth"},
+{"id":48,"name":"Sed.gif","modifiedAt":"2020-02-17","size":778,"share":true,"sharedAt":"2019-12-30","sharedUser":"Koren Timmermann"},
+{"id":49,"name":"QuisqueArcuLibero.xls","modifiedAt":"2020-02-23","size":320,"share":false,"sharedAt":"2020-01-15","sharedUser":"Osborne Sprull"},
+{"id":50,"name":"Ac.ppt","modifiedAt":"2019-07-01","size":644,"share":true,"sharedAt":"2019-10-15","sharedUser":"Brandy Antal"}]

+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read http://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit http://bit.ly/CRA-PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}

+import { createMuiTheme } from '@material-ui/core';
+
+import palette from './palette';
+import typography from './typography';
+import overrides from './overrides';
+
+const theme = createMuiTheme({
+  palette,
+  typography,
+  overrides,
+  zIndex: {
+    appBar: 1200,
+    drawer: 1100
+  }
+});
+
+export default theme;

+export default {
+  contained: {
+    boxShadow:
+      '0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20)',
+    backgroundColor: '#FFFFFF'
+  }
+};

+import palette from '../palette';
+
+export default {
+  root: {
+    color: palette.icon,
+    '&:hover': {
+      backgroundColor: 'rgba(0, 0, 0, 0.03)'
+    }
+  }
+};

+export default {
+  elevation1: {
+    boxShadow: '0 0 0 1px rgba(63,63,68,0.05), 0 1px 3px 0 rgba(63,63,68,0.15)'
+  }
+};

+import palette from '../palette';
+import typography from '../typography';
+
+export default {
+  root: {
+    ...typography.body1,
+    borderBottom: `1px solid ${palette.divider}`
+  }
+};

+import { colors } from '@material-ui/core';
+
+export default {
+  root: {
+    backgroundColor: colors.grey[50]
+  }
+};

+import palette from '../palette';
+
+export default {
+  root: {
+    '&$selected': {
+      backgroundColor: palette.background.default
+    },
+    '&$hover': {
+      '&:hover': {
+        backgroundColor: palette.background.default
+      }
+    }
+  }
+};

+export default {
+  gutterBottom: {
+    marginBottom: 8
+  }
+};

+import MuiButton from './MuiButton';
+import MuiIconButton from './MuiIconButton';
+import MuiPaper from './MuiPaper';
+import MuiTableCell from './MuiTableCell';
+import MuiTableHead from './MuiTableHead';
+import MuiTypography from './MuiTypography';
+
+export default {
+  MuiButton,
+  MuiIconButton,
+  MuiPaper,
+  MuiTableCell,
+  MuiTableHead,
+  MuiTypography
+};

+import { colors } from '@material-ui/core';
+
+const white = '#FFFFFF';
+const black = '#000000';
+
+export default {
+  black,
+  white,
+  primary: {
+    contrastText: white,
+    dark: colors.indigo[900],
+    main: colors.indigo[500],
+    light: colors.indigo[100]
+  },
+  secondary: {
+    contrastText: white,
+    dark: colors.blue[900],
+    main: colors.blue['A400'],
+    light: colors.blue['A400']
+  },
+  success: {
+    contrastText: white,
+    dark: colors.green[900],
+    main: colors.green[600],
+    light: colors.green[400]
+  },
+  info: {
+    contrastText: white,
+    dark: colors.blue[900],
+    main: colors.blue[600],
+    light: colors.blue[400]
+  },
+  warning: {
+    contrastText: white,
+    dark: colors.orange[900],
+    main: colors.orange[600],
+    light: colors.orange[400]
+  },
+  error: {
+    contrastText: white,
+    dark: colors.red[900],
+    main: colors.red[600],
+    light: colors.red[400]
+  },
+  text: {
+    primary: colors.blueGrey[900],
+    secondary: colors.blueGrey[600],
+    link: colors.blue[600]
+  },
+  background: {
+    default: '#F4F6F8',
+    paper: white
+  },
+  icon: colors.blueGrey[600],
+  divider: colors.grey[200]
+};

+import palette from './palette';
+
+export default {
+  h1: {
+    color: palette.text.primary,
+    fontWeight: 500,
+    fontSize: '35px',
+    letterSpacing: '-0.24px',
+    lineHeight: '40px'
+  },
+  h2: {
+    color: palette.text.primary,
+    fontWeight: 500,
+    fontSize: '29px',
+    letterSpacing: '-0.24px',
+    lineHeight: '32px'
+  },
+  h3: {
+    color: palette.text.primary,
+    fontWeight: 500,
+    fontSize: '24px',
+    letterSpacing: '-0.06px',
+    lineHeight: '28px'
+  },
+  h4: {
+    color: palette.text.primary,
+    fontWeight: 500,
+    fontSize: '20px',
+    letterSpacing: '-0.06px',
+    lineHeight: '24px'
+  },
+  h5: {
+    color: palette.text.primary,
+    fontWeight: 500,
+    fontSize: '16px',
+    letterSpacing: '-0.05px',
+    lineHeight: '20px'
+  },
+  h6: {
+    color: palette.text.primary,
+    fontWeight: 500,
+    fontSize: '14px',
+    letterSpacing: '-0.05px',
+    lineHeight: '20px'
+  },
+  subtitle1: {
+    color: palette.text.primary,
+    fontSize: '16px',
+    letterSpacing: '-0.05px',
+    lineHeight: '25px'
+  },
+  subtitle2: {
+    color: palette.text.secondary,
+    fontWeight: 400,
+    fontSize: '14px',
+    letterSpacing: '-0.05px',
+    lineHeight: '21px'
+  },
+  body1: {
+    color: palette.text.primary,
+    fontSize: '14px',
+    letterSpacing: '-0.05px',
+    lineHeight: '21px'
+  },
+  body2: {
+    color: palette.text.secondary,
+    fontSize: '12px',
+    letterSpacing: '-0.04px',
+    lineHeight: '18px'
+  },
+  button: {
+    color: palette.text.primary,
+    fontSize: '14px'
+  },
+  caption: {
+    color: palette.text.secondary,
+    fontSize: '11px',
+    letterSpacing: '0.33px',
+    lineHeight: '13px'
+  },
+  overline: {
+    color: palette.text.secondary,
+    fontSize: '11px',
+    fontWeight: 500,
+    letterSpacing: '0.33px',
+    lineHeight: '13px',
+    textTransform: 'uppercase'
+  }
+};

+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+import { Grid } from '@material-ui/core';
+
+import { AccountProfile, AccountDetails } from './components';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    padding: theme.spacing(4)
+  }
+}));
+
+const Account = () => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Grid
+        container
+        spacing={4}
+      >
+        <Grid
+          item
+          lg={4}
+          md={6}
+          xl={4}
+          xs={12}
+        >
+          <AccountProfile />
+        </Grid>
+        <Grid
+          item
+          lg={8}
+          md={6}
+          xl={8}
+          xs={12}
+        >
+          <AccountDetails />
+        </Grid>
+      </Grid>
+    </div>
+  );
+};
+
+export default Account;

+import React, { useState } from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/styles';
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  CardActions,
+  Divider,
+  Grid,
+  Button,
+  TextField
+} from '@material-ui/core';
+
+const useStyles = makeStyles(() => ({
+  root: {}
+}));
+
+const AccountDetails = props => {
+  const { className, ...rest } = props;
+
+  const classes = useStyles();
+
+  const [values, setValues] = useState({
+    firstName: 'Shen',
+    lastName: 'Zhi',
+    email: 'shen.zhi@devias.io',
+    phone: '',
+    state: 'Alabama',
+    country: 'USA'
+  });
+
+  const handleChange = event => {
+    setValues({
+      ...values,
+      [event.target.name]: event.target.value
+    });
+  };
+
+  const states = [
+    {
+      value: 'alabama',
+      label: 'Alabama'
+    },
+    {
+      value: 'new-york',
+      label: 'New York'
+    },
+    {
+      value: 'san-francisco',
+      label: 'San Francisco'
+    }
+  ];
+
+  return (
+    <Card
+      {...rest}
+      className={clsx(classes.root, className)}
+    >
+      <form
+        autoComplete="off"
+        noValidate
+      >
+        <CardHeader
+          subheader="The information can be edited"
+          title="Profile"
+        />
+        <Divider />
+        <CardContent>
+          <Grid
+            container
+            spacing={3}
+          >
+            <Grid
+              item
+              md={6}
+              xs={12}
+            >
+              <TextField
+                fullWidth
+                helperText="Please specify the first name"
+                label="First name"
+                margin="dense"
+                name="firstName"
+                onChange={handleChange}
+                required
+                value={values.firstName}
+                variant="outlined"
+              />
+            </Grid>
+            <Grid
+              item
+              md={6}
+              xs={12}
+            >
+              <TextField
+                fullWidth
+                label="Last name"
+                margin="dense"
+                name="lastName"
+                onChange={handleChange}
+                required
+                value={values.lastName}
+                variant="outlined"
+              />
+            </Grid>
+            <Grid
+              item
+              md={6}
+              xs={12}
+            >
+              <TextField
+                fullWidth
+                label="Email Address"
+                margin="dense"
+                name="email"
+                onChange={handleChange}
+                required
+                value={values.email}
+                variant="outlined"
+              />
+            </Grid>
+            <Grid
+              item
+              md={6}
+              xs={12}
+            >
+              <TextField
+                fullWidth
+                label="Phone Number"
+                margin="dense"
+                name="phone"
+                onChange={handleChange}
+                type="number"
+                value={values.phone}
+                variant="outlined"
+              />
+            </Grid>
+            <Grid
+              item
+              md={6}
+              xs={12}
+            >
+              <TextField
+                fullWidth
+                label="Select State"
+                margin="dense"
+                name="state"
+                onChange={handleChange}
+                required
+                select
+                // eslint-disable-next-line react/jsx-sort-props
+                SelectProps={{ native: true }}
+                value={values.state}
+                variant="outlined"
+              >
+                {states.map(option => (
+                  <option
+                    key={option.value}
+                    value={option.value}
+                  >
+                    {option.label}
+                  </option>
+                ))}
+              </TextField>
+            </Grid>
+            <Grid
+              item
+              md={6}
+              xs={12}
+            >
+              <TextField
+                fullWidth
+                label="Country"
+                margin="dense"
+                name="country"
+                onChange={handleChange}
+                required
+                value={values.country}
+                variant="outlined"
+              />
+            </Grid>
+          </Grid>
+        </CardContent>
+        <Divider />
+        <CardActions>
+          <Button
+            color="primary"
+            variant="contained"
+          >
+            Save details
+          </Button>
+        </CardActions>
+      </form>
+    </Card>
+  );
+};
+
+AccountDetails.propTypes = {
+  className: PropTypes.string
+};
+
+export default AccountDetails;

+export { default } from './AccountDetails';

+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import moment from 'moment';
+import { makeStyles } from '@material-ui/styles';
+import {
+  Card,
+  CardActions,
+  CardContent,
+  Avatar,
+  Typography,
+  Divider,
+  Button,
+  LinearProgress
+} from '@material-ui/core';
+
+const useStyles = makeStyles(theme => ({
+  root: {},
+  details: {
+    display: 'flex'
+  },
+  avatar: {
+    marginLeft: 'auto',
+    height: 110,
+    width: 100,
+    flexShrink: 0,
+    flexGrow: 0
+  },
+  progress: {
+    marginTop: theme.spacing(2)
+  },
+  uploadButton: {
+    marginRight: theme.spacing(2)
+  }
+}));
+
+const AccountProfile = props => {
+  const { className, ...rest } = props;
+
+  const classes = useStyles();
+
+  const user = {
+    name: '엄준식',
+    membership: 'Basic',
+    avatar: '/images/avatars/avatar_1.png'
+  };
+
+  return (
+    <Card
+      {...rest}
+      className={clsx(classes.root, className)}
+    >
+      <CardContent>
+        <div className={classes.details}>
+          <div>
+            <Typography
+              gutterBottom
+              variant="h2"
+            >
+              {user.name}
+            </Typography>
+            <Typography
+              color="textSecondary"
+              variant="body1"
+            >
+              {user.membership + " Plan"}
+            </Typography>
+          </div>
+          <Avatar
+            className={classes.avatar}
+            src={user.avatar}
+          />
+        </div>
+        <div className={classes.progress}>
+          <Typography variant="body1">저장용량: 70% (7GB/10GB)</Typography>
+          <LinearProgress
+            value={70}
+            variant="determinate"
+          />
+        </div>
+      </CardContent>
+      <Divider />
+      <CardActions>
+        <Button
+          className={classes.uploadButton}
+          color="primary"
+          variant="text"
+        >
+          Upload picture
+        </Button>
+        <Button variant="text">Remove picture</Button>
+      </CardActions>
+    </Card>
+  );
+};
+
+AccountProfile.propTypes = {
+  className: PropTypes.string
+};
+
+export default AccountProfile;

+export { default } from './AccountProfile';

+export { default as AccountDetails } from './AccountDetails';
+export { default as AccountProfile } from './AccountProfile';

+export { default } from './Account';

+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+import { Grid } from '@material-ui/core';
+
+import {
+  Budget,
+  TotalUsers,
+  TasksProgress,
+  TotalProfit,
+  LatestSales,
+  UsersByDevice,
+  LatestProducts,
+  LatestOrders
+} from './components';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    padding: theme.spacing(4)
+  }
+}));
+
+const Dashboard = () => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Grid
+        container
+        spacing={4}
+      >
+        <Grid
+          item
+          lg={3}
+          sm={6}
+          xl={3}
+          xs={12}
+        >
+          <Budget />
+        </Grid>
+        <Grid
+          item
+          lg={3}
+          sm={6}
+          xl={3}
+          xs={12}
+        >
+          <TotalUsers />
+        </Grid>
+        <Grid
+          item
+          lg={3}
+          sm={6}
+          xl={3}
+          xs={12}
+        >
+          <TasksProgress />
+        </Grid>
+        <Grid
+          item
+          lg={3}
+          sm={6}
+          xl={3}
+          xs={12}
+        >
+          <TotalProfit />
+        </Grid>
+        <Grid
+          item
+          lg={8}
+          md={12}
+          xl={9}
+          xs={12}
+        >
+          <LatestSales />
+        </Grid>
+        <Grid
+          item
+          lg={4}
+          md={6}
+          xl={3}
+          xs={12}
+        >
+          <UsersByDevice />
+        </Grid>
+        <Grid
+          item
+          lg={4}
+          md={6}
+          xl={3}
+          xs={12}
+        >
+          <LatestProducts />
+        </Grid>
+        <Grid
+          item
+          lg={8}
+          md={12}
+          xl={9}
+          xs={12}
+        >
+          <LatestOrders />
+        </Grid>
+      </Grid>
+    </div>
+  );
+};
+
+export default Dashboard;

+import React from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/styles';
+import { Card, CardContent, Grid, Typography, Avatar } from '@material-ui/core';
+import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
+import MoneyIcon from '@material-ui/icons/Money';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    height: '100%'
+  },
+  content: {
+    alignItems: 'center',
+    display: 'flex'
+  },
+  title: {
+    fontWeight: 700
+  },
+  avatar: {
+    backgroundColor: theme.palette.error.main,
+    height: 56,
+    width: 56
+  },
+  icon: {
+    height: 32,
+    width: 32
+  },
+  difference: {
+    marginTop: theme.spacing(2),
+    display: 'flex',
+    alignItems: 'center'
+  },
+  differenceIcon: {
+    color: theme.palette.error.dark
+  },
+  differenceValue: {
+    color: theme.palette.error.dark,
+    marginRight: theme.spacing(1)
+  }
+}));
+
+const Budget = props => {
+  const { className, ...rest } = props;
+
+  const classes = useStyles();
+
+  return (
+    <Card
+      {...rest}
+      className={clsx(classes.root, className)}
+    >
+      <CardContent>
+        <Grid
+          container
+          justify="space-between"
+        >
+          <Grid item>
+            <Typography
+              className={classes.title}
+              color="textSecondary"
+              gutterBottom
+              variant="body2"
+            >
+              BUDGET
+            </Typography>
+            <Typography variant="h3">$24,000</Typography>
+          </Grid>
+          <Grid item>
+            <Avatar className={classes.avatar}>
+              <MoneyIcon className={classes.icon} />
+            </Avatar>
+          </Grid>
+        </Grid>
+        <div className={classes.difference}>
+          <ArrowDownwardIcon className={classes.differenceIcon} />
+          <Typography
+            className={classes.differenceValue}
+            variant="body2"
+          >
+            12%
+          </Typography>
+          <Typography
+            className={classes.caption}
+            variant="caption"
+          >
+            Since last month
+          </Typography>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+Budget.propTypes = {
+  className: PropTypes.string
+};
+
+export default Budget;

+export { default } from './Budget';

+import React, { useState } from 'react';
+import clsx from 'clsx';
+import moment from 'moment';
+import PerfectScrollbar from 'react-perfect-scrollbar';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/styles';
+import {
+  Card,
+  CardActions,
+  CardHeader,
+  CardContent,
+  Button,
+  Divider,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Tooltip,
+  TableSortLabel
+} from '@material-ui/core';
+import ArrowRightIcon from '@material-ui/icons/ArrowRight';
+
+import mockData from './data';
+import { StatusBullet } from 'components';
+
+const useStyles = makeStyles(theme => ({
+  root: {},
+  content: {
+    padding: 0
+  },
+  inner: {
+    minWidth: 800
+  },
+  statusContainer: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  status: {
+    marginRight: theme.spacing(1)
+  },
+  actions: {
+    justifyContent: 'flex-end'
+  }
+}));
+
+const statusColors = {
+  delivered: 'success',
+  pending: 'info',
+  refunded: 'danger'
+};
+
+const LatestOrders = props => {
+  const { className, ...rest } = props;
+
+  const classes = useStyles();
+
+  const [orders] = useState(mockData);
+
+  return (
+    <Card
+      {...rest}
+      className={clsx(classes.root, className)}
+    >
+      <CardHeader
+        action={
+          <Button
+            color="primary"
+            size="small"
+            variant="outlined"
+          >
+            New entry
+          </Button>
+        }
+        title="Latest Orders"
+      />
+      <Divider />
+      <CardContent className={classes.content}>
+        <PerfectScrollbar>
+          <div className={classes.inner}>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <TableCell>Order Ref</TableCell>
+                  <TableCell>Customer</TableCell>
+                  <TableCell sortDirection="desc">
+                    <Tooltip
+                      enterDelay={300}
+                      title="Sort"
+                    >
+                      <TableSortLabel
+                        active
+                        direction="desc"
+                      >
+                        Date
+                      </TableSortLabel>
+                    </Tooltip>
+                  </TableCell>
+                  <TableCell>Status</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {orders.map(order => (
+                  <TableRow
+                    hover
+                    key={order.id}
+                  >
+                    <TableCell>{order.ref}</TableCell>
+                    <TableCell>{order.customer.name}</TableCell>
+                    <TableCell>
+                      {moment(order.createdAt).format('DD/MM/YYYY')}
+                    </TableCell>
+                    <TableCell>
+                      <div className={classes.statusContainer}>
+                        <StatusBullet
+                          className={classes.status}
+                          color={statusColors[order.status]}
+                          size="sm"
+                        />
+                        {order.status}
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </PerfectScrollbar>
+      </CardContent>
+      <Divider />
+      <CardActions className={classes.actions}>
+        <Button
+          color="primary"
+          size="small"
+          variant="text"
+        >
+          View all <ArrowRightIcon />
+        </Button>
+      </CardActions>
+    </Card>
+  );
+};
+
+LatestOrders.propTypes = {
+  className: PropTypes.string
+};
+
+export default LatestOrders;

+import uuid from 'uuid/v1';
+
+export default [
+  {
+    id: uuid(),
+    ref: 'CDD1049',
+    amount: 30.5,
+    customer: {
+      name: 'Ekaterina Tankova'
+    },
+    createdAt: 1555016400000,
+    status: 'pending'
+  },
+  {
+    id: uuid(),
+    ref: 'CDD1048',
+    amount: 25.1,
+    customer: {
+      name: 'Cao Yu'
+    },
+    createdAt: 1555016400000,
+    status: 'delivered'
+  },
+  {
+    id: uuid(),
+    ref: 'CDD1047',
+    amount: 10.99,
+    customer: {
+      name: 'Alexa Richardson'
+    },
+    createdAt: 1554930000000,
+    status: 'refunded'
+  },
+  {
+    id: uuid(),
+    ref: 'CDD1046',
+    amount: 96.43,
+    customer: {
+      name: 'Anje Keizer'
+    },
+    createdAt: 1554757200000,
+    status: 'pending'
+  },
+  {
+    id: uuid(),
+    ref: 'CDD1045',
+    amount: 32.54,
+    customer: {
+      name: 'Clarke Gillebert'
+    },
+    createdAt: 1554670800000,
+    status: 'delivered'
+  },
+  {
+    id: uuid(),
+    ref: 'CDD1044',
+    amount: 16.76,
+    customer: {
+      name: 'Adam Denisov'
+    },
+    createdAt: 1554670800000,
+    status: 'delivered'
+  }
+];

+export { default } from './LatestOrders';

+import React, { useState } from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/styles';
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  CardActions,
+  Button,
+  Divider,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  IconButton
+} from '@material-ui/core';
+import ArrowRightIcon from '@material-ui/icons/ArrowRight';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+
+import mockData from './data';
+
+const useStyles = makeStyles(() => ({
+  root: {
+    height: '100%'
+  },
+  content: {
+    padding: 0
+  },
+  image: {
+    height: 48,
+    width: 48
+  },
+  actions: {
+    justifyContent: 'flex-end'
+  }
+}));
+
+const LatestProducts = props => {
+  const { className, ...rest } = props;
+
+  const classes = useStyles();
+
+  const [products] = useState(mockData);
+
+  return (
+    <Card
+      {...rest}
+      className={clsx(classes.root, className)}
+    >
+      <CardHeader
+        subtitle={`${products.length} in total`}
+        title="Latest products"
+      />
+      <Divider />
+      <CardContent className={classes.content}>
+        <List>
+          {products.map((product, i) => (
+            <ListItem
+              divider={i < products.length - 1}
+              key={product.id}
+            >
+              <ListItemAvatar>
+                <img
+                  alt="Product"
+                  className={classes.image}
+                  src={product.imageUrl}
+                />
+              </ListItemAvatar>
+              <ListItemText
+                primary={product.name}
+                secondary={`Updated ${product.updatedAt.fromNow()}`}
+              />
+              <IconButton
+                edge="end"
+                size="small"
+              >
+                <MoreVertIcon />
+              </IconButton>
+            </ListItem>
+          ))}
+        </List>
+      </CardContent>
+      <Divider />
+      <CardActions className={classes.actions}>
+        <Button
+          color="primary"
+          size="small"
+          variant="text"
+        >
+          View all <ArrowRightIcon />
+        </Button>
+      </CardActions>
+    </Card>
+  );
+};
+
+LatestProducts.propTypes = {
+  className: PropTypes.string
+};
+
+export default LatestProducts;

+import uuid from 'uuid/v1';
+import moment from 'moment';
+
+export default [
+  {
+    id: uuid(),
+    name: 'Dropbox',
+    imageUrl: '/images/products/product_1.png',
+    updatedAt: moment().subtract(2, 'hours')
+  },
+  {
+    id: uuid(),
+    name: 'Medium Corporation',
+    imageUrl: '/images/products/product_2.png',
+    updatedAt: moment().subtract(2, 'hours')
+  },
+  {
+    id: uuid(),
+    name: 'Slack',
+    imageUrl: '/images/products/product_3.png',
+    updatedAt: moment().subtract(3, 'hours')
+  },
+  {
+    id: uuid(),
+    name: 'Lyft',
+    imageUrl: '/images/products/product_4.png',
+    updatedAt: moment().subtract(5, 'hours')
+  },
+  {
+    id: uuid(),
+    name: 'GitHub',
+    imageUrl: '/images/products/product_5.png',
+    updatedAt: moment().subtract(9, 'hours')
+  }
+];

+export { default } from './LatestProducts';

+import React from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import { Bar } from 'react-chartjs-2';
+import { makeStyles } from '@material-ui/styles';
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  CardActions,
+  Divider,
+  Button
+} from '@material-ui/core';
+import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
+import ArrowRightIcon from '@material-ui/icons/ArrowRight';
+
+import { data, options } from './chart';
+
+const useStyles = makeStyles(() => ({
+  root: {},
+  chartContainer: {
+    height: 400,
+    position: 'relative'
+  },
+  actions: {
+    justifyContent: 'flex-end'
+  }
+}));
+
+const LatestSales = props => {
+  const { className, ...rest } = props;
+
+  const classes = useStyles();
+
+  return (
+    <Card
+      {...rest}
+      className={clsx(classes.root, className)}
+    >
+      <CardHeader
+        action={
+          <Button
+            size="small"
+            variant="text"
+          >
+            Last 7 days <ArrowDropDownIcon />
+          </Button>
+        }
+        title="Latest Sales"
+      />
+      <Divider />
+      <CardContent>
+        <div className={classes.chartContainer}>
+          <Bar
+            data={data}
+            options={options}
+          />
+        </div>
+      </CardContent>
+      <Divider />
+      <CardActions className={classes.actions}>
+        <Button
+          color="primary"
+          size="small"
+          variant="text"
+        >
+          Overview <ArrowRightIcon />
+        </Button>
+      </CardActions>
+    </Card>
+  );
+};
+
+LatestSales.propTypes = {
+  className: PropTypes.string
+};
+
+export default LatestSales;

+import palette from 'theme/palette';
+
+export const data = {
+  labels: ['1 Aug', '2 Aug', '3 Aug', '4 Aug', '5 Aug', '6 Aug'],
+  datasets: [
+    {
+      label: 'This year',
+      backgroundColor: palette.primary.main,
+      data: [18, 5, 19, 27, 29, 19, 20]
+    },
+    {
+      label: 'Last year',
+      backgroundColor: palette.neutral,
+      data: [11, 20, 12, 29, 30, 25, 13]
+    }
+  ]
+};
+
+export const options = {
+  responsive: true,
+  maintainAspectRatio: false,
+  animation: false,
+  legend: { display: false },
+  cornerRadius: 20,
+  tooltips: {
+    enabled: true,
+    mode: 'index',
+    intersect: false,
+    borderWidth: 1,
+    borderColor: palette.divider,
+    backgroundColor: palette.white,
+    titleFontColor: palette.text.primary,
+    bodyFontColor: palette.text.secondary,
+    footerFontColor: palette.text.secondary
+  },
+  layout: { padding: 0 },
+  scales: {
+    xAxes: [
+      {
+        barThickness: 12,
+        maxBarThickness: 10,
+        barPercentage: 0.5,
+        categoryPercentage: 0.5,
+        ticks: {
+          fontColor: palette.text.secondary
+        },
+        gridLines: {
+          display: false,
+          drawBorder: false
+        }
+      }
+    ],
+    yAxes: [
+      {
+        ticks: {
+          fontColor: palette.text.secondary,
+          beginAtZero: true,
+          min: 0
+        },
+        gridLines: {
+          borderDash: [2],
+          borderDashOffset: [2],
+          color: palette.divider,
+          drawBorder: false,
+          zeroLineBorderDash: [2],
+          zeroLineBorderDashOffset: [2],
+          zeroLineColor: palette.divider
+        }
+      }
+    ]
+  }
+};