Dashboard 중간저장

egovframe-template-simple-react-contribution/src/themes/index.js

@@ -0,0 +1,64 @@
+import PropTypes from 'prop-types';
+import { useMemo } from 'react';
+
+// material-ui
+import { CssBaseline, StyledEngineProvider } from '@mui/material';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
+// project import
+import Palette from './palette';
+import Typography from './typography';
+import CustomShadows from './shadows';
+import componentsOverride from './overrides';
+
+// ==============================|| DEFAULT THEME - MAIN  ||============================== //
+
+export default function ThemeCustomization({ children }) {
+  const theme = Palette('light', 'default');
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const themeTypography = Typography(`'Public Sans', sans-serif`);
+  const themeCustomShadows = useMemo(() => CustomShadows(theme), [theme]);
+
+  const themeOptions = useMemo(
+    () => ({
+      breakpoints: {
+        values: {
+          xs: 0,
+          sm: 768,
+          md: 1024,
+          lg: 1266,
+          xl: 1536
+        }
+      },
+      direction: 'ltr',
+      mixins: {
+        toolbar: {
+          minHeight: 60,
+          paddingTop: 8,
+          paddingBottom: 8
+        }
+      },
+      palette: theme.palette,
+      customShadows: themeCustomShadows,
+      typography: themeTypography
+    }),
+    [theme, themeTypography, themeCustomShadows]
+  );
+
+  const themes = createTheme(themeOptions);
+  themes.components = componentsOverride(themes);
+
+  return (
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={themes}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </StyledEngineProvider>
+  );
+}
+
+ThemeCustomization.propTypes = {
+  children: PropTypes.node
+};

egovframe-template-simple-react-contribution/src/themes/overrides/Badge.js

@@ -0,0 +1,15 @@
+// ==============================|| OVERRIDES - BADGE ||============================== //
+
+export default function Badge(theme) {
+  return {
+    MuiBadge: {
+      styleOverrides: {
+        standard: {
+          minWidth: theme.spacing(2),
+          height: theme.spacing(2),
+          padding: theme.spacing(0.5)
+        }
+      }
+    }
+  };
+}

egovframe-template-simple-react-contribution/src/themes/overrides/Button.js

@@ -0,0 +1,28 @@
+// ==============================|| OVERRIDES - BUTTON ||============================== //
+
+export default function Button(theme) {
+  const disabledStyle = {
+    '&.Mui-disabled': {
+      backgroundColor: theme.palette.grey[200]
+    }
+  };
+
+  return {
+    MuiButton: {
+      defaultProps: {
+        disableElevation: true
+      },
+      styleOverrides: {
+        root: {
+          fontWeight: 400
+        },
+        contained: {
+          ...disabledStyle
+        },
+        outlined: {
+          ...disabledStyle
+        }
+      }
+    }
+  };
+}

egovframe-template-simple-react-contribution/src/themes/overrides/CardContent.js

@@ -0,0 +1,16 @@
+// ==============================|| OVERRIDES - CARD CONTENT ||============================== //
+
+export default function CardContent() {
+  return {
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          padding: 20,
+          '&:last-child': {
+            paddingBottom: 20
+          }
+        }
+      }
+    }
+  };
+}

egovframe-template-simple-react-contribution/src/themes/overrides/Checkbox.js

@@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - CHECKBOX ||============================== //
+
+export default function Checkbox(theme) {
+  return {
+    MuiCheckbox: {
+      styleOverrides: {
+        root: {
+          color: theme.palette.secondary[300]
+        }
+      }
+    }
+  };
+}

egovframe-template-simple-react-contribution/src/themes/overrides/Chip.js

@@ -0,0 +1,40 @@
+// ==============================|| OVERRIDES - CHIP ||============================== //
+
+export default function Chip(theme) {
+  return {
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: 4,
+          '&:active': {
+            boxShadow: 'none'
+          }
+        },
+        sizeLarge: {
+          fontSize: '1rem',
+          height: 40
+        },
+        light: {
+          color: theme.palette.primary.main,
+          backgroundColor: theme.palette.primary.lighter,
+          borderColor: theme.palette.primary.light,
+          '&.MuiChip-lightError': {
+            color: theme.palette.error.main,
+            backgroundColor: theme.palette.error.lighter,
+            borderColor: theme.palette.error.light
+          },
+          '&.MuiChip-lightSuccess': {
+            color: theme.palette.success.main,
+            backgroundColor: theme.palette.success.lighter,
+            borderColor: theme.palette.success.light
+          },
+          '&.MuiChip-lightWarning': {
+            color: theme.palette.warning.main,
+            backgroundColor: theme.palette.warning.lighter,
+            borderColor: theme.palette.warning.light
+          }
+        }
+      }
+    }
+  };
+}

egovframe-template-simple-react-contribution/src/themes/overrides/IconButton.js

@@ -0,0 +1,28 @@
+// ==============================|| OVERRIDES - ICON BUTTON ||============================== //
+
+export default function IconButton(theme) {
+  return {
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 4
+        },
+        sizeLarge: {
+          width: theme.spacing(5.5),
+          height: theme.spacing(5.5),
+          fontSize: '1.25rem'
+        },
+        sizeMedium: {
+          width: theme.spacing(4.5),
+          height: theme.spacing(4.5),
+          fontSize: '1rem'
+        },
+        sizeSmall: {
+          width: theme.spacing(3.75),
+          height: theme.spacing(3.75),
+          fontSize: '0.75rem'
+        }
+      }
+    }
+  };
+}

egovframe-template-simple-react-contribution/src/themes/overrides/InputLabel.js

@@ -0,0 +1,25 @@
+// ==============================|| OVERRIDES - INPUT LABEL ||============================== //
+
+export default function InputLabel(theme) {
+  return {
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          color: theme.palette.grey[600]
+        },
+        outlined: {
+          lineHeight: '0.8em',
+          '&.MuiInputLabel-sizeSmall': {
+            lineHeight: '1em'
+          },
+          '&.MuiInputLabel-shrink': {
+            background: theme.palette.background.paper,
+            padding: '0 8px',
+            marginLeft: -6,
+            lineHeight: '1.4375em'
+          }
+        }
+      }
+    }
+  };
+}

egovframe-template-simple-react-contribution/src/themes/overrides/LinearProgress.js

@@ -0,0 +1,17 @@
+// ==============================|| OVERRIDES - LINER PROGRESS ||============================== //
+
+export default function LinearProgress() {
+  return {
+    MuiLinearProgress: {
+      styleOverrides: {
+        root: {
+          height: 6,
+          borderRadius: 100
+        },
+        bar: {
+          borderRadius: 100
+        }
+      }
+    }
+  };
+}

egovframe-template-simple-react-contribution/src/themes/overrides/Link.js

@@ -0,0 +1,11 @@
+// ==============================|| OVERRIDES - LINK ||============================== //
+
+export default function Link() {
+  return {
+    MuiLink: {
+      defaultProps: {
+        underline: 'hover'
+      }
+    }
+  };
+}

egovframe-template-simple-react-contribution/src/themes/overrides/ListItemIcon.js

@@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - LIST ITEM ICON ||============================== //
+
+export default function ListItemIcon() {
+  return {
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: {
+          minWidth: 24
+        }
+      }
+    }
+  };
+}

egovframe-template-simple-react-contribution/src/themes/overrides/OutlinedInput.js

@@ -0,0 +1,47 @@
+// material-ui
+import { alpha } from '@mui/material/styles';
+
+// ==============================|| OVERRIDES - OUTLINED INPUT ||============================== //
+
+export default function OutlinedInput(theme) {
+  return {
+    MuiOutlinedInput: {
+      styleOverrides: {
+        input: {
+          padding: '10.5px 14px 10.5px 12px'
+        },
+        notchedOutline: {
+          borderColor: theme.palette.grey[300]
+        },
+        root: {
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: theme.palette.primary.light
+          },
+          '&.Mui-focused': {
+            boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}`,
+            '& .MuiOutlinedInput-notchedOutline': {
+              border: `1px solid ${theme.palette.primary.light}`
+            }
+          },
+          '&.Mui-error': {
+            '&:hover .MuiOutlinedInput-notchedOutline': {
+              borderColor: theme.palette.error.light
+            },
+            '&.Mui-focused': {
+              boxShadow: `0 0 0 2px ${alpha(theme.palette.error.main, 0.2)}`,
+              '& .MuiOutlinedInput-notchedOutline': {
+                border: `1px solid ${theme.palette.error.light}`
+              }
+            }
+          }
+        },
+        inputSizeSmall: {
+          padding: '7.5px 8px 7.5px 12px'
+        },
+        inputMultiline: {
+          padding: 0
+        }
+      }
+    }
+  };
+}

egovframe-template-simple-react-contribution/src/themes/overrides/Tab.js

@@ -0,0 +1,14 @@
+// ==============================|| OVERRIDES - TAB ||============================== //
+
+export default function Tab(theme) {
+  return {
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          minHeight: 46,
+          color: theme.palette.text.primary
+        }
+      }
+    }
+  };
+}

egovframe-template-simple-react-contribution/src/themes/overrides/TableCell.js

@@ -0,0 +1,20 @@
+// ==============================|| OVERRIDES - TABLE CELL ||============================== //
+
+export default function TableCell(theme) {
+  return {
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          fontSize: '0.875rem',
+          padding: 12,
+          borderColor: theme.palette.divider
+        },
+        head: {
+          fontWeight: 600,
+          paddingTop: 20,
+          paddingBottom: 20
+        }
+      }
+    }
+  };
+}

egovframe-template-simple-react-contribution/src/themes/overrides/Tabs.js

@@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - TABS ||============================== //
+
+export default function Tabs() {
+  return {
+    MuiTabs: {
+      styleOverrides: {
+        vertical: {
+          overflow: 'visible'
+        }
+      }
+    }
+  };
+}

egovframe-template-simple-react-contribution/src/themes/overrides/Typography.js

@@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - TYPOGRAPHY ||============================== //
+
+export default function Typography() {
+  return {
+    MuiTypography: {
+      styleOverrides: {
+        gutterBottom: {
+          marginBottom: 12
+        }
+      }
+    }
+  };
+}

egovframe-template-simple-react-contribution/src/themes/overrides/index.js

@@ -0,0 +1,41 @@
+// third-party
+import { merge } from 'lodash';
+
+// project import
+import Badge from './Badge';
+import Button from './Button';
+import CardContent from './CardContent';
+import Checkbox from './Checkbox';
+import Chip from './Chip';
+import IconButton from './IconButton';
+import InputLabel from './InputLabel';
+import LinearProgress from './LinearProgress';
+import Link from './Link';
+import ListItemIcon from './ListItemIcon';
+import OutlinedInput from './OutlinedInput';
+import Tab from './Tab';
+import TableCell from './TableCell';
+import Tabs from './Tabs';
+import Typography from './Typography';
+
+// ==============================|| OVERRIDES - MAIN ||============================== //
+
+export default function ComponentsOverrides(theme) {
+  return merge(
+    Button(theme),
+    Badge(theme),
+    CardContent(),
+    Checkbox(theme),
+    Chip(theme),
+    IconButton(theme),
+    InputLabel(theme),
+    LinearProgress(),
+    Link(),
+    ListItemIcon(),
+    OutlinedInput(theme),
+    Tab(theme),
+    TableCell(theme),
+    Tabs(),
+    Typography()
+  );
+}

egovframe-template-simple-react-contribution/src/themes/palette.js

@@ -0,0 +1,60 @@
+// material-ui
+import { createTheme } from '@mui/material/styles';
+
+// third-party
+import { presetPalettes } from '@ant-design/colors';
+
+// project import
+import ThemeOption from './theme';
+
+// ==============================|| DEFAULT THEME - PALETTE  ||============================== //
+
+const Palette = (mode) => {
+  const colors = presetPalettes;
+
+  const greyPrimary = [
+    '#ffffff',
+    '#fafafa',
+    '#f5f5f5',
+    '#f0f0f0',
+    '#d9d9d9',
+    '#bfbfbf',
+    '#8c8c8c',
+    '#595959',
+    '#262626',
+    '#141414',
+    '#000000'
+  ];
+  const greyAscent = ['#fafafa', '#bfbfbf', '#434343', '#1f1f1f'];
+  const greyConstant = ['#fafafb', '#e6ebf1'];
+
+  colors.grey = [...greyPrimary, ...greyAscent, ...greyConstant];
+
+  const paletteColor = ThemeOption(colors);
+
+  return createTheme({
+    palette: {
+      mode,
+      common: {
+        black: '#000',
+        white: '#fff'
+      },
+      ...paletteColor,
+      text: {
+        primary: paletteColor.grey[700],
+        secondary: paletteColor.grey[500],
+        disabled: paletteColor.grey[400]
+      },
+      action: {
+        disabled: paletteColor.grey[300]
+      },
+      divider: paletteColor.grey[200],
+      background: {
+        paper: paletteColor.grey[0],
+        default: paletteColor.grey.A50
+      }
+    }
+  });
+};
+
+export default Palette;

egovframe-template-simple-react-contribution/src/themes/shadows.js

@@ -0,0 +1,13 @@
+// material-ui
+import { alpha } from '@mui/material/styles';
+
+// ==============================|| DEFAULT THEME - CUSTOM SHADOWS  ||============================== //
+
+const CustomShadows = (theme) => ({
+  button: `0 2px #0000000b`,
+  text: `0 -1px 0 rgb(0 0 0 / 12%)`,
+  z1: `0px 2px 8px ${alpha(theme.palette.grey[900], 0.15)}`
+  // only available in paid version
+});
+
+export default CustomShadows;

egovframe-template-simple-react-contribution/src/themes/theme/index.js

@@ -0,0 +1,92 @@
+// ==============================|| PRESET THEME - THEME SELECTOR ||============================== //
+
+const Theme = (colors) => {
+  const { blue, red, gold, cyan, green, grey } = colors;
+  const greyColors = {
+    0: grey[0],
+    50: grey[1],
+    100: grey[2],
+    200: grey[3],
+    300: grey[4],
+    400: grey[5],
+    500: grey[6],
+    600: grey[7],
+    700: grey[8],
+    800: grey[9],
+    900: grey[10],
+    A50: grey[15],
+    A100: grey[11],
+    A200: grey[12],
+    A400: grey[13],
+    A700: grey[14],
+    A800: grey[16]
+  };
+  const contrastText = '#fff';
+
+  return {
+    primary: {
+      lighter: blue[0],
+      100: blue[1],
+      200: blue[2],
+      light: blue[3],
+      400: blue[4],
+      main: blue[5],
+      dark: blue[6],
+      700: blue[7],
+      darker: blue[8],
+      900: blue[9],
+      contrastText
+    },
+    secondary: {
+      lighter: greyColors[100],
+      100: greyColors[100],
+      200: greyColors[200],
+      light: greyColors[300],
+      400: greyColors[400],
+      main: greyColors[500],
+      600: greyColors[600],
+      dark: greyColors[700],
+      800: greyColors[800],
+      darker: greyColors[900],
+      A100: greyColors[0],
+      A200: greyColors.A400,
+      A300: greyColors.A700,
+      contrastText: greyColors[0]
+    },
+    error: {
+      lighter: red[0],
+      light: red[2],
+      main: red[4],
+      dark: red[7],
+      darker: red[9],
+      contrastText
+    },
+    warning: {
+      lighter: gold[0],
+      light: gold[3],
+      main: gold[5],
+      dark: gold[7],
+      darker: gold[9],
+      contrastText: greyColors[100]
+    },
+    info: {
+      lighter: cyan[0],
+      light: cyan[3],
+      main: cyan[5],
+      dark: cyan[7],
+      darker: cyan[9],
+      contrastText
+    },
+    success: {
+      lighter: green[0],
+      light: green[3],
+      main: green[5],
+      dark: green[7],
+      darker: green[9],
+      contrastText
+    },
+    grey: greyColors
+  };
+};
+
+export default Theme;

egovframe-template-simple-react-contribution/src/themes/typography.js

@@ -0,0 +1,71 @@
+// ==============================|| DEFAULT THEME - TYPOGRAPHY  ||============================== //
+
+const Typography = (fontFamily) => ({
+  htmlFontSize: 16,
+  fontFamily,
+  fontWeightLight: 300,
+  fontWeightRegular: 400,
+  fontWeightMedium: 500,
+  fontWeightBold: 600,
+  h1: {
+    fontWeight: 600,
+    fontSize: '2.375rem',
+    lineHeight: 1.21
+  },
+  h2: {
+    fontWeight: 600,
+    fontSize: '1.875rem',
+    lineHeight: 1.27
+  },
+  h3: {
+    fontWeight: 600,
+    fontSize: '1.5rem',
+    lineHeight: 1.33
+  },
+  h4: {
+    fontWeight: 600,
+    fontSize: '1.25rem',
+    lineHeight: 1.4
+  },
+  h5: {
+    fontWeight: 600,
+    fontSize: '1rem',
+    lineHeight: 1.5
+  },
+  h6: {
+    fontWeight: 400,
+    fontSize: '0.875rem',
+    lineHeight: 1.57
+  },
+  caption: {
+    fontWeight: 400,
+    fontSize: '0.75rem',
+    lineHeight: 1.66
+  },
+  body1: {
+    fontSize: '0.875rem',
+    lineHeight: 1.57
+  },
+  body2: {
+    fontSize: '0.75rem',
+    lineHeight: 1.66
+  },
+  subtitle1: {
+    fontSize: '0.875rem',
+    fontWeight: 600,
+    lineHeight: 1.57
+  },
+  subtitle2: {
+    fontSize: '0.75rem',
+    fontWeight: 500,
+    lineHeight: 1.66
+  },
+  overline: {
+    lineHeight: 1.66
+  },
+  button: {
+    textTransform: 'capitalize'
+  }
+});
+
+export default Typography;