PCWEB-8414 번들러 Webpack, Rollup 제거와 vite마이그레이션

.eslintignore

@@ -0,0 +1,6 @@
+.github
+.eslintrc.js
+vite.config.ts
+dist
+docs
+public

.eslintrc.js

@@ -0,0 +1,114 @@
+const path = require('path');
+
+module.exports = {
+  extends: ['react-app', 'airbnb-typescript', 'airbnb/hooks', 'prettier'],
+  parserOptions: {
+    project: './tsconfig.json',
+  },
+  rules: {
+    // react
+    'react/jsx-filename-extension': 0,
+    'react/prop-types': 0,
+    'react/jsx-one-expression-per-line': 0,
+    'react/destructuring-assignment': 0,
+    'react/no-unused-state': 0,
+    'react/jsx-props-no-spreading': 0,
+    'react/jsx-curly-newline': 0,
+    'react/jsx-wrap-multilines': 0,
+    'react/require-default-props': 0,
+    'react/no-unescaped-entities': 0,
+    'react/forbid-prop-types': 0,
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+    // 웹 접근성
+    'jsx-a11y/click-events-have-key-events': 0,
+    'jsx-a11y/no-static-element-interactions': 0,
+    'jsx-a11y/no-noninteractive-element-interactions': 0,
+    'jsx-a11y/no-autofocus': 0,
+    'jsx-a11y/mouse-events-have-key-events': 0,
+    'jsx-a11y/label-has-associated-control': 0,
+    'jsx-a11y/media-has-caption': 0,
+    // Javascript
+    'arrow-body-style': ['error', 'as-needed'],
+    'consistent-return': 0,
+    'no-underscore-dangle': 0,
+    'no-unused-expressions': 0,
+    'no-async-promise-executor': 0,
+    'no-restricted-syntax': 0,
+    'no-await-in-loop': 0,
+    'prefer-destructuring': ['error', { object: true, array: false }],
+    // Module
+    'import/no-extraneous-dependencies': 0,
+    'import/prefer-default-export': 0,
+    'import/order': [
+      'error',
+      {
+        groups: [
+          ['builtin', 'external'],
+          ['internal', 'parent', 'sibling'],
+        ],
+        pathGroups: [
+          {
+            pattern: 'global-style/**',
+            group: 'sibling',
+            position: 'after',
+          },
+          {
+            pattern: './*.constant',
+            group: 'sibling',
+            position: 'after',
+          },
+          {
+            pattern: './*.text',
+            group: 'sibling',
+            position: 'after',
+          },
+          {
+            pattern: './*.styles',
+            group: 'sibling',
+            position: 'after',
+          },
+          {
+            pattern: './*.scss',
+            group: 'sibling',
+            position: 'after',
+          },
+          {
+            pattern: './*.css',
+            group: 'sibling',
+            position: 'after',
+          },
+          {
+            pattern: 'assets/**',
+            group: 'sibling',
+            position: 'after',
+          },
+        ],
+        'newlines-between': 'always',
+      },
+    ],
+    // typescript eslint
+    '@typescript-eslint/no-unused-expressions': 0,
+    '@typescript-eslint/naming-convention': [
+      'error',
+      {
+        selector: 'variable',
+        format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
+        leadingUnderscore: 'allow',
+      },
+    ],
+    '@typescript-eslint/no-use-before-define': 'off',
+  },
+  env: {
+    browser: true,
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        paths: [path.resolve(__dirname, 'src')],
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+      },
+    },
+  },
+  ignorePatterns: ['vite.config.ts'],
+};

.github/workflows/on-pull-request.yml

@@ -0,0 +1,18 @@
+name: Workflows on PR
+
+on:
+  pull_request:
+    types: [opened, reopened, ready_for_review]
+
+jobs:
+  run-linter:
+    uses: dramancompany/shared_workflows/.github/workflows/linter.yml@main
+    with:
+      nodeVersion: 16
+      autoFix: true
+      useRememberUI: false
+    secrets: inherit
+
+  assign-reviewers:
+    if: ${{ (contains(github.event.pull_request.base.ref, 'main') || contains(github.event.pull_request.base.ref, 'feature')) && (github.event.action == 'opened' || github.event.action == 'reopened' || github.event.action == 'ready_for_review') }}
+    uses: dramancompany/shared_workflows/.github/workflows/assign-reviewers.yml@main

.nvmrc

@@ -1 +1 @@
-12.14.1
+16.17.0

.prettierignore

@@ -0,0 +1,5 @@
+.github
+vite.config.ts
+dist
+docs
+public

.storybook/main.js

@@ -1,14 +1,7 @@
 const path = require('path');
+const tsconfigPaths = require('vite-tsconfig-paths').default;
 
 module.exports = {
-  /**
-   * src 내부 컴포넌트를 스토리북 내에서 사용할 수 있도록 설정
-   */
-  webpackFinal: async (config, { configType }) => {
-    config.resolve.modules.push(path.resolve(__dirname, '../src'));
-
-    return config;
-  },
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
@@ -17,4 +10,22 @@ module.exports = {
   ],
   framework: '@storybook/react',
   staticDirs: ['../public'],
+  core: {
+    builder: '@storybook/builder-vite', // 👈  vite 사용을 위해 해당 옵션을 추가합니다.
+  },
+  /**
+   * A option exposed by storybook-builder-vite for customizing the Vite config.
+   * @see https://github.com/eirslett/storybook-builder-vite#customize-vite-config
+   * @param {import("vite").UserConfig} config
+   * @see https://vitejs.dev/config/
+   */
+  viteFinal: async (config) => {
+    config.plugins.push(
+      /** @see https://github.com/aleclarson/vite-tsconfig-paths */
+      tsconfigPaths({
+        projects: [path.resolve(path.dirname(__dirname), 'tsconfig.json')],
+      })
+    );
+    return config;
+  },
 };

.storybook/manager-head.html

@@ -29,4 +29,3 @@
   property="og:image"
   content="https://s3.ap-northeast-1.amazonaws.com/static.rememberapp.co.kr/rmbr_og_image_remember_ui.png"
 />
-

.storybook/preview-head.html

@@ -3,6 +3,9 @@
   type="text/css"
   href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css"
 />
+<script>
+  window.global = window;
+</script>
 <style>
   body {
     font-family: Pretendard, sans-serif;

.storybook/preview.js → .storybook/preview.jsx

@@ -40,6 +40,8 @@ export const parameters = {
 
 /**
  * global decorators
+ * @see https://vitejs.dev/guide/features.html#jsx
+ * vite 설정으로 인해 JSX syntax를 사용하려면 .jsx 확장자를 사용해야한다.
  */
 export const decorators = [
   (Story) => (

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Drama&Company
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.