✨ frontend add

frontend/admin/src/styles/darkTheme.ts

@@ -0,0 +1,30 @@
+import { createTheme, colors } from '@material-ui/core'
+import typography from './typography'
+import shadows from './shadows'
+
+/**
+ * @TODO
+ * custom theme에 필요한 것들 지정
+ */
+
+// Create a theme instance.
+const darkTheme = createTheme({
+  palette: {
+    background: {
+      default: '#192038',
+      paper: colors.common.black,
+    },
+    primary: {
+      contrastText: '#192038',
+      main: '#5664d2',
+    },
+    text: {
+      primary: '#f2f6ff',
+      secondary: '#6b778c',
+    },
+  },
+  shadows,
+  typography,
+})
+
+export default darkTheme

frontend/admin/src/styles/global.css

@@ -0,0 +1,3 @@
+/* .ck-editor__editable_inline {
+  min-height: 400px;
+} */

frontend/admin/src/styles/shadows.ts

@@ -0,0 +1,31 @@
+import { Shadows } from '@material-ui/core/styles/shadows'
+
+const shadow: Shadows = [
+  'none',
+  '0 0 0 1px rgba(63,63,68,0.05), 0 1px 2px 0 rgba(63,63,68,0.15)',
+  '0 0 1px 0 rgba(0,0,0,0.31), 0 2px 2px -2px rgba(0,0,0,0.25)',
+  '0 0 1px 0 rgba(0,0,0,0.31), 0 3px 4px -2px rgba(0,0,0,0.25)',
+  '0 0 1px 0 rgba(0,0,0,0.31), 0 3px 4px -2px rgba(0,0,0,0.25)',
+  '0 0 1px 0 rgba(0,0,0,0.31), 0 4px 6px -2px rgba(0,0,0,0.25)',
+  '0 0 1px 0 rgba(0,0,0,0.31), 0 4px 6px -2px rgba(0,0,0,0.25)',
+  '0 0 1px 0 rgba(0,0,0,0.31), 0 4px 8px -2px rgba(0,0,0,0.25)',
+  '0 0 1px 0 rgba(0,0,0,0.31), 0 5px 8px -2px rgba(0,0,0,0.25)',
+  '0 0 1px 0 rgba(0,0,0,0.31), 0 6px 12px -4px rgba(0,0,0,0.25)',
+  '0 0 1px 0 rgba(0,0,0,0.31), 0 7px 12px -4px rgba(0,0,0,0.25)',
+  '0 0 1px 0 rgba(0,0,0,0.31), 0 6px 16px -4px rgba(0,0,0,0.25)',
+  '0 0 1px 0 rgba(0,0,0,0.31), 0 7px 16px -4px rgba(0,0,0,0.25)',
+  '0 0 1px 0 rgba(0,0,0,0.31), 0 8px 18px -8px rgba(0,0,0,0.25)',
+  '0 0 1px 0 rgba(0,0,0,0.31), 0 9px 18px -8px rgba(0,0,0,0.25)',
+  '0 0 1px 0 rgba(0,0,0,0.31), 0 10px 20px -8px rgba(0,0,0,0.25)',
+  '0 0 1px 0 rgba(0,0,0,0.31), 0 11px 20px -8px rgba(0,0,0,0.25)',
+  '0 0 1px 0 rgba(0,0,0,0.31), 0 12px 22px -8px rgba(0,0,0,0.25)',
+  '0 0 1px 0 rgba(0,0,0,0.31), 0 13px 22px -8px rgba(0,0,0,0.25)',
+  '0 0 1px 0 rgba(0,0,0,0.31), 0 14px 24px -8px rgba(0,0,0,0.25)',
+  '0 0 1px 0 rgba(0,0,0,0.31), 0 16px 28px -8px rgba(0,0,0,0.25)',
+  '0 0 1px 0 rgba(0,0,0,0.31), 0 18px 30px -8px rgba(0,0,0,0.25)',
+  '0 0 1px 0 rgba(0,0,0,0.31), 0 20px 32px -8px rgba(0,0,0,0.25)',
+  '0 0 1px 0 rgba(0,0,0,0.31), 0 22px 34px -8px rgba(0,0,0,0.25)',
+  '0 0 1px 0 rgba(0,0,0,0.31), 0 24px 36px -8px rgba(0,0,0,0.25)',
+]
+
+export default shadow

frontend/admin/src/styles/theme.ts

@@ -0,0 +1,25 @@
+import { createTheme, colors } from '@material-ui/core'
+import typography from './typography'
+import shadows from './shadows'
+
+// Create a theme instance.
+const theme = createTheme({
+  palette: {
+    background: {
+      default: '#F4F6F8',
+      paper: colors.common.white,
+    },
+    primary: {
+      contrastText: '#ffffff',
+      main: '#5664d2',
+    },
+    text: {
+      primary: '#172b4d',
+      secondary: '#6b778c',
+    },
+  },
+  shadows,
+  typography,
+})
+
+export default theme

frontend/admin/src/styles/typography.ts

@@ -0,0 +1,35 @@
+export default {
+  h1: {
+    fontWeight: 500,
+    fontSize: 35,
+    letterSpacing: '-0.24px',
+  },
+  h2: {
+    fontWeight: 500,
+    fontSize: 29,
+    letterSpacing: '-0.24px',
+  },
+  h3: {
+    fontWeight: 500,
+    fontSize: 24,
+    letterSpacing: '-0.06px',
+  },
+  h4: {
+    fontWeight: 500,
+    fontSize: 20,
+    letterSpacing: '-0.06px',
+  },
+  h5: {
+    fontWeight: 500,
+    fontSize: 16,
+    letterSpacing: '-0.05px',
+  },
+  h6: {
+    fontWeight: 500,
+    fontSize: 14,
+    letterSpacing: '-0.05px',
+  },
+  overline: {
+    fontWeight: 500,
+  },
+}