199 lines
9.2 KiB
TypeScript
199 lines
9.2 KiB
TypeScript
import { Alert } from '../components/common/Alert';
|
|
import { CodeBlock } from '../components/common/CodeBlock';
|
|
import { StepGuide } from '../components/common/StepGuide';
|
|
|
|
const SKILLS = [
|
|
{ name: '/push', desc: '변경 확인 → 커밋 메시지 자동 제안 → 푸시', perm: 'push' },
|
|
{ name: '/mr', desc: '커밋 + 푸시 + MR 생성 + 릴리즈 노트 갱신 + 봇 승인/머지 선택', perm: 'push' },
|
|
{ name: '/release', desc: '릴리즈 노트 정리 + develop→main MR + 봇 승인/머지', perm: 'admin' },
|
|
{ name: '/version', desc: 'VERSION-HISTORY.md (SemVer) 생성', perm: 'admin' },
|
|
{ name: '/create-mr', desc: 'MR만 생성 (세부 옵션 지원)', perm: 'push' },
|
|
{ name: '/fix-issue', desc: 'Gitea 이슈 분석 + 수정 브랜치 생성', perm: 'push' },
|
|
{ name: '/init-project', desc: '팀 표준 워크플로우로 프로젝트 초기화', perm: '-' },
|
|
{ name: '/sync-team-workflow', desc: '워크플로우 버전 동기화', perm: '-' },
|
|
];
|
|
|
|
export default function ClaudeCodeSkills() {
|
|
return (
|
|
<div className="max-w-4xl mx-auto py-12 px-6">
|
|
<h1 className="text-3xl font-bold text-text-primary mb-2">Claude Code 활용</h1>
|
|
<p className="text-text-secondary mb-8">
|
|
Claude Code 스킬을 활용하여 커밋, MR 생성, 릴리즈까지 개발 워크플로우를 자동화할 수 있습니다.
|
|
</p>
|
|
|
|
{/* 스킬 일람 */}
|
|
<h2 className="text-xl font-bold text-text-primary mt-10 mb-4">스킬 일람</h2>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full bg-surface border border-border-default rounded-lg overflow-hidden text-sm">
|
|
<thead>
|
|
<tr className="bg-bg-tertiary">
|
|
<th className="text-left px-4 py-3 font-semibold text-text-primary">스킬</th>
|
|
<th className="text-left px-4 py-3 font-semibold text-text-primary">설명</th>
|
|
<th className="text-left px-4 py-3 font-semibold text-text-primary">필요 권한</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-border-subtle">
|
|
{SKILLS.map((s) => (
|
|
<tr key={s.name}>
|
|
<td className="px-4 py-3 font-mono text-accent font-medium">{s.name}</td>
|
|
<td className="px-4 py-3 text-text-secondary">{s.desc}</td>
|
|
<td className="px-4 py-3">
|
|
{s.perm === 'admin' ? (
|
|
<span className="px-2 py-0.5 bg-danger/10 text-danger rounded text-xs font-medium">admin</span>
|
|
) : s.perm === 'push' ? (
|
|
<span className="px-2 py-0.5 bg-info/10 text-info rounded text-xs font-medium">push</span>
|
|
) : (
|
|
<span className="text-text-muted text-xs">-</span>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<Alert type="info">
|
|
<strong>push</strong> 권한은 팀원에게,{' '}
|
|
<strong>admin</strong> 권한은 리포지토리 관리자에게 부여됩니다.
|
|
Gitea 리포 설정에서 확인할 수 있습니다.
|
|
</Alert>
|
|
|
|
{/* 일상적인 개발 흐름 */}
|
|
<h2 className="text-xl font-bold text-text-primary mt-10 mb-4">일상적인 개발 흐름</h2>
|
|
<p className="text-text-secondary mb-4">
|
|
Claude Code 스킬을 활용한 일반적인 개발 흐름입니다.
|
|
</p>
|
|
<StepGuide
|
|
steps={[
|
|
{
|
|
title: '코드 수정 후 푸시 — /push',
|
|
content: (
|
|
<>
|
|
<p className="mb-2">작업 후 변경 사항을 확인하고 커밋+푸시합니다.</p>
|
|
<CodeBlock
|
|
language="text"
|
|
code={`/push
|
|
# 변경 파일 목록 표시 → 커밋 메시지 자동 제안
|
|
# → 사용자 승인 후 커밋 + 푸시
|
|
|
|
/push "feat(auth): 로그인 검증 로직 추가"
|
|
# 메시지를 직접 지정할 수도 있습니다`}
|
|
/>
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
title: 'MR 생성 — /mr',
|
|
content: (
|
|
<>
|
|
<p className="mb-2">feature 브랜치에서 develop으로 MR을 생성합니다.</p>
|
|
<CodeBlock
|
|
language="text"
|
|
code={`/mr
|
|
# 1. 커밋되지 않은 변경이 있으면 커밋+푸시
|
|
# 2. 릴리즈 노트(RELEASE-NOTES.md) 자동 갱신
|
|
# 3. 사용자 첨삭 확인 후 Gitea MR 생성
|
|
# 4. 리뷰 대기 or 봇 승인+머지 선택`}
|
|
/>
|
|
<p className="text-xs text-text-muted mt-1">
|
|
<code className="bg-bg-tertiary px-1 rounded">/mr</code>은{' '}
|
|
<code className="bg-bg-tertiary px-1 rounded">/push</code> + MR + 릴리즈 노트를 한 번에 처리합니다.
|
|
MR 생성 후 리뷰 대기 또는 claude-bot 자동 승인+머지를 선택할 수 있습니다.
|
|
</p>
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
title: '릴리즈 — /release (관리자)',
|
|
content: (
|
|
<>
|
|
<p className="mb-2">develop → main 릴리즈 MR을 생성하고, 봇이 자동 승인합니다.</p>
|
|
<CodeBlock
|
|
language="text"
|
|
code={`/release
|
|
# 1. develop 동기화 확인
|
|
# 2. 릴리즈 노트 [Unreleased] → [날짜] 전환 + 압축
|
|
# 3. develop→main MR 생성
|
|
# 4. claude-bot 자동 승인 → 머지 → CI/CD 배포`}
|
|
/>
|
|
<Alert type="warning">
|
|
<code className="bg-bg-tertiary px-1 rounded">/release</code>는 리포 <strong>admin</strong> 권한이 필요합니다.
|
|
</Alert>
|
|
</>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
|
|
{/* 커스텀 에이전트 */}
|
|
<h2 className="text-xl font-bold text-text-primary mt-10 mb-4">커스텀 에이전트</h2>
|
|
<p className="text-text-secondary mb-4">
|
|
팀 워크플로우에는 특화된 서브에이전트 3종이 포함되어 있습니다.
|
|
<code className="bg-bg-tertiary px-1 rounded">.claude/agents/</code> 디렉토리에 배치되며,{' '}
|
|
<code className="bg-bg-tertiary px-1 rounded">/init-project</code>로 자동 설정됩니다.
|
|
</p>
|
|
<div className="grid md:grid-cols-3 gap-4">
|
|
<div className="bg-surface border border-border-default rounded-lg p-5">
|
|
<h4 className="font-semibold text-info mb-2">explorer</h4>
|
|
<p className="text-sm text-text-secondary mb-2">코드베이스 탐색/분석 에이전트</p>
|
|
<ul className="text-xs text-text-muted space-y-1">
|
|
<li>읽기 전용 (코드 수정 불가)</li>
|
|
<li>높은 자율성</li>
|
|
<li>모델: Sonnet</li>
|
|
</ul>
|
|
</div>
|
|
<div className="bg-surface border border-border-default rounded-lg p-5">
|
|
<h4 className="font-semibold text-success mb-2">implementer</h4>
|
|
<p className="text-sm text-text-secondary mb-2">모듈 단위 구현 에이전트</p>
|
|
<ul className="text-xs text-text-muted space-y-1">
|
|
<li>계약 기반 구현</li>
|
|
<li>중간 자율성</li>
|
|
<li>모델: Sonnet</li>
|
|
</ul>
|
|
</div>
|
|
<div className="bg-surface border border-border-default rounded-lg p-5">
|
|
<h4 className="font-semibold text-warning mb-2">reviewer</h4>
|
|
<p className="text-sm text-text-secondary mb-2">코드 리뷰/품질 검증 에이전트</p>
|
|
<ul className="text-xs text-text-muted space-y-1">
|
|
<li>체크리스트 기반 검증</li>
|
|
<li>높은 자율성</li>
|
|
<li>모델: Sonnet</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 사전 준비 */}
|
|
<h2 className="text-xl font-bold text-text-primary mt-10 mb-4">사전 준비</h2>
|
|
<p className="text-text-secondary mb-4">
|
|
스킬을 사용하려면 다음이 필요합니다.
|
|
</p>
|
|
<ul className="space-y-2 text-text-secondary">
|
|
<li className="flex items-start gap-2">
|
|
<span className="text-accent mt-0.5">•</span>
|
|
<span>
|
|
<strong>GITEA_TOKEN</strong> 환경변수 설정 — <strong>초기 환경 설정</strong> 가이드의
|
|
"Gitea API 토큰 설정" 참고
|
|
</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<span className="text-accent mt-0.5">•</span>
|
|
<span>
|
|
<strong>Claude Code 설치</strong> — <code className="bg-bg-tertiary px-1 rounded">npm install -g @anthropic-ai/claude-code</code>
|
|
</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<span className="text-accent mt-0.5">•</span>
|
|
<span>
|
|
<strong>프로젝트 초기화</strong> — <code className="bg-bg-tertiary px-1 rounded">/init-project</code> 실행으로 팀 설정 자동 적용
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
<Alert type="info">
|
|
<code className="bg-bg-tertiary px-1 rounded">GITEA_TOKEN</code>은{' '}
|
|
<code className="bg-bg-tertiary px-1 rounded">settings.json</code>의{' '}
|
|
<code className="bg-bg-tertiary px-1 rounded">env</code> 필드에서도 설정할 수 있습니다.
|
|
환경변수와 settings.json 모두 설정된 경우 환경변수가 우선합니다.
|
|
</Alert>
|
|
</div>
|
|
);
|
|
}
|