개발 도구 설정

TypeScript 설정

공통 (tsconfig.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 - 차이점

{
  "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 - 차이점

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

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)

{
  "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:

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:

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

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