SamProject/sam-sales
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: SamProject:526e17d5c83923049e5e9bfc8c2b4dd1dfbb4460
Branches Tags
SamProject:main
...
compare: SamProject:517259c9b5955cf2b42d9ed0c666bec04aa71abf
Branches Tags
SamProject:main

2 Commits
526e17d5c8 ... 517259c9b5

Author SHA1 Message Date
kimbokon
517259c9b5 etc 폴더와 shutter 생성 2026-01-01 20:31:49 +09:00
kimbokon
4ce1e3f813 codepolicy addition 2025-12-30 23:46:08 +09:00
10 changed files with 2726 additions and 13 deletions
Expand all files Collapse all files

953
codepolicy/index.php Normal file
View File

@@ -0,0 +1,953 @@
<?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>
<!-- 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>
</div>
<footer>
<p>&copy; 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>

22
codepolicy/templates/CLAUDE_TEMPLATE.md Normal file
View File

@@ -0,0 +1,22 @@
# 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.

34
codepolicy/templates/MASTER_PLAN_TEMPLATE.md Normal file
View File

@@ -0,0 +1,34 @@
# [기능명] 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 테스트

20
codepolicy/templates/PROGRESS_LOG_TEMPLATE.md Normal file
View File

@@ -0,0 +1,20 @@
# 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)
- [ ] [현재 해결되지 않은 기술적 이슈]

24
codepolicy/templates/QA_SPEC_TEMPLATE.md Normal file
View File

@@ -0,0 +1,24 @@
# 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 아이콘 일관성

990
etc/shutter.php Normal file
View File

@@ -0,0 +1,990 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자동방화셔터 품질인정제도 가이드</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Noto Sans KR', sans-serif;
background-color: #0f172a;
color: #e2e8f0;
}
.gradient-bg {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1e1b4b 100%);
}
.fire-gradient {
background: linear-gradient(135deg, #ea580c 0%, #dc2626 50%, #991b1b 100%);
}
.card-glass {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(148, 163, 184, 0.1);
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.chart-container {
position: relative;
width: 100%;
max-width: 600px;
margin: auto;
height: 320px;
}
@media (min-width: 768px) {
.chart-container { height: 360px; }
}
.glow-orange {
box-shadow: 0 0 30px rgba(234, 88, 12, 0.3);
}
.glow-blue {
box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
}
.animate-pulse-slow {
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-slide-up {
animation: slideUp 0.5s ease-out forwards;
}
.step-connector {
position: absolute;
left: 24px;
top: 48px;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, #ea580c, #3b82f6);
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1e293b; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }
.tab-active {
background: linear-gradient(135deg, #ea580c, #dc2626);
color: white;
}
.spec-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
</style>
</head>
<body class="gradient-bg min-h-screen">
<!-- Navigation -->
<nav class="bg-slate-900/90 backdrop-blur-md sticky top-0 z-50 border-b border-slate-700/50">
<div class="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
<div class="font-bold text-xl text-white flex items-center gap-3">
<div class="w-10 h-10 fire-gradient rounded-lg flex items-center justify-center">
<span class="text-xl">🔥</span>
</div>
<span>자동방화셔터 가이드</span>
</div>
<div class="hidden md:flex space-x-6 text-sm font-medium text-slate-400">
<button onclick="scrollToSection('section-overview')" class="hover:text-orange-400 transition">개요</button>
<button onclick="scrollToSection('section-types')" class="hover:text-orange-400 transition">셔터 종류</button>
<button onclick="scrollToSection('section-specs')" class="hover:text-orange-400 transition">성능기준</button>
<button onclick="scrollToSection('section-process')" class="hover:text-orange-400 transition">인정절차</button>
<button onclick="scrollToSection('section-install')" class="hover:text-orange-400 transition">설치기준</button>
<button onclick="scrollToSection('section-check')" class="hover:text-orange-400 transition">체크리스트</button>
</div>
<button class="md:hidden text-slate-400 hover:text-white" onclick="toggleMobileMenu()">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden bg-slate-800 border-t border-slate-700">
<div class="px-4 py-3 space-y-2">
<button onclick="scrollToSection('section-overview')" class="block w-full text-left py-2 text-slate-300 hover:text-orange-400">개요</button>
<button onclick="scrollToSection('section-types')" class="block w-full text-left py-2 text-slate-300 hover:text-orange-400">셔터 종류</button>
<button onclick="scrollToSection('section-specs')" class="block w-full text-left py-2 text-slate-300 hover:text-orange-400">성능기준</button>
<button onclick="scrollToSection('section-process')" class="block w-full text-left py-2 text-slate-300 hover:text-orange-400">인정절차</button>
<button onclick="scrollToSection('section-install')" class="block w-full text-left py-2 text-slate-300 hover:text-orange-400">설치기준</button>
<button onclick="scrollToSection('section-check')" class="block w-full text-left py-2 text-slate-300 hover:text-orange-400">체크리스트</button>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="max-w-5xl mx-auto px-4 py-8 space-y-16">
<!-- Hero Section -->
<header class="text-center py-16 relative">
<div class="absolute inset-0 overflow-hidden">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-orange-500/10 rounded-full blur-3xl"></div>
<div class="absolute top-1/4 right-1/4 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl"></div>
</div>
<div class="relative z-10">
<div class="inline-flex items-center gap-2 bg-orange-500/20 text-orange-400 px-4 py-2 rounded-full text-sm font-semibold mb-6 border border-orange-500/30">
<span class="w-2 h-2 bg-orange-400 rounded-full animate-pulse"></span>
국토교통부고시 제2021-1009호 적용
</div>
<h1 class="text-4xl md:text-5xl font-black mb-6 leading-tight">
<span class="text-white">자동방화셔터</span><br>
<span class="bg-gradient-to-r from-orange-400 to-red-500 bg-clip-text text-transparent">품질인정제도 완벽 가이드</span>
</h1>
<p class="text-slate-400 text-lg max-w-2xl mx-auto mb-10 leading-relaxed">
화재 시 연기와 열을 감지하여 자동 폐쇄되는 방화셔터.<br>
<strong class="text-slate-200">2021년 강화된 품질인정제도</strong>의 모든 것을 알아보세요.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button onclick="scrollToSection('section-process')" class="fire-gradient hover:opacity-90 text-white font-bold py-3 px-8 rounded-xl transition shadow-lg glow-orange">
인정 절차 확인하기
</button>
<button onclick="scrollToSection('section-check')" class="bg-slate-700 hover:bg-slate-600 text-white font-bold py-3 px-8 rounded-xl transition border border-slate-600">
현장 체크리스트
</button>
</div>
</div>
</header>
<!-- Section 1: Overview -->
<section id="section-overview" class="scroll-mt-24">
<div class="flex items-center gap-3 mb-8">
<div class="w-12 h-12 fire-gradient rounded-xl flex items-center justify-center text-white font-bold text-lg">1</div>
<div>
<h2 class="text-2xl font-bold text-white">자동방화셔터란?</h2>
<p class="text-slate-400 text-sm">Fire Shutter Overview</p>
</div>
</div>
<div class="card-glass rounded-2xl p-8 glow-blue">
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
<span class="text-2xl">🏢</span> 정의 및 역할
</h3>
<p class="text-slate-300 leading-relaxed mb-4">
자동방화셔터는 <strong class="text-orange-400">방화구획</strong>의 용도로 화재 시 연기 및 열을 감지하여 자동 폐쇄되는 설비입니다.
</p>
<p class="text-slate-400 leading-relaxed">
공항, 체육관, 대형마트 등 넓은 공간에서 내화구조 벽을 설치하기 어려운 경우에 방화구획을 형성하는 핵심 장치입니다.
</p>
</div>
<div>
<h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
<span class="text-2xl">⚖️</span> 법적 근거
</h3>
<ul class="space-y-3 text-slate-300">
<li class="flex items-start gap-3">
<span class="text-orange-400 mt-1">▸</span>
<span><strong class="text-white">건축법 시행령 제46조</strong> - 방화구획 설치 의무</span>
</li>
<li class="flex items-start gap-3">
<span class="text-orange-400 mt-1">▸</span>
<span><strong class="text-white">국토부고시 제2021-1009호</strong> - 방화문 및 자동방화셔터의 인정 및 관리기준</span>
</li>
<li class="flex items-start gap-3">
<span class="text-orange-400 mt-1">▸</span>
<span><strong class="text-white">KS F 4510</strong> - 중량셔터 성능 기준</span>
</li>
</ul>
</div>
</div>
<!-- Key Change Alert -->
<div class="mt-8 bg-red-500/10 border border-red-500/30 rounded-xl p-6">
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-red-500/20 rounded-full flex items-center justify-center flex-shrink-0">
<span class="text-2xl">⚠️</span>
</div>
<div>
<h4 class="font-bold text-red-400 text-lg mb-2">2021년 핵심 변화: 일체형 방화셔터 사용 금지</h4>
<p class="text-slate-300 leading-relaxed">
셔터 일부에 피난 출입구가 설치된 <strong class="text-white">일체형 방화셔터</strong>는 피난로 인지 지연 및 처짐으로 인한 비상문 개폐 불량 문제로 <strong class="text-red-400">설치가 금지</strong>되었습니다.
반드시 <strong class="text-white">분리형(60분 방화문 3m 이내 별도 설치)</strong>으로 설계해야 합니다.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Section 2: Types of Fire Shutters -->
<section id="section-types" class="scroll-mt-24">
<div class="flex items-center gap-3 mb-8">
<div class="w-12 h-12 fire-gradient rounded-xl flex items-center justify-center text-white font-bold text-lg">2</div>
<div>
<h2 class="text-2xl font-bold text-white">방화셔터의 종류</h2>
<p class="text-slate-400 text-sm">Types of Fire Shutters</p>
</div>
</div>
<!-- Type Tabs -->
<div class="flex gap-2 mb-6 overflow-x-auto pb-2">
<button id="tab-steel" onclick="showShutterType('steel')" class="tab-active px-6 py-3 rounded-xl font-semibold whitespace-nowrap transition">
철재 방화셔터
</button>
<button id="tab-screen" onclick="showShutterType('screen')" class="bg-slate-700 text-slate-300 px-6 py-3 rounded-xl font-semibold whitespace-nowrap hover:bg-slate-600 transition">
스크린 방화셔터
</button>
<button id="tab-compare" onclick="showShutterType('compare')" class="bg-slate-700 text-slate-300 px-6 py-3 rounded-xl font-semibold whitespace-nowrap hover:bg-slate-600 transition">
비교분석
</button>
</div>
<!-- Steel Shutter Content -->
<div id="content-steel" class="card-glass rounded-2xl p-8 animate-slide-up">
<div class="flex items-start gap-4 mb-6">
<div class="w-16 h-16 bg-slate-600 rounded-xl flex items-center justify-center text-3xl">🔩</div>
<div>
<h3 class="text-2xl font-bold text-white mb-1">철재 방화셔터 (Steel Fire Shutter)</h3>
<p class="text-slate-400">강판 슬랫으로 제작된 전통적인 방화셔터</p>
</div>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-slate-800/50 rounded-xl p-6">
<h4 class="font-bold text-orange-400 mb-4">구조 및 재질</h4>
<ul class="space-y-2 text-slate-300">
<li class="flex items-center gap-2"><span class="text-green-400">✓</span> 1.55T 전기도금 아연강판</li>
<li class="flex items-center gap-2"><span class="text-green-400">✓</span> 72mm 슬랫 포밍 구조</li>
<li class="flex items-center gap-2"><span class="text-green-400">✓</span> 스틸 가이드레일</li>
<li class="flex items-center gap-2"><span class="text-green-400">✓</span> 전동/수동 개폐 장치</li>
</ul>
</div>
<div class="bg-slate-800/50 rounded-xl p-6">
<h4 class="font-bold text-blue-400 mb-4">적용 환경</h4>
<ul class="space-y-2 text-slate-300">
<li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 외부와 접촉된 방화구획</li>
<li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 지하주차장 램프</li>
<li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 가연성 물질 근접 구역</li>
<li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 바람 영향을 받는 구역</li>
</ul>
</div>
</div>
</div>
<!-- Screen Shutter Content -->
<div id="content-screen" class="card-glass rounded-2xl p-8 hidden animate-slide-up">
<div class="flex items-start gap-4 mb-6">
<div class="w-16 h-16 bg-slate-600 rounded-xl flex items-center justify-center text-3xl">🧵</div>
<div>
<h3 class="text-2xl font-bold text-white mb-1">스크린 방화셔터 (Screen Fire Shutter)</h3>
<p class="text-slate-400">고순도 실리카 원단을 사용한 경량 방화셔터</p>
</div>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-slate-800/50 rounded-xl p-6">
<h4 class="font-bold text-orange-400 mb-4">구조 및 재질</h4>
<ul class="space-y-2 text-slate-300">
<li class="flex items-center gap-2"><span class="text-green-400">✓</span> 98% 이상 고순도 실리카 원단</li>
<li class="flex items-center gap-2"><span class="text-green-400">✓</span> 유리섬유 + 스테인레스 와이어</li>
<li class="flex items-center gap-2"><span class="text-green-400">✓</span> 경량 구조 (철재 대비 1/3)</li>
<li class="flex items-center gap-2"><span class="text-green-400">✓</span> 투명/반투명 선택 가능</li>
</ul>
</div>
<div class="bg-slate-800/50 rounded-xl p-6">
<h4 class="font-bold text-blue-400 mb-4">장점</h4>
<ul class="space-y-2 text-slate-300">
<li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 화재 상황 육안 확인 가능</li>
<li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 폐쇄감 감소로 패닉 방지</li>
<li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 낙하 시 부상 위험 감소</li>
<li class="flex items-center gap-2"><span class="text-blue-400">▸</span> 긴급 시 찢고 탈출 가능</li>
</ul>
</div>
</div>
<div class="mt-6 bg-yellow-500/10 border border-yellow-500/30 rounded-xl p-4">
<p class="text-yellow-300 text-sm">
<strong>💡 설치 제한:</strong> 바람의 영향을 받지 않는 <strong>실내 방화구획</strong>에만 설치 가능합니다.
</p>
</div>
</div>
<!-- Comparison Content -->
<div id="content-compare" class="card-glass rounded-2xl p-8 hidden animate-slide-up">
<h3 class="text-xl font-bold text-white mb-6 text-center">철재 vs 스크린 방화셔터 비교</h3>
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead>
<tr class="border-b border-slate-600">
<th class="py-4 px-4 text-slate-400 font-medium">비교 항목</th>
<th class="py-4 px-4 text-orange-400 font-bold">철재 방화셔터</th>
<th class="py-4 px-4 text-blue-400 font-bold">스크린 방화셔터</th>
</tr>
</thead>
<tbody class="text-slate-300">
<tr class="border-b border-slate-700/50">
<td class="py-4 px-4 text-slate-400">내화성능</td>
<td class="py-4 px-4">비차열 1시간 이상</td>
<td class="py-4 px-4">비차열 1시간 이상</td>
</tr>
<tr class="border-b border-slate-700/50">
<td class="py-4 px-4 text-slate-400">차연성능</td>
<td class="py-4 px-4">우수</td>
<td class="py-4 px-4">우수</td>
</tr>
<tr class="border-b border-slate-700/50">
<td class="py-4 px-4 text-slate-400">중량</td>
<td class="py-4 px-4 text-yellow-400">무거움</td>
<td class="py-4 px-4 text-green-400">경량 (1/3 수준)</td>
</tr>
<tr class="border-b border-slate-700/50">
<td class="py-4 px-4 text-slate-400">시야 확보</td>
<td class="py-4 px-4 text-red-400">불가능</td>
<td class="py-4 px-4 text-green-400">가능 (반투명)</td>
</tr>
<tr class="border-b border-slate-700/50">
<td class="py-4 px-4 text-slate-400">외부 설치</td>
<td class="py-4 px-4 text-green-400">가능</td>
<td class="py-4 px-4 text-red-400">불가 (실내만)</td>
</tr>
<tr class="border-b border-slate-700/50">
<td class="py-4 px-4 text-slate-400">비용</td>
<td class="py-4 px-4">상대적 고가</td>
<td class="py-4 px-4">상대적 저렴</td>
</tr>
<tr>
<td class="py-4 px-4 text-slate-400">긴급 탈출</td>
<td class="py-4 px-4">별도 방화문 필요</td>
<td class="py-4 px-4">찢고 탈출 가능</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Section 3: Performance Specifications -->
<section id="section-specs" class="scroll-mt-24">
<div class="flex items-center gap-3 mb-8">
<div class="w-12 h-12 fire-gradient rounded-xl flex items-center justify-center text-white font-bold text-lg">3</div>
<div>
<h2 class="text-2xl font-bold text-white">성능 기준</h2>
<p class="text-slate-400 text-sm">Performance Standards</p>
</div>
</div>
<div class="spec-grid">
<!-- 내화성능 -->
<div class="card-glass rounded-2xl p-6 card-hover transition-all duration-300">
<div class="w-14 h-14 bg-red-500/20 rounded-xl flex items-center justify-center mb-4">
<span class="text-3xl">🔥</span>
</div>
<h3 class="text-lg font-bold text-white mb-2">내화성능</h3>
<p class="text-slate-400 text-sm mb-4">Fire Resistance</p>
<div class="bg-slate-800/50 rounded-lg p-4">
<p class="text-2xl font-black text-orange-400 mb-2">비차열 1시간 이상</p>
<p class="text-slate-300 text-sm">KS F 2268-1에 따른 내화시험 기준</p>
</div>
<p class="text-slate-400 text-sm mt-4 leading-relaxed">
화재 시 가열면의 반대쪽으로 화염이 관통하지 않는 성능
</p>
</div>
<!-- 차연성능 -->
<div class="card-glass rounded-2xl p-6 card-hover transition-all duration-300">
<div class="w-14 h-14 bg-gray-500/20 rounded-xl flex items-center justify-center mb-4">
<span class="text-3xl">💨</span>
</div>
<h3 class="text-lg font-bold text-white mb-2">차연성능</h3>
<p class="text-slate-400 text-sm mb-4">Smoke Leakage</p>
<div class="bg-slate-800/50 rounded-lg p-4">
<p class="text-2xl font-black text-blue-400 mb-2">KS F 4510 기준</p>
<p class="text-slate-300 text-sm">중량셔터 차연성능 규정 충족</p>
</div>
<p class="text-slate-400 text-sm mt-4 leading-relaxed">
연기의 누설을 차단하여 피난 시간 확보
</p>
</div>
<!-- 개폐성능 -->
<div class="card-glass rounded-2xl p-6 card-hover transition-all duration-300">
<div class="w-14 h-14 bg-green-500/20 rounded-xl flex items-center justify-center mb-4">
<span class="text-3xl">⚙️</span>
</div>
<h3 class="text-lg font-bold text-white mb-2">개폐성능</h3>
<p class="text-slate-400 text-sm mb-4">Operation</p>
<div class="bg-slate-800/50 rounded-lg p-4">
<p class="text-2xl font-black text-green-400 mb-2">전동 + 수동</p>
<p class="text-slate-300 text-sm">KS F 4510 개폐성능 규정 충족</p>
</div>
<p class="text-slate-400 text-sm mt-4 leading-relaxed">
정전 시에도 수동으로 개폐 가능해야 함
</p>
</div>
<!-- 감지 연동 -->
<div class="card-glass rounded-2xl p-6 card-hover transition-all duration-300">
<div class="w-14 h-14 bg-purple-500/20 rounded-xl flex items-center justify-center mb-4">
<span class="text-3xl">📡</span>
</div>
<h3 class="text-lg font-bold text-white mb-2">감지기 연동</h3>
<p class="text-slate-400 text-sm mb-4">Detector Integration</p>
<div class="bg-slate-800/50 rounded-lg p-4 space-y-2">
<div class="flex justify-between items-center">
<span class="text-slate-300">연기/불꽃 감지</span>
<span class="text-yellow-400 font-bold">일부 폐쇄</span>
</div>
<div class="flex justify-between items-center">
<span class="text-slate-300">열 감지</span>
<span class="text-red-400 font-bold">완전 폐쇄</span>
</div>
</div>
<p class="text-slate-400 text-sm mt-4 leading-relaxed">
2단계 폐쇄 시스템으로 피난 시간 확보
</p>
</div>
</div>
<!-- Validity Period Chart -->
<div class="card-glass rounded-2xl p-8 mt-8">
<h3 class="text-xl font-bold text-white mb-6 text-center">품질인정서 유효기간</h3>
<div class="chart-container">
<canvas id="validityChart"></canvas>
</div>
<p class="text-slate-400 text-sm text-center mt-4">
자동방화셔터는 <strong class="text-orange-400">5년</strong> 유효기간이 적용되며, 만료 전 갱신 심사 필요
</p>
</div>
</section>
<!-- Section 4: Recognition Process -->
<section id="section-process" class="scroll-mt-24">
<div class="flex items-center gap-3 mb-8">
<div class="w-12 h-12 fire-gradient rounded-xl flex items-center justify-center text-white font-bold text-lg">4</div>
<div>
<h2 class="text-2xl font-bold text-white">품질인정 절차</h2>
<p class="text-slate-400 text-sm">Recognition Process</p>
</div>
</div>
<div class="card-glass rounded-2xl p-8">
<div class="flex items-center gap-2 mb-8">
<div class="w-8 h-8 bg-blue-500/20 rounded-lg flex items-center justify-center">
<span>🏛️</span>
</div>
<span class="text-slate-300">운영 기관: <strong class="text-white">한국건설기술연구원(KICT)</strong></span>
</div>
<div class="relative">
<!-- Process Steps -->
<div class="space-y-6">
<!-- Step 1 -->
<div id="process-step-1" class="relative pl-16 cursor-pointer group" onclick="showProcessDetail(1)">
<div class="absolute left-0 top-0 w-12 h-12 bg-orange-500 rounded-xl flex items-center justify-center text-white font-bold text-lg shadow-lg group-hover:scale-110 transition">1</div>
<div class="absolute left-6 top-14 bottom-0 w-0.5 bg-gradient-to-b from-orange-500 to-blue-500"></div>
<div class="bg-slate-800/50 rounded-xl p-6 border-2 border-orange-500/50 group-hover:border-orange-500 transition">
<h4 class="text-lg font-bold text-white mb-2">성능 시험 신청</h4>
<p class="text-slate-400 text-sm hidden md:block">KOLAS 공인시험기관에서 내화·차연·개폐성능 시험</p>
</div>
</div>
<!-- Step 2 -->
<div id="process-step-2" class="relative pl-16 cursor-pointer group" onclick="showProcessDetail(2)">
<div class="absolute left-0 top-0 w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center text-white font-bold text-lg shadow-lg group-hover:scale-110 transition">2</div>
<div class="absolute left-6 top-14 bottom-0 w-0.5 bg-gradient-to-b from-blue-500 to-green-500"></div>
<div class="bg-slate-800/50 rounded-xl p-6 border-2 border-slate-600 group-hover:border-blue-500 transition">
<h4 class="text-lg font-bold text-white mb-2">공장 심사</h4>
<p class="text-slate-400 text-sm hidden md:block">KICT 전문가의 제조 공장 품질관리 시스템 현장 심사</p>
</div>
</div>
<!-- Step 3 -->
<div id="process-step-3" class="relative pl-16 cursor-pointer group" onclick="showProcessDetail(3)">
<div class="absolute left-0 top-0 w-12 h-12 bg-green-500 rounded-xl flex items-center justify-center text-white font-bold text-lg shadow-lg group-hover:scale-110 transition">3</div>
<div class="absolute left-6 top-14 bottom-0 w-0.5 bg-gradient-to-b from-green-500 to-purple-500"></div>
<div class="bg-slate-800/50 rounded-xl p-6 border-2 border-slate-600 group-hover:border-green-500 transition">
<h4 class="text-lg font-bold text-white mb-2">품질인정서 발급</h4>
<p class="text-slate-400 text-sm hidden md:block">성능시험 + 공장심사 합격 시 KICT 원장 명의 인정서 발급</p>
</div>
</div>
<!-- Step 4 -->
<div id="process-step-4" class="relative pl-16 cursor-pointer group" onclick="showProcessDetail(4)">
<div class="absolute left-0 top-0 w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center text-white font-bold text-lg shadow-lg group-hover:scale-110 transition">4</div>
<div class="bg-slate-800/50 rounded-xl p-6 border-2 border-slate-600 group-hover:border-purple-500 transition">
<h4 class="text-lg font-bold text-white mb-2">사후 관리</h4>
<p class="text-slate-400 text-sm hidden md:block">매년 정기/불시 점검, 품질 유지 여부 감시 (위반 시 인정 취소)</p>
</div>
</div>
</div>
</div>
<!-- Process Detail Modal -->
<div id="process-detail" class="mt-8 bg-slate-700/50 rounded-xl p-6 hidden animate-slide-up">
<div id="detail-content"></div>
</div>
<!-- Timeline Note -->
<div class="mt-8 flex items-center gap-3 bg-blue-500/10 border border-blue-500/30 rounded-xl p-4">
<span class="text-2xl">⏱️</span>
<p class="text-slate-300 text-sm">
<strong class="text-blue-400">예상 소요기간:</strong> 성능시험부터 인정서 발급까지 통상 <strong class="text-white">3개월 이상</strong> 소요
</p>
</div>
</div>
</section>
<!-- Section 5: Installation Standards -->
<section id="section-install" class="scroll-mt-24">
<div class="flex items-center gap-3 mb-8">
<div class="w-12 h-12 fire-gradient rounded-xl flex items-center justify-center text-white font-bold text-lg">5</div>
<div>
<h2 class="text-2xl font-bold text-white">설치 기준</h2>
<p class="text-slate-400 text-sm">Installation Standards</p>
</div>
</div>
<div class="grid md:grid-cols-2 gap-6">
<!-- 필수 요건 -->
<div class="card-glass rounded-2xl p-6">
<h3 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
<span class="text-green-400">✓</span> 필수 설치 요건
</h3>
<ul class="space-y-4">
<li class="flex items-start gap-3 bg-slate-800/50 rounded-lg p-4">
<span class="text-orange-400 font-bold">01</span>
<div>
<p class="text-white font-medium">방화문 인접 설치</p>
<p class="text-slate-400 text-sm">60분+ 또는 60분 방화문으로부터 <strong class="text-orange-400">3m 이내</strong> 별도 설치</p>
</div>
</li>
<li class="flex items-start gap-3 bg-slate-800/50 rounded-lg p-4">
<span class="text-orange-400 font-bold">02</span>
<div>
<p class="text-white font-medium">감지기 설치</p>
<p class="text-slate-400 text-sm">불꽃감지기 또는 연기감지기 + 열감지기 <strong class="text-orange-400">동시 설치</strong></p>
</div>
</li>
<li class="flex items-start gap-3 bg-slate-800/50 rounded-lg p-4">
<span class="text-orange-400 font-bold">03</span>
<div>
<p class="text-white font-medium">2단계 폐쇄 구조</p>
<p class="text-slate-400 text-sm">연기감지 → 일부폐쇄 / 열감지 → <strong class="text-orange-400">완전폐쇄</strong></p>
</div>
</li>
<li class="flex items-start gap-3 bg-slate-800/50 rounded-lg p-4">
<span class="text-orange-400 font-bold">04</span>
<div>
<p class="text-white font-medium">상부 밀착</p>
<p class="text-slate-400 text-sm">셔터 상부는 <strong class="text-orange-400">상층 바닥에 직접 닿도록</strong> 설치</p>
</div>
</li>
</ul>
</div>
<!-- 금지 사항 -->
<div class="card-glass rounded-2xl p-6">
<h3 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
<span class="text-red-400">✕</span> 금지 사항
</h3>
<ul class="space-y-4">
<li class="flex items-start gap-3 bg-red-500/10 border border-red-500/30 rounded-lg p-4">
<span class="text-red-400 font-bold text-xl">⛔</span>
<div>
<p class="text-white font-medium">일체형 방화셔터 설치 금지</p>
<p class="text-slate-400 text-sm">셔터 일부에 피난 출입구가 설치된 구조는 <strong class="text-red-400">2020년부터 금지</strong></p>
</div>
</li>
<li class="flex items-start gap-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg p-4">
<span class="text-yellow-400 font-bold text-xl">⚠️</span>
<div>
<p class="text-white font-medium">틈새 방치 금지</p>
<p class="text-slate-400 text-sm">바닥과의 틈새는 연기/열 이동통로가 되지 않도록 <strong class="text-yellow-400">방화구획 수준</strong>으로 처리</p>
</div>
</li>
<li class="flex items-start gap-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg p-4">
<span class="text-yellow-400 font-bold text-xl">⚠️</span>
<div>
<p class="text-white font-medium">스크린 셔터 외부 설치 금지</p>
<p class="text-slate-400 text-sm">바람의 영향을 받는 <strong class="text-yellow-400">외부 구역</strong>에는 스크린 방화셔터 설치 불가</p>
</div>
</li>
</ul>
</div>
</div>
<!-- 구성요소 다이어그램 -->
<div class="card-glass rounded-2xl p-8 mt-6">
<h3 class="text-lg font-bold text-white mb-6 text-center">자동방화셔터 구성요소</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="text-center p-4 bg-slate-800/50 rounded-xl">
<div class="text-3xl mb-2">📦</div>
<p class="text-white font-medium text-sm">셔터박스</p>
<p class="text-slate-500 text-xs">Shutter Box</p>
</div>
<div class="text-center p-4 bg-slate-800/50 rounded-xl">
<div class="text-3xl mb-2">🎚️</div>
<p class="text-white font-medium text-sm">가이드레일</p>
<p class="text-slate-500 text-xs">Guide Rail</p>
</div>
<div class="text-center p-4 bg-slate-800/50 rounded-xl">
<div class="text-3xl mb-2">📏</div>
<p class="text-white font-medium text-sm">슬랫/커튼</p>
<p class="text-slate-500 text-xs">Slat/Curtain</p>
</div>
<div class="text-center p-4 bg-slate-800/50 rounded-xl">
<div class="text-3xl mb-2">⚡</div>
<p class="text-white font-medium text-sm">개폐기</p>
<p class="text-slate-500 text-xs">Operator</p>
</div>
<div class="text-center p-4 bg-slate-800/50 rounded-xl">
<div class="text-3xl mb-2">🔘</div>
<p class="text-white font-medium text-sm">제어반</p>
<p class="text-slate-500 text-xs">Control Panel</p>
</div>
<div class="text-center p-4 bg-slate-800/50 rounded-xl">
<div class="text-3xl mb-2">📡</div>
<p class="text-white font-medium text-sm">연기감지기</p>
<p class="text-slate-500 text-xs">Smoke Detector</p>
</div>
<div class="text-center p-4 bg-slate-800/50 rounded-xl">
<div class="text-3xl mb-2">🌡️</div>
<p class="text-white font-medium text-sm">열감지기</p>
<p class="text-slate-500 text-xs">Heat Detector</p>
</div>
<div class="text-center p-4 bg-slate-800/50 rounded-xl">
<div class="text-3xl mb-2">🚪</div>
<p class="text-white font-medium text-sm">연동 방화문</p>
<p class="text-slate-500 text-xs">Fire Door</p>
</div>
</div>
</div>
</section>
<!-- Section 6: Field Checklist -->
<section id="section-check" class="scroll-mt-24 mb-16">
<div class="flex items-center gap-3 mb-8">
<div class="w-12 h-12 fire-gradient rounded-xl flex items-center justify-center text-white font-bold text-lg">6</div>
<div>
<h2 class="text-2xl font-bold text-white">현장 실무 체크리스트</h2>
<p class="text-slate-400 text-sm">Field Checklist</p>
</div>
</div>
<div class="grid md:grid-cols-2 gap-6">
<!-- 서류 확인 -->
<div class="card-glass rounded-2xl p-6">
<div class="flex justify-between items-start mb-4">
<div class="bg-orange-500/20 text-orange-400 px-3 py-1 rounded-lg text-xs font-bold">필수 서류</div>
<input type="checkbox" id="check1" class="w-6 h-6 accent-orange-500 rounded cursor-pointer" onchange="updateChecklistStatus()">
</div>
<h3 class="text-lg font-bold text-white mb-2">품질인정서</h3>
<p class="text-slate-400 text-sm mb-4">KICT 원장 명의 발급 인정서 원본/사본</p>
<div class="bg-slate-800/50 rounded-lg p-4 text-sm text-slate-300 space-y-2">
<p>✓ 유효기간 확인 (5년)</p>
<p>✓ 제조 공장 주소 일치 여부</p>
<p>✓ 인정 규격과 납품 제품 일치 여부</p>
</div>
</div>
<div class="card-glass rounded-2xl p-6">
<div class="flex justify-between items-start mb-4">
<div class="bg-orange-500/20 text-orange-400 px-3 py-1 rounded-lg text-xs font-bold">필수 서류</div>
<input type="checkbox" id="check2" class="w-6 h-6 accent-orange-500 rounded cursor-pointer" onchange="updateChecklistStatus()">
</div>
<h3 class="text-lg font-bold text-white mb-2">품질관리서</h3>
<p class="text-slate-400 text-sm mb-4">제조사 → 감리자 제출 자체 보증서</p>
<div class="bg-slate-800/50 rounded-lg p-4 text-sm text-slate-300 space-y-2">
<p>✓ "인정 내용과 동일 생산" 문구</p>
<p>✓ 제조일자 및 LOT 번호</p>
<p>✓ 제조사 직인/서명</p>
</div>
</div>
<div class="card-glass rounded-2xl p-6">
<div class="flex justify-between items-start mb-4">
<div class="bg-blue-500/20 text-blue-400 px-3 py-1 rounded-lg text-xs font-bold">현장 확인</div>
<input type="checkbox" id="check3" class="w-6 h-6 accent-blue-500 rounded cursor-pointer" onchange="updateChecklistStatus()">
</div>
<h3 class="text-lg font-bold text-white mb-2">설치 상태 점검</h3>
<p class="text-slate-400 text-sm mb-4">현장 설치 적합성 육안 확인</p>
<div class="bg-slate-800/50 rounded-lg p-4 text-sm text-slate-300 space-y-2">
<p>✓ 방화문 3m 이내 설치 여부</p>
<p>✓ 상부 바닥 밀착 여부</p>
<p>✓ 가이드레일 내화벽체 접촉 여부</p>
</div>
</div>
<div class="card-glass rounded-2xl p-6">
<div class="flex justify-between items-start mb-4">
<div class="bg-blue-500/20 text-blue-400 px-3 py-1 rounded-lg text-xs font-bold">현장 확인</div>
<input type="checkbox" id="check4" class="w-6 h-6 accent-blue-500 rounded cursor-pointer" onchange="updateChecklistStatus()">
</div>
<h3 class="text-lg font-bold text-white mb-2">작동 시험</h3>
<p class="text-slate-400 text-sm mb-4">감지기 연동 및 폐쇄 동작 확인</p>
<div class="bg-slate-800/50 rounded-lg p-4 text-sm text-slate-300 space-y-2">
<p>✓ 연기감지 → 일부폐쇄 동작</p>
<p>✓ 열감지 → 완전폐쇄 동작</p>
<p>✓ 수동 개폐 정상 작동</p>
</div>
</div>
</div>
<!-- Status Box -->
<div id="status-box" class="mt-6 p-6 card-glass rounded-xl text-center transition-all duration-500">
<span id="status-text" class="font-bold text-slate-400 text-lg">위 항목들을 모두 확인해주세요.</span>
<div id="status-progress" class="mt-4 h-2 bg-slate-700 rounded-full overflow-hidden">
<div id="progress-bar" class="h-full bg-gradient-to-r from-orange-500 to-red-500 transition-all duration-500" style="width: 0%"></div>
</div>
</div>
<!-- Online Verification -->
<div class="mt-8 card-glass rounded-2xl p-6 flex flex-col md:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-4">
<div class="w-14 h-14 bg-blue-500/20 rounded-xl flex items-center justify-center text-2xl">🖥️</div>
<div>
<h4 class="font-bold text-white text-lg">온라인 진위 확인</h4>
<p class="text-slate-400 text-sm">KICT 홈페이지에서 인정 취소/정지 여부 실시간 조회</p>
</div>
</div>
<a href="https://www.kict.re.kr" target="_blank" class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-3 px-6 rounded-xl transition shadow-lg">
KICT 현황 조회 →
</a>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-slate-900 border-t border-slate-800 py-10">
<div class="max-w-5xl mx-auto px-4 text-center">
<div class="flex items-center justify-center gap-3 mb-4">
<div class="w-10 h-10 fire-gradient rounded-lg flex items-center justify-center">
<span class="text-xl">🔥</span>
</div>
<span class="font-bold text-lg text-white">자동방화셔터 품질인정제도 가이드</span>
</div>
<p class="text-slate-500 text-sm mb-2">참고 법령: 방화문 및 자동방화셔터의 인정 및 관리기준 (국토교통부고시 제2021-1009호)</p>
<p class="text-slate-600 text-xs">본 페이지는 교육 및 참고 목적으로 제작되었습니다. 정확한 법적 해석은 관련 기관에 문의하세요.</p>
<p class="text-slate-700 text-xs mt-4">© 2025 Fire Shutter Quality Recognition Guide</p>
</div>
</footer>
<!-- JavaScript -->
<script>
// Mobile Menu Toggle
function toggleMobileMenu() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
}
// Smooth Scroll
function scrollToSection(id) {
document.getElementById(id).scrollIntoView({ behavior: 'smooth' });
document.getElementById('mobile-menu').classList.add('hidden');
}
// Shutter Type Tabs
function showShutterType(type) {
const types = ['steel', 'screen', 'compare'];
types.forEach(t => {
document.getElementById(`tab-${t}`).classList.remove('tab-active');
document.getElementById(`tab-${t}`).classList.add('bg-slate-700', 'text-slate-300');
document.getElementById(`content-${t}`).classList.add('hidden');
});
document.getElementById(`tab-${type}`).classList.add('tab-active');
document.getElementById(`tab-${type}`).classList.remove('bg-slate-700', 'text-slate-300');
document.getElementById(`content-${type}`).classList.remove('hidden');
}
// Process Detail
const processDetails = {
1: {
title: '1단계: 성능 시험 신청',
icon: '🔬',
content: `
<ul class="space-y-3 text-slate-300">
<li><strong class="text-orange-400">시험기관:</strong> KOLAS 인정 공인시험기관 또는 ISO/IEC 17025 인정기관</li>
<li><strong class="text-orange-400">시험항목:</strong>
<ul class="ml-4 mt-2 space-y-1 text-slate-400">
<li>• 내화성능 (KS F 2268-1) - 비차열 1시간 이상</li>
<li>• 차연성능 (KS F 4510)</li>
<li>• 개폐성능 (KS F 4510)</li>
</ul>
</li>
<li><strong class="text-orange-400">주의:</strong> 시험체 양면 각 1회씩 시험 실시</li>
</ul>
`
},
2: {
title: '2단계: 공장 심사',
icon: '🏭',
content: `
<ul class="space-y-3 text-slate-300">
<li><strong class="text-blue-400">심사기관:</strong> 한국건설기술연구원(KICT) 전문가</li>
<li><strong class="text-blue-400">심사내용:</strong>
<ul class="ml-4 mt-2 space-y-1 text-slate-400">
<li>• 원자재 입고 및 관리 체계</li>
<li>• 제조 공정 표준화 준수</li>
<li>• 품질검사 설비 및 인력</li>
<li>• 출하 전 검사 시스템</li>
</ul>
</li>
<li><strong class="text-blue-400">핵심:</strong> 품질인정제도의 가장 중요한 차별점!</li>
</ul>
`
},
3: {
title: '3단계: 품질인정서 발급',
icon: '📜',
content: `
<ul class="space-y-3 text-slate-300">
<li><strong class="text-green-400">발급조건:</strong> 성능시험 + 공장심사 모두 합격</li>
<li><strong class="text-green-400">발급기관:</strong> 한국건설기술연구원장 명의</li>
<li><strong class="text-green-400">유효기간:</strong> 5년 (갱신 심사 필요)</li>
<li><strong class="text-green-400">기재사항:</strong>
<ul class="ml-4 mt-2 space-y-1 text-slate-400">
<li>• 인정 규격 (크기, 성능등급)</li>
<li>• 제조 공장 정보</li>
<li>• 인정 조건 및 제한사항</li>
</ul>
</li>
</ul>
`
},
4: {
title: '4단계: 사후 관리',
icon: '🔍',
content: `
<ul class="space-y-3 text-slate-300">
<li><strong class="text-purple-400">정기점검:</strong> 매년 실시</li>
<li><strong class="text-purple-400">불시점검:</strong> 공장 또는 건설현장 무작위 점검</li>
<li><strong class="text-purple-400">점검내용:</strong>
<ul class="ml-4 mt-2 space-y-1 text-slate-400">
<li>• 인정 내용대로 생산 여부</li>
<li>• 품질관리 시스템 유지 상태</li>
<li>• 시공 현장 적합성</li>
</ul>
</li>
<li><strong class="text-red-400">제재:</strong> 위반 시 인정 취소 또는 정지 가능</li>
</ul>
`
}
};
function showProcessDetail(step) {
const detail = processDetails[step];
const container = document.getElementById('process-detail');
const content = document.getElementById('detail-content');
content.innerHTML = `
<div class="flex items-center gap-3 mb-4">
<span class="text-3xl">${detail.icon}</span>
<h4 class="text-lg font-bold text-white">${detail.title}</h4>
</div>
${detail.content}
`;
container.classList.remove('hidden');
}
// Checklist Status
function updateChecklistStatus() {
const checks = [
document.getElementById('check1').checked,
document.getElementById('check2').checked,
document.getElementById('check3').checked,
document.getElementById('check4').checked
];
const count = checks.filter(c => c).length;
const percent = (count / 4) * 100;
const box = document.getElementById('status-box');
const text = document.getElementById('status-text');
const bar = document.getElementById('progress-bar');
bar.style.width = percent + '%';
if (count === 4) {
box.classList.remove('card-glass');
box.classList.add('bg-green-500/20', 'border', 'border-green-500/50');
text.className = 'font-bold text-green-400 text-lg';
text.innerHTML = '✅ 모든 항목 확인 완료! 현장 반입 승인 가능';
} else if (count > 0) {
box.classList.remove('bg-green-500/20', 'border-green-500/50');
box.classList.add('card-glass');
text.className = 'font-bold text-orange-400 text-lg';
text.innerHTML = `⚠️ ${count}/4 항목 확인됨. 나머지 항목을 확인해주세요.`;
} else {
box.classList.remove('bg-green-500/20', 'border-green-500/50');
box.classList.add('card-glass');
text.className = 'font-bold text-slate-400 text-lg';
text.innerHTML = '위 항목들을 모두 확인해주세요.';
}
}
// Chart.js - Validity Period
document.addEventListener('DOMContentLoaded', function() {
const ctx = document.getElementById('validityChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['방화문', '자동방화셔터', '내화구조', '내화채움구조', '복합자재(패널)'],
datasets: [{
label: '유효기간 (년)',
data: [5, 5, 5, 5, 3],
backgroundColor: [
'rgba(234, 88, 12, 0.8)',
'rgba(234, 88, 12, 1)',
'rgba(234, 88, 12, 0.8)',
'rgba(234, 88, 12, 0.8)',
'rgba(245, 158, 11, 0.8)'
],
borderColor: [
'rgb(234, 88, 12)',
'rgb(234, 88, 12)',
'rgb(234, 88, 12)',
'rgb(234, 88, 12)',
'rgb(245, 158, 11)'
],
borderWidth: 2,
borderRadius: 8
}]
},
options: {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(15, 23, 42, 0.9)',
titleColor: '#fff',
bodyColor: '#94a3b8',
borderColor: 'rgba(234, 88, 12, 0.5)',
borderWidth: 1,
padding: 12,
callbacks: {
label: function(context) {
return `유효기간: ${context.raw}년`;
}
}
}
},
scales: {
x: {
beginAtZero: true,
max: 6,
grid: { color: 'rgba(71, 85, 105, 0.3)' },
ticks: { color: '#94a3b8' },
title: {
display: true,
text: '년 (Year)',
color: '#94a3b8'
}
},
y: {
grid: { display: false },
ticks: {
color: '#e2e8f0',
font: { weight: '500' }
}
}
}
}
});
});
</script>
</body>
</html>

425
policy/SAM_영업정책문서.html Normal file
View File

@@ -0,0 +1,425 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SAM Project - 영업 수당 지급 정책</title>
<style>
@page {
margin: 2cm;
size: A4;
}
body {
font-family: 'Malgun Gothic', '맑은 고딕', Arial, sans-serif;
font-size: 12pt;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: white;
}
h1 {
text-align: center;
color: #2c3e50;
font-size: 24pt;
margin-bottom: 30px;
border-bottom: 3px solid #3498db;
padding-bottom: 15px;
}
h2 {
color: #2c3e50;
font-size: 16pt;
margin-top: 30px;
margin-bottom: 15px;
border-left: 4px solid #3498db;
padding-left: 15px;
}
h3 {
color: #34495e;
font-size: 14pt;
margin-top: 20px;
margin-bottom: 10px;
}
h4 {
color: #34495e;
font-size: 13pt;
margin-top: 15px;
margin-bottom: 8px;
}
.document-header {
text-align: center;
margin-bottom: 40px;
padding: 20px;
background: #f8f9fa;
border: 1px solid #dee2e6;
}
.version-info {
font-size: 11pt;
color: #666;
margin-bottom: 10px;
}
.toc {
background: #f1f3f4;
padding: 20px;
margin: 30px 0;
border-left: 4px solid #3498db;
}
.toc h2 {
margin-top: 0;
border: none;
padding: 0;
}
.toc ul {
list-style-type: decimal;
margin-left: 20px;
}
.toc li {
margin-bottom: 5px;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 11pt;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #3498db;
color: white;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
.highlight {
background-color: #e3f2fd;
padding: 15px;
border: 1px solid #2196f3;
border-radius: 5px;
margin: 15px 0;
}
.warning {
background-color: #fff3e0;
padding: 15px;
border: 1px solid #ff9800;
border-radius: 5px;
margin: 15px 0;
}
.success {
background-color: #e8f5e8;
padding: 15px;
border: 1px solid #4caf50;
border-radius: 5px;
margin: 15px 0;
}
.workflow-step {
margin: 15px 0;
padding: 15px;
background: #f8f9fa;
border-left: 4px solid #28a745;
border-radius: 0 5px 5px 0;
}
.workflow-step h4 {
margin-top: 0;
color: #28a745;
}
.calculation-box {
background: #f0f8ff;
border: 2px solid #4169e1;
border-radius: 10px;
padding: 20px;
margin: 20px 0;
text-align: center;
}
.calculation-box strong {
color: #4169e1;
font-size: 14pt;
}
.emoji {
font-size: 16pt;
margin-right: 5px;
}
.footer {
margin-top: 50px;
padding: 20px;
border-top: 2px solid #dee2e6;
text-align: center;
color: #666;
font-size: 10pt;
}
@media print {
.no-print {
display: none;
}
body {
font-size: 11pt;
}
h1 {
font-size: 20pt;
}
h2 {
font-size: 14pt;
}
}
</style>
</head>
<body>
<div class="document-header">
<h1>SAM Project<br>영업 수당 지급 정책</h1>
<div class="version-info">
<strong>버전:</strong> 1.0 &nbsp;|&nbsp;
<strong>최종 업데이트:</strong> 2025년 1월 1일 &nbsp;|&nbsp;
<strong>기반 자료:</strong> 수당지급체계.md
</div>
</div>
<div class="toc">
<h2><span class="emoji">📋</span>목차</h2>
<ul>
<li>기본 원칙 및 대상</li>
<li>주요 상품 및 가격 안내</li>
<li>수당 지급 비율</li>
<li>계층 구조 및 수당 시뮬레이션</li>
<li>6단계 성공 프로세스</li>
<li>지급 일정 및 운영 정책</li>
<li>주요 Q&A</li>
</ul>
</div>
<h2>1. 기본 원칙 및 대상</h2>
<div class="highlight">
<h3><span class="emoji">🎯</span>가입비 중심 보상</h3>
<p>수당은 1회성 <strong>가입비</strong>에 대해서만 지급됩니다. 이는 고품질의 초기 인프라 구축 및 파트너의 적극적인 유치를 지원하기 위함입니다.</p>
</div>
<div class="highlight">
<h3><span class="emoji">📊</span>협업 중심 구조</h3>
<p>판매자와 관리자뿐만 아니라 기술 지원을 담당하는 메뉴제작 협업자에게도 적절한 보상을 제공하여 유기적인 서비스 제공이 가능하도록 돕습니다.</p>
</div>
<h2>2. 주요 상품 및 가격 안내</h2>
<h3><span class="emoji">📦</span>개별 모듈 (Modules)</h3>
<table>
<thead>
<tr>
<th>상품명</th>
<th>주요 기능 설명</th>
<th>가입비 (VAT 별도)</th>
<th>구독료 (월)</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>QR코드 관리</strong></td>
<td>설비/장비에 QR 부착하여 실시간 점검 및 이력 관리</td>
<td>1,020만원</td>
<td>5만원</td>
</tr>
<tr>
<td><strong>사진/출하 관리</strong></td>
<td>현장 상황 사진 기록 및 출하 시점 품질 증빙 자동화</td>
<td>1,920만원</td>
<td>10만원</td>
</tr>
<tr>
<td><strong>검사/토큰 적용</strong></td>
<td>공정별 검사 데이터 기록 및 전자 세금계산서 연동</td>
<td>1,020만원</td>
<td>5만원</td>
</tr>
<tr>
<td><strong>이카운트 연동</strong></td>
<td>ERP(이카운트) 데이터 동기화 및 거래처 원장 관리</td>
<td>1,920만원</td>
<td>10만원</td>
</tr>
</tbody>
</table>
<h3><span class="emoji">🎁</span>통합 패키지 (Packages)</h3>
<div class="highlight">
<h4>공사관리 패키지</h4>
<p><strong>설명:</strong> 건설 및 공사 현장 관리에 최적화된 올인원 솔루션</p>
<p><strong>가입비:</strong> 4,000만원 | <strong>구독료:</strong> 20만원/월</p>
</div>
<div class="highlight">
<h4>공정/정부지원사업</h4>
<p><strong>설명:</strong> 정부 사업 규격에 맞춘 공정 관리 및 투명한 이력 추적</p>
<p><strong>가입비:</strong> 8,000만원 | <strong>구독료:</strong> 40만원/월</p>
</div>
<h2>3. 수당 지급 비율</h2>
<table>
<thead>
<tr>
<th>구분</th>
<th>지급 비율</th>
<th>대상 및 정의</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>판매자 (Seller)</strong></td>
<td><strong style="color: #e74c3c; font-size: 14pt;">20%</strong></td>
<td>직접 영업 및 계약 성사 담당자</td>
</tr>
<tr>
<td><strong>관리자 (Manager)</strong></td>
<td><strong style="color: #9b59b6; font-size: 14pt;">5%</strong></td>
<td>하위 영업 파트너 관리 및 지원</td>
</tr>
<tr style="background-color: #fff3cd;">
<td><strong>메뉴제작 협업수당</strong></td>
<td><strong style="color: #f39c12;">별도</strong></td>
<td>운영팀에서 난이도별 별도 산정 (실비 보조)</td>
</tr>
</tbody>
<tfoot>
<tr style="background-color: #d4edda;">
<td colspan="2"><strong>수당 정산 기준</strong></td>
<td><strong>가입비 입금 확인 후 익월 지급</strong></td>
</tr>
</tfoot>
</table>
<h2>4. 계층 구조 및 수당 시뮬레이션</h2>
<div class="success">
<h3><span class="emoji">🏗️</span>계층 구조</h3>
<p style="text-align: center; font-family: monospace; font-size: 14pt;">
[판매자 20%] → [관리자 5%] → [메뉴제작 +α]<br>
&nbsp;&nbsp;&nbsp;&nbsp;↓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;↓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;↓<br>
&nbsp;&nbsp;영업권&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;관리권&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;기술지원
</p>
</div>
<h3><span class="emoji">💰</span>계산 예시 (총 가입비 1억원 기준)</h3>
<div class="calculation-box">
<h4>판매자 수당</h4>
<p>계산: ₩100,000,000 × 20% = <strong>₩20,000,000</strong></p>
</div>
<div class="calculation-box">
<h4>관리자 수당</h4>
<p>계산: ₩100,000,000 × 5% = <strong>₩5,000,000</strong></p>
</div>
<div class="warning">
<h4>메뉴제작 협업수당</h4>
<p><strong>운영팀 별도 산정 및 지급</strong></p>
</div>
<div class="success" style="text-align: center;">
<h3>총 가입비 수당: 25% + 메뉴제작비</h3>
</div>
<h2>5. 6단계 성공 프로세스</h2>
<p>단순한 판매를 넘어, 고객의 성공을 설계하는 표준 영업 프로세스입니다.</p>
<div class="workflow-step">
<h4><span class="emoji">1️⃣</span>사전 준비 (Prep)</h4>
<p>고객사 심층 분석 및 경쟁사 동향 파악. '비용 절감'과 '관리 효율' 중 핵심 공략 포인트 설정.</p>
</div>
<div class="workflow-step">
<h4><span class="emoji">2️⃣</span>접근 및 탐색 (Approach)</h4>
<p>Key-man 식별 및 컨택. 단순 소개가 아닌 '인사이트 공유'를 목적으로 미팅 기회 확보.</p>
</div>
<div class="workflow-step">
<h4><span class="emoji">3️⃣</span>제안 및 솔루션</h4>
<p>AI 교차 검증 전략(Antigravity/Claude Code)을 통한 압도적인 품질 및 비용 효율 제안.</p>
</div>
<div class="workflow-step">
<h4><span class="emoji">4️⃣</span>계약 체결 (Closing)</h4>
<p>가입비 확정 및 서비스 범위(SOW) 명시. 수당 산정의 기준이 되는 가입비 완료 유도.</p>
</div>
<div class="workflow-step">
<h4><span class="emoji">5️⃣</span>영업 이관 (Handover)</h4>
<p>영업팀에서 매니저 시나리오로의 완벽한 정보 전달. 리스크 요인 및 고객 특이사항 공유.</p>
</div>
<div class="workflow-step">
<h4><span class="emoji">6️⃣</span>테스트 및 안정화</h4>
<p>TestSprite MCP를 통한 자동화 검증으로 '버그 없는 배포'를 실현하여 고객 신뢰 확보.</p>
</div>
<h2>6. 지급 일정 및 운영 정책</h2>
<div class="highlight">
<h3><span class="emoji">📅</span>수당 지급 시점</h3>
<p>고객사의 가입비 입금이 완료된 날을 기준으로 수당이 확정되며, 익월 정해진 지급일에 일괄 지급됩니다.</p>
</div>
<div class="highlight">
<h3><span class="emoji">🏦</span>회사 운영 마진</h3>
<p>회사는 가입비의 약 <strong>70% ~ 75%</strong> 내외를 플랫폼 운영, 서버 유지보수, 마케팅 지원 등을 위한 인프라 비용으로 확보하여 지속 가능한 경영 토대를 구축합니다.</p>
</div>
<h2>7. 주요 Q&A</h2>
<div class="warning">
<h4>Q. 하위 파트너가 없는 경우는 어떻게 되나요?</h4>
<p>본인의 직접 판매에 대한 20% 수당만 지급됩니다. 관리자 및 교육자 수당은 하위 계층이 형성되었을 때만 발생합니다.</p>
</div>
<div class="warning">
<h4>Q. 계약이 취소되면 수당을 반환해야 하나요?</h4>
<p>이미 지급된 가입비 수당은 회수하지 않는 것을 원칙으로 하나, 부정 계약 등의 특수 상황 발생 시 별도 심의가 있을 수 있습니다.</p>
</div>
<div class="warning">
<h4>Q. 월 구독료에 대한 수당은 없나요?</h4>
<p>현재 SAM 수당 정책은 신규 파트너십 구축 및 인프라 기여도에 대한 가치를 높게 평가하여 <strong>가입비</strong>에만 수당을 집중하고 있습니다. 구독료는 서비스의 안정적 유지 및 고도화 비용으로 활용됩니다.</p>
</div>
<div class="footer">
<h3><span class="emoji">📞</span>문의사항</h3>
<p>본 문서는 SAM 프로젝트의 공식 영업 정책을 담고 있으며, 정책 변경 시 업데이트될 수 있습니다.</p>
<p><strong>© 2025 SAM Project Admin. All Rights Reserved.</strong></p>
<hr>
<p><em>본 문서는 투명하고 합리적인 3단계 보상 체계를 통해 파트너의 성장을 지원하기 위해 작성되었습니다.</em></p>
</div>
</body>
</html>

147
policy/SAM_영업정책문서.md Normal file
View File

@@ -0,0 +1,147 @@
# SAM Project - 영업 수당 지급 정책
**버전**: 1.0
**최종 업데이트**: 2025년 1월 1일
**기반 자료**: `C:\Users\light\sam\sales\salesmanagement\수당지급체계.md`
---
## 📋 목차
1. [기본 원칙 및 대상](#1-기본-원칙-및-대상)
2. [주요 상품 및 가격 안내](#2-주요-상품-및-가격-안내)
3. [수당 지급 비율](#3-수당-지급-비율)
4. [계층 구조 및 수당 시뮬레이션](#4-계층-구조-및-수당-시뮬레이션)
5. [6단계 성공 프로세스](#5-6단계-성공-프로세스)
6. [지급 일정 및 운영 정책](#6-지급-일정-및-운영-정책)
7. [주요 Q&A](#7-주요-qa)
---
## 1. 기본 원칙 및 대상
### 🎯 가입비 중심 보상
수당은 1회성 **가입비**에 대해서만 지급됩니다. 이는 고품질의 초기 인프라 구축 및 파트너의 적극적인 유치를 지원하기 위함입니다.
### 📊 협업 중심 구조
판매자와 관리자뿐만 아니라 기술 지원을 담당하는 메뉴제작 협업자에게도 적절한 보상을 제공하여 유기적인 서비스 제공이 가능하도록 돕습니다.
---
## 2. 주요 상품 및 가격 안내
### 📦 개별 모듈 (Modules)
| 상품명 | 주요 기능 설명 | 가입비 (VAT 별도) | 구독료 (월) |
|--------|----------------|-------------------|-------------|
| **QR코드 관리** | 설비/장비에 QR 부착하여 실시간 점검 및 이력 관리 | 1,020만원 | 5만원 |
| **사진/출하 관리** | 현장 상황 사진 기록 및 출하 시점 품질 증빙 자동화 | 1,920만원 | 10만원 |
| **검사/토큰 적용** | 공정별 검사 데이터 기록 및 전자 세금계산서 연동 | 1,020만원 | 5만원 |
| **이카운트 연동** | ERP(이카운트) 데이터 동기화 및 거래처 원장 관리 | 1,920만원 | 10만원 |
### 🎁 통합 패키지 (Packages)
#### 공사관리 패키지
- **설명**: 건설 및 공사 현장 관리에 최적화된 올인원 솔루션
- **가입비**: 4,000만원
- **구독료**: 20만원/월
#### 공정/정부지원사업
- **설명**: 정부 사업 규격에 맞춘 공정 관리 및 투명한 이력 추적
- **가입비**: 8,000만원
- **구독료**: 40만원/월
---
## 3. 수당 지급 비율
| 구분 | 지급 비율 | 대상 및 정의 |
|------|-----------|--------------|
| **판매자 (Seller)** | **20%** | 직접 영업 및 계약 성사 담당자 |
| **관리자 (Manager)** | **5%** | 하위 영업 파트너 관리 및 지원 |
| **메뉴제작 협업수당** | **별도** | 운영팀에서 난이도별 별도 산정 (실비 보조) |
**수당 정산 기준**: 가입비 입금 확인 후 익월 지급
---
## 4. 계층 구조 및 수당 시뮬레이션
### 🏗️ 계층 구조
```
[판매자 20%] → [관리자 5%] → [메뉴제작 +α]
↓ ↓ ↓
영업권 관리권 기술지원
```
### 💰 계산 예시 (총 가입비 1억원 기준)
#### 판매자 수당 (2,000만원)
- 계산: ₩100,000,000 × 20% = **₩20,000,000**
#### 관리자 수당 (2,000만원)
- 계산: ₩100,000,000 × 5% = **₩5,000,000**
#### 메뉴제작 협업수당
- **운영팀 별도 산정 및 지급**
**총 가입비 수당**: 25% + 메뉴제작비
---
## 5. 6단계 성공 프로세스
단순한 판매를 넘어, 고객의 성공을 설계하는 표준 영업 프로세스입니다.
### 1️⃣ 사전 준비 (Prep)
고객사 심층 분석 및 경쟁사 동향 파악. '비용 절감'과 '관리 효율' 중 핵심 공략 포인트 설정.
### 2️⃣ 접근 및 탐색 (Approach)
Key-man 식별 및 컨택. 단순 소개가 아닌 '인사이트 공유'를 목적으로 미팅 기회 확보.
### 3️⃣ 제안 및 솔루션
AI 교차 검증 전략(Antigravity/Claude Code)을 통한 압도적인 품질 및 비용 효율 제안.
### 4️⃣ 계약 체결 (Closing)
가입비 확정 및 서비스 범위(SOW) 명시. 수당 산정의 기준이 되는 가입비 완료 유도.
### 5️⃣ 영업 이관 (Handover)
영업팀에서 매니저 시나리오로의 완벽한 정보 전달. 리스크 요인 및 고객 특이사항 공유.
### 6️⃣ 테스트 및 안정화
TestSprite MCP를 통한 자동화 검증으로 '버그 없는 배포'를 실현하여 고객 신뢰 확보.
---
## 6. 지급 일정 및 운영 정책
### 📅 수당 지급 시점
고객사의 가입비 입금이 완료된 날을 기준으로 수당이 확정되며, 익월 정해진 지급일에 일괄 지급됩니다.
### 🏦 회사 운영 마진
회사는 가입비의 약 **70% ~ 75%** 내외를 플랫폼 운영, 서버 유지보수, 마케팅 지원 등을 위한 인프라 비용으로 확보하여 지속 가능한 경영 토대를 구축합니다.
---
## 7. 주요 Q&A
### Q. 하위 파트너가 없는 경우는 어떻게 되나요?
본인의 직접 판매에 대한 20% 수당만 지급됩니다. 관리자 및 교육자 수당은 하위 계층이 형성되었을 때만 발생합니다.
### Q. 계약이 취소되면 수당을 반환해야 하나요?
이미 지급된 가입비 수당은 회수하지 않는 것을 원칙으로 하나, 부정 계약 등의 특수 상황 발생 시 별도 심의가 있을 수 있습니다.
### Q. 월 구독료에 대한 수당은 없나요?
현재 SAM 수당 정책은 신규 파트너십 구축 및 인프라 기여도에 대한 가치를 높게 평가하여 **가입비**에만 수당을 집중하고 있습니다. 구독료는 서비스의 안정적 유지 및 고도화 비용으로 활용됩니다.
---
## 📞 문의사항
본 문서는 SAM 프로젝트의 공식 영업 정책을 담고 있으며, 정책 변경 시 업데이트될 수 있습니다.
**© 2025 SAM Project Admin. All Rights Reserved.**
---
*본 문서는 투명하고 합리적인 3단계 보상 체계를 통해 파트너의 성장을 지원하기 위해 작성되었습니다.*

91
policy/index.php
View File

@@ -349,11 +349,84 @@
</div>
</section>
<!-- Section 2: Commission Ratios -->
<!-- Section 2: Product & Pricing -->
<section class="section">
<div class="section-header">
<span class="section-tag">02. Commission Ratios</span>
<h2>수당 지급 비율</h2>
<span class="section-tag">02. Product & Pricing</span>
<h2>02. 주요 상품 및 가격 안내</h2>
<p>기본 기획된 SAM의 핵심 모듈 및 패키지 라인업입니다.</p>
</div>
<div class="glass-card animate-up">
<h3 style="margin-bottom: 1.5rem; color: var(--secondary);">개별 모듈 (Modules)</h3>
<div class="table-container">
<table>
<thead>
<tr>
<th>상품명</th>
<th>주요 기능 설명</th>
<th style="text-align: right;">가입비 (VAT 별도)</th>
<th style="text-align: right;">구독료 (월)</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>QR코드 관리</strong></td>
<td>설비/장비에 QR 부착하여 실시간 점검 및 이력 관리</td>
<td style="text-align: right;">1,020만원</td>
<td style="text-align: right;">5만원</td>
</tr>
<tr>
<td><strong>사진/출하 관리</strong></td>
<td>현장 상황 사진 기록 및 출하 시점 품질 증빙 자동화</td>
<td style="text-align: right;">1,920만원</td>
<td style="text-align: right;">10만원</td>
</tr>
<tr>
<td><strong>검사/토큰 적용</strong></td>
<td>공정별 검사 데이터 기록 및 전자 세금계산서 연동</td>
<td style="text-align: right;">1,020만원</td>
<td style="text-align: right;">5만원</td>
</tr>
<tr>
<td><strong>이카운트 연동</strong></td>
<td>ERP(이카운트) 데이터 동기화 및 거래처 원장 관리</td>
<td style="text-align: right;">1,920만원</td>
<td style="text-align: right;">10만원</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="glass-card animate-up" style="margin-top: 2rem;">
<h3 style="margin-bottom: 1.5rem; color: var(--secondary);">통합 패키지 (Packages)</h3>
<div class="policy-grid">
<div class="glass-card" style="padding: 1.5rem; border: 1px solid rgba(0, 242, 254, 0.2);">
<h4>공사관리 패키지</h4>
<p style="margin: 0.5rem 0; font-size: 0.9rem;">건설 및 공사 현장 관리에 최적화된 올인원 솔루션</p>
<div style="margin-top: 1rem; font-weight: 700;">
가입비: <span class="ratio">4,000만원</span><br>
구독료: <span style="color: var(--text-muted);">20만원/월</span>
</div>
</div>
<div class="glass-card" style="padding: 1.5rem; border: 1px solid rgba(123, 97, 255, 0.2);">
<h4>공정/정부지원사업</h4>
<p style="margin: 0.5rem 0; font-size: 0.9rem;">정부 사업 규격에 맞춘 공정 관리 및 투명한 이력 추적</p>
<div style="margin-top: 1rem; font-weight: 700;">
가입비: <span class="ratio">8,000만원</span><br>
구독료: <span style="color: var(--text-muted);">40만원/월</span>
</div>
</div>
</div>
</div>
</section>
<!-- Section 3: Commission Ratios -->
<section class="section">
<div class="section-header">
<span class="section-tag">03. Commission Ratios</span>
<h2>03. 수당 지급 비율</h2>
</div>
<div class="glass-card animate-up">
<div class="table-container">
@@ -396,8 +469,8 @@
<!-- Section 3: Hierarchy Visualization -->
<section class="section">
<div class="section-header">
<span class="section-tag">03. Hierarchy Details</span>
<h2>계층 구조 및 수당 시뮬레이션</h2>
<span class="section-tag">04. Hierarchy Details</span>
<h2>04. 계층 구조 및 수당 시뮬레이션</h2>
</div>
<div class="glass-card animate-up">
<p>영업 관리자의 수익은 자신의 활동뿐만 아니라 조직의 활성화에 따라 극대화됩니다.</p>
@@ -443,8 +516,8 @@
<!-- Section 4: Sales Success Workflow -->
<section class="section">
<div class="section-header">
<span class="section-tag">04. Sales Success Workflow</span>
<h2>6단계 성공 프로세스</h2>
<span class="section-tag">05. Sales Success Workflow</span>
<h2>05. 6단계 성공 프로세스</h2>
<p>단순한 판매를 넘어, 고객의 성공을 설계하는 표준 영업 프로세스입니다.</p>
</div>
<div class="workflow-grid">
@@ -484,8 +557,8 @@
<!-- Section 5: Schedule & Margin -->
<section class="section">
<div class="section-header">
<span class="section-tag">05. Schedule & Margin</span>
<h2>지급 일정 및 운영 정책</h2>
<span class="section-tag">06. Schedule & Margin</span>
<h2>06. 지급 일정 및 운영 정책</h2>
</div>
<div class="policy-grid">
<div class="glass-card animate-up">

33
salesmanagement/수당지급체계.md
View File

@@ -19,7 +19,32 @@
---
## 2. 수당 지급 비율
## 2. 주요 상품 및 가격 체계
### 2.1 개별 모듈 (Modules)
고객의 필요에 따라 특정 기능을 선택하여 도입할 수 있는 단위 상품입니다.
| 상품명 | 주요 기능 | 가입비 (Join Fee) | 구독료 (Monthly) |
| :--- | :--- | :---: | :---: |
| **QR코드 관리** | 설비관리 및 장비 점검 | 1,020만원 | 5만원 |
| **사진/출하 관리** | 현장 사진 및 출하 증빙 관리 | 1,920만원 | 10만원 |
| **검사/토큰 적용** | 공정 검사 및 전자계산서 연동 | 1,020만원 | 5만원 |
| **이카운트 연동** | ERP(이카운트) 및 거래처 대장 | 1,920만원 | 10만원 |
| **ISO/인정서류** | 인증 서류 관리 및 토큰 적용 | 1,020만원 | 5만원 |
| **재고 관리** | 적정 재고 표기 및 입출고 관리 | 1,920만원 | 10만원 |
| **제조/발주 관리** | 제작 지시 및 외주 발주 관리 | 1,920만원 | 10만원 |
### 2.2 패키지 상품 (Packages)
연관된 모듈을 통합하여 합리적인 가격으로 제공하는 솔루션 묶음입니다.
| 패키지명 | 구성 및 특징 | 가입비 (Join Fee) | 구독료 (Monthly) |
| :--- | :--- | :---: | :---: |
| **공사관리 패키지** | 건설 및 공사 현장 특화 모듈 통합 | 4,000만원 | 20만원 |
| **공정/정부지원사업** | 스마트공장 및 지원사업 최적화 솔루션 | 8,000만원 | 40만원 |
---
## 3. 수당 지급 비율
| 구분 | 지급 비율 | 설명 |
|------|-----------|------|
@@ -29,7 +54,7 @@
---
## 3. 계층 구조 및 역할
## 4. 계층 구조 및 역할
### 3.1 역할 상세
@@ -47,7 +72,7 @@
---
## 4. 수당 지급 프로세스
## 5. 수당 지급 프로세스
1. **계약 체결**: 고객사와 서비스 이용 계약 완료
2. **가입비 납부**: 고객사가 가입비 전액을 본사에 납부
@@ -56,7 +81,7 @@
---
## 5. 회사 마진 및 운영 정책
## 6. 회사 마진 및 운영 정책
### 5.1 마진 계산
- 회사 마진 = 가입비 - (판매자 수당 + 관리자 수당 + 메뉴제작 협업수당)