@3o3/eslint-config 1.0.0 → 2.0.0

package/ADOPTION.md

@@ -0,0 +1,104 @@
+# 다른 레포에 @3o3/eslint-config 적용하기
+
+자체 ESLint 설정을 쓰던 레포를 `@3o3/eslint-config` 2.x 기반으로 바꾸는 절차다. 설정을 교체하고, 새로 보고되는 것을 그 자리에서 해결해 lint 가 통과하는 상태까지 한 번에 간다.
+
+새로 보고되는 것의 대부분은 `eslint --fix` 로 고쳐진다(`array-type`, import 정렬, `import type`, 중복 import, `no-implicit-coercion` 등). 직접 고칠 것은 그 뒤에 남는 것뿐이다.
+
+아래 프롬프트를 코딩 에이전트에게 그대로 넘기면 된다.
+
+```text
+이 레포의 ESLint 설정을 @3o3/eslint-config 2.x 기반으로 바꾸고, 새 설정에서 lint 가 통과하도록 만들어 줘.
+"통과"의 기준은 이 레포가 지금 쓰는 기준 그대로다(lint 명령의 --max-warnings 값, 경고로 낮추는 설정 등은 바꾸지 않는다).
+
+지킬 것:
+- 코드의 동작을 바꾸지 않는다. 고치면 동작이 달라질 수 있는 것은 고치지 말고 보고한다(6번의 목록 참고).
+- eslint-disable 주석을 새로 추가하지 않는다. 규칙을 임의로 끄거나 완화하지 않는다. 그래야 할 것 같으면 바꾸지 말고 보고한다.
+- 레포 고유 설정(무시 경로, 앱별 규칙, 이 패키지에 없는 플러그인, 경고로 낮추는 설정)은 그대로 유지한다.
+
+0. 현황을 기록한다.
+   - 패키지 매니저, ESLint 설정 파일 위치(모노레포면 전부), lint 를 실행하는 명령.
+   - 지금 설정으로 lint 를 돌려 오류·경고 수를 적어 둔다.
+
+1. 의존성을 바꾼다. (이 레포의 패키지 매니저로)
+   - 추가: @3o3/eslint-config@^2.0.0
+   - eslint 는 9 또는 10 이면 된다. 버전을 올릴지는 바꾸지 말고 보고한다.
+   - 제거(있으면): eslint-plugin-react, eslint-plugin-import, @emotion/eslint-plugin, eslint-import-resolver-node
+   - 설정 파일에서 직접 import 하던 @eslint/js, typescript-eslint, eslint-plugin-react-hooks, eslint-plugin-simple-import-sort, eslint-config-prettier 는 2번을 끝낸 뒤 더 쓰이지 않으면 제거한다.
+
+2. 설정 파일을 아래 구조로 바꾼다. 모노레포에서 패키지마다 설정이 있으면 레이어 조합은 공용 설정 패키지(있다면)에 한 번만 만들고 각 패키지가 그것을 쓰게 한다. 패키지별 설정 파일에 남는 규칙도 3번의 이름 이관 대상이다.
+
+   import { base, react, typeChecked, tests, prettier } from '@3o3/eslint-config'
+
+   export default [
+     { ignores: [/* 기존 무시 경로 그대로 + 타입 정보 없이 두던 파일(예: '**/*.config.*') */] },
+     ...base,
+     ...react,        // React 를 쓰지 않으면 뺀다
+     ...typeChecked,  // 타입 인지 규칙(no-floating-promises, no-misused-promises, no-unsafe-* 등). 기존 설정이 tseslint.configs.recommendedTypeChecked·strictTypeChecked 나 parserOptions.project·projectService 를 쓰지 않았으면 뺀다
+     ...tests,        // __tests__/**, *.spec.*, *.test.* 에 적용된다
+     // 레포 고유 설정: 기존 플러그인(next, storybook, tanstack, a11y 등), 앱별 규칙, 경고로 낮추는 설정을 여기에 그대로 둔다
+     prettier,
+   ]
+
+   - 이 패키지의 레이어는 .ts·.tsx·.mts·.cts 에만 적용된다. 기존 설정이 .js 등도 lint 했으면 그 부분은 레포 고유 설정으로 남긴다.
+   - 남기는 JS 용 설정(js.configs.recommended 등)에는 files: ['**/*.{js,mjs,cjs}'] 를 붙인다. files 없이 @3o3 레이어 뒤에 두면 TS 파일에서 no-undef 같은 규칙이 다시 켜진다.
+   - @3o3 레이어가 등록하는 플러그인(@typescript-eslint, @eslint-react, react-hooks, import-x, simple-import-sort)을 설정에서 다시 등록하지 않는다. 그 플러그인의 preset(tseslint.configs.*, reactHooks.configs.* 등)을 덧붙이지도 않는다. 레포에 설치된 사본이 이 패키지가 쓰는 것과 다르면 "Cannot redefine plugin" 오류로 실행되지 않는다. 그 플러그인의 규칙을 더 켜거나 옵션을 바꾸려면 rules 에만 쓴다.
+   - 기존 설정이 preset 의 규칙 맵을 펼쳐 쓰던 경우(예: ...reactHooks.configs.recommended.rules)는 그 preset 이 켜던 규칙을 이름으로 나열해 rules 로 옮기고 보고한다.
+   - 기존 설정이 켜던 규칙 중 @3o3 레이어에 없는 것(예: no-console, import-x/no-cycle)은 레포 고유 설정에 rules 로 옮겨 유지한다. (react/*·import/*·@emotion/* 는 3번을 따른다)
+   - 기존 설정이 @3o3 레이어와 똑같이 설정하던 규칙은 지운다. 같은 규칙을 다른 옵션으로 설정하던 것은 그대로 두고 보고한다.
+
+3. 규칙 이름을 옮긴다. 설정 파일과 소스의 eslint-disable 계열 주석 모두 해당한다.
+   - import/<규칙> → import-x/<규칙>. settings 의 import/* 키도 import-x/* 로. (import/enforce-node-protocol-usage 는 대응 규칙이 없으니 지우고 보고한다)
+   - react/<규칙> → 아래 대응표. 대응표에 없는 것은 지우고 보고한다. 주석에서는 그 규칙 이름만 빼고, 한 규칙이 여러 개로 나뉜 경우 그 줄에서 실제로 보고되는 것만 남긴다.
+   - @emotion/<규칙> → 지운다.
+   - react-hooks/* 는 그대로 둔다.
+
+4. lint 를 돌려 실행 실패를 0건으로 만든다.
+   - "Could not find plugin", "Definition for rule ... not found", "Cannot redefine plugin" 이 없어야 한다.
+   - "Parsing error ... was not found by the project service" 는 그 파일이 tsconfig 에 포함되지 않았다는 뜻이다. 설정 파일·스크립트처럼 원래 타입 검사 대상이 아닌 파일이면 ignores 에 넣거나 parserOptions.projectService.allowDefaultProject 에 넣는다. tsconfig 에 포함된 파일인데도 이 오류가 나면 tsconfig 가 lint 를 실행한 디렉터리보다 위에 있는 경우다. tsconfig 가 있는 디렉터리의 설정 파일에 parserOptions.tsconfigRootDir: import.meta.dirname 을 둔다. 그 밖의 경우는 고치지 말고 보고한다.
+   - 설정 파일에 'import/', 'react/', '@emotion/ 문자열이 남아 있지 않은지 검색한다. (off 로 끈 옛 규칙과 옛 import/* settings 는 오류 없이 무시되어 lint 로는 드러나지 않는다)
+   - 여기까지를 커밋한다(설정 교체).
+
+5. eslint --fix 를 돌린다.
+   - 자동 수정 결과만 따로 커밋한다. 파일이 많이 바뀌므로 리뷰할 때 구분할 수 있어야 한다.
+   - 수정 후 타입 검사와 테스트를 돌려 통과하는지 확인한다.
+
+6. 남은 보고를 직접 고친다. 규칙별로 묶어서 처리하고, 고칠 때 코드의 동작이 바뀌면 안 된다.
+   아래에 해당하면 고치지 말고 파일·줄·이유를 목록으로 보고한다.
+   - 고치면 동작이 달라질 수 있는 것 (예: no-floating-promises 에 await 를 붙이면 실행 순서가 바뀜, exhaustive-deps 에 의존성을 추가하면 effect 가 더 자주 실행됨, eqeqeq 로 바꾸면 비교 결과가 달라지는 경우)
+   - 타입을 새로 설계해야 하는 것 (no-unsafe-*, no-explicit-any 가 외부 응답 타입에서 나오는 경우 등)
+   - 한 앱·한 디렉터리에 몰려 있어 설정 문제로 보이는 것 (예: import-x/no-unresolved 가 경로 별칭에서 한꺼번에 나옴 → resolver 설정을 확인하고 보고한다)
+   - @3o3/no-app-event-on-window 의 자동 수정은 @3o3/app-bridge 0.18.0 이상이 필요하다. 그보다 낮으면 수정하지 말고 보고한다.
+   - 규칙이 이 코드에 맞지 않아 보이는 것
+
+7. 검증한다.
+   - 레포의 lint 명령, 타입 검사, 테스트를 돌린다.
+   - lint 가 통과하지 않으면 6번의 보고 목록에 있는 것만 남았는지 확인한다.
+
+react 규칙 대응표:
+- react/jsx-key → @eslint-react/no-missing-key
+- react/jsx-no-comment-textnodes → @eslint-react/jsx-no-comment-textnodes
+- react/jsx-no-target-blank → @eslint-react/dom-no-unsafe-target-blank
+- react/no-children-prop → @eslint-react/jsx-no-children-prop
+- react/no-danger-with-children → @eslint-react/dom-no-dangerously-set-innerhtml-with-children
+- react/no-direct-mutation-state → @eslint-react/no-direct-mutation-state
+- react/no-find-dom-node → @eslint-react/dom-no-find-dom-node
+- react/no-render-return-value → @eslint-react/dom-no-render-return-value
+- react/no-unknown-property → @eslint-react/dom-no-unknown-property
+- react/no-deprecated → @eslint-react/no-component-will-mount, @eslint-react/no-component-will-receive-props, @eslint-react/no-component-will-update, @eslint-react/dom-no-render, @eslint-react/dom-no-hydrate
+- 대응 규칙 없음(지운다): react/no-unescaped-entities, react/no-string-refs, react/no-is-mounted, react/jsx-no-duplicate-props, react/jsx-no-undef, react/require-render-return
+- @3o3 레이어가 켜지 않는 규칙(지운다): react/display-name, react/prop-types, react/react-in-jsx-scope, react/jsx-uses-react, react/jsx-uses-vars
+
+끝나면 아래를 정리해서 알려 줘.
+- 바꾼 설정 파일과 의존성
+- 0번에서 기록한 이전 결과와 지금 결과(오류·경고 수)
+- 자동 수정으로 바뀐 파일 수, 직접 고친 것의 규칙별 수
+- 지운 규칙, 유지하려고 레포 고유 설정으로 옮긴 규칙
+- 고치지 않고 남긴 것(6번 목록)과 판단이 필요한 것
+```
+
+## 알아둘 것
+
+- **버전**: `@3o3/eslint-config` 2.0.0 이상, `eslint` 9 또는 10, Node 20.19.0 이상(`docs` 레이어를 쓰면 22.13 이상).
+- **한 번에 끝내기 어려우면** 프롬프트의 `base` 를 `core` 로 바꿔 넘기고, 나중에 `house` 를 얹는다. `house` 는 `array-type`, import 정렬 같은 스타일 규칙이고 대부분 `eslint --fix` 로 고쳐진다.
+- **에이전트가 고치지 않고 남긴 것**은 사람이 판단한다. 동작이 달라질 수 있는 수정, 타입 설계가 필요한 수정, 규칙을 끌지 여부가 여기에 해당한다.
+- **1.x 를 쓰던 레포**는 README 의 "1.x 에서 2.0 으로 올리기"를 따른다.

package/README.md

@@ -1,6 +1,6 @@
 # @3o3/eslint-config
 
-3o3 공유 ESLint 설정(ESLint 9 flat config). **사용처에 따라 레이어를 골라** 쓴다.
+3o3 공유 ESLint 설정(flat config). **사용처에 따라 레이어를 골라** 쓴다.
 
 ## 설치
 
@@ -8,20 +8,102 @@
 pnpm add -D @3o3/eslint-config eslint typescript
 ```
 
-`eslint` 와 `typescript` 는 peerDependency, 나머지 플러그인(typescript-eslint,
-eslint-plugin-react, react-hooks, import, @emotion, jsdoc, tsdoc, prettier)은 이
+`eslint`(`^9 || ^10`) 와 `typescript` 는 peerDependency, 나머지 플러그인(typescript-eslint,
+@eslint-react, react-hooks, import-x, jsdoc, tsdoc, prettier)은 이
 패키지의 dependency 라 따로 설치할 필요가 없다.
 
+### import 규칙
+
+import 규칙은 `eslint-plugin-import-x` 의 것이고 이름도 `import-x/*` 다. settings 도 `import-x/*`(`import-x/resolver` 등)를 쓴다. 규칙을 더 켤 때는 `rules` 에 `import-x/*` 이름으로 직접 켠다.
+
+```js
+import { base } from '@3o3/eslint-config'
+
+export default [...base, { rules: { 'import-x/no-cycle': 'error' } }]
+```
+
+## 1.x 에서 2.0 으로 올리기
+
+2.0 은 ESLint 10 을 지원하지 않는 플러그인 세 개를 교체했다. 규칙 이름이 바뀌므로 설정 파일과 `eslint-disable` 주석을 고쳐야 한다(ESLint 9 에 머물러도 같다). `base`(와 `all`)가 켜는 규칙도 바뀐다: recommended 를 끄거나 낮추던 설정 6개를 없애고, 스타일 규칙을 서비스 레포와 함께 쓸 수 있는 것으로 바꿨다.
+
+| 1.x | 2.0 | 고치지 않으면 |
+|---|---|---|
+| `react/*` 규칙 | `@eslint-react/*` (아래 프롬프트의 대응표) | 설정에서 켠 규칙은 `Could not find plugin "react"` 로 실행 실패 |
+| `import/*` 규칙 | `import-x/*` | 설정에서 켠 규칙은 `Could not find plugin "import"` 로 실행 실패 |
+| `import/*` settings | `import-x/*` | 오류 없이 **무시된다** |
+| `@emotion/*` 규칙 | 없음 (플러그인을 뺐다) | 설정에서 켠 규칙은 `Could not find plugin "@emotion"` 로 실행 실패 |
+| `base` 가 끄거나 낮추던 규칙 6개 (`import-x/no-duplicates`, `import-x/export`, `no-empty-object-type`, `no-require-imports`, `no-non-null-asserted-optional-chain`, `no-unused-vars` 의 catch 바인딩) | recommended 수준 | 기존 코드에서 새로 보고될 수 있다. `no-duplicates` 는 `eslint --fix` 로 고쳐지고, 쓰지 않는 `catch (e)` 는 `catch {` 로 바꾼다 |
+| 새로 켜지는 스타일 규칙 (`consistent-type-imports`, `simple-import-sort/imports`·`exports`) | `eslint --fix` 로 고친다 | 기존 코드에서 error 로 보고된다. `typeof import('x')` 타입 표기는 `import type * as X` 로 직접 바꾼다 |
+| 빠지는 규칙 (`naming-convention`, `member-ordering`, `no-non-null-assertion`, `no-warning-comments`, `curly`) | 계속 쓰려면 `rules` 에 직접 켠다 | 검사가 없어지고, 그 규칙의 `eslint-disable` 주석은 "쓰이지 않는 eslint-disable" 경고가 된다 |
+| 위 규칙들의 `eslint-disable` 주석 | 새 이름으로 | "규칙 정의를 찾을 수 없다" 오류로 보고되고, 새 규칙은 억제하지 못한다 |
+
+`off` 로 끈 옛 규칙(`react/*`·`import/*`·`@emotion/*`)은 세 플러그인 모두 오류 없이 무시되니, 설정 파일에서 직접 찾아 지워야 한다. `react-hooks/*` 는 이름과 동작이 그대로다.
+
+### 마이그레이션 프롬프트
+
+아래를 코딩 에이전트에게 그대로 넘기면 된다.
+
+````text
+이 레포의 @3o3/eslint-config 를 1.x 에서 2.0 으로 올리는 마이그레이션을 해 줘.
+2.0 은 플러그인을 교체해서 규칙 이름이 바뀌었고, 켜지는 스타일 규칙도 바뀌었다. 코드 동작은 건드리지 않는다. 바꿔도 되는 것은 ESLint 설정, eslint-disable 주석, 그리고 `eslint --fix` 가 자동으로 고치는 것(import 정렬 등)뿐이다.
+
+1. ESLint 설정 파일(eslint.config.*)을 고친다.
+   - `import/` 로 시작하는 규칙 이름과 settings 키를 `import-x/` 로 바꾼다. (예: `import/order` → `import-x/order`, `import/resolver` → `import-x/resolver`)
+   - `import/enforce-node-protocol-usage` 는 대응 규칙이 없으니 지우고 보고한다.
+   - `react/` 로 시작하는 규칙은 아래 대응표대로 바꾼다. 대응표에 없는 `react/*` 규칙은 지우고 보고한다. `off` 로 끈 것도 지운다.
+   - `@emotion/` 로 시작하는 규칙은 지운다.
+   - `eslint-plugin-react`, `eslint-plugin-import`, `@emotion/eslint-plugin`, `eslint-plugin-simple-import-sort` 를 직접 등록하거나 그 preset(`flatConfigs.*` 등)을 덧붙인 부분은 지운다. 그 preset 으로 켜던 규칙이 필요하면 `rules` 에 새 이름으로 직접 켜고 보고한다.
+   - `react-hooks/*` 는 건드리지 않는다.
+
+2. 소스의 eslint-disable 계열 주석(`eslint-disable`, `eslint-disable-line`, `eslint-disable-next-line`, `eslint-enable`)을 고친다.
+   - `import/<규칙>` → `import-x/<규칙>`
+   - `react/<규칙>` → 대응표의 새 이름. 한 규칙이 여러 개로 나뉜 경우 그 줄에서 실제로 보고되는 것만 남긴다. 대응 규칙이 없으면 주석에서 그 규칙을 뺀다.
+   - `@emotion/<규칙>` → 주석에서 그 규칙을 뺀다.
+   - 2.0 에서 빠진 규칙(`@typescript-eslint/naming-convention`, `@typescript-eslint/member-ordering`, `@typescript-eslint/no-non-null-assertion`, `no-warning-comments`, `curly`)의 주석은 지운다. 설정에서 이 규칙을 직접 켜 두었으면 그대로 둔다.
+
+3. 검증한다.
+   - 먼저 `eslint --fix` 를 돌린다. 2.0 이 새로 켜는 import 정렬·`import type`·중복 import 는 자동으로 고쳐진다. 이 자동 수정 결과는 커밋에 포함한다.
+   - 레포의 lint 명령을 돌린다.
+   - "Could not find plugin", "Definition for rule ... not found", 쓰이지 않는 eslint-disable 경고가 0건이어야 한다.
+   - ESLint 설정 파일에 `'import/`, `'react/`, `'@emotion/` 문자열이 남아 있지 않은지 검색한다. (`off` 로 끈 옛 규칙과 옛 `import/*` settings 는 오류 없이 무시되어 lint 로는 드러나지 않는다)
+   - 새로 보고되는 lint 오류는 eslint-disable 을 추가해서 덮지 말고, 파일·줄·규칙을 목록으로 보고한다.
+
+react 규칙 대응표:
+- react/jsx-key → @eslint-react/no-missing-key
+- react/jsx-no-comment-textnodes → @eslint-react/jsx-no-comment-textnodes
+- react/jsx-no-target-blank → @eslint-react/dom-no-unsafe-target-blank
+- react/no-children-prop → @eslint-react/jsx-no-children-prop
+- react/no-danger-with-children → @eslint-react/dom-no-dangerously-set-innerhtml-with-children
+- react/no-direct-mutation-state → @eslint-react/no-direct-mutation-state
+- react/no-find-dom-node → @eslint-react/dom-no-find-dom-node
+- react/no-render-return-value → @eslint-react/dom-no-render-return-value
+- react/no-unknown-property → @eslint-react/dom-no-unknown-property
+- react/no-deprecated → @eslint-react/no-component-will-mount, @eslint-react/no-component-will-receive-props, @eslint-react/no-component-will-update, @eslint-react/dom-no-render, @eslint-react/dom-no-hydrate
+- 대응 규칙 없음(지운다): react/no-unescaped-entities, react/no-string-refs, react/no-is-mounted, react/jsx-no-duplicate-props, react/jsx-no-undef, react/require-render-return
+
+끝나면 바꾼 파일 수, 지운 규칙, 새로 보고되는 lint 오류를 정리해서 알려 줘.
+````
+
 ## 레이어
 
 | 레이어 | 내용 | 언제 |
 |---|---|---|
-| `base` | js + ts 공통(`@eslint/js` + `typescript-eslint` + `import`) + 3o3 하우스 규칙 | 모든 TS 코드(토대) |
-| `react` | `base` 위 React 델타(`eslint-plugin-react` + `react-hooks` + `@emotion`) | React 패키지/앱 |
+| `core` | js + ts 정합성 규칙(`@eslint/js` + `typescript-eslint` + `import-x` 의 recommended 그대로) + 사내 규칙 | 3o3 하우스 규칙을 나중에 도입할 때 `base` 대신 |
+| `house` | 공통 스타일 규칙(`eqeqeq` / `no-implicit-coercion` / `array-type` / `no-inferrable-types` / `consistent-type-imports` / `simple-import-sort`). 대부분 `eslint --fix` 로 고쳐진다 | `core` 위에 |
+| `base` | `core + house` | 모든 TS 코드(토대) |
+| `typeChecked` | 타입 정보를 쓰는 규칙(`no-floating-promises` / `no-misused-promises` / `no-unsafe-*` 등 23개) | 타입 인지 lint 를 쓸 때 `core` 또는 `base` 위에 |
+| `react` | `base` 위 React 델타(`@eslint-react` + `react-hooks`) | React 패키지/앱 |
+| `tests` | 테스트 파일(`**/__tests__/**`, `**/*.{spec,test}.*`)에서 `array-type`·`no-non-null-assertion` off | `base` 와 레포 고유 규칙 뒤에 |
 | `docs` | 공개 API 문서 완전성(`jsdoc` + `tsdoc`) — `src/**` 글롭, 내부는 파일 지시어로 opt-out | 공개 API 문서 강제 |
 | `all` | `base + react + prettier` 번들 | "전부 켜기" |
 | `prettier` | `eslint-config-prettier`(포매팅 충돌 규칙 off) | 항상 **마지막**에 스프레드 |
 
+`core`(따라서 `base` 도)는 자체 규칙 `@3o3/no-app-event-on-window`(error)를 켠다. 앱 이벤트(`flutter_*`)를 `window.addEventListener`·`removeEventListener` 에 문자열 리터럴로 직접 넘기는 코드를 막는다. `onBackPressed` 같은 등록형 이벤트는 직접 붙이면 앱에 등록되지 않아 동작하지 않으므로, 앱 이벤트 전체를 `@3o3/app-bridge` 의 `webView` 로 모은다. `eslint --fix` 가 `webView.addEventListener`·`removeEventListener` 로 바꾸고 import 를 채운다. `webView` 라는 이름을 이미 다른 값에 쓰는 파일은 알리기만 한다.
+
+`house` 는 `no-unused-vars` 의 옵션도 정한다: rest 로 나머지를 받으려고 꺼낸 프로퍼티(`const { a, ...rest } = x`)와 `_` 로 시작하는 인자는 허용한다. `core` 만 쓰면 이것도 보고된다.
+
+레이어는 `.ts`·`.tsx`·`.mts`·`.cts` 파일에 적용된다(`docs` 레이어는 `.ts`·`.tsx`). `.js` 등은 대상이 아니다.
+
 `react` 는 `base` 위에 얹는 누적 델타다. 각 영역의 3o3 규칙을 이미 포함한다.
 전역 무시(dist/esm/비 ts·tsx)와 프로젝트 고유 규칙은 소비하는 쪽 config 에서 직접 둔다.
 
@@ -29,8 +111,8 @@ eslint-plugin-react, react-hooks, import, @emotion, jsdoc, tsdoc, prettier)은
 
 루트에 `eslint.config.mjs` 하나를 두는 **단일 설정**을 권장한다(이 모노레포도 동일).
 `defineConfig` + 문자열 `extends` 스타일(ESLint 가 미는 방식)을 기본으로 쓴다.
-default export 는 `configs` 맵을 가진 플러그인 형태(typescript-eslint /
-eslint-plugin-react 와 동일)라 `extends: ['@3o3/<layer>']` 로 참조된다.
+default export 는 `configs` 맵을 가진 플러그인 형태(typescript-eslint 와 동일)라
+`extends: ['@3o3/<layer>']` 로 참조된다.
 
 ```js
 // eslint.config.mjs  (React 포함 레포)
@@ -77,6 +159,53 @@ export default [
 ]
 ```
 
+### typeChecked 레이어
+
+`typeChecked` 는 `parserOptions.projectService` 를 켠다. lint 대상 파일이 가장 가까운 `tsconfig.json` 에 포함돼 있어야 하고, 타입 정보 없이 돌 때보다 느리다. 그래서 `base` 에 넣지 않고 따로 얹는다.
+
+```js
+import { base, react, typeChecked, prettier } from '@3o3/eslint-config'
+
+export default [
+  ...base,
+  ...react,
+  ...typeChecked,
+  {
+    languageOptions: {
+      parserOptions: {
+        // tsconfig 를 찾기 시작할 위치(이 설정 파일이 있는 디렉터리). 없으면 ESLint 를 실행한 디렉터리가 기준이 된다
+        tsconfigRootDir: import.meta.dirname,
+        // tsconfig 에 포함되지 않은 파일(설정 파일 등). typeChecked 의 projectService: true 를 이 객체가 대체한다
+        projectService: { allowDefaultProject: ['*.config.{ts,mts}'] },
+      },
+    },
+  },
+  // 레포 고유 규칙은 typeChecked 뒤에 둔다
+  prettier,
+]
+```
+
+- **`tsconfigRootDir` 를 넣는다.** 넣지 않으면 실행한 디렉터리 위쪽의 tsconfig 를 찾지 못한다. tsconfig 가 레포 루트에만 있는데 하위 디렉터리에서 ESLint 를 실행하면 모든 파일이 `was not found by the project service` 파싱 오류가 된다.
+- **tsconfig 에 포함되지 않은 `.ts` 파일은 파일마다 파싱 오류가 난다.** `allowDefaultProject` 에 넣거나, 그 파일들에 `typescript-eslint` 의 `disableTypeChecked` 를 적용한다.
+- **레포 고유 규칙은 `typeChecked` 뒤에 둔다.** `typeChecked` 가 `no-var`·`prefer-const` 등 일부 기본 규칙을 다시 설정하므로, `base` 와 `typeChecked` 사이에 둔 설정은 덮일 수 있다.
+
+## 다른 레포에 적용하기
+
+자체 ESLint 설정을 쓰던 레포는 설정을 교체하면서 새로 보고되는 것까지 한 번에 해결한다. 새로 보고되는 것의 대부분은 `eslint --fix` 로 고쳐진다(`array-type`, import 정렬, `import type`, 중복 import 등).
+
+1. 설정을 이 패키지의 레이어로 교체하고 규칙 이름을 옮긴다.
+2. `eslint --fix` 를 돌린다.
+3. 남은 것을 직접 고친다.
+
+```sh
+# 2.0.0 이상. eslint 는 9 또는 10
+pnpm add -D @3o3/eslint-config@^2.0.0
+```
+
+이 과정을 코딩 에이전트에게 그대로 넘길 프롬프트가 [ADOPTION.md](./ADOPTION.md)에 있다(설치한 뒤에는 `node_modules/@3o3/eslint-config/ADOPTION.md`). 프롬프트는 동작이 달라질 수 있는 수정은 하지 않고 목록으로 보고하게 돼 있다.
+
+레포가 쓰던 lint 기준(`--max-warnings`, 경고로 낮추는 설정 등)은 그대로 둔다. 하우스 스타일 규칙까지 한 번에 받기 어려우면 `base` 대신 `core` 로 시작하고, 정리되면 `house` 를 얹는다.
+
 ## docs 레이어 — 공개 API 문서 강제 (글롭 + 지시어 opt-out)
 
 `docs()` 는 `src/**` 의 ts/tsx 에서 **export 된 함수·상수·인터페이스에 문서 블록을
@@ -104,8 +233,8 @@ export default [
 
 ## 설계 메모
 
-- **타입 인지 규칙 미사용**: `recommended`(not type-checked)만 켠다 →
-  `parserOptions.project` 가 필요 없어 어떤 레포에서도 그대로 동작한다.
+- **`base` 는 타입 인지 규칙을 켜지 않는다**: `recommended`(not type-checked)만 켠다 →
+  `parserOptions.project` 가 필요 없어 어떤 레포에서도 그대로 동작한다. 타입 인지 규칙은 `typeChecked` 로 얹는다.
 - **무시·프로젝트 규칙은 소비처 config 에서**: base/react 는 순수 룰 레이어라 무시
   규칙을 갖지 않는다. 전역 무시(dist/esm 등)와 프로젝트 고유 규칙은 소비하는 쪽
   `eslint.config` 에서 직접 둔다.

package/package.json

@@ -1,20 +1,25 @@
 {
   "name": "@3o3/eslint-config",
-  "version": "1.0.0",
-  "description": "3o3 공유 ESLint 설정 — 사용처에 따라 레이어(base/react/docs/all)를 골라 쓴다.",
+  "version": "2.0.0",
+  "description": "3o3 공유 ESLint 설정 — 사용처에 따라 레이어(core/house/base/typeChecked/react/tests/docs/all)를 골라 쓴다.",
   "type": "module",
   "sideEffects": false,
   "main": "./src/index.js",
   "exports": {
     ".": "./src/index.js",
+    "./core": "./src/core.js",
+    "./house": "./src/house.js",
     "./base": "./src/base.js",
+    "./type-checked": "./src/type-checked.js",
     "./react": "./src/react.js",
     "./docs": "./src/docs.js",
     "./all": "./src/all.js",
     "./package.json": "./package.json"
   },
   "files": [
-    "src"
+    "src",
+    "!src/**/__tests__",
+    "ADOPTION.md"
   ],
   "repository": {
     "type": "git",
@@ -23,20 +28,27 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@emotion/eslint-plugin": "^11.12.0",
+    "@eslint-react/eslint-plugin": "^5.26.1",
     "@eslint/js": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-typescript": "^4.4.4",
-    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-import-x": "^4.17.1",
     "eslint-plugin-jsdoc": "^63.0.2",
-    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-simple-import-sort": "^14.0.0",
     "eslint-plugin-tsdoc": "^0.5.2",
     "globals": "^15.15.0",
-    "typescript-eslint": "^8.60.0"
+    "typescript-eslint": "^8.71.1"
+  },
+  "devDependencies": {
+    "eslint": "^10.12.0",
+    "eslint9": "npm:eslint@^9.39.4",
+    "typescript": "5.9.3",
+    "vitest": "4.1.9",
+    "@3o3/test-config": "0.1.0"
   },
   "peerDependencies": {
-    "eslint": ">=9",
+    "eslint": "^9.0.0 || ^10.0.0",
     "typescript": ">=5"
   },
   "peerDependenciesMeta": {
@@ -46,5 +58,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "test": "vitest run"
   }
 }

package/src/all.js

@@ -11,6 +11,8 @@ import prettier from 'eslint-config-prettier'
  *
  * docs 레이어는 `packageDir`/`rootDir` 이 필요한 팩토리라 번들에 포함하지 않는다 —
  * 필요하면 `docs({ packageDir })` 를 직접 스프레드한다.
+ * typeChecked 레이어도 포함하지 않는다 — `parserOptions.projectService` 가 필요해 tsconfig 구성이
+ * 맞아야 하고 타입 정보 없이 돌 때보다 느리다. 필요하면 all 뒤에 직접 스프레드한다.
  *
  * @example
  * ```js

package/src/base.js

@@ -1,19 +1,11 @@
-import js from '@eslint/js'
-import tseslint from 'typescript-eslint'
-import importPlugin from 'eslint-plugin-import'
-import globals from 'globals'
+import core from './core.js'
+import house from './house.js'
 
 /**
- * base 레이어 — js + ts 공통.
+ * base 레이어 — js + ts 공통. core(recommended 정합성 규칙) + house(공통 스타일 규칙)를 합친 것이다.
  *
- * 프레임워크에 무관한 3o3 공통 규칙의 단일 출처다.
- *   · @eslint/js + typescript-eslint(recommended) + eslint-plugin-import
- *   · 3o3 하우스 규칙(naming-convention / member-ordering / eqeqeq / curly 등)
- *
- * 타입 인지(type-aware) 규칙은 켜지 않는다 → `parserOptions.project` 가 필요 없어
- * 어떤 레포에서도 그대로 동작한다(이식성).
- *
- * 모든 `@3o3/eslint-config` 소비의 토대. react 레이어는 이 위에 스프레드한다.
+ * 프레임워크에 무관한 3o3 공통 규칙의 단일 출처다. react 레이어는 이 위에 스프레드한다.
+ * 하우스 규칙을 나중에 도입하려면 core 만 먼저 쓴다.
  *
  * @example
  * ```js
@@ -21,95 +13,6 @@ import globals from 'globals'
  * export default [...base]
  * ```
  */
-const base = tseslint.config({
-  files: ['**/*.{ts,tsx}'],
-  extends: [
-    js.configs.recommended,
-    ...tseslint.configs.recommended,
-    importPlugin.flatConfigs.recommended,
-    importPlugin.flatConfigs.typescript,
-  ],
-  languageOptions: {
-    globals: {
-      ...globals.node,
-      ...globals.browser,
-      ...globals.vitest,
-      ...globals.es2021,
-    },
-    parserOptions: {
-      ecmaFeatures: { jsx: true },
-    },
-  },
-  settings: {
-    'import/resolver': { typescript: {} },
-  },
-  rules: {
-    'no-implicit-coercion': 'error',
-    'no-warning-comments': [
-      'warn',
-      {
-        terms: ['TODO', 'FIXME', 'XXX', 'BUG'],
-        location: 'anywhere',
-      },
-    ],
-    curly: ['error', 'all'],
-    eqeqeq: ['error', 'always', { null: 'ignore' }],
-
-    // eslint-plugin-import recommended preset에서 신규 적용 — 기존 config는 import 규칙을 켜지 않았으므로 동작 보존 위해 off
-    // (import/export는 TS type re-export에 대한 오탐, 실제 중복 export는 tsc typecheck가 잡음)
-    'import/export': 'off',
-    'import/no-duplicates': 'off',
-
-    // Hoisting을 전략적으로 사용한 경우가 많아서
-    '@typescript-eslint/no-use-before-define': 'off',
-    // 모델 정의 부분에서 class와 interface를 합치기 위해 사용하는 용법도 잡고 있어서
-    // (v8에서 no-empty-interface는 no-empty-object-type으로 통합됨)
-    '@typescript-eslint/no-empty-object-type': 'off',
-    // 모델 정의 부분에서 파라미터 프로퍼티를 잘 쓰고 있어서
-    '@typescript-eslint/explicit-function-return-type': 'off',
-    // (v8에서 no-var-requires는 no-require-imports로 통합됨, 기존 warn 의도 보존)
-    '@typescript-eslint/no-require-imports': 'warn',
-    '@typescript-eslint/no-non-null-asserted-optional-chain': 'warn',
-    // v5 recommended에는 있었으나 v8 recommended에서 빠진 규칙. 기존 동작(warn) 보존.
-    // (소스에 남아있는 eslint-disable @typescript-eslint/no-non-null-assertion 주석들이 이를 전제로 함)
-    '@typescript-eslint/no-non-null-assertion': 'warn',
-    '@typescript-eslint/no-inferrable-types': 'warn',
-    '@typescript-eslint/no-empty-function': 'off',
-    '@typescript-eslint/naming-convention': [
-      'error',
-      {
-        format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
-        selector: 'variable',
-        leadingUnderscore: 'allow',
-      },
-      { format: ['camelCase', 'PascalCase'], selector: 'function' },
-      { format: ['PascalCase'], selector: 'interface' },
-      { format: ['PascalCase'], selector: 'typeAlias' },
-    ],
-    '@typescript-eslint/explicit-module-boundary-types': 'off',
-    '@typescript-eslint/array-type': ['error', { default: 'array-simple' }],
-    '@typescript-eslint/no-unused-vars': [
-      'error',
-      // v8에서 caughtErrors 기본값이 'none' → 'all'로 바뀌어 catch (e) 바인딩까지 잡는다.
-      // 기존(v5) 동작 보존을 위해 caughtErrors를 'none'으로 복원.
-      { ignoreRestSiblings: true, caughtErrors: 'none' },
-    ],
-    '@typescript-eslint/member-ordering': [
-      'error',
-      {
-        default: [
-          'public-static-field',
-          'private-static-field',
-          'public-instance-field',
-          'private-instance-field',
-          'public-constructor',
-          'private-constructor',
-          'public-instance-method',
-          'private-instance-method',
-        ],
-      },
-    ],
-  },
-})
+const base = [...core, ...house]
 
 export default base

package/src/core.js

@@ -0,0 +1,67 @@
+import js from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import importX from 'eslint-plugin-import-x'
+import globals from 'globals'
+import plugin from './plugin.js'
+
+/**
+ * core 레이어 — js + ts 정합성 규칙.
+ *
+ * 스타일 취향과 무관하게 모든 3o3 TS 코드가 따르는 규칙이다. 각 preset 의 recommended 를 그대로 쓴다.
+ *   · @eslint/js + typescript-eslint(recommended) + eslint-plugin-import-x
+ *   · 사내 규칙(@3o3/no-app-event-on-window)
+ *
+ * 타입 인지(type-aware) 규칙은 켜지 않는다 → `parserOptions.project` 가 필요 없어
+ * 어떤 레포에서도 그대로 동작한다(이식성). 타입 인지 규칙은 typeChecked 레이어로 얹는다.
+ *
+ * 하우스 규칙(house 레이어)을 나중에 도입하려는 레포는 base 대신 이 레이어부터 쓴다.
+ *
+ * @example
+ * ```js
+ * import { core } from '@3o3/eslint-config'
+ * export default [...core]
+ * ```
+ */
+const core = tseslint.config({
+  files: ['**/*.{ts,tsx,mts,cts}'],
+  extends: [
+    js.configs.recommended,
+    ...tseslint.configs.recommended,
+    // eslint-plugin-import 의 typescript preset 처럼 node resolver 를 typescript resolver 보다 먼저 둔다 (settings 는 뒤 항목과 합쳐진다).
+    // 예전 node resolver 는 package.json 의 exports 를 읽지 않았으므로 그대로 맞춘다.
+    // (typescript resolver 만 쓰면 패키지가 .d.ts 로 풀려 no-named-as-default-member 등의 결과가 달라진다)
+    {
+      settings: {
+        'import-x/resolver': {
+          node: {
+            // import-x 의 typescript preset 이 쓰는 확장자 목록을 그대로 따라간다 (import-x 를 올리면 함께 바뀐다)
+            extensions:
+              importX.flatConfigs.typescript.settings['import-x/extensions'],
+            exportsFields: [],
+          },
+        },
+      },
+    },
+    importX.flatConfigs.recommended,
+    importX.flatConfigs.typescript,
+  ],
+  languageOptions: {
+    // typescript-eslint recommended 가 TS 파일의 no-undef 를 끄므로 이 globals 를 쓰는 규칙은 없다 (이전 설정에서 그대로 옮긴 것)
+    globals: {
+      ...globals.node,
+      ...globals.browser,
+      ...globals.vitest,
+      ...globals.es2021,
+    },
+    parserOptions: {
+      ecmaFeatures: { jsx: true },
+    },
+  },
+  plugins: { '@3o3': plugin },
+  rules: {
+    // window 에 직접 붙인 등록형 앱 이벤트는 앱에 등록되지 않는다
+    '@3o3/no-app-event-on-window': 'error',
+  },
+})
+
+export default core

package/src/house.js

@@ -0,0 +1,36 @@
+import simpleImportSort from 'eslint-plugin-simple-import-sort'
+import tseslint from 'typescript-eslint'
+
+/**
+ * house 레이어 — 3o3 공통 스타일 규칙.
+ *
+ * recommended 에 더해 서비스·라이브러리 레포가 함께 지키는 스타일 규칙이다. 대부분 `eslint --fix` 로 고쳐진다.
+ * core 레이어 위에 스프레드한다(`@typescript-eslint` 플러그인과 파서를 core 가 등록한다).
+ *
+ * @example
+ * ```js
+ * import { core, house } from '@3o3/eslint-config'
+ * export default [...core, ...house]
+ * ```
+ */
+const house = tseslint.config({
+  files: ['**/*.{ts,tsx,mts,cts}'],
+  plugins: { 'simple-import-sort': simpleImportSort },
+  rules: {
+    'no-implicit-coercion': 'error',
+    eqeqeq: ['error', 'always', { null: 'ignore' }],
+    '@typescript-eslint/no-inferrable-types': 'warn',
+    '@typescript-eslint/array-type': ['error', { default: 'array-simple' }],
+    // 타입만 가져올 때는 `import type` 을 쓴다
+    '@typescript-eslint/consistent-type-imports': 'error',
+    'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error',
+    // rest 로 나머지를 받으려고 꺼낸 프로퍼티(`const { a, ...rest } = x`)와 `_` 로 시작하는 인자는 허용한다
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      { ignoreRestSiblings: true, argsIgnorePattern: '^_' },
+    ],
+  },
+})
+
+export default house

package/src/index.js

@@ -1,51 +1,31 @@
+import core from './core.js'
+import house from './house.js'
 import base from './base.js'
+import typeChecked from './type-checked.js'
 import reactLayer from './react.js'
 import testsLayer from './tests.js'
 import all from './all.js'
 import { docs } from './docs.js'
 import eslintConfigPrettier from 'eslint-config-prettier'
+import plugin from './plugin.js'
 
-/**
- * `@3o3/eslint-config` — 사용처별 레이어를 골라 쓰는 공유 ESLint 설정(ESLint 9 flat).
- *
- * 두 가지 소비 방식을 모두 지원한다.
- *
- * 1) 배열 스프레드(named export):
- * ```js
- * import { base, react } from '@3o3/eslint-config'
- * export default [...base, ...react]
- * ```
- *
- * 2) ESLint 가 권장하는 `extends` 스타일(default export + `defineConfig`):
- * ```js
- * import { defineConfig } from 'eslint/config'
- * import threeo3 from '@3o3/eslint-config'
- * export default defineConfig([
- *   { plugins: { '@3o3': threeo3 }, extends: ['@3o3/base', '@3o3/react'] },
- * ])
- * ```
- *
- * default export 는 `configs` 맵을 가진 플러그인 형태(typescript-eslint /
- * eslint-plugin-react 와 동일한 패턴)라 `extends: ['@3o3/<layer>']` 문자열로
- * 참조된다. `<layer>` 는 base / react / all.
- */
-const plugin = {
-  meta: { name: '@3o3/eslint-config' },
-  // `extends: ['@3o3/<layer>']` 문자열 참조용(typescript-eslint / react 패턴).
-  configs: {
-    base,
-    react: reactLayer,
-    tests: testsLayer,
-    all,
-  },
-  docs,
-  prettier: eslintConfigPrettier,
-}
+// core 가 plugin 을 import 하고 plugin.configs 에는 core 가 담기므로, 순환 import 가 되지 않게 레이어는 여기서 채운다.
+// docs·prettier 도 여기서 붙여, base 만 가져오는 소비처가 문서용 플러그인까지 불러오지 않게 한다
+Object.assign(plugin.configs, {
+  core,
+  house,
+  base,
+  typeChecked,
+  react: reactLayer,
+  tests: testsLayer,
+  all,
+})
+Object.assign(plugin, { docs, prettier: eslintConfigPrettier })
 
 export default plugin
 
 // 배열 스프레드용 named export (기존 방식 유지)
-export { base, all }
+export { core, house, base, typeChecked, all }
 export { reactLayer as react }
 export { testsLayer as tests }
 export { docs }

package/src/plugin.js

@@ -0,0 +1,36 @@
+import noAppEventOnWindow from './rules/no-app-event-on-window.js'
+
+/**
+ * `@3o3/eslint-config` — 사용처별 레이어를 골라 쓰는 공유 ESLint 설정(flat config).
+ *
+ * 두 가지 소비 방식을 모두 지원한다.
+ *
+ * 1) 배열 스프레드(named export):
+ * ```js
+ * import { base, react } from '@3o3/eslint-config'
+ * export default [...base, ...react]
+ * ```
+ *
+ * 2) ESLint 가 권장하는 `extends` 스타일(default export + `defineConfig`):
+ * ```js
+ * import { defineConfig } from 'eslint/config'
+ * import threeo3 from '@3o3/eslint-config'
+ * export default defineConfig([
+ *   { plugins: { '@3o3': threeo3 }, extends: ['@3o3/base', '@3o3/react'] },
+ * ])
+ * ```
+ *
+ * default export 는 `configs` 맵을 가진 플러그인 형태(typescript-eslint 와 동일한 패턴)라
+ * `extends: ['@3o3/<layer>']` 문자열로 참조된다. `<layer>` 는 core / house / base / typeChecked / react / tests / all.
+ *
+ * core 가 이 객체를 `@3o3` 로 등록한다. 소비처가 다시 등록해도 같은 객체라 중복 정의가 아니다.
+ */
+const plugin = {
+  meta: { name: '@3o3/eslint-config' },
+  rules: {
+    'no-app-event-on-window': noAppEventOnWindow,
+  },
+  configs: {},
+}
+
+export default plugin

package/src/react.js

@@ -1,16 +1,20 @@
 import tseslint from 'typescript-eslint'
-import react from 'eslint-plugin-react'
+import eslintReact from '@eslint-react/eslint-plugin'
 import reactHooks from 'eslint-plugin-react-hooks'
-import * as emotionPlugin from '@emotion/eslint-plugin'
 
 /**
  * react 레이어 — base 위에 얹는 React 델타.
  *
- * eslint-plugin-react(flat recommended) + react-hooks(rules-of-hooks / exhaustive-deps)
- * + @emotion 을 포함한다. base 를 먼저 스프레드한 뒤 이 레이어를 스프레드한다.
+ * @eslint-react(React 규칙) + react-hooks(rules-of-hooks / exhaustive-deps) 를 포함한다.
+ * base 를 먼저 스프레드한 뒤 이 레이어를 스프레드한다.
  *
- * react-hooks v7 의 flat preset(recommended-latest)은 React Compiler 시대의
- * 16개 규칙 슈퍼셋이라 기존 동작과 크게 달라진다. 따라서 preset을 쓰지 않고
+ * eslint-plugin-react 는 ESLint 10 을 지원하지 않아 @eslint-react 로 바꿨다. @eslint-react 의
+ * recommended preset 은 60개가 넘는 규칙을 켜서 기존 동작과 크게 달라지므로,
+ * preset 을 쓰지 않고 eslint-plugin-react recommended 에서 켜져 있던 규칙에 대응하는 것만 켠다.
+ * 훅 규칙은 기존 `react-hooks/*` 이름을 유지하려고 eslint-plugin-react-hooks 를 그대로 쓴다.
+ *
+ * react-hooks v7 의 preset 은 React Compiler 규칙까지 켜는 슈퍼셋이라
+ * 기존 동작과 크게 달라진다. 따라서 preset을 쓰지 않고
  * 플러그인만 등록한 뒤 기존에 켜져 있던 두 규칙만 명시적으로 활성화한다.
  *
  * @example
@@ -20,32 +24,41 @@ import * as emotionPlugin from '@emotion/eslint-plugin'
  * ```
  */
 const reactLayer = tseslint.config({
-  files: ['**/*.{ts,tsx}'],
-  extends: [react.configs.flat.recommended],
-  languageOptions: {
-    parserOptions: {
-      ecmaFeatures: { jsx: true },
-    },
-  },
-  settings: {
-    react: { version: 'detect' },
-  },
+  files: ['**/*.{ts,tsx,mts,cts}'],
   plugins: {
-    // @emotion/eslint-plugin 11.x는 flat preset이 없어 수동으로 등록한다.
-    '@emotion': emotionPlugin,
+    // dom-* 규칙도 이 플러그인의 rules 에 함께 들어 있어 '@eslint-react/dom' 을 따로 등록하지 않는다
+    '@eslint-react': eslintReact,
     'react-hooks': reactHooks,
   },
   rules: {
-    '@emotion/pkg-renaming': 'error',
-
-    'react/prop-types': 'off',
-    // React.memo, React.forwardRef에서 사용하는 경우도 막고 있어서
-    'react/display-name': 'off',
-    // 기존 v4 recommended preset에서 켜져 있던 규칙 (수동 등록 시 명시 필요)
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'error',
-    'react/react-in-jsx-scope': 'off',
-    'react/no-unknown-property': ['error', { ignore: ['css'] }],
+
+    // 주석은 예전 규칙 이름. 이 대응을 바꾸면 README.md·ADOPTION.md 의 대응표도 고친다
+    // react/jsx-key
+    '@eslint-react/no-missing-key': 'error',
+    // react/jsx-no-comment-textnodes
+    '@eslint-react/jsx-no-comment-textnodes': 'error',
+    // react/jsx-no-target-blank
+    '@eslint-react/dom-no-unsafe-target-blank': 'error',
+    // react/no-children-prop
+    '@eslint-react/jsx-no-children-prop': 'error',
+    // react/no-danger-with-children
+    '@eslint-react/dom-no-dangerously-set-innerhtml-with-children': 'error',
+    // react/no-direct-mutation-state
+    '@eslint-react/no-direct-mutation-state': 'error',
+    // react/no-find-dom-node
+    '@eslint-react/dom-no-find-dom-node': 'error',
+    // react/no-render-return-value
+    '@eslint-react/dom-no-render-return-value': 'error',
+    // react/no-unknown-property
+    '@eslint-react/dom-no-unknown-property': ['error', { ignore: ['css'] }],
+    // react/no-deprecated
+    '@eslint-react/no-component-will-mount': 'error',
+    '@eslint-react/no-component-will-receive-props': 'error',
+    '@eslint-react/no-component-will-update': 'error',
+    '@eslint-react/dom-no-render': 'error',
+    '@eslint-react/dom-no-hydrate': 'error',
   },
 })
 

package/src/rules/no-app-event-on-window.js

@@ -0,0 +1,123 @@
+const APP_EVENT_PREFIX = 'flutter_'
+const WINDOW_NAMES = ['window', 'globalThis', 'self']
+const METHODS = ['addEventListener', 'removeEventListener']
+const APP_BRIDGE = '@3o3/app-bridge'
+
+const findVariable = (scope, name) => {
+  for (let current = scope; current; current = current.upper) {
+    const variable = current.set.get(name)
+    if (variable) {
+      return variable
+    }
+  }
+  return undefined
+}
+
+/**
+ * 앱 이벤트(flutter_*)를 window 에 직접 붙이는 코드를 막는다. 이벤트 이름이 문자열 리터럴인 호출만 잡는다.
+ * 등록형 이벤트(onBackPressed)는 window 에 직접 붙이면 앱에 등록되지 않는다.
+ */
+const rule = {
+  meta: {
+    type: 'problem',
+    fixable: 'code',
+    docs: {
+      description:
+        '앱 이벤트(flutter_*)는 window 대신 @3o3/app-bridge 의 webView 로 구독한다',
+    },
+    schema: [],
+    messages: {
+      useWebView:
+        "앱 이벤트 '{{event}}' 는 window 에 직접 붙이지 말고 @3o3/app-bridge 의 webView.{{method}} 를 쓰세요. 등록형 이벤트는 직접 붙이면 앱에 등록되지 않습니다.",
+    },
+  },
+  create(context) {
+    const { sourceCode } = context
+
+    return {
+      CallExpression(node) {
+        const { callee } = node
+        const [eventName] = node.arguments
+        if (
+          callee.type !== 'MemberExpression' ||
+          callee.computed ||
+          callee.object.type !== 'Identifier' ||
+          !WINDOW_NAMES.includes(callee.object.name) ||
+          callee.property.type !== 'Identifier' ||
+          !METHODS.includes(callee.property.name) ||
+          eventName?.type !== 'Literal' ||
+          typeof eventName.value !== 'string' ||
+          !eventName.value.startsWith(APP_EVENT_PREFIX)
+        ) {
+          return
+        }
+
+        const program = sourceCode.ast
+        const appBridgeImports = program.body.filter(
+          (statement) =>
+            statement.type === 'ImportDeclaration' &&
+            statement.source.value === APP_BRIDGE &&
+            statement.importKind !== 'type'
+        )
+        const webViewSpecifier = appBridgeImports
+          .flatMap((declaration) => declaration.specifiers)
+          .find(
+            (specifier) =>
+              specifier.type === 'ImportSpecifier' &&
+              specifier.imported.name === 'webView' &&
+              specifier.importKind !== 'type'
+          )
+        const localName = webViewSpecifier?.local.name ?? 'webView'
+
+        // webView 가 다른 값을 가리키면 고치지 않는다
+        const variable = findVariable(sourceCode.getScope(node), localName)
+        const canFix = webViewSpecifier
+          ? variable?.defs[0]?.node === webViewSpecifier
+          : !variable
+
+        const importFixes = (fixer) => {
+          if (webViewSpecifier) {
+            return []
+          }
+
+          const namedImport = appBridgeImports.find((declaration) =>
+            declaration.specifiers.some(
+              (specifier) => specifier.type === 'ImportSpecifier'
+            )
+          )
+          if (namedImport) {
+            return [
+              fixer.insertTextAfter(namedImport.specifiers.at(-1), ', webView'),
+            ]
+          }
+
+          // 'use client' 같은 지시어는 맨 위에 남아야 한다
+          const anchor =
+            program.body.find(
+              (statement) => statement.type === 'ImportDeclaration'
+            ) ?? program.body.find((statement) => !statement.directive)
+          return [
+            fixer.insertTextBefore(
+              anchor,
+              `import { webView } from '${APP_BRIDGE}'\n`
+            ),
+          ]
+        }
+
+        context.report({
+          node,
+          messageId: 'useWebView',
+          data: { event: eventName.value, method: callee.property.name },
+          fix: canFix
+            ? (fixer) => [
+                fixer.replaceText(callee.object, localName),
+                ...importFixes(fixer),
+              ]
+            : null,
+        })
+      },
+    }
+  },
+}
+
+export default rule

package/src/tests.js

@@ -3,12 +3,13 @@ import tseslint from 'typescript-eslint'
 /**
  * tests 레이어 — 테스트 파일에만 적용하는 완화 규칙.
  *
- * 대상: `**\/__tests__/**\/*.{ts,tsx}` 와 `**\/*.spec.{ts,tsx}` (레포 테스트 컨벤션).
+ * 대상: `**\/__tests__/**\/*.{ts,tsx,mts,cts}` 와 `**\/*.{spec,test}.{ts,tsx,mts,cts}`.
  *
  * 테스트는 목·스텁·DOM 노드 접근 때문에 non-null 어설션(`!`)을 자연스럽게 쓰고,
- * 임시 픽스처 배열 타입도 `T[]` 로 두는 편이 읽기 쉽다. 프로덕션 코드에는
- * `no-non-null-assertion`(warn)·`array-type`(array-simple) 을 유지하되, 테스트
- * 파일에서는 off 한다. base/react 레이어 뒤에 스프레드해야 오버라이드가 적용된다.
+ * 임시 픽스처 배열 타입도 `T[]` 로 두는 편이 읽기 쉽다. 그래서 테스트 파일에서는
+ * `array-type`(house)과 `no-non-null-assertion` 을 off 한다. `no-non-null-assertion` 은
+ * 이 패키지가 켜지 않지만, 레포에서 직접 켠 경우에도 테스트에서는 꺼지도록 둔다.
+ * base/react 레이어와 레포 고유 규칙 뒤에 스프레드해야 오버라이드가 적용된다.
  *
  * @example
  * ```js
@@ -20,7 +21,10 @@ import tseslint from 'typescript-eslint'
  * ```
  */
 const tests = tseslint.config({
-  files: ['**/__tests__/**/*.{ts,tsx}', '**/*.spec.{ts,tsx}'],
+  files: [
+    '**/__tests__/**/*.{ts,tsx,mts,cts}',
+    '**/*.{spec,test}.{ts,tsx,mts,cts}',
+  ],
   rules: {
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/array-type': 'off',

package/src/type-checked.js

@@ -0,0 +1,26 @@
+import tseslint from 'typescript-eslint'
+
+/**
+ * typeChecked 레이어 — 타입 정보를 쓰는 규칙(typescript-eslint recommended-type-checked 의 타입 인지 규칙).
+ *
+ * `no-floating-promises`, `no-misused-promises`, `no-unsafe-*` 등을 켠다. 타입 정보를 얻기 위해
+ * `parserOptions.projectService` 를 켜므로, lint 대상 파일이 tsconfig 에 포함돼 있어야 하고
+ * 타입 정보 없이 돌 때보다 느리다. 그래서 base 에 넣지 않고 따로 얹는다. core(또는 base) 위에 스프레드한다.
+ * 켜지는 규칙은 typescript-eslint 의 preset 을 따르므로 typescript-eslint 를 올리면 달라질 수 있다.
+ * tsconfig 가 ESLint 를 실행하는 디렉터리보다 위에 있으면 `parserOptions.tsconfigRootDir` 를 함께 지정한다(README 참고).
+ *
+ * @example
+ * ```js
+ * import { base, typeChecked } from '@3o3/eslint-config'
+ * export default [...base, ...typeChecked]
+ * ```
+ */
+const typeChecked = tseslint.config({
+  files: ['**/*.{ts,tsx,mts,cts}'],
+  extends: [tseslint.configs.recommendedTypeCheckedOnly],
+  languageOptions: {
+    parserOptions: { projectService: true },
+  },
+})
+
+export default typeChecked