chore(*): eslint-config, prettier, vscode setting.json 설정

.github/labeler.yml

@@ -3,18 +3,18 @@ enable:
   prs: true
 
 labels:
-  "chore":
+  'chore':
     include:
       - '\bchore\b'
-  "feat":
+  'feat':
     include:
       - '\bfeat\b'
-  "docs":
+  'docs':
     include:
       - '\bdocs\b'
-  "fix":
+  'fix':
     include:
       - '\bfix\b'
-  "test":
+  'test':
     include:
       - '\btest\b'

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "printWidth": 120,
+  "singleQuote": true
+}

.vscode/settings.json

@@ -3,5 +3,13 @@
     {
       "mode": "auto"
     }
-  ]
+  ],
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "explicit",
+    "source.addMissingImports": "explicit"
+  }
 }

apps/web/.eslintrc.js

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

apps/web/app/globals.css

@@ -1,9 +1,8 @@
 :root {
   --max-width: 1100px;
   --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
-    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
-    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
+  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono',
+    'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
 
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
@@ -17,22 +16,11 @@
     #0071ff33 160deg,
     transparent 360deg
   );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
+  --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
 
   --tile-start-rgb: 239, 245, 249;
   --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
+  --tile-border: conic-gradient(#00000080, #00000040, #00000030, #00000020, #00000010, #00000010, #00000080);
 
   --callout-rgb: 238, 240, 241;
   --callout-border-rgb: 172, 175, 176;
@@ -47,24 +35,11 @@
     --background-end-rgb: 0, 0, 0;
 
     --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
+    --secondary-glow: linear-gradient(to bottom right, rgba(1, 65, 255, 0), rgba(1, 65, 255, 0), rgba(1, 65, 255, 0.3));
 
     --tile-start-rgb: 2, 13, 46;
     --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
+    --tile-border: conic-gradient(#ffffff80, #ffffff40, #ffffff30, #ffffff20, #ffffff10, #ffffff10, #ffffff80);
 
     --callout-rgb: 20, 20, 20;
     --callout-border-rgb: 108, 108, 108;
@@ -87,12 +62,7 @@ body {
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
 }
 
 a {

apps/web/app/layout.tsx

@@ -1,12 +1,14 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
+import { Inter } from 'next/font/google';
 
-const inter = Inter({ subsets: ["latin"] });
+import type { Metadata } from 'next';
+
+import './globals.css';
+
+const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: 'Create Next App',
+  description: 'Generated by create next app',
 };
 
 export default function RootLayout({

apps/web/app/page.module.css

@@ -51,7 +51,9 @@
   border-radius: var(--border-radius);
   background: rgba(var(--card-rgb), 0);
   border: 1px solid rgba(var(--card-border-rgb), 0);
-  transition: background 200ms, border 200ms;
+  transition:
+    background 200ms,
+    border 200ms;
 }
 
 .card span {
@@ -98,7 +100,7 @@
 
 .center::before,
 .center::after {
-  content: "";
+  content: '';
   left: 50%;
   position: absolute;
   filter: blur(45px);
@@ -179,11 +181,7 @@
     border-radius: 0;
     border: none;
     border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
-    background: linear-gradient(
-      to bottom,
-      rgba(var(--background-start-rgb), 1),
-      rgba(var(--callout-rgb), 0.5)
-    );
+    background: linear-gradient(to bottom, rgba(var(--background-start-rgb), 1), rgba(var(--callout-rgb), 0.5));
     background-clip: padding-box;
     backdrop-filter: blur(24px);
   }
@@ -194,11 +192,7 @@
     inset: auto 0 0;
     padding: 2rem;
     height: 200px;
-    background: linear-gradient(
-      to bottom,
-      transparent 0%,
-      rgb(var(--background-end-rgb)) 40%
-    );
+    background: linear-gradient(to bottom, transparent 0%, rgb(var(--background-end-rgb)) 40%);
     z-index: 1;
   }
 }

apps/web/app/page.tsx

@@ -1,6 +1,7 @@
-import Image from "next/image";
-import styles from "./page.module.css";
-import { FirstDomainExampleScreen } from "@sambad/domains/first-domain";
+import { FirstDomainExampleScreen } from '@sambad/domains/first-domain';
+import Image from 'next/image';
+
+import styles from './page.module.css';
 
 export default function Home() {
   return (

apps/web/app/second/page.tsx

@@ -1,6 +1,7 @@
-import Image from "next/image";
-import styles from "../page.module.css";
-import { SecondDomainExampleScreen } from "@sambad/domains/second-domain";
+import { SecondDomainExampleScreen } from '@sambad/domains/second-domain';
+import Image from 'next/image';
+
+import styles from '../page.module.css';
 
 export default function Second() {
   return (

apps/web/tsconfig.json

@@ -7,12 +7,6 @@
       }
     ]
   },
-  "include": [
-    "next-env.d.ts",
-    "next.config.js",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
+  "include": ["next-env.d.ts", "next.config.js", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "app/B.js", "app/A.js"],
   "exclude": ["node_modules"]
 }

packages/core/eslint-config/library.js

@@ -1,11 +1,11 @@
-const { resolve } = require("node:path");
+const { resolve } = require('node:path');
 
-const project = resolve(process.cwd(), "tsconfig.json");
+const project = resolve(process.cwd(), 'tsconfig.json');
 
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
-  extends: ["eslint:recommended", "prettier", "turbo"],
-  plugins: ["only-warn"],
+  extends: ['eslint:recommended', 'plugin:react/recommended', 'prettier', 'turbo'],
+  plugins: ['@typescript-eslint', 'only-warn', 'import'],
   globals: {
     React: true,
     JSX: true,
@@ -14,21 +14,41 @@ module.exports = {
     node: true,
   },
   settings: {
-    "import/resolver": {
+    'import/extensions': ['.js', '.jsx', '.ts', '.tsx'],
+    'import/resolver': {
       typescript: {
         project,
       },
     },
   },
-  ignorePatterns: [
-    // Ignore dotfiles
-    ".*.js",
-    "node_modules/",
-    "dist/",
-  ],
+  ignorePatterns: ['.*.js', 'node_modules/', 'dist/'],
+  rules: {
+    'import/order': [
+      'warn',
+      {
+        groups: ['builtin', 'external', 'internal', ['parent', 'sibling', 'index'], 'object', 'type'],
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true,
+        },
+        'newlines-between': 'always',
+      },
+    ],
+    'import/no-cycle': [
+      'warn',
+      {
+        maxDepth: Infinity,
+        ignoreExternal: true,
+      },
+    ],
+    'no-duplicate-imports': 'warn',
+    'no-unused-vars': ['warn', { varsIgnorePattern: '^_', argsIgnorePattern: '^_' }],
+    'react/jsx-curly-brace-presence': ['warn', { props: 'never', children: 'never' }],
+    '@typescript-eslint/consistent-type-imports': 'warn',
+  },
   overrides: [
     {
-      files: ["*.js?(x)", "*.ts?(x)"],
+      files: ['*.js?(x)', '*.ts?(x)'],
     },
   ],
 };

packages/core/eslint-config/next.js

@@ -1,15 +1,17 @@
-const { resolve } = require("node:path");
+const { resolve } = require('node:path');
 
-const project = resolve(process.cwd(), "tsconfig.json");
+const project = resolve(process.cwd(), 'tsconfig.json');
 
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   extends: [
-    "eslint:recommended",
-    "prettier",
-    require.resolve("@vercel/style-guide/eslint/next"),
-    "turbo",
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'prettier',
+    require.resolve('@vercel/style-guide/eslint/next'),
+    'turbo',
   ],
+  plugins: ['@typescript-eslint', 'only-warn', 'import'],
   globals: {
     React: true,
     JSX: true,
@@ -18,18 +20,38 @@ module.exports = {
     node: true,
     browser: true,
   },
-  plugins: ["only-warn"],
   settings: {
-    "import/resolver": {
+    'import/extensions': ['.js', '.jsx', '.ts', '.tsx'],
+    'import/resolver': {
       typescript: {
         project,
       },
     },
   },
-  ignorePatterns: [
-    // Ignore dotfiles
-    ".*.js",
-    "node_modules/",
-  ],
-  overrides: [{ files: ["*.js?(x)", "*.ts?(x)"] }],
+  ignorePatterns: ['.*.js', 'node_modules/'],
+  rules: {
+    'import/order': [
+      'warn',
+      {
+        groups: ['builtin', 'external', 'internal', ['parent', 'sibling', 'index'], 'object', 'type'],
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true,
+        },
+        'newlines-between': 'always',
+      },
+    ],
+    'import/no-cycle': [
+      'warn',
+      {
+        maxDepth: Infinity,
+        ignoreExternal: true,
+      },
+    ],
+    'no-duplicate-imports': 'warn',
+    'no-unused-vars': ['warn', { varsIgnorePattern: '^_', argsIgnorePattern: '^_' }],
+    'react/jsx-curly-brace-presence': ['warn', { props: 'never', children: 'never' }],
+    '@typescript-eslint/consistent-type-imports': 'warn',
+  },
+  overrides: [{ files: ['*.js?(x)', '*.ts?(x)'] }],
 };

packages/core/eslint-config/package.json

@@ -8,12 +8,14 @@
     "react-internal.js"
   ],
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
     "@vercel/style-guide": "^5.2.0",
-    "eslint-config-turbo": "^2.0.0",
     "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",
-    "@typescript-eslint/parser": "^7.1.0",
-    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "eslint-plugin-react": "^7.34.3",
     "typescript": "^5.3.3"
   }
 }