6a4e4d864c
- meta_common.php에 favicon 링크 및 로고 컴포넌트 추가 - 모든 index.php 페이지에 favicon 적용 - 일부 페이지 타이틀에서 CodeBridgeExy → CodeBridgeX 수정 - 23개 파일 일괄 업데이트 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
994 lines
46 KiB
PHP
994 lines
46 KiB
PHP
<?php
|
|
/**
|
|
* SAM System - Code Development Policy Guide
|
|
* Final Update: 2025-12-31
|
|
* Includes AI Context Management & Amnesia Solutions
|
|
*/
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SAM Code Development Policy & AI Memory Kit</title>
|
|
<!-- Favicon -->
|
|
<link rel="apple-touch-icon" sizes="180x180" href="../img/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="../img/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="../img/favicon-16x16.png">
|
|
<link rel="shortcut icon" href="../img/favicon.png">
|
|
<!-- Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
|
|
<!-- Icons -->
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<style>
|
|
:root {
|
|
--bg: #030712;
|
|
--glass: rgba(17, 24, 39, 0.75);
|
|
--glass-border: rgba(255, 255, 255, 0.1);
|
|
--primary: #3b82f6;
|
|
--primary-glow: rgba(59, 130, 246, 0.5);
|
|
--secondary: #10b981;
|
|
--accent: #8b5cf6;
|
|
--danger: #ef4444;
|
|
--warning: #f59e0b;
|
|
--text-main: #f3f4f6;
|
|
--text-muted: #9ca3af;
|
|
--code-bg: #0f172a;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
background-color: var(--bg);
|
|
color: var(--text-main);
|
|
font-family: 'Inter', sans-serif;
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
background-image:
|
|
radial-gradient(circle at 10% 10%, rgba(59, 130, 246, 0.08) 0%, transparent 40%),
|
|
radial-gradient(circle at 90% 90%, rgba(139, 92, 246, 0.08) 0%, transparent 40%),
|
|
radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.03) 0%, transparent 60%);
|
|
}
|
|
|
|
.container { max-width: 1300px; margin: 0 auto; padding: 2rem; }
|
|
|
|
/* Hero Section */
|
|
.hero { padding: 5rem 0 3rem; text-align: center; }
|
|
.hero h1 {
|
|
font-family: 'Outfit', sans-serif;
|
|
font-size: 4rem;
|
|
background: linear-gradient(135deg, #fff 0%, #60a5fa 50%, #a78bfa 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
margin-bottom: 1.5rem;
|
|
letter-spacing: -0.03em;
|
|
font-weight: 800;
|
|
}
|
|
.hero p { color: var(--text-muted); font-size: 1.2rem; max-width: 700px; margin: 0 auto; }
|
|
.update-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.6rem 1.2rem;
|
|
background: rgba(59, 130, 246, 0.1);
|
|
border: 1px solid rgba(59, 130, 246, 0.3);
|
|
border-radius: 30px;
|
|
color: var(--primary);
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
/* Section Styling */
|
|
.section { margin-bottom: 5rem; opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
|
|
.section.visible { opacity: 1; transform: translateY(0); }
|
|
.section-header { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 2.5rem; }
|
|
.section-header i { color: var(--primary); width: 32px; height: 32px; }
|
|
.section-header h2 { font-family: 'Outfit', sans-serif; font-size: 2.2rem; color: #fff; font-weight: 700; }
|
|
|
|
/* Glass Cards */
|
|
.glass-card {
|
|
background: var(--glass);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 28px;
|
|
padding: 3rem;
|
|
height: 100%;
|
|
position: relative;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
.glass-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); }
|
|
|
|
/* Grid Layouts */
|
|
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 2.5rem; }
|
|
|
|
/* Box Utilities */
|
|
.rule-box { border-radius: 20px; padding: 2rem; margin-bottom: 1.5rem; position: relative; }
|
|
.rule-box.prohibited { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.3); }
|
|
.rule-box.prohibited h4 { color: #fca5a5; display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
|
|
.rule-box.mandatory { background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.3); }
|
|
.rule-box.mandatory h4 { color: #6ee7b7; display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
|
|
.rule-box.ai-solution { background: rgba(139, 92, 246, 0.08); border: 1px solid rgba(139, 92, 246, 0.3); }
|
|
.rule-box.ai-solution h4 { color: #c4b5fd; display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
|
|
|
|
/* Table Design */
|
|
.table-wrapper { background: rgba(0,0,0,0.2); border-radius: 16px; overflow: hidden; border: 1px solid var(--glass-border); margin-top: 1rem; }
|
|
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
|
|
th { text-align: left; padding: 1.2rem; background: rgba(255,255,255,0.05); color: var(--text-muted); border-bottom: 1px solid var(--glass-border); }
|
|
td { padding: 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.03); }
|
|
tr:hover { background: rgba(255,255,255,0.02); }
|
|
|
|
/* AI Memory Tooltip/Badge */
|
|
.ai-badge {
|
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
|
|
padding: 0.3rem 0.8rem;
|
|
border-radius: 6px;
|
|
font-size: 0.75rem;
|
|
font-weight: 800;
|
|
color: #fff;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* Lists */
|
|
ul { list-style: none; }
|
|
li { margin-bottom: 0.8rem; position: relative; padding-left: 1.5rem; color: #d1d5db; }
|
|
li::before { content: '→'; position: absolute; left: 0; color: var(--primary); opacity: 0.7; }
|
|
.prohibited li::before { content: '✕'; color: var(--danger); }
|
|
.mandatory li::before { content: '✓'; color: var(--secondary); }
|
|
.ai-solution li::before { content: ''; } /* Remove default arrow for interactive items */
|
|
|
|
|
|
/* Code & Pre */
|
|
pre { background: var(--code-bg); padding: 1.5rem; border-radius: 16px; font-family: 'Fira Code', monospace; font-size: 0.85rem; border: 1px solid rgba(255,255,255,0.05); color: #94a3b8; overflow-x: auto; margin: 1rem 0; }
|
|
code { color: #f1f5f9; }
|
|
|
|
/* Modal Styles */
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
backdrop-filter: blur(8px);
|
|
z-index: 1000;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.modal.active { display: flex; }
|
|
|
|
.modal-content {
|
|
background: #0f172a;
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 24px;
|
|
width: 100%;
|
|
max-width: 900px;
|
|
max-height: 80vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 1.5rem 2rem;
|
|
border-bottom: 1px solid var(--glass-border);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 2rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.modal-close {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.modal-close:hover { color: #fff; }
|
|
|
|
.copy-btn {
|
|
background: var(--primary);
|
|
border: none;
|
|
color: #fff;
|
|
padding: 0.6rem 1.2rem;
|
|
border-radius: 12px;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.copy-btn:hover { background: #2563eb; transform: scale(1.05); }
|
|
|
|
.template-item {
|
|
cursor: pointer;
|
|
padding: 0.8rem;
|
|
border-radius: 12px;
|
|
transition: all 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: #fff;
|
|
border: 1px solid transparent;
|
|
margin-bottom: 0.5rem; /* Adjust spacing for interactive items */
|
|
padding-left: 1.5rem; /* Align with other list items */
|
|
}
|
|
|
|
.template-item:hover {
|
|
background: rgba(59, 130, 246, 0.1);
|
|
border-color: rgba(59, 130, 246, 0.3);
|
|
padding-left: 1.8rem; /* Slight indent on hover */
|
|
}
|
|
|
|
.template-item span { color: var(--text-muted); font-size: 0.9rem; }
|
|
|
|
/* Flow Diagrams */
|
|
.flow-diagram { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin: 2rem 0; }
|
|
.flow-box { padding: 1rem 2rem; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border); border-radius: 12px; width: 100%; max-width: 500px; text-align: center; }
|
|
.flow-arrow { font-size: 1.5rem; color: var(--primary); }
|
|
|
|
footer { padding: 4rem 2rem; text-align: center; border-top: 1px solid var(--glass-border); background: rgba(0,0,0,0.3); }
|
|
|
|
/* Highlight Typography */
|
|
strong { color: #fff; }
|
|
.text-blue { color: var(--primary); }
|
|
.text-green { color: var(--secondary); }
|
|
.text-purple { color: var(--accent); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Hero -->
|
|
<header class="hero">
|
|
<div class="update-badge"><i data-lucide="sparkles"></i> AI-Optimized Development Protocol</div>
|
|
<h1>SAM Code Development Policy</h1>
|
|
<p>견적, 수주, 생산, 출하, 품질 등 MES 핵심 개발을 위한 표준 가이드라인 및 <br>AI 컨텍스트 관리(기억상실증 방지) 패키지</p>
|
|
</header>
|
|
|
|
<!-- Section 1: Overview -->
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<i data-lucide="book-open"></i>
|
|
<h2>📋 개요</h2>
|
|
</div>
|
|
<div class="glass-card">
|
|
<p style="font-size: 1.1rem; color: #fff; margin-bottom: 1rem;">이 문서는 SAM 시스템의 모든 기능 개발에 공통으로 적용되는 정책을 정의합니다.</p>
|
|
<p>각 기능별 개발 문서(MASTER_PLAN.md)는 이 문서를 참조합니다. 특히 AI 어시스턴트(Claude)가 세션 간의 컨텍스트를 잃지 않고, 일관된 품질의 코드를 생산하기 위한 기술적/정책적 장치를 포함하고 있습니다.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 2: AI Memory Kit (Solutions for Amnesia) -->
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<i data-lucide="brain-circuit"></i>
|
|
<h2>🧠 AI 컨텍스트 관리 및 기억상실증 방지</h2>
|
|
</div>
|
|
<div class="grid-2">
|
|
<div class="glass-card">
|
|
<h3>AI 기억 유지 도구 (Memory Kit)</h3>
|
|
<div class="rule-box ai-solution">
|
|
<h4><span class="ai-badge">Core</span> 구조적 장치</h4>
|
|
<ul>
|
|
<li><strong>CLAUDE.md</strong>: 프로젝트 기술 스택, 코딩 스타일, 개발 원칙 (루트 상시 배치)</li>
|
|
<li><strong>PROGRESS.md</strong>: 현재 수행 중인 태스크, 완료 항목, 다음 단계(Next Step)</li>
|
|
<li><strong>MASTER_PLAN.md</strong>: 특정 기능의 전체 아키텍처와 도메인 지식 기록</li>
|
|
</ul>
|
|
</div>
|
|
<div class="rule-box ai-solution">
|
|
<h4><span class="ai-badge">Skill</span> 자동 복구 프로세스</h4>
|
|
<ul>
|
|
<li><strong>세션 시작 루틴</strong>: AI 부팅 시 <code>PROGRESS.md</code> 로드</li>
|
|
<li><strong>체크포인트 커밋</strong>: 주요 로직 변경 후 상태 업데이트 강제 지시</li>
|
|
<li><strong>컨텍스트 요약(Compaction)</strong>: 결정 사항을 요약하여 별도 파일 기록</li>
|
|
</ul>
|
|
</div>
|
|
<p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 1rem;">출처: Anthropic Claude Code Context Management Guidelines & GitHub Open Projects</p>
|
|
</div>
|
|
|
|
<div class="glass-card">
|
|
<h3>외부 메모리 솔루션 제안</h3>
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>솔루션</th>
|
|
<th>기능 및 효과</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>MCP</strong></td>
|
|
<td>Model Context Protocol을 통한 장기 기억 저장</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Super Claude Kit</strong></td>
|
|
<td>작업 상태 추적 및 레지스트리 관리</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>claunch</strong></td>
|
|
<td>프로젝트별 세션 관리 및 컨텍스트 로드</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 3: Core Rules -->
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<i data-lucide="shield-alert"></i>
|
|
<h2>🚨 필수 준수 규칙</h2>
|
|
</div>
|
|
<div class="grid-2">
|
|
<div class="glass-card">
|
|
<h3>1. 테이블 정책</h3>
|
|
<div class="rule-box prohibited">
|
|
<h4>❌ 절대 금지</h4>
|
|
<ul>
|
|
<li>새로운 테이블 임의 생성 (price_new, order_items_v2 등)</li>
|
|
<li>기존 테이블 구조 임의 변경</li>
|
|
<li>mng에서 마이그레이션 실행</li>
|
|
</ul>
|
|
</div>
|
|
<div class="rule-box mandatory">
|
|
<h4>✅ 필수</h4>
|
|
<ul>
|
|
<li>기존 테이블 우선 활용</li>
|
|
<li>테이블 추가 필요 시 → 사용자 승인 필수</li>
|
|
<li>DB 마이그레이션은 <strong>api 프로젝트</strong>에서만 실행</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="glass-card">
|
|
<h3>2. 프로젝트 기술 스택</h3>
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>프로젝트</th>
|
|
<th>기술 스택</th>
|
|
<th>주의사항</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>mng</strong></td>
|
|
<td>Laravel 12 + Plain Blade + Tailwind</td>
|
|
<td><span class="text-danger">❌ Alpine.js 금지</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>api</strong></td>
|
|
<td>Laravel 12 + Swagger</td>
|
|
<td><span class="text-green">Multi-tenant 필수</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>5130</strong></td>
|
|
<td>PHP + jQuery</td>
|
|
<td>분석 대상 (참조용)</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>react</strong></td>
|
|
<td>Next.js 15</td>
|
|
<td>프론트엔드 전담</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Code Convention -->
|
|
<div class="glass-card" style="margin-top: 2.5rem;">
|
|
<h3>3. 코드 컨벤션 (추측 금지 원칙)</h3>
|
|
<p style="margin-bottom: 1.5rem;"><span class="tag tag-red">🔴 핵심: 모든 코드 요소는 실제 확인 후 사용</span></p>
|
|
<div class="grid-2">
|
|
<div class="rule-box prohibited">
|
|
<h4>❌ 절대 금지 - 추측/할루시네이션</h4>
|
|
<ul style="font-size: 0.9rem;">
|
|
<li>컬럼명 추측 (tenant.name → tenant.company_name 여부 확인)</li>
|
|
<li>관계명 추측 (user.roles → user.userRoles 확인)</li>
|
|
<li>메서드명 추측 (getName() → getCompanyName() 확인)</li>
|
|
<li>테이블명 확인 (users → sam_users 여부 확인)</li>
|
|
</ul>
|
|
</div>
|
|
<div class="rule-box mandatory" style="background: rgba(16, 185, 129, 0.05);">
|
|
<h4>✅ 필수 확인 우선순위</h4>
|
|
<ol style="font-size: 0.9rem; padding-left: 1.5rem;">
|
|
<li>모델 파일 (app/Models/*.php)</li>
|
|
<li>마이그레이션 (database/migrations/*.php)</li>
|
|
<li>기존 컨트롤러/서비스 사용 패턴</li>
|
|
<li>불확실하면 → <strong>반드시 질문</strong></li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 4: DB Mapping & Design -->
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<i data-lucide="database"></i>
|
|
<h2>🗄️ DB 테이블 및 설계 정책</h2>
|
|
</div>
|
|
<div class="glass-card">
|
|
<h3>SAM 테이블 설계 정책 (Hybrid EAV)</h3>
|
|
<div class="grid-2" style="margin-top: 1.5rem;">
|
|
<div class="rule-box" style="background: rgba(59, 130, 246, 0.05); border: 1px solid rgba(59, 130, 246, 0.2);">
|
|
<h4 style="color: var(--primary);">🔴 필수 컬럼 (Stored Directly)</h4>
|
|
<ul style="font-size: 0.9rem;">
|
|
<li>조인 필드 (FK: tenant_id, product_id 등)</li>
|
|
<li>인덱싱 필드 (status, created_at 등)</li>
|
|
<li>고빈도 쿼리 WHERE 조건 필드</li>
|
|
</ul>
|
|
</div>
|
|
<div class="rule-box" style="background: rgba(16, 185, 129, 0.05); border: 1px solid rgba(16, 185, 129, 0.2);">
|
|
<h4 style="color: var(--secondary);">🟢 가변 컬럼 (options JSON)</h4>
|
|
<ul style="font-size: 0.9rem;">
|
|
<li>비즈니스 속성 데이터</li>
|
|
<li>설정/옵션 값</li>
|
|
<li>확장 가능성 있는 필드 (검색 비대상)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Type Policy -->
|
|
<div style="margin-top: 2rem;">
|
|
<h4>⚠️ 컬럼 타입 정책 (Enum 지양)</h4>
|
|
<ul style="margin-top: 1rem;">
|
|
<li><strong>❌ 지양</strong>: DB enum 타입, PHP Enum 하드코딩</li>
|
|
<li><strong>✅ 권장</strong>: string/varchar + common_codes 테이블 관리</li>
|
|
<li><strong>💡 예외</strong>: is_* boolean 필드 (true/false 명확한 경우)</li>
|
|
</ul>
|
|
<pre>
|
|
// ✅ 권장: string + 코드 테이블
|
|
$table->string('status', 20)->default('pending');
|
|
// ✅ 허용: is_* boolean
|
|
$table->boolean('is_active')->default(true);
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 5: Process & Workflow -->
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<i data-lucide="refresh-cw"></i>
|
|
<h2>🔄 Phase 진행 및 워크플로우</h2>
|
|
</div>
|
|
<div class="grid-2">
|
|
<div class="glass-card">
|
|
<h3>테이블 작업 프로세스</h3>
|
|
<div class="flow-diagram">
|
|
<div class="flow-box"><strong>Step 1</strong><br>5130 테이블 분석</div>
|
|
<div class="flow-arrow">↓</div>
|
|
<div class="flow-box"><strong>Step 2</strong><br>SAM 테이블 매핑 문서화</div>
|
|
<div class="flow-arrow">↓</div>
|
|
<div class="flow-box"><strong>Step 3</strong><br>컬럼 분류 (필수 🔴 / 가변 🟢)</div>
|
|
<div class="flow-arrow">↓</div>
|
|
<div class="flow-box"><strong>Step 4</strong><br>사용자 승인 및 마이그레이션 생성</div>
|
|
</div>
|
|
</div>
|
|
<div class="glass-card">
|
|
<h3>정책 충돌 해결 및 커밋</h3>
|
|
<ul>
|
|
<li><strong>최신 우선</strong>: 문서 간 충돌 시 최신 날짜 우선</li>
|
|
<li><strong>상위 우선</strong>: 상위 문서(CLAUDE.md) 우선</li>
|
|
<li><strong>롤백 포인트</strong>: 각 Phase 완료 시 Git 태그 생성</li>
|
|
<li><strong>커밋 메시지</strong>: 반드시 <strong>한글</strong>로 작성</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 7: Specialized Tool Workflow (Antigravity + Claude Code + TestSprite) -->
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<i data-lucide="layers-2"></i>
|
|
<h2>🚀 Triple-Agent 협업 워크플로우</h2>
|
|
</div>
|
|
<p style="margin-bottom: 2rem;">SAM 프로젝트는 <strong>Antigravity(실행)</strong>, <strong>Claude Code(감리)</strong>, <strong>TestSprite(검사)</strong>의 3단계 교차 검증을 통해 품질을 보증합니다.</p>
|
|
|
|
<div class="grid-3">
|
|
<!-- Role 1: Antigravity -->
|
|
<div class="glass-card">
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem;">
|
|
<h3 style="margin-bottom: 0;"><i data-lucide="pencil-ruler"></i> Antigravity</h3>
|
|
<span class="ai-badge" style="background: #3b82f6;">The Doer</span>
|
|
</div>
|
|
<ul style="font-size: 0.9rem;">
|
|
<li><strong>설계 및 구현</strong>: 초기 마스터 플랜 수립 및 고속 코드 작성</li>
|
|
<li><strong>UI/UX 가이드</strong>: 프리미엄 디자인 시스템(Glassmorphism) 적용</li>
|
|
<li><strong>컨텐츠 생성</strong>: 이미지, 텍스트 등 에셋 생성 주도</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Role 2: Claude Code -->
|
|
<div class="glass-card">
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem;">
|
|
<h3 style="margin-bottom: 0;"><i data-lucide="terminal"></i> Claude Code</h3>
|
|
<span class="ai-badge" style="background: #10b981;">The Auditor</span>
|
|
</div>
|
|
<ul style="font-size: 0.9rem;">
|
|
<li><strong>인프라 및 감리</strong>: 파일 구조, 터미널 명령, Git 관리</li>
|
|
<li><strong>계획 검증</strong>: Antigravity의 계획을 회사 정책 기반으로 검토</li>
|
|
<li><strong>보안 및 권한</strong>: API 명세 및 멀티테넌트 로직 체크</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Role 3: TestSprite -->
|
|
<div class="glass-card">
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem;">
|
|
<h3 style="margin-bottom: 0;"><i data-lucide="scan-eye"></i> TestSprite</h3>
|
|
<span class="ai-badge" style="background: #ef4444;">The QA</span>
|
|
</div>
|
|
<ul style="font-size: 0.9rem;">
|
|
<li><strong>E2E 브라우저 테스트</strong>: 사용자 관점의 프론트엔드 검증</li>
|
|
<li><strong>Visual Regression</strong>: UI 깨짐 및 CSS 일치성 확인</li>
|
|
<li><strong>이슈 자동 수정</strong>: 발견된 버그의 자동 수정 제안 및 확인</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Detailed Workflow -->
|
|
<div class="glass-card" style="margin-top: 2rem;">
|
|
<h3>실전 협업 프로세스 (Execution Cycle)</h3>
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>단계</th>
|
|
<th>활동</th>
|
|
<th>주체</th>
|
|
<th>참고 파일 (Artifacts)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>1. 분석/설계</strong></td>
|
|
<td>요구사항 분석 및 아키텍처 수립</td>
|
|
<td>Antigravity</td>
|
|
<td><code>MASTER_PLAN.md</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>2. 정책 검증</strong></td>
|
|
<td>회사 정책 준수 여부 및 구조적 무결성 검토</td>
|
|
<td>Claude Code</td>
|
|
<td><code>CLAUDE.md</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>3. 코드 구현</strong></td>
|
|
<td>검증된 계획 기반 고속 구현 (Phase별 진행)</td>
|
|
<td>Antigravity</td>
|
|
<td><code>PROGRESS.md</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>4. QA 명세</strong></td>
|
|
<td>테스트 시나리오 및 PSD(Product Spec) 생성</td>
|
|
<td>Claude Code</td>
|
|
<td><code>QA_SPEC.md</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>5. 최종 검증</strong></td>
|
|
<td>브라우저 테스트 및 자동 버그 수정</td>
|
|
<td>TestSprite</td>
|
|
<td><code>QA_REPORT.pnl</code></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 8: Reference & Artifacts -->
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<i data-lucide="folder-key"></i>
|
|
<h2>📁 핵심 참고 파일 및 템플릿</h2>
|
|
</div>
|
|
<div class="grid-2">
|
|
<div class="glass-card">
|
|
<h3>필수 관리 문서 (Single Source of Truth)</h3>
|
|
<div style="margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem;">
|
|
<div class="template-item" onclick="openTemplate('master_plan')">
|
|
<i data-lucide="file-text" size="18"></i>
|
|
<strong>/docs/MASTER_PLAN.md</strong>
|
|
<span>: 프로젝트의 북극성. 전체 기능 설계도.</span>
|
|
</div>
|
|
<div class="template-item" onclick="openTemplate('progress_log')">
|
|
<i data-lucide="activity" size="18"></i>
|
|
<strong>/docs/PROGRESS.md</strong>
|
|
<span>: 실시간 태스크 추적 및 컨텍스트 복구용.</span>
|
|
</div>
|
|
<div class="template-item" onclick="openTemplate('qa_spec')">
|
|
<i data-lucide="check-square" size="18"></i>
|
|
<strong>/docs/QA_SPEC.md</strong>
|
|
<span>: TestSprite 전용 제품 사양서(PSD).</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="glass-card">
|
|
<h3>AI 가이드라인 파일 (Context Manager)</h3>
|
|
<div style="margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem;">
|
|
<div class="template-item" onclick="openTemplate('claude_rules')">
|
|
<i data-lucide="settings" size="18"></i>
|
|
<strong>/CLAUDE.md</strong>
|
|
<span>: 프로젝트 고유 코딩 스타일 지침서.</span>
|
|
</div>
|
|
<div class="template-item" onclick="openTemplate('claude_settings')">
|
|
<i data-lucide="terminal" size="18"></i>
|
|
<strong>/.claudecode/settings.json</strong>
|
|
<span>: Claude Code의 인프라 설정.</span>
|
|
</div>
|
|
<div class="template-item" onclick="openTemplate('agent_workflow')">
|
|
<i data-lucide="workflow" size="18"></i>
|
|
<strong>/.agent/workflows/</strong>
|
|
<span>: 반복 작업 자동화 스크립트.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Template Modal -->
|
|
<div id="template-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 id="modal-title"><i data-lucide="file-code"></i> Template Viewer</h3>
|
|
<div style="display: flex; gap: 1rem; align-items: center;">
|
|
<button class="copy-btn" onclick="copyTemplate()">
|
|
<i data-lucide="copy" size="16"></i> Copy Code
|
|
</button>
|
|
<button class="modal-close" onclick="closeModal()">
|
|
<i data-lucide="x" size="24"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="modal-body">
|
|
<pre><code id="modal-code" class="language-markdown"></code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 10: Quick Start Guide -->
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<i data-lucide="zap"></i>
|
|
<h2>⚡ Quick Start: 워크플로우 즉각 적용</h2>
|
|
</div>
|
|
<div class="glass-card">
|
|
<div class="grid-2">
|
|
<div>
|
|
<h3>1단계: 세션 부팅 (Context Load)</h3>
|
|
<p>새 대화 시작 시 AI에게 다음 명령을 전달하여 컨텍스트를 동기화합니다.</p>
|
|
<pre>
|
|
"PROGRESS.md와 CLAUDE.md를 읽고 현재 진행 중인
|
|
프로젝트의 상태와 코딩 규칙을 파악해줘."
|
|
</pre>
|
|
</div>
|
|
<div>
|
|
<h3>2단계: 계획 수립 (Antigravity)</h3>
|
|
<p>작업 시작 전 아키텍처를 설계하고 승인을 받습니다.</p>
|
|
<pre>
|
|
"MASTER_PLAN_TEMPLATE.md를 기반으로 이번
|
|
기능의 상세 설계안을 작성해줘."
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<div class="grid-2" style="margin-top: 1.5rem;">
|
|
<div>
|
|
<h3>3단계: 정책 검증 (Claude Code)</h3>
|
|
<p>계획이 회사 정책에 부합하는지 감리를 요청합니다.</p>
|
|
<pre>
|
|
"이 설계안이 SAM DB 정책(Hybrid EAV)과
|
|
보안 가이드라인을 준수하는지 검토해줘."
|
|
</pre>
|
|
</div>
|
|
<div>
|
|
<h3>4단계: QA 실행 (TestSprite)</h3>
|
|
<p>구현 완료 후 브라우저 기반 자동 테스트를 수행합니다.</p>
|
|
<pre>
|
|
"QA_SPEC.md를 기반으로 TestSprite를 실행하여
|
|
시나리오별 동작과 UI를 검증해줘."
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 11: Changelog -->
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<i data-lucide="history"></i>
|
|
<h2>📝 변경 이력</h2>
|
|
</div>
|
|
<div class="glass-card">
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>날짜</th>
|
|
<th>버전</th>
|
|
<th>변경 내용</th>
|
|
<th>담당</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>2025-12-19</td>
|
|
<td>v1.0</td>
|
|
<td>초기 공통 정책 문서 작성 (MES 통합 가이드)</td>
|
|
<td>Claude</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2025-12-31</td>
|
|
<td>v1.1</td>
|
|
<td>AI 기억상실증 방지 전략 추가</td>
|
|
<td>Claude</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2025-12-31</td>
|
|
<td>v1.2</td>
|
|
<td>Triple-Agent(Claude Code+Antigravity+TestSprite) 시너지 워크플로우 통합</td>
|
|
<td>Antigravity</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 12: Coocon API Inquiry -->
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<i data-lucide="mail"></i>
|
|
<h2>✉️ Coocon API 도입 문의 현황</h2>
|
|
</div>
|
|
<div class="glass-card">
|
|
<p style="font-size: 1.1rem; color: #fff; margin-bottom: 1.5rem;">[도입문의] ERP 기반 기업 신용정보 및 조기경보 API 도입 관련</p>
|
|
|
|
<div class="rule-box ai-solution">
|
|
<h4><i data-lucide="search"></i> 검토 중인 상품 및 목적</h4>
|
|
<ul>
|
|
<li><strong>검토 상품</strong>: 기업 신용정보, 재무정보, 기업 휴폐업 조회 및 기업 리스크 모니터링 API</li>
|
|
<li><strong>주요 목적</strong>: ERP 내 거래처 신용 상태 가공 노출 (신호등 체계 구현)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="rule-box mandatory" style="background: rgba(59, 130, 246, 0.05); border-color: rgba(59, 130, 246, 0.3);">
|
|
<h4><i data-lucide="help-circle"></i> 주요 문의 사항</h4>
|
|
<ul style="font-size: 0.95rem;">
|
|
<li>위 기능 구현을 위한 최적의 API 상품 추천 요청</li>
|
|
<li>과금 체계 (도입비, 기본료, 건당 비용 등) 및 스타트업 대상 할인 혜택 여부</li>
|
|
<li>데이터의 재가공(UI 구성) 허용 범위 및 법적 준수 사항 확인</li>
|
|
<li>테스트용 API Key 발급 가능 여부</li>
|
|
<li><strong>일정</strong>: 2026년 1월말 정식 런칭 목표 (제안서 및 API 명세서 요청 중)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<p style="margin-top: 1rem; color: var(--text-muted); font-size: 0.9rem;">
|
|
<i data-lucide="info" size="14" style="vertical-align: middle;"></i>
|
|
이 내용은 쿠콘 문의사항에 공식 접수된 상태이며, API 도입 시 SAM 시스템의 기업 리스크 관리 모듈에 통합될 예정입니다.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>© 2025 SAM MES Development Group. Powered by Advanced Agentic Coding.</p>
|
|
<p style="margin-top: 10px; font-size: 0.82rem; opacity: 0.5;">이 가이드는 AI 협업 효율을 극대화하기 위해 설계되었습니다.</p>
|
|
</footer>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
|
|
// Templates Data
|
|
const templates = {
|
|
master_plan: `# [기능명] Master Plan - v1.0
|
|
|
|
## 1. 개요 (Overview)
|
|
- **목적**: [기능의 핵심 목적 작성]
|
|
- **대상**: [수혜자 및 관련 모듈]
|
|
- **배경**: [기존 5130 시스템 대비 개선 사항]
|
|
|
|
## 2. 아키텍처 설계 (Architecture)
|
|
### 2.1 DB 설계 (Hybrid EAV)
|
|
- **필수 컬럼 (Stored)**: \`id\`, \`tenant_id\`, [주요 필드]
|
|
- **가변 컬럼 (JSON options)**: \`settings\`, \`metadata\`, [확장 필드]
|
|
|
|
### 2.2 기술 스택
|
|
- **Backend**: Laravel 12 API (api 프로젝트)
|
|
- **Admin**: Filament PHP (mng 프로젝트)
|
|
- **Frontend**: Next.js 15 (react 프로젝트)
|
|
|
|
## 3. 구현 단계 (Phases)
|
|
### Phase 1: DB & 모델링
|
|
- [ ] 마이그레이션 생성 (api)
|
|
- [ ] Eloquent 모델 및 관계 설정
|
|
|
|
### Phase 2: 비즈니스 로직 (API)
|
|
- [ ] 컨트롤러 구현
|
|
- [ ] API 명세서 업데이트 (Swagger)
|
|
|
|
### Phase 3: UI/UX 구현 (mng/react)
|
|
- [ ] 관리자 페이지 구성
|
|
- [ ] 사용자 프론트엔드 연동
|
|
|
|
## 4. 검증 포인트 (Verification)
|
|
- [Antigravity] 디자인 시스템 준수 여부
|
|
- [Claude Code] 보안 취약점 및 정책 준수 체크
|
|
- [TestSprite] 주요 시나리오 E2E 테스트`,
|
|
|
|
progress_log: `# Progress Log - [프로젝트명]
|
|
|
|
## 🚀 실시간 진행 현황
|
|
- **현재 단계**: Phase [N] 구현 중
|
|
- **진행률**: [NN]%
|
|
- **최근 완료**: [최근 완료된 항목]
|
|
|
|
## 📝 작업 기록 (Context History)
|
|
| 날짜 | 단계 | 내용 | 담당 | 비고 |
|
|
| :--- | :--- | :--- | :--- | :--- |
|
|
| 202X-XX-XX | Phase 1 | DB 마이그레이션 및 기본 모델 생성 | Claude Code | 완료 |
|
|
| 202X-XX-XX | Phase 2 | 리스트 조회 API 및 필터 기능 추가 | Antigravity | 진행 중 |
|
|
|
|
## 🧠 컨텍스트 요약 (Amnesia Recovery)
|
|
- **핵심 결정 사항**: [중요 아키텍처 결정 내용]
|
|
- **다음 세션 시작 지점**: [AI가 다음 세션에서 바로 이어서 해야 할 일]
|
|
- **주의 사항**: [구현 중 발견된 특이 사항]
|
|
|
|
## 🚩 이슈 및 차단 사항 (Blockers)
|
|
- [ ] [현재 해결되지 않은 기술적 이슈]`,
|
|
|
|
qa_spec: `# Product Specification (PSD) for TestSprite QA
|
|
|
|
## 1. Feature Description
|
|
- **Target URL**: \`http://localhost:8000/[path]\`
|
|
- **Goal**: [테스트를 통해 검증하고자 하는 핵심 사용자 가치]
|
|
|
|
## 2. User Scenarios
|
|
### Scenario 1: [시나리오 명]
|
|
1. **Given**: [사용자의 초기 상태]
|
|
2. **When**: [사용자가 수행하는 액션]
|
|
3. **Then**: [기대하는 결과 및 화면 변화]
|
|
|
|
### Scenario 2: [에지 케이스 시나리오]
|
|
...
|
|
|
|
## 3. UI Checkpoints
|
|
- [ ] 버튼 클릭 시 로딩 애니메이션 표시 여부
|
|
- [ ] 입력 폼 유효성 검사 (Validation) 메시지 확인
|
|
- [ ] 반응형 레이아웃 (모바일/데스크탑) 정렬 상태
|
|
|
|
## 4. Visual Standards
|
|
- **Font**: Inter, Outfit 체 사용 여부
|
|
- **Color**: Dark mode (#030712) 배경 및 Glassmorphism 투명도 확인
|
|
- **Icon**: Lucide 아이콘 일관성`,
|
|
|
|
claude_rules: `# SAM Project Guidelines
|
|
|
|
## Core Principles
|
|
1. **Anti-Hallucination**: Never guess column names. Check \`app/Models/\` or migrations.
|
|
2. **Hybrid EAV**: Follow \`sales/codepolicy/index.php\` for table design.
|
|
3. **Clean Code**: Maintain Laravel 12 best practices and Next.js 15 standards.
|
|
|
|
## Project Structure
|
|
- \`api/\`: Laravel 12 REST API + Swagger
|
|
- \`mng/\`: Filament PHP Admin (Blade/Tailwind)
|
|
- \`react/\`: Next.js 15 Frontend
|
|
- \`docs/\`: Master plans and progress logs
|
|
|
|
## Tech Stack Rules
|
|
- **Admin**: Use Filament v3. No Alpine.js in standard blade files unless necessary.
|
|
- **Styling**: Vanilla CSS + Tailwind. Glassmorphism is the standard UI theme.
|
|
- **Testing**: Use TestSprite for visual and E2E QA.
|
|
|
|
## Workflow Integration
|
|
- Use Antigravity for UI and complex logic planning.
|
|
- Use Claude Code for infrastructure, linting, and git operations.
|
|
- Always update \`PROGRESS.md\` before ending a session.`,
|
|
|
|
claude_settings: `{
|
|
"project": "SAM MES",
|
|
"version": "1.0",
|
|
"linting": true,
|
|
"hooks": {
|
|
"pre-commit": "php artisan test"
|
|
},
|
|
"memory": {
|
|
"strategy": "progressive",
|
|
"files": ["CLAUDE.md", "PROGRESS.md", "MASTER_PLAN.md"]
|
|
},
|
|
"mcp": {
|
|
"enabled": true,
|
|
"servers": ["test-sprite-mcp"]
|
|
}
|
|
}`,
|
|
|
|
agent_workflow: `---
|
|
description: [작업 요약, 예: 신규 모델 및 마이그레이션 생성]
|
|
---
|
|
|
|
1. 모델 이름 확인: [Name]
|
|
2. 마이그레이션 파일 생성: \`php artisan make:migration create_[name]_table\`
|
|
3. 모델 파일 생성: \`php artisan make:model [Name]\`
|
|
4. 필드 정의 및 관계 설정 (MASTER_PLAN 참조)
|
|
5. // turbo
|
|
6. 마이그레이션 실행 및 DB 반영
|
|
7. 테스트 코드 작성 및 검증 (TestSprite)`
|
|
};
|
|
|
|
const modal = document.getElementById('template-modal');
|
|
const modalCode = document.getElementById('modal-code');
|
|
const modalTitle = document.getElementById('modal-title');
|
|
|
|
function openTemplate(id) {
|
|
const content = templates[id];
|
|
const titleMap = {
|
|
master_plan: '/docs/MASTER_PLAN.md',
|
|
progress_log: '/docs/PROGRESS.md',
|
|
qa_spec: '/docs/QA_SPEC.md',
|
|
claude_rules: '/CLAUDE.md',
|
|
claude_settings: '/.claudecode/settings.json',
|
|
agent_workflow: '/.agent/workflows/template.md'
|
|
};
|
|
|
|
modalCode.textContent = content;
|
|
modalTitle.innerHTML = `<i data-lucide="file-code"></i> \${titleMap[id]}`;
|
|
modal.classList.add('active');
|
|
lucide.createIcons();
|
|
}
|
|
|
|
function closeModal() {
|
|
modal.classList.remove('active');
|
|
}
|
|
|
|
async function copyTemplate() {
|
|
const code = modalCode.textContent;
|
|
try {
|
|
await navigator.clipboard.writeText(code);
|
|
const btn = document.querySelector('.copy-btn');
|
|
const originalText = btn.innerHTML;
|
|
btn.innerHTML = '<i data-lucide="check" size="16"></i> Copied!';
|
|
lucide.createIcons();
|
|
setTimeout(() => {
|
|
btn.innerHTML = originalText;
|
|
lucide.createIcons();
|
|
}, 2000);
|
|
} catch (err) {
|
|
alert('Faield to copy: ' + err);
|
|
}
|
|
}
|
|
|
|
// Close modal on click outside
|
|
modal.addEventListener('click', (e) => {
|
|
if (e.target === modal) closeModal();
|
|
});
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) entry.target.classList.add('visible');
|
|
});
|
|
}, { threshold: 0.1 });
|
|
document.querySelectorAll('.section').forEach(s => observer.observe(s));
|
|
</script>
|
|
</body>
|
|
</html>
|