663 lines
20 KiB
HTML
663 lines
20 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>gameservice-fe-agent 폴더 구조</title>
|
|
<style>
|
|
:root {
|
|
--navy: #17172b;
|
|
--blue: #0b63ce;
|
|
--blue-light: #eef4ff;
|
|
--bg: #f5f7fb;
|
|
--card: #ffffff;
|
|
--line: #dde4ef;
|
|
--text: #1f2937;
|
|
--muted: #6b7280;
|
|
--soft: #f8fafc;
|
|
--yellow: #fff8e6;
|
|
--yellow-line: #f0bf4c;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family:
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
"Segoe UI",
|
|
"Noto Sans KR",
|
|
sans-serif;
|
|
color: var(--text);
|
|
background: var(--bg);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.page {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.hero {
|
|
padding: 34px 56px 36px;
|
|
color: #fff;
|
|
background: var(--navy);
|
|
border-bottom: 4px solid #1677ff;
|
|
}
|
|
|
|
.hero h1 {
|
|
margin: 0 0 6px;
|
|
font-size: 26px;
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.hero p {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
color: #a9b1c7;
|
|
}
|
|
|
|
.content {
|
|
width: min(1160px, calc(100% - 80px));
|
|
margin: 34px auto 60px;
|
|
}
|
|
|
|
.card {
|
|
padding: 28px;
|
|
margin-bottom: 24px;
|
|
background: var(--card);
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.section-title {
|
|
margin: 0 0 18px;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
color: #8aa0c4;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.intro p {
|
|
margin: 0 0 24px;
|
|
font-size: 17px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.intro p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
code {
|
|
padding: 2px 6px;
|
|
font-family: "SFMono-Regular", Consolas, monospace;
|
|
font-size: 0.9em;
|
|
color: #d24c4c;
|
|
background: #fff2f2;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
strong,
|
|
.accent {
|
|
color: var(--blue);
|
|
font-weight: 800;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
border: 1px solid var(--line);
|
|
table-layout: fixed;
|
|
}
|
|
|
|
th {
|
|
padding: 16px;
|
|
font-size: 14px;
|
|
text-align: left;
|
|
background: #edf3ff;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
td {
|
|
padding: 18px 16px;
|
|
font-size: 14px;
|
|
vertical-align: top;
|
|
border-right: 1px solid var(--line);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
th:nth-child(1),
|
|
td:nth-child(1) {
|
|
width: 130px;
|
|
}
|
|
|
|
th:nth-child(3),
|
|
td:nth-child(3) {
|
|
width: 280px;
|
|
}
|
|
|
|
td:last-child,
|
|
th:last-child {
|
|
border-right: 0;
|
|
}
|
|
|
|
.folder-name {
|
|
font-family: "SFMono-Regular", Consolas, monospace;
|
|
font-weight: 800;
|
|
color: var(--blue);
|
|
}
|
|
|
|
.desc-title {
|
|
margin-bottom: 12px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.note {
|
|
padding: 14px 18px;
|
|
color: #445066;
|
|
background: var(--blue-light);
|
|
border-left: 4px solid var(--blue);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.config-list {
|
|
margin: 0;
|
|
padding-left: 0;
|
|
list-style: none;
|
|
color: #5f6878;
|
|
font-size: 13px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.config-list li::before {
|
|
content: "· ";
|
|
}
|
|
|
|
.count {
|
|
display: inline-block;
|
|
margin-top: 4px;
|
|
color: var(--blue);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.tree {
|
|
padding: 28px;
|
|
overflow-x: auto;
|
|
font-family: "SFMono-Regular", Consolas, monospace;
|
|
font-size: 13px;
|
|
line-height: 1.9;
|
|
color: #7a8497;
|
|
background: var(--soft);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
white-space: pre;
|
|
}
|
|
|
|
.tree .folder {
|
|
color: var(--blue);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.tree .file {
|
|
color: #4b5563;
|
|
}
|
|
|
|
.tree .comment {
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.flow-desc {
|
|
margin: 0 0 18px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.flow-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 12px;
|
|
}
|
|
|
|
.flow-item {
|
|
position: relative;
|
|
min-height: 126px;
|
|
padding: 28px 16px 18px;
|
|
text-align: center;
|
|
background: var(--soft);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.flow-num {
|
|
position: absolute;
|
|
top: -12px;
|
|
left: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
color: #fff;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
background: var(--blue);
|
|
border-radius: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.flow-title {
|
|
margin: 0 0 4px;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.flow-main {
|
|
margin: 0;
|
|
color: #5f6878;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.flow-sub {
|
|
margin: 0;
|
|
color: #9aa3b2;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.summary-box {
|
|
padding: 16px 20px;
|
|
margin-bottom: 14px;
|
|
color: #a26300;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
background: var(--yellow);
|
|
border: 1px solid var(--yellow-line);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.summary-box:last-child {
|
|
margin-bottom: 0;
|
|
color: #43516a;
|
|
background: var(--blue-light);
|
|
border-color: transparent;
|
|
border-left: 4px solid var(--blue);
|
|
}
|
|
|
|
.skill-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 12px;
|
|
}
|
|
|
|
.skill-card {
|
|
padding: 16px 18px;
|
|
background: var(--soft);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.skill-card .skill-name {
|
|
font-family: "SFMono-Regular", Consolas, monospace;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
color: var(--blue);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.skill-card .skill-desc {
|
|
font-size: 12px;
|
|
color: #6b7280;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.hero {
|
|
padding: 28px 24px;
|
|
}
|
|
|
|
.content {
|
|
width: calc(100% - 32px);
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.card {
|
|
padding: 20px;
|
|
}
|
|
|
|
table,
|
|
thead,
|
|
tbody,
|
|
tr,
|
|
th,
|
|
td {
|
|
display: block;
|
|
width: 100% !important;
|
|
}
|
|
|
|
thead {
|
|
display: none;
|
|
}
|
|
|
|
tr {
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
td {
|
|
border-right: 0;
|
|
}
|
|
|
|
td::before {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
color: #8aa0c4;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
td:nth-child(1)::before {
|
|
content: "폴더";
|
|
}
|
|
|
|
td:nth-child(2)::before {
|
|
content: "설명";
|
|
}
|
|
|
|
td:nth-child(3)::before {
|
|
content: "구성";
|
|
}
|
|
|
|
.flow-list {
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 22px;
|
|
}
|
|
|
|
.skill-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<header class="hero">
|
|
<h1>gameservice-fe-agent 폴더 구조</h1>
|
|
<p>팀 공통 Claude 지침 저장소 — 4개 폴더 구조 설명</p>
|
|
</header>
|
|
|
|
<main class="content">
|
|
<section class="card intro">
|
|
<h2 class="section-title">개요</h2>
|
|
<p>
|
|
<code>gameservice-fe-agent</code>는 팀 전체에서 공통으로 사용하는
|
|
<strong>프론트엔드 Claude 지침 저장소</strong>입니다.
|
|
</p>
|
|
<p>
|
|
각 프로젝트는 이 저장소를 <strong>Git submodule</strong>로 포함하고,
|
|
<code>CLAUDE.md</code>의 <code>@import</code> 구문으로 공통 지침을 불러와 사용합니다.
|
|
</p>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2 class="section-title">폴더 구조 및 역할</h2>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>폴더 / 파일</th>
|
|
<th>설명</th>
|
|
<th>구성</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><span class="folder-name">rules/</span></td>
|
|
<td>
|
|
<div class="desc-title">매 대화마다 자동 로드되는 공통 규칙 모음</div>
|
|
<div class="note">
|
|
<code>CLAUDE.md</code>에서 <code>@import</code>로 불러오며,
|
|
<span class="accent">모든 작업에 항상 자동으로 적용</span>됩니다.
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<ul class="config-list">
|
|
<li>coding-conventions.md — 포맷팅·네이밍·타입</li>
|
|
<li>framework-rules.md — Vue/Nuxt/Tailwind 규칙</li>
|
|
<li>commit-pr.md — 커밋 & PR 규칙</li>
|
|
<li>claude-workflow.md — Claude 작업 방식 지침</li>
|
|
</ul>
|
|
<span class="count">4개 규칙 파일</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><span class="folder-name">skills/</span></td>
|
|
<td>
|
|
<div class="desc-title">Claude Code에서 호출할 수 있는 팀 공용 스킬 모음</div>
|
|
<div class="note">
|
|
<code>link-skills.sh</code>로 프로젝트의 <code>.claude/skills/</code>에
|
|
<span class="accent">심볼릭 링크</span>하여 사용합니다.
|
|
<code>submodule update</code> 한 번으로 모든 프로젝트가 최신 스킬을 받습니다.
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<ul class="config-list">
|
|
<li>conventional-commit</li>
|
|
<li>markup-edm</li>
|
|
<li>plan-analyzer</li>
|
|
<li>plan-translation-generator</li>
|
|
<li>project-init</li>
|
|
<li>verify-component-review</li>
|
|
<li>work-log</li>
|
|
</ul>
|
|
<span class="count">7개 스킬</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><span class="folder-name">templates/</span></td>
|
|
<td>
|
|
<div class="desc-title">프로젝트 지침 초기화용 양식 파일 모음</div>
|
|
<div class="note">
|
|
<code>install.sh</code> 실행 시 <code>.claude/project/</code>로 자동 복사됩니다.
|
|
팀원은 복사된 양식에 <span class="accent">프로젝트 고유 내용을 작성</span>합니다.
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<ul class="config-list">
|
|
<li>CLAUDE.md.tpl — 루트 CLAUDE.md 템플릿</li>
|
|
<li>project/overview.md — 프로젝트 개요 양식</li>
|
|
<li>project/conventions.md — 프로젝트 컨벤션 양식</li>
|
|
<li>project/architecture.md — 아키텍처 양식</li>
|
|
</ul>
|
|
<span class="count">4개 템플릿</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><span class="folder-name">scripts/</span></td>
|
|
<td>
|
|
<div class="desc-title">프로젝트 설정 및 유지보수 자동화 스크립트</div>
|
|
<div class="note">
|
|
신규 프로젝트 도입부터 업데이트까지
|
|
<span class="accent">반복 작업을 한 명령으로</span> 처리합니다.
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<ul class="config-list">
|
|
<li>install.sh — submodule + 템플릿 복사 + skill 링크</li>
|
|
<li>init-project.sh — project/ 양식만 재초기화</li>
|
|
<li>link-skills.sh — 공통 skill 심볼릭 링크 관리</li>
|
|
<li>update.sh — 최신 공통 지침으로 업데이트</li>
|
|
</ul>
|
|
<span class="count">4개 스크립트</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>
|
|
<span class="folder-name">CLAUDE.md</span><br />
|
|
<span class="folder-name">README.md</span>
|
|
</td>
|
|
<td>
|
|
<div class="desc-title">저장소 진입점 문서</div>
|
|
<div class="note">
|
|
<code>CLAUDE.md</code>는 <code>rules/*.md</code>를 <code>@import</code>하는
|
|
<span class="accent">공통 지침 엔트리 포인트</span>입니다.
|
|
<code>README.md</code>는 팀원을 위한 사용 가이드입니다.
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<ul class="config-list">
|
|
<li>CLAUDE.md — @import rules/* 엔트리</li>
|
|
<li>README.md — 도입·사용·업데이트 가이드</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2 class="section-title">전체 파일 트리</h2>
|
|
|
|
<div class="tree"><span class="folder">gameservice-fe-agent/</span>
|
|
├── <span class="file">CLAUDE.md</span> <span class="comment">← 공통 지침 엔트리 포인트 (rules/* @import)</span>
|
|
├── <span class="file">README.md</span> <span class="comment">← 도입·사용·업데이트 가이드</span>
|
|
│
|
|
├── <span class="folder">rules/</span> <span class="comment">← 항상 자동 로드되는 공통 규칙</span>
|
|
│ ├── <span class="file">coding-conventions.md</span> <span class="comment">← 포맷팅, 네이밍, 타입</span>
|
|
│ ├── <span class="file">framework-rules.md</span> <span class="comment">← Vue 3 / Nuxt / Tailwind 규칙</span>
|
|
│ ├── <span class="file">commit-pr.md</span> <span class="comment">← Conventional Commits, PR 가이드</span>
|
|
│ └── <span class="file">claude-workflow.md</span> <span class="comment">← Claude 작업 순서 및 행동 지침</span>
|
|
│
|
|
├── <span class="folder">skills/</span> <span class="comment">← 팀 공용 Claude skill 모음</span>
|
|
│ ├── <span class="file">README.md</span>
|
|
│ ├── <span class="folder">conventional-commit/</span>
|
|
│ │ └── <span class="file">SKILL.md</span>
|
|
│ ├── <span class="folder">markup-edm/</span>
|
|
│ │ ├── <span class="file">SKILL.md</span>
|
|
│ │ ├── <span class="folder">assets/</span>
|
|
│ │ ├── <span class="folder">references/</span> <span class="comment">← api_reference.md, html-patterns.md</span>
|
|
│ │ └── <span class="folder">scripts/</span>
|
|
│ ├── <span class="folder">plan-analyzer/</span>
|
|
│ │ ├── <span class="file">SKILL.md</span>
|
|
│ │ ├── <span class="folder">references/</span> <span class="comment">← output-template.md</span>
|
|
│ │ └── <span class="folder">scripts/</span> <span class="comment">← extract_pptx.py</span>
|
|
│ ├── <span class="folder">plan-translation-generator/</span>
|
|
│ │ ├── <span class="file">SKILL.md</span>
|
|
│ │ └── <span class="folder">scripts/</span> <span class="comment">← generate_translation_keys.py</span>
|
|
│ ├── <span class="folder">project-init/</span>
|
|
│ │ └── <span class="file">SKILL.md</span>
|
|
│ ├── <span class="folder">verify-component-review/</span>
|
|
│ │ └── <span class="file">SKILL.md</span>
|
|
│ └── <span class="folder">work-log/</span>
|
|
│ └── <span class="file">SKILL.md</span>
|
|
│
|
|
├── <span class="folder">templates/</span> <span class="comment">← 프로젝트 지침 초기화 양식</span>
|
|
│ ├── <span class="file">CLAUDE.md.tpl</span> <span class="comment">← 루트 CLAUDE.md 템플릿</span>
|
|
│ └── <span class="folder">project/</span>
|
|
│ ├── <span class="file">overview.md</span>
|
|
│ ├── <span class="file">conventions.md</span>
|
|
│ └── <span class="file">architecture.md</span>
|
|
│
|
|
└── <span class="folder">scripts/</span> <span class="comment">← 자동화 스크립트</span>
|
|
├── <span class="file">install.sh</span> <span class="comment">← 신규 프로젝트 도입 (all-in-one)</span>
|
|
├── <span class="file">init-project.sh</span> <span class="comment">← project/ 양식만 재초기화</span>
|
|
├── <span class="file">link-skills.sh</span> <span class="comment">← skill 심볼릭 링크 관리</span>
|
|
└── <span class="file">update.sh</span> <span class="comment">← 최신 공통 지침 동기화</span></div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2 class="section-title">Skills 목록</h2>
|
|
|
|
<div class="skill-grid">
|
|
<div class="skill-card">
|
|
<div class="skill-name">conventional-commit</div>
|
|
<div class="skill-desc">Conventional Commits 규칙에 따른 커밋 메시지 작성 지원</div>
|
|
</div>
|
|
<div class="skill-card">
|
|
<div class="skill-name">markup-edm</div>
|
|
<div class="skill-desc">EDM(이메일 마케팅) HTML 마크업 생성 및 패턴 적용</div>
|
|
</div>
|
|
<div class="skill-card">
|
|
<div class="skill-name">plan-analyzer</div>
|
|
<div class="skill-desc">기획서(PPT 등)를 분석하여 구조화된 개발 요구사항 도출</div>
|
|
</div>
|
|
<div class="skill-card">
|
|
<div class="skill-name">plan-translation-generator</div>
|
|
<div class="skill-desc">기획서 기반 다국어 번역 키 자동 생성</div>
|
|
</div>
|
|
<div class="skill-card">
|
|
<div class="skill-name">project-init</div>
|
|
<div class="skill-desc">신규 프로젝트 공통 지침 초기화 가이드</div>
|
|
</div>
|
|
<div class="skill-card">
|
|
<div class="skill-name">verify-component-review</div>
|
|
<div class="skill-desc">Vue 컴포넌트 코드 리뷰 및 규칙 준수 검증</div>
|
|
</div>
|
|
<div class="skill-card">
|
|
<div class="skill-name">work-log</div>
|
|
<div class="skill-desc">작업 내역 로그 기록 및 정리</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2 class="section-title">프로젝트 도입 흐름</h2>
|
|
<p class="flow-desc">
|
|
신규 프로젝트에서 <code>install.sh</code> 한 번으로 아래 4단계가 자동 처리됩니다:
|
|
</p>
|
|
|
|
<div class="flow-list">
|
|
<div class="flow-item">
|
|
<span class="flow-num">1</span>
|
|
<p class="flow-title">Submodule 추가</p>
|
|
<p class="flow-main">install.sh</p>
|
|
<p class="flow-sub">.claude/common/ 에 설치</p>
|
|
</div>
|
|
|
|
<div class="flow-item">
|
|
<span class="flow-num">2</span>
|
|
<p class="flow-title">템플릿 복사</p>
|
|
<p class="flow-main">templates/ → .claude/project/</p>
|
|
<p class="flow-sub">프로젝트 지침 양식 생성</p>
|
|
</div>
|
|
|
|
<div class="flow-item">
|
|
<span class="flow-num">3</span>
|
|
<p class="flow-title">Skill 링크</p>
|
|
<p class="flow-main">link-skills.sh</p>
|
|
<p class="flow-sub">.claude/skills/ 에 심볼릭 링크</p>
|
|
</div>
|
|
|
|
<div class="flow-item">
|
|
<span class="flow-num">4</span>
|
|
<p class="flow-title">CLAUDE.md 작성</p>
|
|
<p class="flow-main">@import 구문으로 연결</p>
|
|
<p class="flow-sub">공통 + 프로젝트 지침 로드</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2 class="section-title">핵심 요약</h2>
|
|
|
|
<div class="summary-box">
|
|
<strong>rules/</strong> 의 4개 파일은 모든 Claude 작업에 자동으로 적용되며,
|
|
<strong>templates/</strong>로 프로젝트 고유 지침을 초기화하고,
|
|
<strong>skills/</strong>로 반복 업무를 스킬 명령으로 자동화합니다.
|
|
</div>
|
|
|
|
<div class="summary-box">
|
|
공통 지침 수정은 이 저장소에서만 진행합니다.
|
|
각 프로젝트는 <code>git submodule update --remote</code> 또는
|
|
<code>scripts/update.sh</code>로 최신 버전을 동기화합니다.
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html>
|