[feat] TypeScript 적용 및 theme.tsx 에러 수정

frontend-web/package.json

@@ -51,12 +51,23 @@
     ]
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.18.9",
+    "@types/numeral": "^2.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.30.7",
+    "@typescript-eslint/parser": "^5.30.7",
     "eslint": "^8.20.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^3.3.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "^2.7.1",
+    "react-error-overlay": "^6.0.11",
+    "serve": "^14.0.1",
     "typescript": "^4.7.4"
   }
 }

frontend-web/src/pages/Data/Data.tsx

@@ -29,7 +29,7 @@ function Data() {
           <Typography variant="h4">제목 h4</Typography>
           <Typography variant="h5">제목 h5</Typography>
           <Typography variant="h6">제목 h6</Typography>
-          <Typography variant="p">내용</Typography>
+          {/* <Typography variant="p">내용</Typography> */}
         </CardContent>
         <Box sx={{ minWidth: 120 }}>
           <FormControl fullWidth>

frontend-web/src/theme/theme.js

@@ -1,192 +0,0 @@
-import { createTheme } from '@mui/material/styles';
-
-export default createTheme({
-  palette: {
-    type: 'light',
-    primary: {
-      main: '#0a90c3',
-      dark: '#32408c',
-      light: '#2fcbef',
-    },
-    secondary: {
-      main: '#f50057',
-      dark: '#cb0047',
-    },
-  },
-  breakpoints: {
-    values: {
-      xs: 0,
-      sm: 1020,
-      md: 1280,
-      lg: 1920,
-      xl: 1920,
-    },
-  },
-  components: {
-    MuiCssBaseline: {
-      styleOverrides: {
-        'html, body, #root': {
-          width: '100%',
-          height: '100%',
-          // minWidth: isDesktop ? '1280px' : 0,
-          // backgroundColor: colors.layout.general.bodyBg,
-          fontFamily: 'Noto Sans KR',
-          color: '#1F2123',
-        },
-      },
-    },
-    MuiFormControl: {
-      styleOverrides: {
-        root: {
-          label: {
-            // top: '-8px',
-            // transform: 'translate(14px, -2px) scale(0.75)',
-          },
-        },
-      },
-    },
-    MuiMenuItem: {
-      styleOverrides: {
-        root: {
-          minHeight: '36px',
-        },
-      },
-    },
-    MuiButtonBase: {
-      styleOverrides: {
-        root: {
-          whiteSpace: 'pre-wrap',
-        },
-      },
-    },
-    MuiOutlinedInput: {
-      styleOverrides: {
-        root: {
-          borderRadius: '4px',
-          height: '100%',
-
-          '&.Mui-disabled': {
-            backgroundColor: '#f4f4f4',
-            color: '#939393',
-          },
-          '& .MuiInputAdornment-positionEnd.MuiInputAdornment-outlined': {
-            paddingRight: 6,
-          },
-          '&:hover .MuiOutlinedInput-notchedOutline': {
-            border: 'solid 1px #7e869f',
-          },
-          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-            border: 'solid 1px #7e869f',
-          },
-          '& .MuiOutlinedInput-notchedOutline': {
-            borderColor: '#CCCEDD !important',
-          },
-          '& .MuiButtonBase-root.MuiIconButton-root': {
-            marginRight: 0,
-            width: '20px',
-          },
-          '&.MuiInputBase-multiline': {
-            padding: '10px 0',
-          },
-        },
-        input: {
-          padding: '0 10px 0 10px',
-          minHeight: 36,
-          width: '100%',
-          height: '100%',
-        },
-      },
-    },
-    MuiSelect: {
-      styleOverrides: {
-        iconOutlined: {
-          // color: alpha('#1f2123', 0.5),
-        },
-        icon: {
-          top: 'auto', // 'calc(50% - 14px)',
-        },
-        select: {
-          height: 36,
-          lineHeight: '36px',
-          color: '#1f2123', // beta service bulletin dropdown font color
-        },
-      },
-    },
-  },
-  shape: {
-    borderRadius: 4,
-  },
-  props: {
-    MuiAppBar: {
-      color: 'transparent',
-    },
-    MuiList: {
-      dense: true,
-    },
-    MuiMenuItem: {
-      dense: true,
-    },
-    MuiTable: {
-      size: 'small',
-    },
-    MuiButton: {
-      size: 'small',
-    },
-    MuiButtonGroup: {
-      size: 'small',
-    },
-    MuiCheckbox: {
-      size: 'small',
-    },
-    MuiFab: {
-      size: 'small',
-    },
-    MuiFormControl: {
-      margin: 'dense',
-      size: 'small',
-    },
-    MuiFormHelperText: {
-      margin: 'dense',
-    },
-    MuiIconButton: {
-      size: 'small',
-    },
-    MuiInputBase: {
-      margin: 'dense',
-    },
-    MuiInputLabel: {
-      margin: 'dense',
-    },
-    MuiRadio: {
-      size: 'small',
-    },
-    MuiSwitch: {
-      size: 'small',
-    },
-    MuiTextField: {
-      margin: 'dense',
-      size: 'small',
-    },
-  },
-  typography: {
-    h5: {
-      fontSize: '1.4rem',
-      fontWeight: 700,
-    },
-    h6: {
-      fontWeight: 700,
-    },
-    h4: {
-      fontSize: '1.7rem',
-      fontWeight: 700,
-    },
-    h3: {
-      fontSize: '2.5rem',
-      fontWeight: 500,
-    },
-    h2: {
-      fontSize: '3rem',
-      fontWeight: 500,
-    },
-  },
-});

frontend-web/src/theme/theme.tsx

@@ -0,0 +1,166 @@
+import { createTheme } from '@mui/material/styles';
+
+export default createTheme({
+  palette: {
+    mode: 'light',
+    primary: {
+      main: '#0a90c3',
+      dark: '#32408c',
+      light: '#2fcbef',
+    },
+    secondary: {
+      main: '#f50057',
+      dark: '#cb0047',
+    },
+  },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 1020,
+      md: 1280,
+      lg: 1920,
+      xl: 1920,
+    },
+  },
+  components: {
+    MuiAppBar: {
+      defaultProps: {
+        color: 'transparent',
+      },
+    },
+    MuiList: {
+      defaultProps: {
+        dense: true,
+      },
+    },
+    MuiMenuItem: {
+      defaultProps: {
+        dense: true,
+      },
+    },
+    MuiTable: {
+      defaultProps: {
+        size: 'small',
+      },
+    },
+    MuiButton: {
+      defaultProps: {
+        size: 'small',
+      },
+    },
+    MuiButtonGroup: {
+      defaultProps: {
+        size: 'small',
+      },
+    },
+    MuiCheckbox: {
+      defaultProps: {
+        size: 'small',
+      },
+    },
+    MuiFab: {
+      defaultProps: {
+        size: 'small',
+      },
+    },
+    MuiFormControl: {
+      defaultProps: {
+        margin: 'none',
+        size: 'small',
+      },
+    },
+    MuiFormHelperText: {
+      defaultProps: {
+        margin: 'dense',
+      },
+    },
+    MuiIconButton: {
+      defaultProps: {
+        size: 'small',
+      },
+    },
+    MuiInputBase: {
+      defaultProps: {
+        margin: 'dense',
+      },
+    },
+    MuiInputLabel: {
+      defaultProps: {
+        margin: 'dense',
+        size: 'small',
+      },
+    },
+    MuiOutlinedInput: {
+      defaultProps: {
+        margin: 'none',
+      },
+    },
+    MuiRadio: {
+      defaultProps: {
+        size: 'small',
+      },
+    },
+    MuiSwitch: {
+      defaultProps: {
+        size: 'small',
+      },
+    },
+    MuiTextField: {
+      defaultProps: {
+        margin: 'dense',
+        size: 'small',
+      },
+    },
+    MuiTypography: {
+      defaultProps: {
+        variantMapping: {
+          h1: 'h1',
+          h2: 'h2',
+          h3: 'h3',
+          h4: 'p',
+          h5: 'p',
+          h6: 'p',
+        },
+      },
+      styleOverrides: {
+        root: {
+          fontFamily: 'Noto Sans KR',
+        },
+      },
+    },
+    MuiCssBaseline: {
+      styleOverrides: {
+        'html, body, #root': {
+          width: '100%',
+          height: '100%',
+          // minWidth: isDesktop ? '1280px' : 0,
+          // backgroundColor: colors.layout.general.bodyBg,
+          fontFamily: 'Noto Sans KR',
+          color: '#1F2123',
+        },
+      },
+    },
+  },
+
+  typography: {
+    h5: {
+      fontSize: '1.4rem',
+      fontWeight: 700,
+    },
+    h6: {
+      fontWeight: 700,
+    },
+    h4: {
+      fontSize: '1.7rem',
+      fontWeight: 700,
+    },
+    h3: {
+      fontSize: '2.5rem',
+      fontWeight: 500,
+    },
+    h2: {
+      fontSize: '3rem',
+      fontWeight: 500,
+    },
+  },
+});

frontend-web/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "noImplicitAny": false,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": false,
+    "strictNullChecks": false,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src"
+  ],
+  "extends": "./tsconfig.paths.json"
+}

frontend-web/tsconfig.paths.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}