@wooojin/forgen 0.4.8 → 0.4.9

package/assets/dev-guide/fe/skills/react/fe-review/SKILL.md

@@ -0,0 +1,141 @@
+---
+name: fe-review-react
+description: React/Next.js PR/diff를 사내 원칙 기반으로 리뷰. `[SEVERITY] file:line — 이슈` 형식으로 출력. 4원칙 + Web Vitals + WCAG 2.2 + React 19/Compiler 안티패턴 체크.
+---
+
+# fe-review (React)
+
+> **호출 시점**: PR 링크, diff, 또는 변경된 파일 목록 받았을 때.
+> **선행 로딩**: `principles/common.md` + `principles/react.md`.
+
+## 0. 출력 형식 (반드시 준수)
+
+```
+[SEVERITY] path/to/file.tsx:42 — <한 줄 이슈>
+  근거: principles/<doc>.md <섹션> 또는 sources/<file>.md
+  픽스: <코드 또는 한 줄 처방>
+```
+
+**SEVERITY**: `HIGH` (즉시 픽스 / 머지 차단), `MED` (다음 PR 가능), `LOW` (취향/넛지).
+
+리뷰 시작 시 한 줄 요약:
+```
+## 리뷰 요약
+- 변경 범위: <files / +N -M>
+- HIGH N개, MED N개, LOW N개
+- 머지 가능 여부: [차단 / 권장 수정 후 / 가능]
+```
+
+## 1. 체크 순서 (위반 시 곧장 [HIGH])
+
+### Phase 1 — 명세/요구사항 정합성 (가장 먼저)
+
+- 요구사항 명세가 함께 제공됐는가? 없으면 다음 출처 후보를 사용자에게 *명시적으로 요청* 후 일시 중지:
+  1. PR/MR 본문의 "Why / Spec" 섹션
+  2. 연결된 이슈 (Linear/Jira/GitHub Issue)
+  3. Notion/Confluence 명세 페이지 링크
+  4. 디자인 명세 (Figma 코멘트 / 디자인 토큰 문서)
+  5. 위 어디에도 없으면 *구두 합의 내용을 텍스트로 적어달라고* 요청
+  → 명세 없는 리뷰는 "취향 코멘트" 가 된다. 받기 전에는 Phase 2 이후로 *진행하지 않는다.*
+- 명세 옵셔널 항목이 검증 로직에서 필수 취급된 곳 없는가? (표시/검증 불일치 — 가장 흔한 명세 위반)
+  → 점검 절차: 명세에서 "옵셔널" 단어를 grep → 해당 필드/옵션 → UI 분기 (`isRequired`, `disabled`) ↔ 검증 분기 (`return error`, `continue`) 가 **같은 진실을 보는가**.
+- README/주석이 자랑하는 패턴이 실제 코드에서 누락된 곳은? (discriminated union 분기 누락 등)
+
+### Phase 2 — React 19 / Next.js 16 안티패턴 (`principles/react.md` R9)
+
+- [ ] `useEffect` 안에서 데이터 변환 / 체인 setState — [HIGH] 픽스: 렌더 중 파생값
+- [ ] `useState` + `useEffect` 로 fetch — [HIGH] 픽스: Suspense + `use()` 또는 React Query
+- [ ] Compiler 환경에서 수동 `useMemo`/`useCallback` 추가 — [MED] 픽스: 제거
+- [ ] Client 컴포넌트가 Server 컴포넌트 import — [HIGH] 픽스: `children` prop 주입
+- [ ] Server Component 안에 `useState`/`useEffect` — [HIGH] 픽스: `'use client'` 분리
+- [ ] Form 상태 `useState` 수동 관리 (단순 폼) — [MED] 픽스: `<form action>` + `useActionState`
+- [ ] `<img>` 직접 사용 — [HIGH] 픽스: `next/image` (또는 `width/height` 명시)
+- [ ] 변경 액션 후 `revalidateTag`/`revalidatePath` 누락 — [HIGH] 픽스: 호출 추가
+- [ ] `'use client'` 파일에 대형 의존성 import — [MED] 픽스: dynamic import 또는 Server 분리
+
+### Phase 3 — 코드 품질 4원칙 (`principles/common.md` A)
+
+가독성 > 예측성 > 응집도 > 결합도 순으로 검토.
+
+- [ ] 같이 실행되지 않는 코드 분리 (권한/조건별 분기 한 컴포넌트) — [MED]
+- [ ] 구현 상세 노출 (인증 체크 inline 등) — [MED] 픽스: `<AuthGuard>`
+- [ ] 다목적 훅 (페이지 전체 쿼리파람 통합) — [HIGH] 픽스: 책임별 분리
+- [ ] 익명 복잡 조건 — [LOW] 픽스: 명명된 변수
+- [ ] 매직 넘버 — [LOW] 픽스: 상수
+- [ ] 시점 이동 3단계+ — [MED] 픽스: 평탄화
+- [ ] 중첩 삼항 — [LOW] 픽스: IIFE + if
+- [ ] 부등식 순서 (`a >= b && a <= c`) — [LOW] 픽스: `b <= a && a <= c`
+- [ ] 같은 종류 함수 반환 타입 불일치 — [MED] 픽스: 통일
+- [ ] 숨은 로직 (fetch 안 logging 등) — [MED] 픽스: 책임 분리
+- [ ] Props 3단 드릴링 — [HIGH] 픽스: Composition or Context
+- [ ] 잘못된 공통화 (유사 컴포넌트 강제 추출) — [HIGH] 픽스: 중복 허용
+
+### Phase 4 — Web Vitals (`principles/common.md` B)
+
+- [ ] LCP 후보 이미지 `priority` 누락 — [HIGH]
+- [ ] 이미지 `width/height`/`fill` 없음 → CLS — [HIGH]
+- [ ] 메인 스레드 Long Task (>200ms) 동기 계산 — [MED] 픽스: `startTransition` 또는 chunk 분할
+- [ ] `useOptimistic` 사용 가능 인터랙션에 미적용 (좋아요/메시지 등) — [LOW]
+- [ ] `font-display` 미설정 → 폰트 깜빡임 → CLS — [MED]
+
+### Phase 5 — 접근성 (`principles/common.md` C, WCAG 2.2)
+
+- [ ] `<div onClick>` 또는 `<span onClick>` — [HIGH] 픽스: `<button>`
+- [ ] **사내/외부 wrapper 컴포넌트에 `onClick`** (`<Card onClick>`, `<Icon onClick>`, `<ListRow onClick>`) — [MED→HIGH] 내부 구현이 `<div>` 면 키보드 접근 불가. 1회 확인 절차:
+  1. wrapper 컴포넌트 정의 파일 열기 → 루트 엘리먼트 확인
+  2. `<button>` 또는 `role="button"` + `tabIndex={0}` + `onKeyDown` (Enter/Space) 있으면 OK
+  3. 아니면 사내 a11y 프리미티브(`<Clickable>` 등)로 감싸거나 `<button>` 사용
+- [ ] `<button>` 에 `type` 누락 (form 내부) — [MED] 픽스: `type="button"` 또는 `"submit"`
+- [ ] 폼 컨트롤 `<label>` 누락 — [HIGH]
+- [ ] 인터랙티브 영역 < 24×24 CSS px — [MED] (WCAG 2.5.8)
+- [ ] `outline: none` 만 있고 `:focus-visible` 대안 없음 — [HIGH] (WCAG 2.4.7)
+- [ ] 이미지 `alt` 누락 또는 부정확 — [HIGH]
+- [ ] 텍스트 대비 4.5:1 (본문) / 3:1 (큰 글자) 미만 — [HIGH]
+- [ ] 모달 focus trap 누락 — [HIGH]
+- [ ] sticky header 가 포커스 가림 (WCAG 2.4.11) — [MED] 픽스: `scroll-padding-top`
+
+### Phase 6 — 보안/안전 (전역 규칙)
+
+- [ ] `.env`/credential 커밋 — [HIGH] 즉시 차단
+- [ ] `dangerouslySetInnerHTML` + 외부 입력 — [HIGH] sanitize 필요
+- [ ] 빈 catch 블록 — [HIGH] 최소 로그 또는 re-throw
+- [ ] eslint-disable / @ts-ignore 무근거 — [MED] 사유 주석 필요
+
+### Phase 7 — 안티패턴 일반 (전역 규칙)
+
+- [ ] 50줄 초과 함수 — [MED] 분리
+- [ ] 중첩 깊이 5+ — [MED] early return
+- [ ] 같은 파일 3+ 회 수정 흔적 (PR 내) — [MED] 전체 재설계 권고
+
+## 2. 우선순위 충돌 시
+
+- a11y vs 가독성 → a11y 우선
+- 성능 vs 가독성 → 사용자 영향 큰 쪽 (LCP/INP 결정적 개선이면 성능)
+- React Compiler vs 명시적 메모 → Compiler 환경이면 자동, 아니면 명시적 유지
+
+## 3. 출력 예시
+
+```
+## 리뷰 요약
+- 변경 범위: src/pages/order/* 8 files +312 -45
+- HIGH 3개, MED 5개, LOW 2개
+- 머지 가능 여부: 차단
+
+[HIGH] src/pages/order/OrderForm.tsx:88 — select 옵션 옵셔널인데 검증에서 차단
+  근거: principles/common.md D (안티패턴 카탈로그)
+  픽스: optionRules.ts에서 `opt.type !== 'grid'` 분기 `continue`
+
+[HIGH] src/components/HeroImage.tsx:12 — <img> 직접 사용
+  근거: principles/react.md R8
+  픽스: next/image + priority + sizes
+
+[MED] src/hooks/usePageState.ts:1 — 쿼리파람 통합 훅 (다목적)
+  근거: principles/common.md A.4, sources/toss-ff/coupling-use-page-state.md
+  픽스: 파라미터별 독립 훅으로 분리 (useOrderId, useFilter ...)
+```
+
+## 4. 관련 문서
+
+- [`principles/common.md`](../../principles/common.md), [`principles/react.md`](../../principles/react.md)
+- [`fe-build/SKILL.md`](../fe-build/SKILL.md), [`fe-perf/SKILL.md`](../fe-perf/SKILL.md)
+- 안티패턴 카탈로그: `principles/common.md` D + `principles/react.md` R9

package/assets/dev-guide/fe/skills/vue/fe-build/SKILL.md

@@ -0,0 +1,148 @@
+---
+name: fe-build-vue
+description: Vue 3/Nuxt 3 요구사항을 받아 사내 원칙대로 구현. 명세→체크리스트→테스트 매핑 강제, Composition API + `<script setup>` + Nuxt 데이터 페칭 디폴트.
+---
+
+# fe-build (Vue)
+
+> **호출 시점**: "요구사항 명세 줄게, Vue로 구현해줘".
+> **선행 로딩**: `principles/common.md` + `principles/vue.md` 필수.
+
+## 0. 절대 금지
+
+1. 명세 읽기 전에 코드 쓰지 마라.
+2. 명세에 없는 UX 결정 추가하지 마라.
+3. 명세 "옵셔널" 항목 → "안 골라도 통과" 테스트 *반드시*.
+4. `reactive` 객체 비구조화 금지 (`principles/vue.md` V3.2).
+5. props 비구조화 (3.4 이하) 금지. 3.5+ 에서도 watch source 는 getter 필수.
+6. Nuxt: `onMounted` 안 페치 금지 (`useFetch`/`useAsyncData` 사용).
+
+## 1. 워크플로우
+
+### Step 1 — 명세 → 체크리스트
+
+```markdown
+## 체크리스트
+- [ ] R-01: <명세 원문 인용>
+- [ ] R-02: ...
+```
+
+해석 없이 원문만. 사용자에게 보여주고 빠진 항목 확인.
+
+### Step 2 — 매핑표
+
+```markdown
+| 요구사항 | 컴포넌트/composable | 테스트 |
+|----------|---------------------|--------|
+| R-01 | OrderForm.vue | OrderForm.spec.ts:"제출 시 ..." |
+| R-02 | useCart | useCart.spec.ts:"옵셔널 옵션 미선택 시 통과" |
+```
+
+### Step 3 — 아키텍처 결정
+
+상태 위치 결정 (V4.1):
+- 단일 컴포넌트: `ref`/`reactive`
+- 2+ 컴포넌트 공유: composable
+- 싱글톤/SSR: Pinia store
+
+Nuxt 페이지/컴포넌트:
+- 페이지 진입 시 데이터: `useFetch` 또는 `useAsyncData`
+- 이벤트 후 mutation: `$fetch`
+- BFF 필요: `server/api/*.ts`
+
+결정 한 줄 사용자에게 공유.
+
+### Step 4 — TDD (vitest + Vue Test Utils 또는 Nuxt test-utils)
+
+각 매핑표 행마다 Red → Green → Refactor.
+
+### Step 5 — 셀프 리뷰
+
+[`fe-review/SKILL.md`](../fe-review/SKILL.md) 체크리스트로 자가 점검.
+
+### Step 6 — 완료 선언
+
+모든 행 ✅ + 테스트 green.
+
+## 2. 구현 디폴트
+
+### 2.1 SFC 골격
+
+```vue
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+const props = defineProps<{ id: string }>();
+const emit = defineEmits<{ submit: [payload: FormPayload] }>();
+
+const count = ref(0);
+const double = computed(() => count.value * 2);
+
+function onSubmit() {
+  emit('submit', { id: props.id, count: count.value });
+}
+</script>
+
+<template>
+  <form @submit.prevent="onSubmit">
+    <!-- ... -->
+  </form>
+</template>
+
+<style scoped>
+/* 클래스 셀렉터 사용 (element 셀렉터 지양) */
+</style>
+```
+
+### 2.2 데이터 페칭 (Nuxt)
+
+```ts
+// 페이지 진입 시 — SSR + hydration 일관
+const { data: order, error } = await useFetch(`/api/orders/${route.params.id}`, {
+  key: `order-${route.params.id}`,
+});
+
+// 이벤트 핸들러
+async function onSubmit() {
+  const res = await $fetch('/api/orders', { method: 'POST', body: form.value });
+  await refreshCookie('order-list'); // 또는 router.push
+}
+```
+
+### 2.3 폼
+
+- 단순: `ref` + `v-model` + `@submit.prevent`
+- 복잡: VeeValidate + zod 또는 Vue 3 + `@vue/reactivity` 기반 폼 라이브러리
+- **검증 규칙에 optional 분기 명시** — `z.string().optional()`
+
+### 2.4 상태
+
+- 컴포넌트 로컬: `ref`/`computed`
+- 공유 로직: composable (`useOrder.ts`)
+- 글로벌: Pinia setup store (`defineStore('order', () => {...})`)
+- URL 단일 진실: `useRoute().query` + `navigateTo({ query: ... })`
+
+### 2.5 접근성 디폴트
+
+- 폼: `<label :for="id">` + `:id`
+- 동작 vs 이동: `<button>` vs `<NuxtLink>` (또는 `<router-link>`)
+- 모달: `<dialog>` + focus trap
+- 인터랙티브 24×24 CSS px
+
+## 3. 출력 형식
+
+```
+## 완료 보고
+- 체크리스트: N/N ✅
+- 매핑표: 모든 행 green
+- 변경 파일: <목록>
+- 셀프 리뷰: principles/vue.md V1-V6 통과
+- 의사결정: <상태 위치 / 페칭 함수 선택 근거 1-2줄>
+```
+
+## 4. 관련 문서
+
+- [`principles/common.md`](../../principles/common.md), [`principles/vue.md`](../../principles/vue.md)
+- [`skills/vue/fe-review/SKILL.md`](../fe-review/SKILL.md)
+- [`skills/vue/fe-perf/SKILL.md`](../fe-perf/SKILL.md)
+- 코퍼스: `sources/vue/`, `sources/perf/`, `sources/toss-ff/`

package/assets/dev-guide/fe/skills/vue/fe-perf/SKILL.md

@@ -0,0 +1,163 @@
+---
+name: fe-perf-vue
+description: Vue 3/Nuxt 3 앱 메모리 누수·CPU 병목·INP/LCP 회귀 진단. Chrome DevTools + Vue DevTools + Nuxt DevTools 절차. 반응성 관련 누수 + watch 폭주 패턴.
+---
+
+# fe-perf (Vue)
+
+> **호출 시점**: "느려졌어", "메모리 누는 것 같아", "INP 나빠", Nuxt SSR 응답 느림.
+> **선행 로딩**: `principles/common.md` B + `sources/a11y-dx/chrome-devtools-*.md`.
+
+## 0. 분류
+
+1. **메모리** — heap 증가 / OOM
+2. **CPU/렌더** — INP 나쁨 / 인터랙션 굳음
+3. **로드** — LCP/TTFB 나쁨 / 번들 큼
+
+---
+
+## 1. 메모리 누수 진단
+
+근거: `sources/a11y-dx/chrome-devtools-memory.md`
+
+### 1.1 측정 (Heap Snapshot 3회법)
+
+(React 와 동일 절차 — 도구는 동일)
+
+1. snapshot 1 (초기) → 의심 동작 N회 → snapshot 2 → GC → snapshot 3
+2. 증가한 Constructor + Retainer 트리 추적
+3. `Detached` prefix = DOM 누수
+
+### 1.2 Vue 특화 누수 패턴
+
+| 패턴 | 증상 | 픽스 |
+|------|------|------|
+| **watch 핸들러가 외부 변수 캡처** | watch 콜백이 큰 객체 참조 + 컴포넌트 unmount 후에도 살아있음 | `onUnmounted` 에서 `stopWatch()` 호출 (또는 컴포넌트 스코프 watch면 자동 정리) |
+| **`watchEffect` 가 reactive ref 외부 보관** | 외부 store에 ref 저장 | 컴포넌트 scope 안에서만 사용 |
+| **글로벌 이벤트 리스너 미해제** | `window.addEventListener` + `onUnmounted` 누락 | `useEventListener` (VueUse) 또는 명시적 `onUnmounted` cleanup |
+| **Pinia store 무제한 누적** | 캐시/히스토리에 max 없음 | LRU 또는 max-size |
+| **`provide` 객체에 컴포넌트 참조 저장** | 자식 컴포넌트가 unmount 후에도 부모 provide 통해 살아있음 | provide는 primitive/ref만 |
+| **Nuxt asyncData payload 거대** | SSR payload에 직렬화된 거대 객체 → 메모리 + hydration 비용 | `transform` 옵션으로 필요한 필드만 |
+
+### 1.3 진단 결과 형식
+
+```
+## 메모리 누수 진단
+- 증상: 모달 N회 열고 닫으면 heap +XMB
+- 원인: Detached HTMLDivElement, retainer = window.onResize (onUnmounted 정리 누락)
+- 픽스: src/components/AppHeader.vue:32
+  onUnmounted(() => window.removeEventListener('resize', onResize))
+  // 또는 VueUse useEventListener 사용
+- 검증: 3회법 재실행 → 누적 0
+```
+
+---
+
+## 2. CPU/렌더 병목 (INP 회귀)
+
+근거: `sources/perf/02-inp.md`, `sources/a11y-dx/chrome-devtools-performance.md`
+
+### 2.1 INP 진단
+
+(측정 도구는 React 동일 — `web-vitals/attribution`)
+
+```ts
+import { onINP } from 'web-vitals/attribution';
+onINP((m) => console.log(m.attribution));
+```
+
+Chrome DevTools Performance 패널 + Vue DevTools (Inspector → Performance 탭) 병행.
+
+### 2.2 Vue 특화 픽스 패턴
+
+| 원인 | 픽스 |
+|------|------|
+| 핸들러 안 동기 무거운 계산 | 작업 chunk + `scheduler.yield()` 또는 `requestIdleCallback` |
+| 무거운 watch (deep, 큰 객체) | computed로 대체 가능한지 검토. 안 되면 throttle/debounce |
+| `watchEffect` 가 너무 자주 트리거 | 명시적 `watch` + 좁은 source |
+| reactive 큰 객체 변경 → 의존 컴포넌트 폭주 | `shallowRef`/`shallowReactive` 또는 분할 |
+| 큰 리스트 v-for | `v-memo` (안정 분기 시) 또는 가상 스크롤 (VueUse `useVirtualList`) |
+| 매 입력마다 외부 통신 | debounce (VueUse `useDebounceFn`) |
+| reactivity 추적 폭주 | `markRaw()` (반응성 불필요 큰 객체) |
+
+### 2.3 Vue DevTools — 렌더 추적
+
+- Performance 탭 → 컴포넌트 렌더 시간 측정
+- Highlight Updates → 어떤 컴포넌트가 재렌더되는지 시각화
+- 불필요한 자식 리렌더 → props 안정화 또는 `defineProps` 분리
+
+### 2.4 진단 결과 형식
+
+```
+## INP 진단
+- 측정: INP p75 = 460ms (Poor)
+- 하위: inputDelay=80ms, processingDuration=340ms, presentationDelay=40ms
+- 원인: pages/list.vue:55 onSearch 안 동기 필터 (n=12k) + reactive 전체 변경
+- 픽스:
+  ```ts
+  const query = ref('');
+  const debouncedQuery = useDebounceFn((v: string) => query.value = v, 150);
+  const filtered = computed(() => items.filter(matches(query.value)));
+  // items가 큰 정적 데이터면 shallowRef로 wrap
+  ```
+- 검증: INP p75 재측정 → ≤200ms
+```
+
+---
+
+## 3. 로드 성능 (Nuxt SSR / LCP)
+
+근거: `sources/perf/03-lcp-cls.md`, `sources/perf/10-optimize-lcp.md`
+
+### 3.1 LCP 진단
+
+(측정 절차는 React 동일 — Lighthouse, PageSpeed Insights, Performance 패널)
+
+### 3.2 Nuxt SSR 특화 픽스
+
+| 큰 구성 요소 | 픽스 |
+|--------------|------|
+| **TTFB** | Nuxt `defineEventHandler` 안 동기 작업 줄이기, Nitro `cachedFunction`, ISR (`routeRules: { isr: true }`) |
+| **Resource Load Delay** | `<NuxtImg>` `preload`, `<Head>` 안 `<link rel="preload">` |
+| **Resource Load Time** | `@nuxt/image` (WebP/AVIF), CDN, sizes |
+| **Render Delay** | hydration mismatch 확인 (콘솔 경고), `<ClientOnly>` 신중하게 |
+
+### 3.3 Nuxt asyncData 최적화
+
+- `transform` 으로 직렬화 payload 슬림화
+- `pick` 으로 필요한 필드만 (`useFetch(url, { pick: ['id', 'name'] })`)
+- `lazy: true` (비차단) — 단 LCP 콘텐츠는 lazy 금지
+
+### 3.4 번들 분석
+
+- `nuxi analyze` 로 클라이언트 번들 시각화
+- 큰 컴포넌트 → `defineAsyncComponent` 또는 `components.lazy`
+- 서버 전용 의존성은 `server/` 또는 `nitro.experimental.componentIslands`
+
+### 3.5 결과 형식
+
+```
+## LCP 진단
+- 측정: LCP p75 = 3.5s (Needs Improvement)
+- LCP element: pages/index.vue <img src="/hero.jpg">
+- 분해: TTFB 1.1s + LoadDelay 0.7s + LoadTime 1.0s + RenderDelay 0.7s
+- 픽스 (우선순위):
+  1. `<NuxtImg src="/hero.jpg" preload format="webp">` — LoadDelay 제거
+  2. nuxt.config: routeRules { '/': { isr: 60 } } — TTFB 1.1s → 150ms
+  3. hydration mismatch (콘솔 경고) 제거 — RenderDelay 단축
+- 검증: 배포 후 24h Field Data 재확인
+```
+
+---
+
+## 4. 출력 (필수)
+
+- **측정 수치 (before)**
+- **원인 (파일:라인 + retainer/콜스택)**
+- **픽스 코드** — 카피-페이스트 가능
+- **검증 방법**
+
+## 5. 관련 문서
+
+- [`principles/common.md`](../../principles/common.md), [`principles/vue.md`](../../principles/vue.md)
+- 코퍼스: `sources/a11y-dx/chrome-devtools-*`, `sources/a11y-dx/react-devtools-profiler.md` (DevTools 개념 동일), `sources/perf/`

package/assets/dev-guide/fe/skills/vue/fe-review/SKILL.md

@@ -0,0 +1,136 @@
+---
+name: fe-review-vue
+description: Vue 3/Nuxt 3 PR/diff를 사내 원칙 기반으로 리뷰. `[SEVERITY] file:line — 이슈` 형식. 4원칙 + Web Vitals + WCAG 2.2 + Composition API/반응성 함정 체크.
+---
+
+# fe-review (Vue)
+
+> **호출 시점**: PR 링크, diff, 변경 파일 목록.
+> **선행 로딩**: `principles/common.md` + `principles/vue.md`.
+
+## 0. 출력 형식
+
+```
+[SEVERITY] path/to/file.vue:42 — <한 줄 이슈>
+  근거: principles/<doc>.md <섹션>
+  픽스: <코드 또는 한 줄 처방>
+```
+
+`HIGH` / `MED` / `LOW`.
+
+리뷰 시작 시:
+```
+## 리뷰 요약
+- 변경 범위: <files / +N -M>
+- HIGH N, MED N, LOW N
+- 머지 가능 여부: [차단 / 권장 수정 후 / 가능]
+```
+
+## 1. 체크 순서
+
+### Phase 1 — 명세 정합성
+
+- 명세 동봉됐는가? 없으면 다음 출처 후보를 *명시적으로 요청* 후 일시 중지:
+  1. PR/MR 본문의 "Why / Spec" 섹션
+  2. 연결된 이슈 (Linear/Jira/GitHub Issue)
+  3. Notion/Confluence 명세 페이지
+  4. 디자인 명세 (Figma 코멘트 / 디자인 토큰)
+  5. 위에도 없으면 *구두 합의 내용을 텍스트로 적어달라고* 요청
+  → 명세 없는 리뷰는 "취향 코멘트". 받기 전에는 Phase 2 진행 금지.
+- 옵셔널 항목이 검증 로직에서 필수 취급된 곳 없는가? (표시/검증 불일치 패턴)
+  → 점검 절차: 명세에서 "옵셔널" grep → 해당 필드 → 템플릿 `:disabled` / `v-if="isRequired"` ↔ 스크립트 검증 분기가 **같은 진실을 보는가**.
+- README/주석의 자랑 vs 실제 코드 결함?
+
+### Phase 2 — Vue 안티패턴 (`principles/vue.md` V6)
+
+- [ ] `v-if` + `v-for` 동시 사용 — [HIGH] 픽스: computed 필터 후 v-for
+- [ ] `v-for` key 누락 / index key — [HIGH] 픽스: 안정 id
+- [ ] `reactive` 비구조화 — [HIGH] 픽스: `toRefs` 또는 `ref`
+- [ ] props 비구조화 (Vue 3.4 이하) — [HIGH] 픽스: `computed(() => props.x)`
+- [ ] Options API 신규 코드 — [MED] 픽스: `<script setup>` 마이그레이션
+- [ ] Nuxt `onMounted` 안 페치 — [HIGH] 픽스: `useFetch`/`useAsyncData`
+- [ ] `defineProps()` runtime 형식 (TS 프로젝트) — [LOW] 픽스: `defineProps<{...}>()`
+- [ ] `<style>` (scoped 없이) — [MED] 픽스: `<style scoped>` 또는 CSS Module
+- [ ] 전역 watch 남발 (computed로 가능한데도) — [MED]
+- [ ] Pinia state 외부 직접 변경 — [HIGH] 픽스: action 통한 변경
+- [ ] `useAsyncData` key 누락 또는 비고유 — [HIGH] 픽스: unique key 명시
+- [ ] `useFetch` watcher prop 안 쓰고 수동 refetch — [MED] 픽스: `watch` 옵션 사용
+
+### Phase 3 — Vue 스타일 가이드 Priority A (`principles/vue.md` V1.1)
+
+- [ ] 컴포넌트 이름 단일 단어 (`Todo`) — [HIGH] 픽스: 다중 단어 (`TodoItem`)
+- [ ] prop 타입 미명세 — [MED] 픽스: TS 타입 형식
+- [ ] 컴포넌트 데이터 객체 직접 (Options API) — [HIGH] 픽스: 함수 반환
+
+### Phase 4 — 코드 품질 4원칙 (`principles/common.md` A)
+
+(React fe-review 와 동일. 가독성 > 예측성 > 응집도 > 결합도 순.)
+
+- [ ] 다목적 composable (`usePageState`) — [HIGH] 책임별 분리
+- [ ] 매직 넘버 — [LOW]
+- [ ] 시점 이동 3단계+ — [MED]
+- [ ] 중첩 삼항 — [LOW]
+- [ ] 같은 종류 composable 반환 타입 불일치 — [MED]
+- [ ] 숨은 로직 — [MED]
+- [ ] Props 3단 드릴링 — [HIGH] 픽스: `provide`/`inject` 또는 slot composition
+- [ ] 잘못된 공통화 — [HIGH] 중복 허용
+
+### Phase 5 — Web Vitals (`principles/common.md` B)
+
+- [ ] LCP 이미지 `<NuxtImg>` priority 누락 또는 `<img>` 직접 — [HIGH]
+- [ ] 이미지 width/height 미명세 → CLS — [HIGH]
+- [ ] 동기 무거운 watch — [MED] 픽스: `watchEffect` + `throttle/debounce`
+- [ ] `key` 변경으로 컴포넌트 강제 리마운트 — [MED] (의도적이 아니면)
+- [ ] SSR/CSR 불일치 (Nuxt) — [HIGH] 픽스: `useFetch`/`useAsyncData`로 양쪽 동일 데이터
+
+### Phase 6 — 접근성 (WCAG 2.2)
+
+(React fe-review Phase 5 와 동일 항목.)
+
+- [ ] `<div @click>` 버튼 — [HIGH] `<button>` 사용
+- [ ] **사내/외부 wrapper 컴포넌트에 `@click`** (`<Card @click>`, `<BaseIcon @click>`, `<ListRow @click>`) — [MED→HIGH] 내부가 `<div>` 면 키보드 접근 불가. 1회 확인:
+  1. 컴포넌트 정의 `.vue` 파일 → 템플릿 루트 엘리먼트
+  2. `<button>` 또는 `role="button"` + `tabindex="0"` + `@keydown.enter`/`.space` 있으면 OK
+  3. 아니면 사내 a11y 프리미티브로 감싸거나 `<button>` 사용
+- [ ] 폼 `<label :for>` 누락 — [HIGH]
+- [ ] 인터랙티브 < 24×24 — [MED]
+- [ ] `:focus-visible` 누락 — [HIGH]
+- [ ] 이미지 alt — [HIGH]
+- [ ] 모달 focus trap — [HIGH]
+- [ ] sticky header 포커스 가림 — [MED]
+
+### Phase 7 — 보안/안티패턴
+
+- [ ] `v-html` + 외부 입력 — [HIGH] sanitize 필요
+- [ ] `.env`/credential 커밋 — [HIGH]
+- [ ] 빈 catch — [HIGH]
+- [ ] eslint-disable 무근거 — [MED]
+- [ ] 50줄 초과 함수 / 5+ 중첩 — [MED]
+
+## 2. 출력 예시
+
+```
+## 리뷰 요약
+- 변경 범위: pages/order/*.vue 6 files +210 -38
+- HIGH 4, MED 3, LOW 1
+- 머지 가능 여부: 차단
+
+[HIGH] pages/order/[id].vue:24 — onMounted 안에서 페치 → SSR/CSR 불일치
+  근거: principles/vue.md V5.2
+  픽스:
+    const { data } = await useAsyncData(`order-${route.params.id}`,
+      () => $fetch(`/api/orders/${route.params.id}`))
+
+[HIGH] components/OptionList.vue:45 — v-if와 v-for 동시 사용
+  근거: principles/vue.md V1.1
+  픽스: computed로 필터 후 v-for
+
+[HIGH] stores/order.ts:30 — 외부에서 store.state 직접 변경
+  근거: principles/vue.md V6
+  픽스: action 추가 후 호출
+```
+
+## 3. 관련 문서
+
+- [`principles/common.md`](../../principles/common.md), [`principles/vue.md`](../../principles/vue.md)
+- [`fe-build/SKILL.md`](../fe-build/SKILL.md), [`fe-perf/SKILL.md`](../fe-perf/SKILL.md)

package/assets/dev-guide/fe/sources/a11y-dx/INDEX.md

@@ -0,0 +1,41 @@
+---
+title: A11y + DX/디버깅 문서 인덱스
+fetched: 2026-05-18
+category: index
+---
+
+# A11y + DX 디버깅 문서 인덱스
+
+## 파일 목록
+
+| 파일 | 카테고리 | 내용 |
+|------|----------|------|
+| [wcag22-new-criteria.md](./wcag22-new-criteria.md) | wcag22 | WCAG 2.2 신규 SC 9개 — 레벨·요약·영향 컴포넌트·체크리스트 |
+| [chrome-devtools-performance.md](./chrome-devtools-performance.md) | devtools-perf | Performance 패널 — 녹화 절차, Flame Chart, Long Task, Forced Layout 진단 |
+| [chrome-devtools-memory.md](./chrome-devtools-memory.md) | devtools-memory | Memory 패널 — Heap Snapshot, Allocation Timeline, 4가지 누수 패턴 |
+| [react-devtools-profiler.md](./react-devtools-profiler.md) | react-profiler | React Profiler — Flame Chart, Why did this render?, Highlight Updates |
+| [lighthouse-audits.md](./lighthouse-audits.md) | lighthouse | 접근성·성능 감사 항목 전체 + 가중치 + 빠른 수정 코드 |
+
+## 주제별 빠른 참조
+
+### 접근성(A11y)
+- WCAG 2.2 신규 요건 → `wcag22-new-criteria.md`
+- Lighthouse 접근성 점수 향상 → `lighthouse-audits.md`
+
+### 성능 진단
+- 렌더 병목 (Flame Chart, Long Task) → `chrome-devtools-performance.md`
+- React 불필요 재렌더 → `react-devtools-profiler.md`
+- Lighthouse 성능 지표 (LCP/TBT/CLS) → `lighthouse-audits.md`
+
+### 메모리 누수 진단
+- Detached DOM / 이벤트 리스너 / 타이머 / 클로저 → `chrome-devtools-memory.md`
+
+## 출처
+
+- https://www.w3.org/WAI/WCAG22/quickref/
+- https://developer.chrome.com/docs/devtools/performance
+- https://developer.chrome.com/docs/devtools/memory-problems
+- https://react.dev/learn/react-developer-tools
+- https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html
+- https://developer.chrome.com/docs/lighthouse/accessibility/
+- https://developer.chrome.com/docs/lighthouse/performance/