refactor: ESLint Prettier 공유 config 패키지 생성

.eslintignore

@@ -0,0 +1,13 @@
+# dependencies
+node_modules
+
+# build outputs
+.next
+out
+dist
+
+# generated files
+**/__generated__
+
+# storybook
+storybook-static

.prettierignore

@@ -0,0 +1,10 @@
+# dependencies
+node_modules
+
+# build outputs
+.next
+out
+dist
+
+# docs
+**/*.md

apps/crew/.eslintrc.json

@@ -1,38 +1,4 @@
 {
   "root": true,
-  "parser": "@typescript-eslint/parser",
-  "env": {
-    "es6": true,
-    "node": true,
-    "browser": true
-  },
-  "plugins": ["@typescript-eslint", "prettier", "import"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:prettier/recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:storybook/recommended"
-  ],
-  "rules": {
-    "@typescript-eslint/no-var-requires": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "off",
-    "@typescript-eslint/no-empty-function": "off",
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
-    "react-hooks/set-state-in-effect": "warn",
-    "react-hooks/static-components": "warn",
-    "react-hooks/immutability": "warn",
-    "react-hooks/refs": "warn",
-    "react-hooks/incompatible-library": "warn",
-    "prettier/prettier": [
-      "error",
-      {
-        "endOfLine": "auto"
-      }
-    ],
-    "import/no-unused-modules": [1, { "unusedExports": true }],
-    "react/no-unstable-nested-components": "off"
-  }
+  "extends": ["@sopt-makers/eslint-config/next"]
 }

apps/crew/.storybook/main.ts

@@ -11,7 +11,7 @@ const config: StorybookConfig = {
     autodocs: 'tag',
   },
   webpackFinal(config) {
-    const imageRule = config.module!.rules!.find(rule => {
+    const imageRule = config.module!.rules!.find((rule) => {
       if (rule && typeof rule !== 'string' && rule.test instanceof RegExp) {
         return rule.test.test('.svg');
       }

apps/crew/.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import type { Preview } from '@storybook/react';
-import { OverlayProvider } from '../src/hooks/useOverlay/OverlayProvider';
+import { OverlayProvider } from '../src/hook/useOverlay/OverlayProvider';
 import React from 'react';
 import '../styles/globals.css';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -24,7 +24,7 @@ const preview: Preview = {
     },
   },
   decorators: [
-    Story => {
+    (Story) => {
       const queryClient = new QueryClient();
 
       return (

apps/crew/ampli.json

@@ -11,4 +11,4 @@
   "Language": "TypeScript",
   "SDK": "@amplitude/analytics-browser@^1.0",
   "Path": "./src/ampli"
-}
+}

apps/crew/next.config.js

@@ -5,7 +5,7 @@ const nextConfig = {
   output: 'export',
   reactStrictMode: true,
   swcMinify: true,
-  webpack: config => {
+  webpack: (config) => {
     config.module.rules.push({
       test: /\.svg$/,
       oneOf: [

apps/crew/package.json

@@ -2,11 +2,13 @@
   "name": "crew",
   "version": "0.1.0",
   "private": true,
+  "prettier": "@sopt-makers/prettier-config",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "prettier": "prettier --write . --ignore-path ../../.prettierignore",
     "typecheck": "tsc --noemit -p .",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -52,12 +54,7 @@
     "@hookform/devtools": "^4.3.1",
     "@types/react-mentions": "4.1.13",
     "@types/react-responsive": "^8.0.5",
-    "eslint": "^8.57.0",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
     "openapi-typescript": "^6.3.9",
-    "prettier": "^3.0.0",
     "wrangler": "^3.0.0"
   }
 }

apps/crew/packages/react-mentions/src/Highlighter.js

@@ -1,22 +1,17 @@
-import React, { Children, useState, useEffect } from 'react'
-import PropTypes from 'prop-types'
-import { defaultStyle } from './utils'
+import React, { Children, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { defaultStyle } from './utils';
 
-import {
-  iterateMentionsMarkup,
-  mapPlainTextIndex,
-  readConfigFromChildren,
-  isNumber,
-} from './utils'
+import { iterateMentionsMarkup, mapPlainTextIndex, readConfigFromChildren, isNumber } from './utils';
 
 const _generateComponentKey = (usedKeys, id) => {
   if (!usedKeys.hasOwnProperty(id)) {
-    usedKeys[id] = 0
+    usedKeys[id] = 0;
   } else {
-    usedKeys[id]++
+    usedKeys[id]++;
   }
-  return id + '_' + usedKeys[id]
-}
+  return id + '_' + usedKeys[id];
+};
 
 function Highlighter({
   selectionStart,
@@ -31,46 +26,41 @@ function Highlighter({
   const [position, setPosition] = useState({
     left: undefined,
     top: undefined,
-  })
-  const [caretElement, setCaretElement] = useState()
+  });
+  const [caretElement, setCaretElement] = useState();
 
   useEffect(() => {
-    notifyCaretPosition()
-  })
+    notifyCaretPosition();
+  });
 
   const notifyCaretPosition = () => {
     if (!caretElement) {
-      return
+      return;
     }
 
-    const { offsetLeft, offsetTop } = caretElement
+    const { offsetLeft, offsetTop } = caretElement;
 
     if (position.left === offsetLeft && position.top === offsetTop) {
-      return
+      return;
     }
 
-    const newPosition = { left: offsetLeft, top: offsetTop }
-    setPosition(newPosition)
+    const newPosition = { left: offsetLeft, top: offsetTop };
+    setPosition(newPosition);
 
-    onCaretPositionChange(newPosition)
-  }
+    onCaretPositionChange(newPosition);
+  };
 
-  const config = readConfigFromChildren(children)
-  let caretPositionInMarkup
+  const config = readConfigFromChildren(children);
+  let caretPositionInMarkup;
 
   if (selectionEnd === selectionStart) {
-    caretPositionInMarkup = mapPlainTextIndex(
-      value,
-      config,
-      selectionStart,
-      'START'
-    )
+    caretPositionInMarkup = mapPlainTextIndex(value, config, selectionStart, 'START');
   }
 
-  const resultComponents = []
-  const componentKeys = {}
-  let components = resultComponents
-  let substringComponentKey = 0
+  const resultComponents = [];
+  const componentKeys = {};
+  let components = resultComponents;
+  let substringComponentKey = 0;
 
   const textIteratee = (substr, index, indexInPlainText) => {
     // check whether the caret element has to be inserted inside the current plain substring
@@ -80,74 +70,60 @@ function Highlighter({
       caretPositionInMarkup <= index + substr.length
     ) {
       // if yes, split substr at the caret position and insert the caret component
-      const splitIndex = caretPositionInMarkup - index
-      components.push(
-        renderSubstring(substr.substring(0, splitIndex), substringComponentKey)
-      )
+      const splitIndex = caretPositionInMarkup - index;
+      components.push(renderSubstring(substr.substring(0, splitIndex), substringComponentKey));
       // add all following substrings and mention components as children of the caret component
-      components = [
-        renderSubstring(substr.substring(splitIndex), substringComponentKey),
-      ]
+      components = [renderSubstring(substr.substring(splitIndex), substringComponentKey)];
     } else {
-      components.push(renderSubstring(substr, substringComponentKey))
+      components.push(renderSubstring(substr, substringComponentKey));
     }
 
-    substringComponentKey++
-  }
+    substringComponentKey++;
+  };
 
-  const mentionIteratee = (
-    markup,
-    index,
-    indexInPlainText,
-    id,
-    display,
-    mentionChildIndex,
-    lastMentionEndIndex
-  ) => {
-    const key = _generateComponentKey(componentKeys, id)
-    components.push(
-      getMentionComponentForMatch(id, display, mentionChildIndex, key)
-    )
-  }
+  const mentionIteratee = (markup, index, indexInPlainText, id, display, mentionChildIndex, lastMentionEndIndex) => {
+    const key = _generateComponentKey(componentKeys, id);
+    components.push(getMentionComponentForMatch(id, display, mentionChildIndex, key));
+  };
 
   const renderSubstring = (string, key) => {
     // set substring span to hidden, so that Emojis are not shown double in Mobile Safari
     return (
       <span {...style('substring')} key={key}>
         {string}
       </span>
-    )
-  }
+    );
+  };
 
   const getMentionComponentForMatch = (id, display, mentionChildIndex, key) => {
-    const props = { id, display, key }
-    const child = Children.toArray(children)[mentionChildIndex]
-    return React.cloneElement(child, props)
-  }
+    const props = { id, display, key };
+    const child = Children.toArray(children)[mentionChildIndex];
+    return React.cloneElement(child, props);
+  };
 
   const renderHighlighterCaret = (children) => {
     return (
-      <span {...style('caret')} ref={setCaretElement} key="caret">
+      <span {...style('caret')} ref={setCaretElement} key='caret'>
         {children}
       </span>
-    )
-  }
+    );
+  };
 
-  iterateMentionsMarkup(value, config, mentionIteratee, textIteratee)
+  iterateMentionsMarkup(value, config, mentionIteratee, textIteratee);
 
   // append a span containing a space, to ensure the last text line has the correct height
-  components.push(' ')
+  components.push(' ');
 
   if (components !== resultComponents) {
     // if a caret component is to be rendered, add all components that followed as its children
-    resultComponents.push(renderHighlighterCaret(components))
+    resultComponents.push(renderHighlighterCaret(components));
   }
 
   return (
     <div {...style} ref={containerRef}>
       {resultComponents}
     </div>
-  )
+  );
 }
 
 Highlighter.propTypes = {
@@ -158,42 +134,36 @@ Highlighter.propTypes = {
   containerRef: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.shape({
-      current:
-        typeof Element === 'undefined'
-          ? PropTypes.any
-          : PropTypes.instanceOf(Element),
+      current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element),
     }),
   ]),
-  children: PropTypes.oneOfType([
-    PropTypes.element,
-    PropTypes.arrayOf(PropTypes.element),
-  ]).isRequired,
-}
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired,
+};
 
 const styled = defaultStyle(
   {
-    position: 'relative',
-    boxSizing: 'border-box',
-    width: '100%',
-    color: 'transparent',
-    overflow: 'hidden',
-    whiteSpace: 'pre-wrap',
-    wordWrap: 'break-word',
-    border: '1px solid transparent',
-    textAlign: 'start',
+    'position': 'relative',
+    'boxSizing': 'border-box',
+    'width': '100%',
+    'color': 'transparent',
+    'overflow': 'hidden',
+    'whiteSpace': 'pre-wrap',
+    'wordWrap': 'break-word',
+    'border': '1px solid transparent',
+    'textAlign': 'start',
 
     '&singleLine': {
       whiteSpace: 'pre',
       wordWrap: null,
     },
 
-    substring: {
+    'substring': {
       visibility: 'hidden',
     },
   },
   (props) => ({
     '&singleLine': props.singleLine,
-  })
-)
+  }),
+);
 
-export default styled(Highlighter)
+export default styled(Highlighter);