Loading...
Loading...
Frontend 리팩토링 전문가. "프론트 리팩토링", "UI 리팩토링", "Vue 코드 정리" 키워드로 트리거. 기존 프론트엔드 코드를 test-data 가이드 코드 패턴으로 리팩토링.
npx skill4agent add peachsolution/peach-harness peach-refactor-frontend/peach-refactor-frontend [모듈명] [옵션]| 옵션 | 기본값 | 설명 |
|---|---|---|
| layer | all | 리팩토링 레이어 (type/store/pages/modals/all) |
| ui | crud | UI 패턴 (crud/two/select), 상세: ui-patterns.md |
| file | N | 파일 기능 추가 (Y/N) |
# 기존 모듈 구조 확인
ls -la front/src/modules/[모듈명]/
# 기존 코드 읽기
cat front/src/modules/[모듈명]/**/*.{vue,ts}┌─────────────────────────────────────────────────────────────────┐
│ Frontend 리팩토링 순차 실행 │
│ │
│ [Step 1] Type & Store Architect │
│ ├── references/store-refactor.md 참조 │
│ └── 검증: vue-tsc --noEmit │
│ │
│ [Step 2] Pages Architect │
│ ├── references/pages-refactor.md 참조 │
│ └── 검증: vue-tsc --noEmit │
│ │
│ [Step 3] Modals & Validator Architect │
│ ├── references/modals-refactor.md 참조 │
│ └── 검증: vue-tsc + lint:fix │
└─────────────────────────────────────────────────────────────────┘cd front && bunx vue-tsc --noEmit
cd front && bun run lint:fix
cd front && bun run build✅ Frontend 리팩토링 완료!
리팩토링된 파일:
├── front/src/modules/[모듈명]/type/[모듈명].type.ts
├── front/src/modules/[모듈명]/store/[모듈명].store.ts
├── front/src/modules/[모듈명]/pages/
│ ├── [모듈명]-list.vue
│ ├── [모듈명]-list-search.vue
│ ├── [모듈명]-list-table.vue
│ └── _[모듈명].routes.ts
└── front/src/modules/[모듈명]/modals/
├── [모듈명]-insert.modal.vue
├── [모듈명]-update.modal.vue
├── [모듈명]-detail.modal.vue
└── _[모듈명].validator.ts
검증 결과:
✅ TypeScript 컴파일 통과
✅ 린트 통과
✅ 빌드 성공
변경 사항:
- [변경된 패턴 요약]
- [추가된 기능]
- [제거된 레거시 코드]front/src/modules/test-data/references/