## TypeScript 설정

### 공통 (tsconfig.json)

```json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
  "exclude": ["node_modules"]
}
```

### main - 차이점

```json
{
  "compilerOptions": {
    "types": ["vite/client", "node"],
    "paths": {
      "@/*": ["src/*"],
      "@aa/*": ["src/app/annotator/annotators/audio-annotator/*"],
      "@app/*": ["src/app/*"],
      "@assets/*": ["src/assets/*"],
      "@ia/*": ["src/app/annotator/annotators/image-annotator/*"],
      "@pa/*": ["src/app/annotator/annotators/pcd-annotator/*"],
      "@pta/*": ["src/app/annotator/annotators/prompt-annotator/*"],
      "@services/*": ["src/app/annotator/services/*"],
      "@shared/*": ["src/app/shared/*"],
      "@ta/*": ["src/app/annotator/annotators/text-annotator/*"],
      "@va/*": ["src/app/annotator/annotators/video-annotator/*"]
    }
  }
}
```

### staging - 차이점

```json
{
  "compilerOptions": {
    "types": ["webpack-env", "node"],
    "paths": {
      "@/*": ["src/*"]
    }
  }
}
```

:::note[참고]
staging에서는 tsconfig에 `@/*` alias만 정의되어 있고, 나머지 annotator 별칭은 webpack.config.cjs와 babel.config.js에서만 설정됩니다.
:::

## ESLint 설정

### 공통 (eslint.config.mjs - Flat Config)

두 브랜치 모두 ESLint 9 Flat Config 형식을 사용합니다.

- **파서**: `vue-eslint-parser` + `@typescript-eslint/parser`
- **플러그인**: `@typescript-eslint`, `perfectionist`, `prettier`, `vue`
- **주요 규칙**:
  - `perfectionist/sort-*` (imports, objects, interfaces 정렬)
  - `prettier/prettier`: error
  - `@typescript-eslint/no-explicit-any`: warn
  - `vue/multi-word-component-names`: off
  - 세미콜론 없음 (`semi: never`)

### staging 추가 플러그인

- `@stylistic/eslint-plugin` (코드 스타일 규칙)

## Prettier 설정

### 공통 (.prettierrc.json)

```json
{
  "semi": false,
  "trailingComma": "none",
  "bracketSameLine": true,
  "singleQuote": true,
  "printWidth": 120,
  "overrides": [{ "files": "*.vue", "options": { "parser": "vue" } }],
  "plugins": ["prettier-plugin-vue"]
}
```

## CSS / 스타일링

### main - Tailwind CSS 4 + PostCSS

**postcss.config.js:**

```javascript
module.exports = {
  plugins: [require('@tailwindcss/postcss'), require('autoprefixer')]
}
```

**tailwind.config.js 주요 설정:**

- Dark mode: class 기반
- Preflight: 비활성화 (Bootstrap과의 충돌 방지)
- Content: `./src/**/*.{vue,js,ts,jsx,tsx}`
- 커스텀 색상: CSS 변수 참조 (primary, secondary, success, danger 등)
- 커스텀 폰트: Pretendard
- 플러그인: `@tailwindcss/forms`

### staging - Bootstrap 4 + PostCSS

**postcss.config.js:**

```javascript
module.exports = {
  plugins: [require('autoprefixer')]
}
```

- Tailwind CSS 없음
- Bootstrap 4.6.2 + bootstrap-vue 2.21.2 사용
- SCSS 전처리