Feat: 메인 화면 UI 구성 #1

src/components/Copyright.tsx

@@ -0,0 +1,22 @@
+import { Link, Typography, TypographyProps } from "@mui/material";
+import { FC } from "react";
+
+const Copyright: FC<TypographyProps> = (props) => {
+  return (
+    <Typography
+      variant="body2"
+      color="text.secondary"
+      align="center"
+      {...props}
+    >
+      {"Copyright © "}
+      <Link color="inherit" href="/">
+        MoyeoRun
+      </Link>{" "}
+      {new Date().getFullYear()}
+      {"."}
+    </Typography>
+  );
+};
+
+export default Copyright;

src/pages/Main/Chart.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { useTheme } from "@mui/material/styles";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  Label,
+  ResponsiveContainer,
+} from "recharts";
+import Title from "./Title";
+
+// Generate Sales Data
+function createData(time: string, amount?: number) {
+  return { time, amount };
+}
+
+const data = [
+  createData("00:00", 0),
+  createData("03:00", 300),
+  createData("06:00", 600),
+  createData("09:00", 800),
+  createData("12:00", 1500),
+  createData("15:00", 2000),
+  createData("18:00", 2400),
+  createData("21:00", 2400),
+  createData("24:00", undefined),
+];
+
+export default function Chart() {
+  const theme = useTheme();
+
+  return (
+    <React.Fragment>
+      <Title>Today</Title>
+      <ResponsiveContainer>
+        <LineChart
+          data={data}
+          margin={{
+            top: 16,
+            right: 16,
+            bottom: 0,
+            left: 24,
+          }}
+        >
+          <XAxis
+            dataKey="time"
+            stroke={theme.palette.text.secondary}
+            style={theme.typography.body2}
+          />
+          <YAxis
+            stroke={theme.palette.text.secondary}
+            style={theme.typography.body2}
+          >
+            <Label
+              angle={270}
+              position="left"
+              style={{
+                textAnchor: "middle",
+                fill: theme.palette.text.primary,
+                ...theme.typography.body1,
+              }}
+            >
+              Sales ($)
+            </Label>
+          </YAxis>
+          <Line
+            isAnimationActive={false}
+            type="monotone"
+            dataKey="amount"
+            stroke={theme.palette.primary.main}
+            dot={false}
+          />
+        </LineChart>
+      </ResponsiveContainer>
+    </React.Fragment>
+  );
+}

src/pages/Main/Deposits.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import Title from './Title';
+
+function preventDefault(event: React.MouseEvent) {
+  event.preventDefault();
+}
+
+export default function Deposits() {
+  return (
+    <React.Fragment>
+      <Title>Recent Deposits</Title>
+      <Typography component="p" variant="h4">
+        $3,024.00
+      </Typography>
+      <Typography color="text.secondary" sx={{ flex: 1 }}>
+        on 15 March, 2019
+      </Typography>
+      <div>
+        <Link color="primary" href="#" onClick={preventDefault}>
+          View balance
+        </Link>
+      </div>
+    </React.Fragment>
+  );
+}

src/pages/Main/Orders.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import Link from '@mui/material/Link';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Title from './Title';
+
+// Generate Order Data
+function createData(
+  id: number,
+  date: string,
+  name: string,
+  shipTo: string,
+  paymentMethod: string,
+  amount: number,
+) {
+  return { id, date, name, shipTo, paymentMethod, amount };
+}
+
+const rows = [
+  createData(
+    0,
+    '16 Mar, 2019',
+    'Elvis Presley',
+    'Tupelo, MS',
+    'VISA ⠀•••• 3719',
+    312.44,
+  ),
+  createData(
+    1,
+    '16 Mar, 2019',
+    'Paul McCartney',
+    'London, UK',
+    'VISA ⠀•••• 2574',
+    866.99,
+  ),
+  createData(2, '16 Mar, 2019', 'Tom Scholz', 'Boston, MA', 'MC ⠀•••• 1253', 100.81),
+  createData(
+    3,
+    '16 Mar, 2019',
+    'Michael Jackson',
+    'Gary, IN',
+    'AMEX ⠀•••• 2000',
+    654.39,
+  ),
+  createData(
+    4,
+    '15 Mar, 2019',
+    'Bruce Springsteen',
+    'Long Branch, NJ',
+    'VISA ⠀•••• 5919',
+    212.79,
+  ),
+];
+
+function preventDefault(event: React.MouseEvent) {
+  event.preventDefault();
+}
+
+export default function Orders() {
+  return (
+    <React.Fragment>
+      <Title>Recent Orders</Title>
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell>Date</TableCell>
+            <TableCell>Name</TableCell>
+            <TableCell>Ship To</TableCell>
+            <TableCell>Payment Method</TableCell>
+            <TableCell align="right">Sale Amount</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow key={row.id}>
+              <TableCell>{row.date}</TableCell>
+              <TableCell>{row.name}</TableCell>
+              <TableCell>{row.shipTo}</TableCell>
+              <TableCell>{row.paymentMethod}</TableCell>
+              <TableCell align="right">{`$${row.amount}`}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      <Link color="primary" href="#" onClick={preventDefault} sx={{ mt: 3 }}>
+        See more orders
+      </Link>
+    </React.Fragment>
+  );
+}

src/pages/Main/Title.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+
+interface TitleProps {
+  children?: React.ReactNode;
+}
+
+export default function Title(props: TitleProps) {
+  return (
+    <Typography component="h2" variant="h6" color="primary" gutterBottom>
+      {props.children}
+    </Typography>
+  );
+}

src/pages/Main/index.tsx

@@ -0,0 +1,66 @@
+import React, { FC } from "react";
+import { Box, Container, Grid, Paper, Toolbar } from "@mui/material";
+import Deposits from "./Deposits";
+import Orders from "./Orders";
+import Chart from "./Chart";
+import Copyright from "../../components/Copyright";
+
+const Main: FC = () => {
+  return (
+    <Box
+      component="main"
+      sx={{
+        backgroundColor: (theme) =>
+          theme.palette.mode === "light"
+            ? theme.palette.grey[100]
+            : theme.palette.grey[900],
+        flexGrow: 1,
+        height: "100vh",
+        overflow: "auto",
+      }}
+    >
+      <Toolbar />
+      <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+        <Grid container spacing={3}>
+          {/* Chart */}
+          <Grid item xs={12} md={8} lg={9}>
+            <Paper
+              sx={{
+                p: 2,
+                display: "flex",
+                flexDirection: "column",
+                height: 240,
+              }}
+            >
+              <Chart />
+            </Paper>
+          </Grid>
+
+          {/* Recent Deposits */}
+          <Grid item xs={12} md={4} lg={3}>
+            <Paper
+              sx={{
+                p: 2,
+                display: "flex",
+                flexDirection: "column",
+                height: 240,
+              }}
+            >
+              <Deposits />
+            </Paper>
+          </Grid>
+
+          {/* Recent Orders */}
+          <Grid item xs={12}>
+            <Paper sx={{ p: 2, display: "flex", flexDirection: "column" }}>
+              <Orders />
+            </Paper>
+          </Grid>
+        </Grid>
+        <Copyright sx={{ pt: 4 }} />
+      </Container>
+    </Box>
+  );
+};
+
+export default Main;

src/pages/Main/listItems.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import ListSubheader from "@mui/material/ListSubheader";
+import DashboardIcon from "@mui/icons-material/Dashboard";
+import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
+import PeopleIcon from "@mui/icons-material/People";
+import BarChartIcon from "@mui/icons-material/BarChart";
+import LayersIcon from "@mui/icons-material/Layers";
+import AssignmentIcon from "@mui/icons-material/Assignment";
+
+export const mainListItems = (
+  <React.Fragment>
+    <ListItemButton>
+      <ListItemIcon>
+        <DashboardIcon />
+      </ListItemIcon>
+      <ListItemText primary="Dashboard" />
+    </ListItemButton>
+    <ListItemButton>
+      <ListItemIcon>
+        <ShoppingCartIcon />
+      </ListItemIcon>
+      <ListItemText primary="Orders" />
+    </ListItemButton>
+    <ListItemButton>
+      <ListItemIcon>
+        <PeopleIcon />
+      </ListItemIcon>
+      <ListItemText primary="Customers" />
+    </ListItemButton>
+    <ListItemButton>
+      <ListItemIcon>
+        <BarChartIcon />
+      </ListItemIcon>
+      <ListItemText primary="Reports" />
+    </ListItemButton>
+    <ListItemButton>
+      <ListItemIcon>
+        <LayersIcon />
+      </ListItemIcon>
+      <ListItemText primary="Integrations" />
+    </ListItemButton>
+  </React.Fragment>
+);
+
+export const secondaryListItems = (
+  <React.Fragment>
+    <ListSubheader component="div" inset>
+      Saved reports
+    </ListSubheader>
+    <ListItemButton>
+      <ListItemIcon>
+        <AssignmentIcon />
+      </ListItemIcon>
+      <ListItemText primary="Current month" />
+    </ListItemButton>
+    <ListItemButton>
+      <ListItemIcon>
+        <AssignmentIcon />
+      </ListItemIcon>
+      <ListItemText primary="Last quarter" />
+    </ListItemButton>
+    <ListItemButton>
+      <ListItemIcon>
+        <AssignmentIcon />
+      </ListItemIcon>
+      <ListItemText primary="Year-end sale" />
+    </ListItemButton>
+  </React.Fragment>
+);