feat(client/style): 몇가지 스타일 적용

- mui ThemeProvider를 적용하고 몇 가지 색상을 적용해보았습니다. #342
innovationacademy-kr · Aug 7, 2022 · f34c9cf · f34c9cf
1 parent 5660e7e
commit f34c9cf
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 12 deletions.
diff --git a/packages/client/public/logo192.png b/packages/client/public/logo192.png
diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
@@ -1,16 +1,79 @@
+import { createTheme, ThemeProvider } from '@mui/material';
+import { red } from '@mui/material/colors';
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 import DashBoardPage from './dashboard/presentation/pages/DashBoardPage';
 import Login from './dashboard/presentation/pages/Login';
 
+const Colors = {
+  cyan: '#65C2C2',
+  magenta: '#EA6390',
+  yellow: '#F7C667',
+  blue: '#6492C1',
+  white: '#FFF',
+  grey100: '#F5F5F5',
+};
+
+const theme = createTheme({
+  palette: {
+    mode: 'light',
+    common: {},
+    primary: {
+      main: Colors.cyan,
+    },
+    secondary: {
+      main: Colors.magenta,
+    },
+    // error: {},
+    warning: {
+      main: Colors.yellow,
+    },
+    info: {
+      main: Colors.blue,
+    },
+    // success: {},
+    background: {
+      paper: '#f2f2f2',
+      default: '#fff',
+    },
+  },
+  components: {
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          backgroundColor: Colors.white,
+          boxShadow: 'none',
+          borderBottom: '1px solid #e5e5e5',
+        },
+      },
+    },
+    MuiDrawer: {
+      styleOverrides: {
+        paper: {
+          backgroundColor: Colors.white,
+        },
+      },
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          backgroundColor: Colors.grey100,
+        },
+      },
+    },
+  },
+});
+
 function App() {
   return (
-    <div className="App">
-      <Routes>
-        <Route path="/" element={<Login />} />
-        <Route path="/dashboard" element={<DashBoardPage />} />
-      </Routes>
-    </div>
+    <ThemeProvider theme={theme}>
+      <div className="App">
+        <Routes>
+          <Route path="/" element={<Login />} />
+          <Route path="/dashboard" element={<DashBoardPage />} />
+        </Routes>
+      </div>
+    </ThemeProvider>
   );
 }
 

diff --git a/packages/client/src/dashboard/presentation/components/Sticker/Sticker.tsx b/packages/client/src/dashboard/presentation/components/Sticker/Sticker.tsx
@@ -3,6 +3,7 @@ import StickerContentFactory, {
 } from './StickerContentFactory';
 import useMode from '../../../application/services/useMode';
 import EditToolBar from '../Common/EditToolBar';
+import { Card } from '@mui/material';
 
 interface StickerProps {
   id: string;
@@ -14,15 +15,15 @@ function Sticker(props: StickerProps) {
   const { id, data, handleStickerRemove } = props;
   const { getControlMode } = useMode();
   return (
-    <>
+    <Card>
       {getControlMode() === 'edit' && (
         <EditToolBar type="Sticker" removeItem={handleStickerRemove} id={id} />
       )}
       <StickerContentFactory
         type={data.type}
         contentProps={data.contentProps}
       />
-    </>
+    </Card>
   );
 }
 

diff --git a/packages/client/src/dashboard/presentation/pages/DashBoardPage.tsx b/packages/client/src/dashboard/presentation/pages/DashBoardPage.tsx
@@ -1,4 +1,4 @@
-import { Box, CssBaseline } from '@mui/material';
+import { Box, CssBaseline, Paper } from '@mui/material';
 import AppBar from '../components/AppBar/AppBar';
 import ProfileMenu from '../components/AppBar/ProfileMenu/ProfileMenu';
 import Board from '../components/Board/Board';
@@ -30,7 +30,7 @@ function DashBoardPage() {
           .then((response: any) => response.data)
           .then((data) => setUser(data))
           .catch((error) => {
-            navigate(`/`);
+            // navigate(`/`);
           });
       }
     });
@@ -76,7 +76,7 @@ function DashBoardPage() {
   );
 
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Paper sx={{ display: 'flex', height: '100vh' }}>
       <CssBaseline />
       <AppBar>
         <Logo />
@@ -89,7 +89,7 @@ function DashBoardPage() {
         <Footer />
       </MainArea>
       <ModificationDialog open={open} setOpen={setOpen} />
-    </Box>
+    </Paper>
   );
 }