refactor(*): eslint, typescript config 분리 (#37)

* refactor: config 분리

* chore: eslint conflict

* feat: emotion 세팅

* chore: remove only-warn

* chore: 리뷰 반영

apps/web/.eslintrc.js

@@ -1,9 +1,9 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   root: true,
-  extends: ['@sambad/config/eslint/next.js'],
+  extends: ['@sambad/eslint-config/next.js'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
-    project: true,
+    tsconfigRootDir: __dirname,
   },
 };

apps/web/next.config.mjs

@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  compiler: {
+    emotion: true,
+  },
+};
 
 export default nextConfig;

apps/web/package.json

@@ -15,7 +15,8 @@
     "next": "14.2.4"
   },
   "devDependencies": {
-    "@sambad/config": "workspace:*",
+    "@sambad/eslint-config": "workspace:*",
+    "@sambad/typescript-config": "workspace:*",
     "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18.2.0",

apps/web/tsconfig.json

@@ -1,12 +1,12 @@
 {
-  "extends": "@sambad/config/typescript/nextjs.json",
+  "extends": "@sambad/typescript-config/nextjs.json",
   "compilerOptions": {
     "plugins": [
       {
         "name": "next"
       }
     ]
   },
-  "include": ["next-env.d.ts", "next.config.js", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "app/B.js", "app/A.js"],
+  "include": ["next-env.d.ts", "next.config.js", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }

package.json

@@ -10,11 +10,14 @@
     "lint": "turbo lint",
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
+  "dependencies": {
+    "@emotion/react": "^11.11.4"
+  },
   "devDependencies": {
+    "next": "14.2.4",
     "prettier": "^3.2.5",
     "turbo": "^2.0.4",
-    "typescript": "^5.4.5",
-    "next": "14.2.4"
+    "typescript": "^5.4.5"
   },
   "packageManager": "[email protected]",
   "engines": {

packages/core/config/eslint/react-internal.js → packages/core/eslint-config/base.js

@@ -4,15 +4,11 @@ const project = resolve(process.cwd(), 'tsconfig.json');
 
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
-  extends: ['eslint:recommended', 'plugin:react/recommended', 'prettier', 'turbo'],
-  plugins: ['@typescript-eslint', 'only-warn', 'import'],
+  plugins: ['@typescript-eslint', 'import'],
   globals: {
     React: true,
     JSX: true,
   },
-  env: {
-    browser: true,
-  },
   settings: {
     'import/extensions': ['.js', '.jsx', '.ts', '.tsx'],
     'import/resolver': {
@@ -21,12 +17,11 @@ module.exports = {
       },
     },
   },
-  ignorePatterns: ['.*.js', 'node_modules/', 'dist/'],
   rules: {
     'import/order': [
       'warn',
       {
-        groups: ['builtin', 'external', 'internal', ['parent', 'sibling', 'index'], 'object', 'type'],
+        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type'],
         alphabetize: {
           order: 'asc',
           caseInsensitive: true,
@@ -45,6 +40,7 @@ module.exports = {
     'no-unused-vars': ['warn', { varsIgnorePattern: '^_', argsIgnorePattern: '^_' }],
     'react/jsx-curly-brace-presence': ['warn', { props: 'never', children: 'never' }],
     '@typescript-eslint/consistent-type-imports': 'warn',
+    'react/no-unknown-property': ['error', { ignore: ['css'] }],
   },
   overrides: [{ files: ['*.js?(x)', '*.ts?(x)'] }],
 };

packages/core/eslint-config/library.js

@@ -0,0 +1,11 @@
+const base_eslint_config = require('./base.js');
+
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  ...base_eslint_config,
+  extends: ['eslint:recommended', 'plugin:react/recommended', 'prettier', 'turbo'],
+  env: {
+    node: true,
+  },
+  ignorePatterns: ['.*.js', 'node_modules/', 'dist/'],
+};

packages/core/eslint-config/next.js

@@ -0,0 +1,18 @@
+const base_eslint_config = require('./base.js');
+
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  ...base_eslint_config,
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'prettier',
+    require.resolve('@vercel/style-guide/eslint/next'),
+    'turbo',
+  ],
+  env: {
+    node: true,
+    browser: true,
+  },
+  ignorePatterns: ['.*.js', 'node_modules/'],
+};

packages/core/config/package.json → packages/core/eslint-config/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@sambad/config",
+  "name": "@sambad/eslint-config",
   "version": "0.0.0",
   "private": true,
   "files": [
@@ -14,7 +14,6 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-turbo": "^2.0.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-only-warn": "^1.1.0",
     "eslint-plugin-react": "^7.34.3",
     "typescript": "^5.3.3"
   }

packages/core/eslint-config/react-internal.js

@@ -0,0 +1,11 @@
+const base_eslint_config = require('./base.js');
+
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  ...base_eslint_config,
+  extends: ['eslint:recommended', 'plugin:react/recommended', 'prettier', 'turbo'],
+  env: {
+    browser: true,
+  },
+  ignorePatterns: ['.*.js', 'node_modules/', 'dist/'],
+};

packages/core/sds/.eslintrc.js

@@ -1,10 +1,9 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   root: true,
-  extends: ['@repo/config/eslint/react-internal.js'],
+  extends: ['@sambad/eslint-config/react-internal.js'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
-    project: './tsconfig.lint.json',
     tsconfigRootDir: __dirname,
   },
 };

packages/core/sds/package.json

@@ -9,7 +9,8 @@
     "lint": "eslint . --max-warnings 0"
   },
   "devDependencies": {
-    "@sambad/config": "workspace:*",
+    "@sambad/eslint-config": "workspace:*",
+    "@sambad/typescript-config": "workspace:*",
     "@turbo/gen": "^1.12.4",
     "@types/node": "^20.11.24",
     "@types/eslint": "^8.56.5",

packages/core/sds/src/components/Button.tsx

@@ -1,6 +1,8 @@
 'use client';
 
-import { HTMLAttributes, ReactNode } from 'react';
+import { css } from '@emotion/react';
+
+import type { HTMLAttributes, ReactNode } from 'react';
 
 interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
   children: ReactNode;
@@ -10,7 +12,14 @@ interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
 
 export const Button = ({ children, className, appName, ...rest }: ButtonProps) => {
   return (
-    <button className={className} onClick={() => alert(`Hello from your ${appName} app!`)} {...rest}>
+    <button
+      css={css`
+        background: red;
+      `}
+      className={className}
+      onClick={() => alert(`Hello from your ${appName} app!`)}
+      {...rest}
+    >
       {children}
     </button>
   );

packages/core/sds/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@sambad/config/typescript/react-library.json",
+  "extends": "@sambad/typescript-config/react-library.json",
   "compilerOptions": {
     "outDir": "dist"
   },

packages/core/config/typescript/base.json → packages/core/typescript-config/base.json

@@ -15,6 +15,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "ES2022"
+    "target": "ES2022",
+    "types": ["@emotion/react/types/css-prop"]
   }
 }

packages/core/typescript-config/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@sambad/typescript-config",
+  "version": "0.0.0",
+  "private": true
+}

packages/web-domains/.eslintrc.js

@@ -1,10 +1,9 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   root: true,
-  extends: ['@sambad/config/eslint/react-internal.js'],
+  extends: ['@sambad/eslint-config/react-internal.js'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
-    project: './tsconfig.lint.json',
     tsconfigRootDir: __dirname,
   },
 };

packages/web-domains/package.json

@@ -12,7 +12,8 @@
   "dependencies": {},
   "devDependencies": {
     "@sambad/sds": "workspace:*",
-    "@sambad/config": "workspace:*",
+    "@sambad/eslint-config": "workspace:*",
+    "@sambad/typescript-config": "workspace:*",
     "@types/node": "^20.11.24",
     "@types/eslint": "^8.56.5",
     "@types/react": "^18.2.61",

packages/web-domains/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@sambad/config/typescript/react-library.json",
+  "extends": "@sambad/typescript-config/react-library.json",
   "compilerOptions": {
     "outDir": "dist"
   },