admin: 어드민 대시보드 페이지 구현

Principes-Artis-Mechanicae · Oct 19, 2024 · f0099f6 · f0099f6
1 parent 29000c4
commit f0099f6
Show file tree

Hide file tree

Showing 33 changed files with 1,268 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,10 @@
 # GET-P : Get your People, Get your Projects!
 
 <span>
+<img src="https://img.shields.io/badge/yarn_workspace-2c8ebb?style=for-the-badge&logo=yarn&logoColor=white"/>
 <img src="https://img.shields.io/badge/typescript-3178C6?style=for-the-badge&logo=typescript&logoColor=white"/>
 <img src="https://img.shields.io/badge/vite-646CFF?style=for-the-badge&logo=vite&logoColor=white"/>
+<img src="https://img.shields.io/badge/rollup-ec4a3f?style=for-the-badge&logo=rollupdotjs&logoColor=white"/>
 <img src="https://img.shields.io/badge/react-61DAFB?style=for-the-badge&logo=react&logoColor=white"/>
 <img src="https://img.shields.io/badge/redux-764ABC?style=for-the-badge&logo=redux&logoColor=white"/>
 <img src="https://img.shields.io/badge/tanstack_query-FF4154?style=for-the-badge&logo=reactquery&logoColor=white"/>

diff --git a/get-p-admin/.gitignore b/get-p-admin/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/get-p-admin/eslint.config.js b/get-p-admin/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
diff --git a/get-p-admin/index.html b/get-p-admin/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/get-p-admin/package.json b/get-p-admin/package.json
@@ -0,0 +1,32 @@
+{
+    "name": "get-p-admin",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc -b && vite build",
+        "lint": "eslint .",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "lucide-react": "^0.453.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "recharts": "^2.13.0",
+        "get-p-design": "*"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.11.1",
+        "@types/react": "^18.3.10",
+        "@types/react-dom": "^18.3.0",
+        "@vitejs/plugin-react": "^4.3.2",
+        "eslint": "^9.11.1",
+        "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+        "eslint-plugin-react-refresh": "^0.4.12",
+        "globals": "^15.9.0",
+        "typescript": "^5.5.3",
+        "typescript-eslint": "^8.7.0",
+        "vite": "^5.4.8"
+    }
+}
diff --git a/get-p-admin/public/vite.svg b/get-p-admin/public/vite.svg
diff --git a/get-p-admin/src/__mocks__/data.ts b/get-p-admin/src/__mocks__/data.ts
@@ -0,0 +1,23 @@
+export const mockCoreWebVitalsData = {
+    "/": [
+        { date: "2023-01-01", LCP: 2.5, FID: 100, CLS: 0.1 },
+        { date: "2023-01-02", LCP: 2.3, FID: 90, CLS: 0.08 },
+        { date: "2023-01-03", LCP: 2.4, FID: 95, CLS: 0.09 },
+        { date: "2023-01-04", LCP: 2.2, FID: 85, CLS: 0.07 },
+        { date: "2023-01-05", LCP: 2.1, FID: 80, CLS: 0.06 },
+    ],
+    "/about": [
+        { date: "2023-01-01", LCP: 2.7, FID: 110, CLS: 0.12 },
+        { date: "2023-01-02", LCP: 2.6, FID: 105, CLS: 0.11 },
+        { date: "2023-01-03", LCP: 2.5, FID: 100, CLS: 0.1 },
+        { date: "2023-01-04", LCP: 2.4, FID: 95, CLS: 0.09 },
+        { date: "2023-01-05", LCP: 2.3, FID: 90, CLS: 0.08 },
+    ],
+    "/products": [
+        { date: "2023-01-01", LCP: 2.9, FID: 120, CLS: 0.14 },
+        { date: "2023-01-02", LCP: 2.8, FID: 115, CLS: 0.13 },
+        { date: "2023-01-03", LCP: 2.7, FID: 110, CLS: 0.12 },
+        { date: "2023-01-04", LCP: 2.6, FID: 105, CLS: 0.11 },
+        { date: "2023-01-05", LCP: 2.5, FID: 100, CLS: 0.1 },
+    ],
+};
diff --git a/get-p-admin/src/apps/App.tsx b/get-p-admin/src/apps/App.tsx
@@ -0,0 +1,45 @@
+import { Fragment, useState } from "react";
+import styled from "@emotion/styled";
+
+import { mockCoreWebVitalsData } from "../__mocks__/data";
+
+import { Title } from "get-p-design";
+
+import CoreWebVitals from "../components/CoreWebVitals";
+import { Sidebar, SidebarContent } from "../components/SideBar";
+import { RouterProvider } from "react-router-dom";
+import { router } from "./router";
+import { Global } from "@emotion/react";
+import { resetStyles, rootStyles } from "../styles/root";
+
+export default function App() {
+    return (
+        <Fragment>
+            <Global styles={[resetStyles, rootStyles]} />
+            <RouterProvider router={router} />
+        </Fragment>
+    );
+}
+
+const Container = styled.div`
+    display: flex;
+    height: 100vh;
+    background-color: #f1f5f9;
+`;
+
+const MainContent = styled.div`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+`;
+
+const DashboardContent = styled.div`
+    flex: 1;
+    padding: 1rem;
+    overflow: auto;
+
+    @media (min-width: 768px) {
+        padding: 2rem;
+    }
+`;
diff --git a/get-p-admin/src/apps/router.tsx b/get-p-admin/src/apps/router.tsx
@@ -0,0 +1,11 @@
+import { createBrowserRouter, createRoutesFromChildren, Route } from "react-router-dom";
+import CoreWebVitals from "../pages/WebVitals";
+import { RootLayout } from "../common/layouts/RootLayout";
+
+export const router = createBrowserRouter(
+    createRoutesFromChildren(
+        <Route path="/" element={<RootLayout />}>
+            <Route path="webvitals" element={<CoreWebVitals />} />
+        </Route>,
+    ),
+);
diff --git a/get-p-admin/src/assets/react.svg b/get-p-admin/src/assets/react.svg
diff --git a/get-p-admin/src/common/components/navigation/SideBar/index.style.ts b/get-p-admin/src/common/components/navigation/SideBar/index.style.ts
@@ -0,0 +1,17 @@
+import styled from "@emotion/styled";
+
+export const Container = styled.aside`
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    gap: 10px;
+
+    width: 250px;
+
+    padding: 1rem;
+
+    background-color: white;
+    box-shadow:
+        0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -1px rgba(0, 0, 0, 0.06);
+`;
diff --git a/get-p-admin/src/common/components/navigation/SideBar/index.tsx b/get-p-admin/src/common/components/navigation/SideBar/index.tsx
@@ -0,0 +1,22 @@
+import { Button, Title } from "get-p-design";
+
+import * as Styles from "./index.style";
+import { menu } from "../../../constants/menu";
+import { useNavigate } from "react-router-dom";
+
+export function SideBar() {
+    const navigate = useNavigate();
+
+    return (
+        <Styles.Container>
+            <Title>GET-P DashBoard</Title>
+            {menu.map((menuItem) => {
+                return (
+                    <Button width="100%" height="40px" variant="outline" onClick={() => navigate(menuItem.path)}>
+                        {menuItem.label}
+                    </Button>
+                );
+            })}
+        </Styles.Container>
+    );
+}
diff --git a/get-p-admin/.gitkeep → ...n/src/common/components/overlays/.gitkeep b/get-p-admin/.gitkeep → ...n/src/common/components/overlays/.gitkeep
diff --git a/get-p-admin/src/common/constants/menu.ts b/get-p-admin/src/common/constants/menu.ts
@@ -0,0 +1,4 @@
+export const menu = [
+    { path: "/webvitals", label: "Core Web Vitals" },
+    { path: "/settings", label: "Settings" },
+];
diff --git a/get-p-admin/src/common/layouts/RootLayout.style.ts b/get-p-admin/src/common/layouts/RootLayout.style.ts
@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+
+export const Main = styled.main`
+    display: flex;
+    height: 100vh;
+`;
+
+export const PageWrapper = styled.div`
+    width: 100%;
+
+    padding: 20px;
+`;
diff --git a/get-p-admin/src/common/layouts/RootLayout.tsx b/get-p-admin/src/common/layouts/RootLayout.tsx
@@ -0,0 +1,14 @@
+import { Outlet } from "react-router-dom";
+import { Main, PageWrapper } from "./RootLayout.style";
+import { SideBar } from "../components/navigation/SideBar";
+
+export const RootLayout = () => {
+    return (
+        <Main>
+            <SideBar />
+            <PageWrapper>
+                <Outlet />
+            </PageWrapper>
+        </Main>
+    );
+};
diff --git a/get-p-admin/src/components/Chart/index.style.ts b/get-p-admin/src/components/Chart/index.style.ts
@@ -0,0 +1,29 @@
+import styled from "@emotion/styled";
+
+export const Card = styled.div`
+    width: 100%;
+    max-width: 400px;
+
+    margin-bottom: 1rem;
+    border-radius: 0.5rem;
+
+    background-color: white;
+    box-shadow:
+        0 1px 3px 0 rgba(0, 0, 0, 0.1),
+        0 1px 2px 0 rgba(0, 0, 0, 0.06);
+`;
+
+export const CardHeader = styled.div`
+    padding: 1rem;
+    border-bottom: 1px solid #e2e8f0;
+`;
+
+export const CardTitle = styled.h3`
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+`;
+
+export const CardContent = styled.div`
+    padding: 1rem;
+`;
diff --git a/get-p-admin/src/components/Chart/index.tsx b/get-p-admin/src/components/Chart/index.tsx
@@ -0,0 +1,40 @@
+import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import * as Styles from "./index.style";
+import { Paragraph } from "get-p-design";
+
+export interface ChartProps {
+    dataKey: string;
+    name: string;
+    unit: string;
+    data: unknown[];
+    color: string;
+}
+
+export const Chart = ({ dataKey, name, unit, data, color }: ChartProps) => {
+    return (
+        <Styles.Card>
+            <Styles.CardHeader>
+                <Styles.CardTitle>{name}</Styles.CardTitle>
+            </Styles.CardHeader>
+            <Styles.CardContent>
+                <ResponsiveContainer width="100%" height={200}>
+                    <LineChart data={data}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey="date" />
+                        <YAxis />
+                        <Tooltip />
+                        <Line
+                            type="monotone"
+                            dataKey={dataKey}
+                            stroke={color}
+                            strokeWidth={2}
+                            dot={{ r: 4 }}
+                            activeDot={{ r: 6 }}
+                        />
+                    </LineChart>
+                </ResponsiveContainer>
+                <Paragraph>Unit: {unit}</Paragraph>
+            </Styles.CardContent>
+        </Styles.Card>
+    );
+};
diff --git a/get-p-admin/src/components/SideBar/index.tsx b/get-p-admin/src/components/SideBar/index.tsx
@@ -0,0 +1 @@
+import styled from "@emotion/styled";
diff --git a/get-p-admin/src/main.tsx b/get-p-admin/src/main.tsx
@@ -0,0 +1,4 @@
+import { createRoot } from "react-dom/client";
+import App from "./apps/App.tsx";
+
+createRoot(document.getElementById("root")!).render(<App />);
diff --git a/get-p-admin/src/pages/DashBoard/.gitkeep b/get-p-admin/src/pages/DashBoard/.gitkeep
diff --git a/get-p-admin/src/pages/WebVitals/index.style.ts b/get-p-admin/src/pages/WebVitals/index.style.ts
@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+
+export const ChartGrid = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+
+    justify-content: center;
+`;