VS Code에서 GitHub Copilot 커스터마이징하기

// Copilot이 생성한 코드
function getUserData(id) {  // ❌ TypeScript 사용인데 타입 없음
  return fetch('/api/users/' + id)  // ❌ 템플릿 리터럴을 사용해야 함
}

// 팀 규약을 따른 올바른 코드
async function getUserData(id: string): Promise<UserData> {
  return await fetch(`/api/users/${id}`)
}

개발자: "React 컴포넌트를 만들어줘"
GitHub Copilot: "클래스 컴포넌트를 생성했습니다"
개발자: "아니, 함수형 컴포넌트로, TypeScript로, props 타입 정의도..."

# 다음 컴포넌트도...
개발자: "다른 컴포넌트를 만들어줘..."
GitHub Copilot: "클래스 컴포넌트입니다..."
개발자: "함수형으로 해달라고 했잖아요!"

개발자: "사용자 인증 구현을 도와줘"
Copilot: "JWT를 사용한 일반적인 구현을 제안하겠습니다"
개발자: "Auth0를 사용하고 있는데..."
Copilot: "알겠습니다. Auth0로 구현하겠습니다..."
개발자: "그리고 내부 인증 흐름이 있어서..."

# 프로젝트 공통 코딩 가이드라인

## 코드 스타일
- 시맨틱 HTML5 요소 사용 (header, main, section, article)
- 최신 JavaScript 기능 우선 (const/let, 화살표 함수, 템플릿 리터럴)
- 항상 TypeScript 타입 정의 포함

## 명명 규약
- 컴포넌트명, 인터페이스, 타입 별칭: PascalCase
- 변수, 함수, 메서드: camelCase
- 클래스 비공개 멤버: 언더스코어 접두사 (_)
- 상수: ALL_CAPS

## 코드 품질
- 의미 있는 변수와 함수명 사용
- 복잡한 로직에 주석 추가
- 사용자 입력과 API 호출에 대한 에러 처리 구현
- 콜백보다 async/await 선호

## 보안
- 민감한 정보를 하드코딩하지 않음
- 항상 입력값 검증
- SQL 인젝션 방지를 위한 플레이스홀더 사용

---
applyTo: "**/*.tsx"
---

# React 개발 가이드라인

- 클래스 컴포넌트보다 함수형 컴포넌트 우선
- 상태 관리 로직 분리를 위해 커스텀 훅 활용
- 항상 TypeScript 인터페이스로 props 정의
- 스타일링에 Tailwind CSS 유틸리티 클래스 사용
- 필요한 경우 React.memo로 메모이제이션

---
applyTo: "src/server/**/*.ts"
---

# 백엔드 개발 가이드라인

- 컨트롤러는 `src/controllers/`에 배치
- 서비스 로직은 `src/services/`에 배치
- 리포지터리 패턴으로 데이터 접근 구현
- `.env`에서 환경 변수 로드
- 미들웨어로 에러 처리 중앙화
- 로깅에 Winston 사용

{
  "github.copilot.chat.codeGeneration.useInstructionFiles": true
}

---
agent: 'agent'
model: 'GPT-4o'
tools: ['search/codebase']
description: 'React 컴포넌트 생성'
---

다음 요구사항으로 React 컴포넌트를 생성하세요:

컴포넌트명: ${input:componentName:컴포넌트명 입력}
Props: ${input:props:props를 쉼표로 구분하여 입력 (예: title, onClick, isDisabled)}

## 생성 규칙
- TypeScript로 구현
- 함수형 컴포넌트 사용
- 인터페이스로 props 정의
- Tailwind CSS로 스타일링
- 필요 시 React Hooks로 상태 관리
- JSDoc 주석으로 props 문서화

---
agent: 'agent'
description: 'RESTful API 라우트 생성'
---

다음 엔티티에 대한 CRUD API를 생성하세요:

엔티티명: ${input:entity:엔티티명}
필드: ${input:fields:필드를 쉼표로 구분하여 지정}

## 구현 요구사항
- Express.js 사용
- TypeScript로 구현
- 라우터는 `src/routes/`에 배치
- 컨트롤러는 `src/controllers/`에 배치
- 검증에 express-validator 사용
- 적절한 에러 처리 구현
- 표준 JSON 응답 형식 사용

---
agent: 'agent'
tools: ['search/codebase']
description: '단위 테스트 자동 생성'
---

선택된 코드: ${selection}

위 코드에 대한 포괄적인 단위 테스트를 생성하세요.

## 테스트 요구사항
- Jest 사용
- 테스트 커버리지 최대화
- 정상 케이스와 에러 케이스 모두 포함
- 엣지 케이스 고려
- 적절한 목(mock)과 스텁(stub) 사용
- 각 테스트 케이스에 설명적인 describe/it 문 작성

---
agent: 'agent'
description: '코드 리뷰 수행'
---

선택된 코드: ${selection}

다음 관점에서 코드 리뷰를 수행하세요:

## 리뷰 관점
1. **보안**: 취약점 존재 여부
2. **성능**: 최적화 기회
3. **코드 품질**: 가독성, 유지보수성
4. **에러 처리**: 적절한 예외 처리
5. **테스트 용이성**: 테스트하기 쉬운 구조인지
6. **코딩 표준**: 프로젝트 규약 준수 여부

구체적인 코드 예시와 함께 개선 제안을 제공하세요.

.github/skills/
├── webapp-testing/
│   ├── SKILL.md
│   └── example-test.spec.ts
└── github-actions-debugging/
    ├── SKILL.md
    └── troubleshooting-guide.md

---
name: webapp-testing
description: Playwright를 사용한 E2E 테스트 생성. 사용자 인터랙션을 테스트할 때 사용하세요.
---

# Playwright를 사용한 웹 애플리케이션 테스트

이 스킬은 Playwright를 사용한 엔드-투-엔드(E2E) 테스트 생성을 지원합니다.

## 테스트 생성 규칙

1. **셀렉터 우선순위**: 
   - `getByRole` 우선 사용
   - 다음으로 `getByLabel`
   - 최후 수단으로 `getByTestId`

2. **테스트 구조**:
   - 각 테스트는 독립적으로 실행 가능해야 함
   - 적절한 setup/teardown 구현
   - 명확한 어서션 작성

3. **모범 사례**:
   - Page Object Model 패턴 사용
   - 대기는 암묵적으로 처리
   - 실패 시에만 스크린샷 촬영

## 템플릿 예시

아래 example-test.spec.ts를 기반으로 테스트를 생성하세요.

```typescript
import { test, expect } from '@playwright/test';

test('user can log in successfully', async ({ page }) => {
  await page.goto('/login');
  
  await page.getByRole('textbox', { name: 'Email' }).fill('user@test.com');
  await page.getByRole('textbox', { name: 'Password' }).fill('password123');
  await page.getByRole('button', { name: 'Sign in' }).click();
  
  await expect(page).toHaveURL('/dashboard');
  await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
});

`.github/skills/webapp-testing/example-test.spec.ts`

```typescript
import { test, expect } from '@playwright/test';

test('user can add item to cart', async ({ page }) => {
  await page.goto('/products');
  
  const product = page.getByRole('article').filter({ hasText: 'Product Name' });
  await product.getByRole('button', { name: 'Add to Cart' }).click();
  
  await expect(page.getByRole('status', { name: 'Cart' })).toContainText('1 item');
});

test('user can complete checkout', async ({ page }) => {
  await page.goto('/cart');
  
  await page.getByRole('button', { name: 'Checkout' }).click();
  await page.getByRole('textbox', { name: 'Card Number' }).fill('4242424242424242');
  await page.getByRole('button', { name: 'Place Order' }).click();
  
  await expect(page.getByRole('heading')).toContainText('Order Confirmed');
});

---
name: github-actions-failure-debugging
description: GitHub Actions 워크플로우 실패 디버깅. CI가 실패했을 때 사용하세요.
---

# GitHub Actions 실패 디버깅

이 스킬은 GitHub Actions 워크플로우 실패를 효율적으로 디버깅하는 프로세스를 제공합니다.

## 디버깅 프로세스

Pull Request에서 실패한 GitHub Actions 워크플로우를 디버깅할 때는 다음 단계를 따르세요:

1. **워크플로우 실행 상태 확인**
   - `list_workflow_runs` 도구로 PR의 최근 실행 및 상태 확인

2. **로그 요약 취득**
   - `summarize_job_log_failures` 도구로 실패한 잡 로그의 AI 요약 취득
   - 컨텍스트 윈도우를 압도하지 않고 문제 파악

3. **근본 원인 파악**
   - 에러 메시지에서 문제 유형 분류:
     * 의존성 문제
     * 테스트 실패
     * 빌드 에러
     * 권한 에러
     * 타임아웃

4. **해결책 제안**
   - 파악된 문제에 대한 구체적인 수정 제공
   - 필요 시 워크플로우 파일 수정 제안

## 자주 발생하는 문제와 해결책

### 의존성 문제
- Node.js 버전 불일치
- 패키지 설치 실패
→ `package-lock.json` 확인, 캐시 삭제

### 테스트 실패
- 환경 변수 누락
- 테스트 데이터 문제
→ 환경 변수 설정 확인, 테스트 시드 데이터 검증

### 권한 에러
- GITHUB_TOKEN 스코프 부족
- 잘못된 시크릿 설정
→ 저장소 설정에서 permissions와 secrets 확인

---
name: 'planner'
description: '구현 전 계획 수립에 특화된 에이전트'
tools:
  - 'search/codebase'
  - 'githubRepo'
toolsets:
  - 'read-only'
model: 'GPT-4o'
---

# 구현 계획 에이전트

저는 구현 계획 작성에 특화된 에이전트입니다. 코드를 작성하지 않고 구현 계획만 만듭니다.

## 담당 업무

1. **요구사항 분석**: 사용자 요구사항을 상세히 분석
2. **영향 범위 조사**: 변경이 필요한 파일과 컴포넌트 파악
3. **태스크 분해**: 구현을 작은 태스크로 분리
4. **리스크 파악**: 잠재적 문제 식별

## 계획 형식

### 1. 개요
[구현 목적과 기대 결과]

### 2. 영향 범위
- 변경이 필요한 파일 목록
- 영향받는 컴포넌트

### 3. 구현 단계
1. [1단계 상세]
   - 필요한 변경사항
   - 주의 사항
2. [2단계 상세]
   ...

### 4. 테스트 전략
- 단위 테스트 대상
- E2E 테스트 시나리오

### 5. 리스크와 대책
| 리스크 | 대책 |
|------|----------------|
| ...  | ...            |

계획 승인 후 구현 에이전트에게 인계합니다.

---
name: 'security-reviewer'
description: '보안 관점에서 코드를 리뷰하는 에이전트'
tools:
  - 'search/codebase'
model: 'Claude Sonnet 3.5'
---

# 보안 리뷰 에이전트

저는 보안 전문가로서 코드의 취약점을 발견하는 에이전트입니다.

## 리뷰 항목

### 1. 인증 및 인가
- [ ] 적절한 인증 메커니즘 구현
- [ ] 인가 검사 누락 없음
- [ ] 세션 관리 안전성

### 2. 입력 검증
- [ ] 모든 사용자 입력 새니타이즈
- [ ] SQL 인젝션 대책
- [ ] XSS 대책
- [ ] CSRF 대책

### 3. 데이터 보호
- [ ] 하드코딩된 민감 정보 없음
- [ ] 암호화 적절히 사용
- [ ] 로그에 민감 정보 출력 없음

### 4. 의존성
- [ ] 알려진 취약점이 있는 패키지 사용 없음
- [ ] 최신 버전으로 업데이트 권장

### 5. API 보안
- [ ] 레이트 리밋 구현
- [ ] 적절한 CORS 설정
- [ ] 안전한 API 키 관리

## 보고 형식

발견된 각 문제에 대해 보고:
- **심각도**: Critical / High / Medium / Low
- **설명**: 어떤 문제인지
- **영향**: 악용 시의 영향
- **수정 방법**: 구체적인 코드 예시

Critical/High 취약점은 즉시 수정이 필요합니다.

---
name: 'frontend-dev'
description: '프론트엔드 개발에 특화된 에이전트'
tools:
  - 'search/codebase'
  - 'terminal'
  - 'edit'
model: 'GPT-4o'
---

# 프론트엔드 개발 에이전트

저는 React/TypeScript/Tailwind CSS를 사용한 프론트엔드 개발 전문가입니다.

## 개발 원칙

### 컴포넌트 설계
- 재사용성 우선
- 단일 책임 원칙 준수
- props를 최소화
- 적절한 추상화 수준

### 상태 관리
- 로컬 상태는 useState/useReducer로 관리
- 전역 상태는 필요 최소화
- 불필요한 리렌더링 방지

### 스타일링
- Tailwind CSS 유틸리티 클래스 사용
- 커스텀 CSS 최소화
- 모바일 퍼스트 반응형 디자인 구현

### 성능
- React.memo로 불필요한 리렌더링 방지
- useCallback으로 콜백 메모이제이션
- useMemo로 무거운 계산 캐싱
- 이미지 최적화 (next/image 등)

## 구현 흐름

1. 컴포넌트 책임 명확화
2. props 인터페이스 정의
3. 상태 관리 설계
4. JSX 구조 구현
5. 스타일링 적용
6. 접근성 확인 (ARIA 속성)
7. 반응형 지원 구현

구현 후에는 반드시 브라우저에서 동작 확인을 합니다.

{
  "inputs": [
    {
      "type": "promptString",
      "id": "github-token",
      "description": "GitHub Personal Access Token",
      "password": true
    },
    {
      "type": "promptString",
      "id": "db-connection",
      "description": "Database Connection String",
      "password": true
    }
  ],
  "servers": {
    "github-server": {
      "type": "http",
      "url": "https://github-mcp.com",
      "headers": {
        "Authorization": "Bearer ${input:github-token}"
      }
    },
    "database-server": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres"],
      "env": {
        "DATABASE_URL": "${input:db-connection}"
      }
    },
    "filesystem-server": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/workspace"]
    }
  }
}

{
  "chat.mcp.servers": {
    "perplexity-search": {
      "type": "http",
      "url": "https://perplexity-mcp.com/api",
      "env": {
        "PERPLEXITY_API_KEY": "${env:PERPLEXITY_API_KEY}"
      }
    },
    "slack-integration": {
      "command": "docker",
      "args": ["run", "-i", "slack-mcp-server"],
      "env": {
        "SLACK_TOKEN": "${env:SLACK_BOT_TOKEN}"
      }
    }
  }
}

# 프롬프트 예시

@agent contoso/my-app GitHub 저장소의 최근 이슈를 가져와서
우선순위 순으로 나열해주세요.

# Copilot의 동작
1. GitHub MCP Server의 `list_issues` 도구 호출
2. 취득한 이슈를 우선순위에 따라 정렬
3. 마크다운 형식으로 응답

# 프롬프트 예시

데이터베이스에서 모든 사용자를 취득하고
활성 사용자 수를 집계해주세요.

# Copilot의 동작
1. Database MCP Server의 `query` 도구 실행
2. SQL: SELECT COUNT(*) FROM users WHERE is_active = true
3. 결과를 포맷하여 표시

// custom-mcp-server/index.ts
import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";

const server = new Server(
  {
    name: "custom-api-server",
    version: "1.0.0",
  },
  {
    capabilities: {
      tools: {},
    },
  }
);

// 도구 정의
server.setRequestHandler("tools/list", async () => {
  return {
    tools: [
      {
        name: "fetch_user_data",
        description: "사용자 데이터를 가져옵니다",
        inputSchema: {
          type: "object",
          properties: {
            userId: { type: "string", description: "사용자 ID" },
          },
          required: ["userId"],
        },
      },
    ],
  };
});

// 도구 실행
server.setRequestHandler("tools/call", async (request) => {
  if (request.params.name === "fetch_user_data") {
    const userId = request.params.arguments?.userId;
    // API 요청 구현
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();
    
    return {
      content: [{ type: "text", text: JSON.stringify(data, null, 2) }],
    };
  }
  throw new Error("Unknown tool");
});

// 서버 시작
const transport = new StdioServerTransport();
await server.connect(transport);

{
  "name": "custom-mcp-server",
  "type": "module",
  "dependencies": {
    "@modelcontextprotocol/sdk": "latest"
  },
  "bin": {
    "custom-mcp-server": "./index.js"
  }
}

my-microservice/
├── .github/
│   ├── copilot-instructions.md          # 전체 개발 표준
│   ├── instructions/
│   │   ├── backend.instructions.md     # 백엔드 전용
│   │   ├── frontend.instructions.md    # 프론트엔드 전용
│   │   └── infra.instructions.md       # 인프라 전용
│   ├── agents/
│   │   ├── planner.md                   # 계획 에이전트
│   │   ├── implementer.md              # 구현 에이전트
│   │   ├── reviewer.md                  # 리뷰 에이전트
│   │   └── deployer.md                  # 배포 에이전트
│   ├── skills/
│   │   ├── api-testing/
│   │   │   ├── SKILL.md
│   │   │   └── sample-api-test.ts
│   │   └── k8s-deployment/
│   │       ├── SKILL.md
│   │       └── deployment-template.yaml
│   └── prompts/
│       ├── create-service.prompt.md
│       ├── add-endpoint.prompt.md
│       └── generate-migration.prompt.md
└── .vscode/
    └── mcp.json                         # MCP 설정

# @planner 에이전트에 요청
사용자 인증 기능을 추가하고 싶습니다.
OAuth와 JWT 토큰 기반 인증을 구현해주세요.

# @implementer 에이전트로 구현
위 계획을 바탕으로 인증 미들웨어를 구현해주세요.

# 프롬프트 파일 사용
/generate-tests

# @security-reviewer 에이전트로 확인
구현된 인증 미들웨어에 대한 보안 리뷰를 수행해주세요.

# MCP + K8s 스킬 활용
@agent kubernetes-skill을 사용하여 인증 서비스의 배포 설정을 생성해주세요.

{
  "github.copilot.chat.models": [
    {
      "id": "my-custom-model",
      "name": "Custom GPT-4",
      "endpoint": "https://api.openai.com/v1/chat/completions",
      "apiKey": "${env:OPENAI_API_KEY}",
      "model": "gpt-4-turbo-preview"
    },
    {
      "id": "local-llm",
      "name": "Local LLaMA",
      "endpoint": "http://localhost:8080/v1/chat/completions",
      "model": "llama-3-70b-instruct"
    }
  ]
}

1주차: 커스텀 지시사항 설정
2주차: 자주 쓰는 태스크를 프롬프트 파일로 변환
3주차: 커스텀 에이전트 시범 도입
4주차: MCP 서버로 외부 연동

// API 키는 환경 변수로 관리
{
  "chat.mcp.servers": {
    "secure-api": {
      "env": {
        "API_KEY": "${env:MY_API_KEY}"  // 하드코딩 금지
      }
    }
  }
}

# team-wiki/copilot-usage.md

## 커스텀 에이전트 사용법

- `@planner`: 구현 전 계획 수립
- `@implementer`: 코드 구현
- `@reviewer`: 코드 리뷰
- `@deployer`: 배포 작업

## 프롬프트 파일 빠른 참조

- `/create-component`: React 컴포넌트 생성
- `/add-api-route`: API 엔드포인트 추가
- `/generate-tests`: 테스트 코드 자동 생성