# testoo1 — Claude Code Configuration

Generated by CodeStick

## 설치 방법
1. 이 ZIP 파일을 프로젝트 루트에 압축 해제
2. `chmod +x install-claude-config.sh`
3. `./install-claude-config.sh` 실행

## 구성요소
- Skills: 0개
- Rules: 3개
- Hooks: 7개
- Sub-Agents: 10개
- MCP Tools: 0개
- Config Files: 0개

## 기술 스택
- Backend: Node.js
- Frontend: Vue.js
- Claude Code CLI: 2.1.38 (2026.02)

# Coding Style Rules

## 1. 기본 ESLint 설정
```bash
# 프로젝트 루트에서 실행
npm i -D eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue @babel/eslint-parser
```

```json
// .eslintrc.json
{
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "requireConfigFile": false,
    "ecmaVersion": 2022,
    "sourceType": "module"
  },
  "env": {
    "node": true,
    "browser": true,
    "es2022": true
  },
  "extends": [
    "airbnb-base",
    "plugin:vue/recommended"
  ],
  "plugins": ["vue"],
  "rules": {
    "no-console": "warn",
    "no-var": "error",
    "prefer-const": "error",
    "arrow-body-style": ["error", "as-needed"],
    "vue/max-attributes-per-line": ["error", { "singleline": 3 }],
    "vue/singleline-html-element-content-newline": "off"
  }
}
```

## 2. 불변성 원칙
- 객체·배열은 **절대 직접 변형 금지**
- 새로운 값을 만들 때는 스프레드(`...`) 혹은 `Object.assign` 사용
```js
// ❌ 직접 변형
user.name = 'Jane';

// ✅ 불변성 유지
const updatedUser = { ...user, name: 'Jane' };
```

## 3. 파일·모듈 길이 제한
- 하나의 파일은 **400줄 이하** 권장
- 기능당 **도메인 폴더**(예: `src/auth/`, `src/components/`)에 배치

## 4. 비동기 에러 처리
```js
async function fetchData() {
  try {
    const res = await axios.get('/api/data');
    return res.data;
  } catch (err) {
    // 로깅 + 사용자 친화 메시지
    console.error(err);
    throw new Error('데이터를 불러오는 중 오류가 발생했습니다.');
  }
}
```

## 5. 커밋 메시지 규칙 (Conventional Commits)
```
type(scope?): subject

# 예시
feat(auth): 로그인 API 구현
fix(ui): 버튼 클릭 시 레이아웃 깨짐 현상 수정
```

---

**Claude Code CLI 사용 팁**
- `claude-code rule add coding-style`
- `claude-code lint --fix` 로 자동 포맷 적용

# Backend Architecture (Node.js)

## 1. 프로젝트 구조
```
project-root/
├─ src/
│  ├─ config/          # 환경 설정 (dotenv, db config)
│  ├─ routes/          # 라우터 정의 (express.Router)
│  ├─ controllers/     # 요청/응답 로직
│  ├─ services/        # 비즈니스 로직
│  ├─ models/          # DB 모델 (Sequelize / Mongoose 등)
│  ├─ middlewares/     # 공통 미들웨어 (auth, error, logger)
│  ├─ utils/           # 헬퍼 함수
│  └─ index.js         # 앱 진입점
├─ test/                # Jest 테스트
├─ .env.example
├─ package.json
└─ README.md
```

## 2. 핵심 라이브러리 (2026 최신)
| 목적 | 패키지 | 비고 |
|------|--------|------|
| 웹 프레임워크 | **express@5** | 최신 LTS, async/await 기본 지원 |
| 입력 검증 | **zod@4** | 스키마 기반 타입 안전 검증 |
| DB ORM | **prisma@5** (PostgreSQL) | 타입 안전 + 마이그레이션 자동화 |
| 로깅 | **pino@9** | 고성능 JSON 로거 |
| 보안 | **helmet@7**, **express-rate-limit@7** |
| 환경 변수 | **dotenv@16** |

## 3. 라우터 설계 원칙
- **RESTful** 엔드포인트 사용
- 라우터 파일당 **리소스 단위**(예: `routes/users.js`)
- 컨트롤러와 서비스는 **1:1 매핑**

## 4. 에러 핸들링
```js
// src/middlewares/errorHandler.js
module.exports = (err, req, res, next) => {
  const status = err.statusCode || 500;
  const message = err.message || '서버 오류가 발생했습니다.';
  res.status(status).json({ error: message });
};
```
- 모든 비동기 함수는 `try/catch` 혹은 `express-async-errors` 사용
- 커스텀 Error 클래스로 `statusCode` 부여

## 5. 보안 베스트 프랙티스
- `helmet()` 적용 → CSP, XSS 방지
- `express-rate-limit` 로 IP당 요청 제한 (15분당 100회)
- 입력 검증에 **zod** 스키마 사용
- 비밀키는 **.env** 로 관리, CI에서는 `secrets` 사용

## 6. 테스트 전략
- **unit**: `jest` + `supertest` (컨트롤러/서비스)
- **integration**: 실제 DB (SQLite in‑memory) 로 엔드포인트 검증
- 커버리지 목표 **≥ 85%**

---

**Claude Code CLI 연동**
- `claude-code rule add backend-architecture`
- `claude-code agent run planner --task "새로운 결제 모듈 설계"`

# Frontend Structure (Vue.js 3 + Vite)

## 1. 디렉터리 레이아웃
```
project-root/
├─ src/
│  ├─ assets/               # 이미지·폰트 등 정적 파일
│  ├─ components/           # 재사용 UI 컴포넌트
│  ├─ composables/          # Composition API 함수 집합
│  ├─ views/                # 라우트 레벨 페이지
│  ├─ router/               # vue-router 설정 (history 모드)
│  ├─ store/                # Pinia 스토어 (modules 방식)
│  ├─ styles/               # 전역 SCSS/LESS 변수·믹스인
│  ├─ plugins/              # Vue 플러그인 (axios, i18n 등)
│  ├─ App.vue
│  └─ main.ts               # 엔트리 포인트 (TS 사용 권장)
├─ public/                  # 정적 파일 (index.html 등)
├─ tests/                   # Vitest + Vue Test Utils
├─ vite.config.ts
├─ tsconfig.json
└─ package.json
```
> **Tip**: 파일당 **300줄 이하**, 한 파일에 한 UI 책임만 부여

## 2. 주요 라이브러리 (2026 최신)
| 목적 | 패키지 | 비고 |
|------|--------|------|
| 프레임워크 | **vue@3.4** | Composition API 기본 제공 |
| 빌드 툴 | **vite@5** | 초고속 HMR, 코드 스플리팅 |
| 라우터 | **vue-router@4** | 동적 라우트 + Navigation Guards |
| 상태관리 | **pinia@2** | 모듈형 스토어, TypeScript 친화 |
| UI 컴포넌트 | **vuetify@3** (optional) |
| 테스트 | **vitest@1**, **@vue/test-utils@2** |
| 스타일링 | **scss** (dart‑sass) |

## 3. 컴포넌트 작성 규칙
- **단일 파일 컴포넌트** (`.vue`)에 `<script setup lang="ts">` 사용
- Props는 **zod** 혹은 **vue-types** 로 타입 정의
- CSS는 **SCSS** 로 작성하고, BEM 네이밍 권장
```vue
<template>
  <button :class="['btn', variant]" @click="onClick">{{ label }}</button>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  label: { type: String, required: true },
  variant: { type: String, default: 'primary' }
});

const emit = defineEmits(['click']);

function onClick() {
  emit('click');
}
</script>

<style lang="scss" scoped>
.btn { padding: 0.5rem 1rem; }
.primary { background: $primary-color; color: #fff; }
</style>
```

## 4. 라우팅 규칙
- 라우트 파일은 `router/index.ts` 에서 **자동 라우트 매핑**
```ts
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';

const routes = [
  { path: '/', name: 'home', component: HomeView },
  { path: '/auth', name: 'auth', component: () => import('@/views/AuthView.vue') }, // lazy load
];

export default createRouter({ history: createWebHistory(), routes });
```
- **Navigation Guard** 로 인증 체크 구현

## 5. 상태관리 베스트 프랙티스 (Pinia)
```ts
// store/auth.ts
import { defineStore } from 'pinia';
import { ref } from 'vue';
import api from '@/plugins/axios';

export const useAuthStore = defineStore('auth', () => {
  const token = ref<string | null>(null);
  const user = ref<any>(null);

  async function login(payload: { email: string; password: string }) {
    const { data } = await api.post('/auth/login', payload);
    token.value = data.accessToken;
    user.value = data.user;
  }

  function logout() {
    token.value = null;
    user.value = null;
  }

  return { token, user, login, logout };
});
```
- **Persist** 플러그인(`pinia-plugin-persistedstate`) 으로 토큰을 로컬스토리지에 안전하게 저장

## 6. 테스트 가이드
- **unit**: `vitest` 로 컴포넌트 로직 검증 (`@vue/test-utils` mount)
- **e2e**: `cypress@13` 사용, `npm run test:e2e`
- 커버리지 **≥ 80%**
```bash
npm i -D vitest @vue/test-utils cypress
```

---

**Claude Code CLI 적용**
- `claude-code rule add frontend-structure`
- `claude-code agent run planner --task "Vue3 프로젝트 초기 셋업"`

#!/usr/bin/env bash
set -euo pipefail

echo "🔧 Setting up Node.js backend and Vue.js frontend..."

# nvm이 있으면 권장 Node 버전 자동 적용
if command -v nvm >/dev/null 2>&1; then
  nvm install
  nvm use
fi

# 백엔드 의존성 설치
if [ -f "$CLAUDE_PROJECT_DIR/package.json" ]; then
  echo "Installing backend deps..."
  npm ci --silent
fi

# 프론트엔드(예: /frontend) 의존성 설치
if [ -d "$CLAUDE_PROJECT_DIR/frontend" ] && [ -f "$CLAUDE_PROJECT_DIR/frontend/package.json" ]; then
  echo "Installing frontend deps..."
  (cd "$CLAUDE_PROJECT_DIR/frontend" && npm ci --silent)
fi

echo "✅ Setup complete."

#!/usr/bin/env bash
set -euo pipefail

# 툴이 수정하려는 파일 목록(스테이징된 파일 기준) 추출
FILES=$(git diff --name-only --cached | grep -E '\.js$|\.ts$' || true)

if [ -z "$FILES" ]; then
  exit 0
fi

echo "🔍 Running ESLint on Node.js files..."
# eslint가 0이 아닌 코드이면 오류 -> 차단(exit 2)
npx eslint $FILES --max-warnings=0
if [ $? -ne 0 ]; then
  echo "❌ ESLint errors detected. Blocking tool execution."
  exit 2
fi

exit 0

#!/usr/bin/env bash
set -euo pipefail

# 스테이징된 Vue·JS·TS 파일 목록
FILES=$(git diff --name-only --cached | grep -E '\.vue$|\.js$|\.ts$' || true)

if [ -z "$FILES" ]; then
  exit 0
fi

echo "🔍 Running ESLint on Vue files..."
npx eslint $FILES --max-warnings=0
if [ $? -ne 0 ]; then
  echo "❌ ESLint errors in Vue files. Blocking tool execution."
  exit 2
fi

echo "🔍 Running Stylelint on Vue style blocks..."
# stylelint는 파일 전체에 적용 가능
npx stylelint $FILES --max-warnings=0
if [ $? -ne 0 ]; then
  echo "❌ Stylelint errors in Vue files. Blocking tool execution."
  exit 2
fi

exit 0

#!/usr/bin/env bash
set -euo pipefail

# 검사 대상 파일 (툴이 현재 다루는 파일)
TARGET="${CLAUDE_TOOL_INPUT_FILE_PATH:-}" 
if [ -z "$TARGET" ]; then
  exit 0
fi

# 비밀 패턴 정의 (정규식)
PATTERNS='AKIA[0-9A-Z]{16}|aws_secret_access_key|AIza[0-9A-Za-z-_]{35}|ssh-rsa'

if grep -Iq . "$TARGET"; then
  if grep -En "$PATTERNS" "$TARGET" > /dev/null; then
    echo "🔐 Potential secret detected in $TARGET"
    exit 2
  fi
fi

exit 0

#!/usr/bin/env bash
set -euo pipefail

TARGET=${CLAUDE_TOOL_INPUT_FILE_PATH:-$CLAUDE_PROJECT_DIR}

echo "💅 Running Prettier on $TARGET ..."
npx prettier --write "$TARGET"

exit 0

#!/usr/bin/env bash
set -euo pipefail

echo "🧹 Cleaning temporary artifacts due to idle teammate..."

# .cache 디렉터리 삭제(예: Vite, Jest 등)
find "$CLAUDE_PROJECT_DIR" -type d -name ".cache" -exec rm -rf {} + || true

# 7일 이상 된 dist 폴더 삭제(불필요한 배포 산출물 정리)
find "$CLAUDE_PROJECT_DIR" -type d -name "dist" -mtime +7 -exec rm -rf {} + || true

exit 0

#!/usr/bin/env bash
set -euo pipefail

CI_WEBHOOK_URL="${CI_WEBHOOK_URL:-https://ci.example.com/webhook}"
BUILD_ID="${BUILD_ID:-$(date +%s)}"

echo "🚀 Notifying CI about task completion (build $BUILD_ID)..."
curl -s -X POST -H "Content-Type: application/json" -d "{\"project\":\"testoo1\",\"build_id\":\"$BUILD_ID\"}" "$CI_WEBHOOK_URL"

exit 0

---
name: architect
description: 시스템 전체 아키텍처 설계 및 기술 선택 담당
tools: ["Read","Write","Bash","Grep","Glob"]
model: opus
memory: true
task_restriction: plan
---
You are a senior software architect specialized in modern JavaScript ecosystems. Your responsibilities are:
1. Define the high‑level structure of the project (e.g., monorepo vs. separate repos, folder layout).
2. Choose backend framework (Express, NestJS, Fastify) and justify the choice based on scalability, developer experience, and ecosystem.
3. Choose frontend tooling (Vue 3 + Vite, Pinia, TypeScript, ESLint, Vitest) and create a starter configuration.
4. Draft a `README` section that explains the overall architecture, communication contracts (REST/GraphQL), and deployment strategy.
5. Store all architectural decisions in `docs/architecture.md` for future reference.
When invoked, you may read existing `package.json`, `vite.config.ts`, and any `.env` files, then write or edit the necessary configuration files. Use Bash to run `npm init -y` or `pnpm init` if a fresh project is needed.

---
name: backend-builder
description: Node.js 백엔드 프로젝트 스캐폴딩 및 기본 설정 담당
tools: ["Write","Bash","Read","Glob"]
model: sonnet
memory: false
task_restriction: build
---
You are an expert in Node.js backend scaffolding. Perform the following steps:
1. Create a `src/` directory with `index.js` (or `main.ts` if TypeScript is detected).
2. Generate a `package.json` with scripts: `dev`, `build`, `test`, `lint` using `npm` or `pnpm`.
3. Add essential dependencies: `express` (or `nest` if chosen), `dotenv`, `cors`.
4. Set up ESLint with `eslint-config-airbnb-base` and Prettier integration.
5. Add a basic `README.md` snippet showing how to start the server.
All files must be placed under the project root. Use Bash commands like `npm install` to install dependencies.

---
name: backend-error-resolver
description: Node.js 빌드·테스트 오류를 자동으로 분석하고 해결 방안을 제시·수정
tools: ["Read","Write","Bash","Grep"]
model: sonnet
memory: false
task_restriction: resolve
---
You are a troubleshooting specialist for Node.js projects. When a build or test fails, you will:
1. Parse the error output from the last `npm run build` or `npm test` execution.
2. Identify common issues (missing dependency, TypeScript type error, lint rule violation, syntax error).
3. Propose the smallest code change (e.g., add import, adjust tsconfig, install a package) and apply it automatically.
4. Re‑run the failing command to verify the fix.
If the error cannot be resolved automatically, add a TODO comment in `TODO.md` with a detailed description.

---
name: frontend-builder
description: Vue 3 + Vite + TypeScript 프론트엔드 스캐폴딩 담당
tools: ["Write","Bash","Read"]
model: sonnet
memory: false
task_restriction: build
---
You are a front‑end scaffolding expert for Vue.js. Perform these actions:
1. Run `npm create vite@latest . -- --template vue-ts` (or `pnpm create vite`).
2. Install additional dev dependencies: `eslint`, `@vue/eslint-config-typescript`, `prettier`, `vitest`, `@vue/test-utils`.
3. Set up ESLint with the Vue/TS recommended config and integrate Prettier.
4. Create a basic component `src/components/HelloWorld.vue` if not present and a route file `src/router/index.ts` with a default route.
5. Add a `README` section describing how to start dev server (`npm run dev`) and run tests (`npm run test`).
All generated files must be committed to the repository root.

---
name: frontend-error-resolver
description: Vue.js 컴파일·런타임 오류를 자동으로 분석하고 최소 수정으로 해결
tools: ["Read","Write","Bash","Grep"]
model: sonnet
memory: false
task_restriction: resolve
---
You are a Vue.js error‑fixing specialist. When `npm run dev` or `npm run build` fails, you will:
1. Capture the error stack and locate the source file.
2. Detect typical problems: missing component registration, incorrect prop type, unregistered route, TypeScript type mismatch, ESLint rule violation.
3. Apply the smallest possible fix (e.g., add `import`, update `props` definition, correct a typo, add missing export).
4. Re‑run the failing command to confirm the issue is resolved.
If the problem requires a design change, add a descriptive entry to `TODO.md`.

---
name: code-reviewer
description: 코드 스타일·보안·성능 자동 리뷰 담당
tools: ["Read","Write","Edit"]
model: opus
memory: true
task_restriction: review
---
You are a senior code reviewer specialized in JavaScript/TypeScript projects. After any file change, you must:
1. Run ESLint (`npm run lint`) and collect all warnings/errors.
2. Scan for security anti‑patterns (e.g., `eval`, unsafe `fs` operations, hard‑coded secrets) using a simple regex and recommend fixes.
3. Detect performance pitfalls such as unnecessary loops, large object spreads, or blocking I/O in async functions.
4. Insert inline comments (`// REVIEW: ...`) directly into the source code where issues are found, and optionally create a `review-report.md` summarizing all findings.
5. Store the last review state in the user‑scoped memory so that repeated runs only report new problems.

---
name: security-reviewer
description: 프로젝트 의존성 보안 취약점 검사 및 자동 패치 담당
tools: ["Bash","Read","Write"]
model: opus
memory: false
task_restriction: security
---
You are a security specialist for JavaScript projects. When invoked, you will:
1. Execute `npm audit --json` (or `pnpm audit --json`) and parse the output.
2. Identify high‑severity vulnerabilities and attempt an automatic fix with `npm audit fix --force`.
3. If a fix cannot be applied automatically, add a detailed entry to `SECURITY.md` with the vulnerability ID, affected package, and remediation steps.
4. Optionally run `npx snyk test` for deeper analysis and include the results in the report.
5. Commit any changes to `package.json`/`package-lock.json` and create a pull‑request note summarizing the security updates.

---
name: test-runner
description: 백엔드·프론트엔드 단위·통합 테스트 실행 담당
tools: ["Bash","Read"]
model: sonnet
memory: false
task_restriction: test
---
You are an automated test executor. Perform the following:
1. Run `npm run test` (or `pnpm test`).
2. Capture the output of Jest (backend) and Vitest (frontend), summarizing passed, failed, and skipped tests.
3. If any test fails, create a `TEST_FAILURES.md` file with the failing test names and stack traces.
4. Return a concise markdown summary that can be posted as a comment on a PR.
5. Store the last test run hash in the project‑scoped memory to avoid redundant execution when code has not changed.

---
name: doc-updater
description: 코드 주석·API 정의를 기반으로 문서 자동 생성·업데이트 담당
tools: ["Read","Write","Edit","Grep"]
model: sonnet
memory: false
task_restriction: doc
---
You are a documentation generator for JavaScript/TypeScript projects. When invoked, you will:
1. Scan `src/**/*.ts` and `src/**/*.js` for JSDoc comments and export statements.
2. Generate a markdown API reference (`docs/API.md`) listing each exported function/class with its signature and description.
3. Update the top‑level `README.md` sections "Installation", "Usage", and "API" with the latest information.
4. If any new component or route is detected in the Vue source, add a brief description under a "Components" section.
5. Commit the updated markdown files.

---
name: devops-planner
description: CI/CD 파이프라인 설계 및 GitHub Actions 워크플로 자동 생성 담당
tools: ["Write","Bash","Read","Glob"]
model: opus
memory: false
task_restriction: plan
---
You are a DevOps automation specialist. Your job is to create a robust GitHub Actions workflow for the project:
1. Generate `.github/workflows/ci.yml` with jobs for `install`, `lint`, `test`, `build`, and `deploy` (if a `Dockerfile` exists).
2. Use Node.js matrix strategy to test on the latest LTS versions (e.g., 20, 22).
3. Include steps to run `npm audit` and upload the `SECURITY.md` as an artifact.
4. If a Vue frontend is detected, add a `build-frontend` step that runs `npm run build` in the `frontend/` directory.
5. Commit the workflow file and open a PR titled "Add CI workflow".

# Tools

## init-project
Node.js + Vue2 프로젝트 기본 구조와 Claude‑Code 설정 파일을 자동으로 생성합니다.

```bash
# 루트 디렉터리에서 실행
clc init testoo1 \
  --backend=node --frontend=vue2 \
  --template=full-stack

# 결과 디렉터리 구조
# testoo1/
# ├─ server/            # Express 백엔드
# │   └─ index.js
# ├─ client/            # Vue 2 프론트엔드
# │   ├─ src/
# │   │   ├─ main.js
# │   │   ├─ App.vue
# │   │   └─ router/index.js
# │   └─ public/
# ├─ package.json
# └─ .claurde-code/     # Claude‑Code 설정 파일
```

---
## add-vue-component
Vue2 옵션 API 기반 .vue 컴포넌트를 생성하고, 자동으로 `components/` 폴더에 등록합니다.

```bash
# 예: CounterButton 컴포넌트 생성
clc add component counter-button --vue2

# 생성 파일: client/src/components/CounterButton.vue
<template>
  <button @click="count++">Clicked {{ count }} times</button>
</template>

<script>
export default {
  name: 'CounterButton',
  data() {
    return { count: 0 };
  }
};
</script>

<style scoped>
button { padding: 0.5rem 1rem; }
</style>
```

---
## add-vue-route
Vue‑Router(v5) 라우트를 추가하고, lazy‑load 옵션을 지원합니다.

```bash
# 예: /about 라우트와 AboutView.vue 컴포넌트 자동 생성
clc add route /about AboutView --lazy

# client/src/router/index.js에 자동 삽입된 코드
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const routes = [
  { path: '/', component: () => import('../views/HomeView.vue') },
  { path: '/about', component: () => import('../views/AboutView.vue') }
];

export default new VueRouter({ mode: 'history', routes });
```

---
## add-express-server
Express 기반 백엔드 엔트리 파일과 정적 파일 서빙 설정을 추가합니다.

```bash
# Express 서버 초기화
clc add server express

# server/index.js (자동 생성)
const express = require('express');
const path = require('path');
const app = express();

// API 라우트 예시
app.get('/api/hello', (req, res) => {
  res.json({ msg: 'hello from Express' });
});

// Vue 정적 파일 서빙
app.use(express.static(path.join(__dirname, '../client/dist')));

app.listen(3000, () => console.log('🚀 API server listening on :3000'));
```

---
## add-dev-script
프론트엔드와 백엔드를 동시에 실행하는 `npm run dev` 스크립트를 추가합니다. `concurrently`를 사용합니다.

```bash
# dev 스크립트 추가
clc add script dev "concurrently \"npm run serve\" \"npm run start\""

# package.json 일부
{
  "scripts": {
    "serve": "vue-cli-service serve",
    "start": "node server/index.js",
    "dev": "concurrently \"npm run serve\" \"npm run start\""
  }
}
```

---
## add-eslint-config
Airbnb 스타일 ESLint 설정 파일과 npm 의존성을 프로젝트에 추가합니다.

```bash
# ESLint 설정 자동 추가
clc add eslint --preset=airbnb

# .eslintrc.js (자동 생성)
module.exports = {
  root: true,
  env: { node: true, browser: true },
  extends: ['airbnb-base', 'plugin:vue/recommended'],
  parserOptions: { parser: 'babel-eslint' },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
};
```

---
## add-jest-test
Vue2 용 Jest + vue‑test‑utils 테스트 환경을 설정하고, 샘플 테스트 파일을 생성합니다.

```bash
# 테스트 프레임워크 추가
clc add test jest --vue2

# jest.config.js (자동 생성)
module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  testMatch: ['**/tests/**/*.spec.[jt]s'],
  moduleFileExtensions: ['js', 'json', 'vue']
};

# 샘플 테스트: tests/unit/CounterButton.spec.js
import { shallowMount } from '@vue/test-utils';
import CounterButton from '@/components/CounterButton.vue';

test('counts clicks', async () => {
  const wrapper = shallowMount(CounterButton);
  await wrapper.find('button').trigger('click');
  expect(wrapper.text()).toContain('Clicked 1 times');
});
```

---
## add-dockerfile
멀티‑스테이지 Dockerfile을 생성해 Node(Express)와 Nginx(정적 Vue) 배포를 자동화합니다.

```bash
# Dockerfile 자동 생성
clc add docker

# Dockerfile (자동 생성)
# ---- Build stage ----
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build   # Vue 빌드 (client/dist)

# ---- Production stage ----
FROM nginx:stable-alpine
COPY --from=builder /app/client/dist /usr/share/nginx/html
COPY --from=builder /app/server /app/server

# Express 서버 실행 (pm2 사용 예시)
RUN apk add --no-cache pm2
COPY ./server /app/server
WORKDIR /app/server
EXPOSE 3000
CMD ["pm2-runtime", "index.js"]
```

---