feeature. Add eslint workflow & fix all workflows

Author: Siyeop

.github/workflows/code_quality_workflow.yml

@@ -0,0 +1,43 @@
+
+name: ESLint + Prettier
+
+on: [pull_request]
+
+jobs:
+  lint-format:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '22'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run ESLint with reviewdog
+        id: eslint
+        uses: reviewdog/action-eslint@v1
+        continue-on-error: true
+        with:
+          github_token: ${{ secrets.FRONT_SECRET }}
+          reporter: github-pr-review
+          eslint_flags: './**/*.{js,jsx,ts,tsx}'
+          fail_level: 'any'
+
+      - name: Run Prettier with reviewdog
+        id: prettier
+        uses: EPMatt/reviewdog-action-prettier@v1
+        continue-on-error: true
+        with:
+          github_token: ${{ secrets.FRONT_SECRET }}
+          reporter: github-pr-review
+          level: warning
+          prettier_flags: './**/*.{js,jsx,ts,tsx,json,css,scss,md}'
+
+      - name: Check overall result
+        id: overall
+        if: steps.eslint.outcome == 'failure' || steps.prettier.outcome == 'failure'
+        run: exit 1

.github/workflows/github-pages.yml

@@ -20,6 +20,6 @@ jobs:
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3
         with:
-          github_token: ${{ secrets.COMPONENT_SHOWCASE }}
+          github_token: ${{ secrets.FRONT_SECRET }}
           publish_dir: ./storybook-static
-          jekyll: true
+          enable_jekyll: 'true'

.github/workflows/unit-test.yml

@@ -11,19 +11,17 @@ jobs:
 
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version:
-          - 18.x
-
     steps:
       - name: Checkout
         uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.node-version }}
+
+      - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: '22'
+
       - name: Install Dependencies
         run: npm install
+
       - name: Execute all unit tests
         run: npx jest

.storybook/main.ts renamed to .storybook/main.mts

@@ -1,9 +1,7 @@
-import {mergeConfig} from 'vite';
 import path from 'path';
+import {mergeConfig} from 'vite';
 
-const resolve = (dir) => path.join(__dirname, '.', dir);
-
-module.exports = {
+const config = {
     stories: ['../stories/components/**/*.stories.tsx'],
     framework: {
         name: '@storybook/react-vite',
@@ -16,7 +14,7 @@ module.exports = {
             resolve: {
                 alias: {
                     '@': path.resolve('src'),
-                    'src': path.resolve('src'),
+                    src: path.resolve('src'),
                     '~': path.resolve('src/components'),
                     '~style': path.resolve('src/styles'),
                 },
@@ -25,16 +23,15 @@ module.exports = {
                 preprocessorOptions: {
                     scss: {
                         api: 'modern',
-                        includePaths: [
-                            path.resolve(__dirname, '../node_modules'),
-                            path.resolve(__dirname, '../')
-                        ]
-                    }
-                }
-            }
+                        includePaths: [path.resolve(__dirname, '../node_modules'), path.resolve(__dirname, '../')],
+                    },
+                },
+            },
         });
     },
     docs: {
         autodocs: false,
     },
 };
+
+export default config;

.storybook/preview.ts renamed to .storybook/preview.mts

@@ -1,9 +1,8 @@
+import type {Preview} from '@storybook/react';
+
 import '../src/styles/Entry.scss';
 import './preview.scss';
 
-import {Preview} from '@storybook/react';
-
-
 const preview: Preview = {
     parameters: {
         layout: 'fullscreen',

jest.config.js renamed to jest.config.mjs

@@ -6,6 +6,6 @@ export default {
         '^~/(.*)$': '<rootDir>/src/components/$1',
         '\\.(css|less|scss)$': '<rootDir>/tests/styleMock.js',
     },
-    setupFiles: ['<rootDir>/jest.setup.js'],
+    setupFiles: ['<rootDir>/jest.setup.mjs'],
     setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
 };

jest.setup.js renamed to jest.setup.mjs

@@ -40,7 +40,6 @@
         "@storybook/addon-essentials": "^8.2.4",
         "@storybook/addon-interactions": "^8.2.4",
         "@storybook/addon-links": "^8.2.4",
-        "@storybook/preset-scss": "^1.0.3",
         "@storybook/react": "^8.2.4",
         "@storybook/react-vite": "^8.2.4",
         "@storybook/test": "^8.2.4",
@@ -100,7 +99,7 @@
         "react-tooltip": "^5.21.1"
     },
     "lint-staged": {
-        "*.{js,jsx,ts,tsx}": [
+        "*.{mjs,js,jsx,mts,ts,tsx}": [
             "prettier --write",
             "eslint --fix"
         ]

package.json

@@ -6,5 +6,5 @@
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.mts"]
 }

tsconfig.node.json

@@ -1,12 +1,11 @@
 import path from 'path';
-import {defineConfig, UserConfigExport, type PluginOption, loadEnv} from 'vite';
+import {defineConfig, type PluginOption, UserConfigExport} from 'vite';
 import react from '@vitejs/plugin-react';
 import {visualizer} from 'rollup-plugin-visualizer';
 
 import compression from 'vite-plugin-compression2';
 
-const resolve = (dir) => path.join(__dirname, '.', dir);
-
+const resolve = (dir: string) => path.join(__dirname, '.', dir);
 
 // region [Common Config]
 
@@ -21,8 +20,8 @@ const commonConfig = () => ({
     resolve: {
         extensions: ['.tsx', '.ts', '.scss', '.js'],
         alias: {
-            // IntelliJ doesn't recognize vite alias yet
-            // Aliases should be set in tsconfig.json, main.ts as well
+            // IntelliJ doesn't recognize vite alias, yet
+            // Aliases should be set in tsconfig.json, main.mts as well
             // @See https://youtrack.jetbrains.com/issue/WEB-55332/Vite-aliases-in-vite.config-support
             '@': resolve('src'),
             '~': resolve('src/components'),
@@ -31,21 +30,45 @@ const commonConfig = () => ({
     },
     css: {
         preprocessorOptions: {
-            scss: {
-            },
+            scss: {},
         },
         devSourcemap: true,
     },
     envDir: './dotenv',
     // @formatter:off
-    envPrefix: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
-        'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
+    envPrefix: [
+        'A',
+        'B',
+        'C',
+        'D',
+        'E',
+        'F',
+        'G',
+        'H',
+        'I',
+        'J',
+        'K',
+        'L',
+        'M',
+        'N',
+        'O',
+        'P',
+        'Q',
+        'R',
+        'S',
+        'T',
+        'U',
+        'V',
+        'W',
+        'X',
+        'Y',
+        'Z',
+    ],
     // @formatter:on
 });
 
 // endregion
 
-
 // region [DevServer Config]
 
 const devServerConfig = () => ({
@@ -68,7 +91,6 @@ const devServerConfig = () => ({
 
 // endregion
 
-
 // region [Production Config]
 
 const outputConfig = () => ({
@@ -79,38 +101,34 @@ const outputConfig = () => ({
 
 // endregion
 
-
 /**
  * Vite Manual, Vite 매뉴얼
  * https://vitejs.dev/config/
  * https://vitejs-kr.github.io/
  */
-export default defineConfig(
-    ({mode, command}) => {
-        // dev (dev, serve), preview (prod, serve), build (prod, build)
-
-        let config: UserConfigExport = {...commonConfig()};
-
-        if (command === 'serve') {
-            config = {...config, ...devServerConfig()};
-        }
-        if (mode === 'production') {
-            config = {...config, ...outputConfig()};
-            if (process.env.npm_lifecycle_event === 'analyze') {
-                config.plugins = [
-                    ...config.plugins,
-                    visualizer({
-                        // https://github.com/btd/rollup-plugin-visualizer
-                        title: 'TKS Bundle Report',
-                        filename: './dist/tks-bundle-report.html',
-                        open: true,
-                        gzipSize: true,
-                    }) as unknown as PluginOption,
-                ];
-            }
+export default defineConfig(({mode, command}) => {
+    // dev (dev, serve), preview (prod, serve), build (prod, build)
+
+    let config: UserConfigExport = {...commonConfig()};
+
+    if (command === 'serve') {
+        config = {...config, ...devServerConfig()};
+    }
+    if (mode === 'production') {
+        config = {...config, ...outputConfig()};
+        if (process.env.npm_lifecycle_event === 'analyze') {
+            config.plugins = [
+                ...config.plugins,
+                visualizer({
+                    // https://github.com/btd/rollup-plugin-visualizer
+                    title: 'TKS Bundle Report',
+                    filename: './dist/tks-bundle-report.html',
+                    open: true,
+                    gzipSize: true,
+                }) as unknown as PluginOption,
+            ];
         }
+    }
 
-        return config;
-    },
-);
-
+    return config;
+});