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

refactor: [structure] sam/ 하위 문서를 docs 루트로 재배치

Browse Source 
- sam/docs/ 하위 62개 신규 파일을 루트로 이동 (contracts, features, guides, plans 등)
- sam/docs/ 하위 52개 변경 파일을 루트에 덮어쓰기 (brochure, rules 등)
- sam/ 폴더 전체 삭제 (docker, coocon 포함)
This commit is contained in:
권혁성
2026-03-09 22:33:19 +09:00
parent bfcd6178ea
commit cc38b00c11
223 changed files with 178 additions and 32907 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
brochure/v1/sam-brochure-1page.pptx
View File

Binary file not shown.

BIN
brochure/v1/sam-brochure-2page.pptx
View File

Binary file not shown.

6
brochure/v1/slides/brochure-1page.html
View File

@@ -197,10 +197,12 @@
<div style="margin-top: auto; border-top: 1pt solid rgba(255,255,255,0.08); padding-top: 10pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: rgba(255,255,255,0.7);">SAM</p>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3); margin-top: 2pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: rgba(255,255,255,0.7);">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3);">무료 데모 및 상담</p>
<p style="white-space: nowrap; font-size: 8pt; font-weight: 600; color: #10B981;">contact@codebridge-x.com</p>
</div>
</div>
</div>

6
brochure/v1/slides/brochure-2page-back.html
View File

@@ -209,17 +209,19 @@
<div style="margin-top: auto; background: rgba(16,185,129,0.08); border: 1pt solid rgba(16,185,129,0.2); border-radius: 8pt; padding: 12pt 14pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #ffffff;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 7.5pt; color: rgba(255,255,255,0.45); margin-top: 3pt;">귀사에 최적화된 맞춤 데모를 제공합니다</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.4); margin-top: 2pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.4); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- 회사명 -->
<div style="margin-top: 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.2);">SAM — Smart Automation Management</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.2);">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
</div>
</body>
</html>

4
brochure/v1/slides/brochure-2page-front.html
View File

@@ -110,8 +110,8 @@
<div style="margin-top: auto; border-top: 1pt solid rgba(255,255,255,0.08); padding-top: 12pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: rgba(255,255,255,0.7);">SAM</p>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3); margin-top: 2pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: rgba(255,255,255,0.7);">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.35);">뒷면에서 상세 기능과 가격을 확인하세요</p>

BIN
brochure/v2/sam-brochure-v2-dashboard-1page.pptx
View File

Binary file not shown.

BIN
brochure/v2/sam-brochure-v2-dashboard-2page.pptx
View File

Binary file not shown.

6
brochure/v2/slides/brochure-dashboard-1page.html
View File

@@ -248,10 +248,12 @@
<div style="margin-top: auto; border-top: 1pt solid rgba(255,255,255,0.06); padding-top: 8pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: rgba(255,255,255,0.65);">SAM</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.25); margin-top: 2pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: rgba(255,255,255,0.65);">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.25); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.3);">무료 데모 신청</p>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 600; color: #0EA5E9;">contact@codebridge-x.com</p>
</div>
</div>
</div>

6
brochure/v2/slides/brochure-dashboard-back.html
View File

@@ -224,17 +224,19 @@
<div style="margin-top: auto; background: rgba(14,165,233,0.08); border: 1.5pt solid rgba(14,165,233,0.2); border-radius: 8pt; padding: 10pt 14pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #ffffff;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.4); margin-top: 2pt;">대표님 전용 대시보드를 직접 체험해 보세요</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.35); margin-top: 2pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.35); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- 회사명 -->
<div style="margin-top: 5pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.18);">SAM — Smart Automation Management</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.18);">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
</div>
</body>
</html>

4
brochure/v2/slides/brochure-dashboard-front.html
View File

@@ -160,8 +160,8 @@
<div style="margin-top: auto; border-top: 1pt solid rgba(255,255,255,0.06); padding-top: 10pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: rgba(255,255,255,0.65);">SAM</p>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.25); margin-top: 2pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: rgba(255,255,255,0.65);">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.25); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3);">뒷면에서 상세 기능을 확인하세요</p>

BIN
brochure/v3/sam-brochure-v3-dashboard-1page.pptx
View File

Binary file not shown.

BIN
brochure/v3/sam-brochure-v3-dashboard-2page.pptx
View File

Binary file not shown.

6
brochure/v3/slides/brochure-dashboard-1page.html
View File

@@ -392,10 +392,12 @@
<div style="margin-top: auto; border-top: 1pt solid rgba(255,255,255,0.06); padding-top: 7pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: rgba(255,255,255,0.6);">SAM</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.2); margin-top: 2pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: rgba(255,255,255,0.6);">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.2); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.25);">무료 데모 신청</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0EA5E9;">contact@codebridge-x.com</p>
</div>
</div>
</div>

6
brochure/v3/slides/brochure-dashboard-back.html
View File

@@ -354,18 +354,20 @@
<path d="M11 6 L11 11 L15 13" fill="none" stroke="#0EA5E9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div>
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #ffffff;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.35); margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
</div>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3); margin-top: 1pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0EA5E9;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3); margin-top: 1pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- 회사명 -->
<div style="margin-top: 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.15);">SAM — Smart Automation Management</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.15);">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
</div>
</body>
</html>

4
brochure/v3/slides/brochure-dashboard-front.html
View File

@@ -250,8 +250,8 @@
<div style="margin-top: auto; border-top: 1pt solid rgba(255,255,255,0.06); padding-top: 8pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: rgba(255,255,255,0.6);">SAM</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.2); margin-top: 2pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: rgba(255,255,255,0.6);">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.2); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.25);">뒷면에서 상세 기능을 확인하세요 &#9654;</p>

BIN
brochure/v4/sam-brochure-v4-dashboard-1page.pptx
View File

Binary file not shown.

BIN
brochure/v4/sam-brochure-v4-dashboard-2page.pptx
View File

Binary file not shown.

6
brochure/v4/slides/brochure-dashboard-1page.html
View File

@@ -392,10 +392,12 @@
<div style="margin-top: auto; border-top: 1pt solid #E2E8F0; padding-top: 7pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #475569;">SAM</p>
<p style="white-space: nowrap; font-size: 6pt; color: #CBD5E1; margin-top: 2pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #475569;">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6pt; color: #CBD5E1; margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">무료 데모 신청</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0EA5E9;">contact@codebridge-x.com</p>
</div>
</div>
</div>

6
brochure/v4/slides/brochure-dashboard-back.html
View File

@@ -354,18 +354,20 @@
<path d="M11 6 L11 11 L15 13" fill="none" stroke="#0EA5E9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div>
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #0F172A;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: #94A3B8; margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
</div>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8; margin-top: 1pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0EA5E9;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8; margin-top: 1pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- 회사명 -->
<div style="margin-top: 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #CBD5E1;">SAM — Smart Automation Management</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #CBD5E1;">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
</div>
</body>
</html>

4
brochure/v4/slides/brochure-dashboard-front.html
View File

@@ -248,8 +248,8 @@
<div style="margin-top: auto; border-top: 1pt solid #E2E8F0; padding-top: 8pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #475569;">SAM</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: #CBD5E1; margin-top: 2pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #475569;">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: #CBD5E1; margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; color: #94A3B8;">뒷면에서 상세 기능을 확인하세요 &#9654;</p>

BIN
brochure/v5/sam-brochure-v5-dashboard-1page.pptx
View File

Binary file not shown.

BIN
brochure/v5/sam-brochure-v5-dashboard-2page.pptx
View File

Binary file not shown.

6
brochure/v5/slides/brochure-dashboard-1page.html
View File

@@ -306,10 +306,12 @@
<div style="margin-top: auto; border-top: 1pt solid rgba(251,191,36,0.1); padding-top: 7pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: rgba(255,255,255,0.6);">SAM</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.2); margin-top: 2pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: rgba(255,255,255,0.6);">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.2); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.25);">무료 데모 신청</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #FBBF24;">contact@codebridge-x.com</p>
</div>
</div>
</div>

6
brochure/v5/slides/brochure-dashboard-back.html
View File

@@ -292,18 +292,20 @@
<path d="M11 6 L11 11 L15 13" fill="none" stroke="#FBBF24" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div>
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #ffffff;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.3); margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
</div>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.25); margin-top: 1pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #FBBF24;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.25); margin-top: 1pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- 회사명 -->
<div style="margin-top: 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.15);">SAM — Smart Automation Management</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.15);">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
</div>
</body>
</html>

4
brochure/v5/slides/brochure-dashboard-front.html
View File

@@ -204,8 +204,8 @@
<div style="margin-top: auto; border-top: 1pt solid rgba(251,191,36,0.1); padding-top: 8pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: rgba(255,255,255,0.6);">SAM</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.2); margin-top: 2pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: rgba(255,255,255,0.6);">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.2); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.25);">뒷면에서 상세 기능을 확인하세요 &#9654;</p>

BIN
brochure/v6/sam-brochure-v6-dashboard-1page.pptx
View File

Binary file not shown.

BIN
brochure/v6/sam-brochure-v6-dashboard-2page.pptx
View File

Binary file not shown.

6
brochure/v6/slides/brochure-dashboard-1page.html
View File

@@ -359,10 +359,12 @@
<div style="margin-top: auto; background: #EFF6FF; border-radius: 5pt; padding: 7pt 10pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #1E293B;">SAM</p>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8; margin-top: 2pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #1E293B;">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8; margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">무료 데모 신청</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #2563EB;">contact@codebridge-x.com</p>
</div>
</div>
</div>

6
brochure/v6/slides/brochure-dashboard-back.html
View File

@@ -316,18 +316,20 @@
<path d="M11 6 L11 11 L15 13" fill="none" stroke="#FFFFFF" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div>
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #FFFFFF;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.6); margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
</div>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.5); margin-top: 1pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #FFFFFF;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.5); margin-top: 1pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- 회사명 -->
<div style="margin-top: 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">SAM — Smart Automation Management</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
</div>
</div>

4
brochure/v6/slides/brochure-dashboard-front.html
View File

@@ -217,8 +217,8 @@
<div style="margin-top: auto; background: #EFF6FF; border-radius: 5pt; padding: 8pt 12pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #1E293B;">SAM</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: #94A3B8; margin-top: 2pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #1E293B;">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: #94A3B8; margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; color: #94A3B8;">뒷면에서 상세 기능을 확인하세요 &#9654;</p>

BIN
brochure/v7/sam-brochure-v7-dashboard-1page.pptx
View File

Binary file not shown.

BIN
brochure/v7/sam-brochure-v7-dashboard-2page.pptx
View File

Binary file not shown.

6
brochure/v7/slides/brochure-dashboard-1page.html
View File

@@ -363,10 +363,12 @@
<div style="margin-top: auto; border-top: 1pt solid #D6D3D1; padding-top: 7pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #57534E;">SAM</p>
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E; margin-top: 2pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #57534E;">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E; margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">무료 데모 신청</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0D9488;">contact@codebridge-x.com</p>
</div>
</div>
</div>

6
brochure/v7/slides/brochure-dashboard-back.html
View File

@@ -354,18 +354,20 @@
<path d="M11 6 L11 11 L15 13" fill="none" stroke="#0D9488" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div>
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #292524;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: #A8A29E; margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
</div>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E; margin-top: 1pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0D9488;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E; margin-top: 1pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- 회사명 -->
<div style="margin-top: 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">SAM — Smart Automation Management</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
</div>
</body>
</html>

4
brochure/v7/slides/brochure-dashboard-front.html
View File

@@ -266,8 +266,8 @@
<div style="margin-top: auto; border-top: 1pt solid #D6D3D1; padding-top: 8pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #57534E;">SAM</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: #A8A29E; margin-top: 2pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #57534E;">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: #A8A29E; margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; color: #A8A29E;">뒷면에서 상세 기능을 확인하세요 &#9654;</p>

BIN
brochure/v8/sam-brochure-v8-dashboard-1page.pptx
View File

Binary file not shown.

BIN
brochure/v8/sam-brochure-v8-dashboard-2page.pptx
View File

Binary file not shown.

6
brochure/v8/slides/brochure-dashboard-1page.html
View File

@@ -218,18 +218,20 @@
<path d="M11 6 L11 11 L15 13" fill="none" stroke="#F97316" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div>
<p style="white-space: nowrap; font-size: 8pt; font-weight: 800; color: #FFFFFF;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.5); margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
</div>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.3); margin-top: 1pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F97316;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.3); margin-top: 1pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- 회사명 -->
<div style="margin-top: 5pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5pt; color: #94A3B8;">SAM — Smart Automation Management</p>
<p style="white-space: nowrap; font-size: 5pt; color: #94A3B8;">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
</div>
</div>
</body>

6
brochure/v8/slides/brochure-dashboard-back.html
View File

@@ -301,18 +301,20 @@
<path d="M11 6 L11 11 L15 13" fill="none" stroke="#F97316" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div>
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #FFFFFF;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.5); margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
</div>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3); margin-top: 1pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #F97316;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3); margin-top: 1pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- 회사명 -->
<div style="padding: 5pt 0; text-align: center;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">SAM — Smart Automation Management</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
</div>
</body>
</html>

4
brochure/v8/slides/brochure-dashboard-front.html
View File

@@ -268,8 +268,8 @@
<div style="margin-top: auto; border-top: 1pt solid #E2E8F0; padding-top: 8pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #475569;">SAM</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: #94A3B8; margin-top: 2pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #475569;">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: #94A3B8; margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; color: #94A3B8;">뒷면에서 상세 기능을 확인하세요 &#9654;</p>

BIN
brochure/v9/sam-brochure-v9-dashboard-1page.pptx
View File

Binary file not shown.

BIN
brochure/v9/sam-brochure-v9-dashboard-2page.pptx
View File

Binary file not shown.

6
brochure/v9/slides/brochure-dashboard-1page.html
View File

@@ -250,15 +250,17 @@
<div style="margin-top: auto; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 8pt 10pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<p style="white-space: nowrap; font-size: 8pt; font-weight: 800; color: #0F172A;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B; margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
</div>
<div style="text-align: right; border-left: 2pt solid #6366F1; padding-left: 8pt;">
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1; margin-top: 1pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #6366F1;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1; margin-top: 1pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<div style="margin-top: 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 4.5pt; color: #CBD5E1;">SAM</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #CBD5E1;">(주)코드브릿지엑스</p>
</div>
</body>
</html>

6
brochure/v9/slides/brochure-dashboard-back.html
View File

@@ -211,17 +211,19 @@
<div style="margin-top: auto; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 6pt; padding: 12pt 14pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #0F172A;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 6pt; color: #64748B; margin-top: 2pt;">대표님 전용 대시보드를 직접 체험</p>
</div>
<div style="text-align: right; border-left: 2pt solid #6366F1; padding-left: 10pt;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #CBD5E1; margin-top: 2pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #6366F1;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #CBD5E1; margin-top: 2pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- Footer -->
<div style="margin-top: 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1;">SAM</p>
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1;">(주)코드브릿지엑스</p>
</div>
</body>
</html>

4
brochure/v9/slides/brochure-dashboard-front.html
View File

@@ -172,8 +172,8 @@
<!-- Footer -->
<div style="margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0F172A;">SAM</p>
<p style="white-space: nowrap; font-size: 6pt; color: #CBD5E1; margin-top: 2pt;">www.sam.it.kr</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0F172A;">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6pt; color: #CBD5E1; margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #CBD5E1;">뒷면에서 상세 기능을 확인하세요</p>
</div>

65
features/barobill-kakaotalk/README.md
View File

@@ -1,9 +1,9 @@
# 바로빌 카카오톡 (알림톡/친구톡) 연동
> **문서 버전**: 1.0
> **문서 버전**: 1.1
> **작성일**: 2026-02-14
> **최종 수정**: 2026-02-24
> **상태**: 운영 중 (전자계약 알림톡 발송 완료)
> **최종 수정**: 2026-02-27
> **상태**: 운영 중 (알림톡 + SMS + 환경별 분기 완료)
> **대상 프로젝트**: MNG
---
@@ -25,7 +25,11 @@
| 채널 연동 (바로빌↔카카오) | **완료** (2026-02-20) | 바로빌 관리 URL에서 채널 연동 처리 |
| 바로빌 파트너 과금 설정 | **완료** (2026-02-23) | 바로빌 측에서 파트너사 과금 설정 완료 |
| 알림톡 템플릿 v1 검수 | **완료** (2026-02-22) | `전자계약_서명요청`, `전자계약_리마인드` 2종 승인 |
| 알림톡 템플릿 v2 검수 | **심사 중** (2026-02-24 접수) | 버튼 URL에 `#{토큰}` 변수 포함 2종 재등록 |
| 알림톡 템플릿 v2 검수 | **완료** (2026-02-25) | 버튼 URL에 `#{토큰}` 변수 포함 3종 승인 |
| 알림톡 `전자계약_완료` | **완료** (2026-02-26) | 서명 완료 알림 발송용 템플릿 승인 |
| 역할 기반 알림 분기 | **완료** (2026-02-26) | 본사=이메일, 상대방=알림톡/SMS |
| 환경별 템플릿 분기 | **완료** (2026-02-27) | `_DEV` 접미사 개발 템플릿 등록 |
| DEV 템플릿 검수 | **심사 중** (2026-02-27 접수) | 개발서버용 3종 (`admin.codebridge-x.com`) |
> 상세 등록 가이드: [카카오톡 알림톡 채널 및 템플릿 등록 가이드](../../guides/카카오톡-알림톡-채널-템플릿-등록.md)
@@ -310,14 +314,24 @@ $params = [
| 전달 결과 확인 (2단계) | **구현 완료** | 2026-02-24 |
| 로그인 페이지 서명 확인 | **성공** | 2026-02-24 |
### 5.3 대기 중인 항목
### 5.3 완료된 추가 항목 (2026-02-26~27)
| 항목 | 상태 | 비고 |
|------|------|------|
| 템플릿 v2 승인 | **심사 중** | 버튼 URL에 `#{토큰}` 변수 포함 |
| v2 승인 후 코드 수정 | **대기** | 동적 서명 URL을 버튼에 전달 |
| `전자계약_완료` 템플릿 | **미등록** | 서명 완료 알림 발송용 |
| SMS 대체발송 | **미설정** | 발신번호 등록 필요 |
| 템플릿 v2 승인 | **완료** | 버튼 URL에 `#{토큰}` 변수 포함 3종 승인 |
| `전자계약_완료` 템플릿 | **완료** | 서명 완료 알림 발송 — PDF 다운로드 버튼 |
| 역할 기반 알림 분기 | **완료** | 본사(creator)=이메일, 상대방(counterpart)=알림톡 |
| OTP SMS 발송 | **완료** | 상대방에게 SMS로 인증코드 발송 |
| 환경별 템플릿 분기 | **완료** | `resolveTemplateName()` — `_DEV` 접미사 자동 적용 |
| 서명 PDF 재생성 | **완료** | `downloadDocument()`에서 완료 계약 PDF 자동 재생성 |
> 상세 가이드: [전자계약 알림톡/SMS 환경별 설정 가이드](./esign-notification-guide.md)
### 5.4 대기 중인 항목
| 항목 | 상태 | 비고 |
|------|------|------|
| DEV 템플릿 검수 | **심사 중** | `admin.codebridge-x.com` 도메인 3종 |
| 친구톡 발송 | **대기** | 채널 친구 추가 후 가능 |
| 대량 발송 | **대기** | 단건 안정화 후 |
@@ -377,37 +391,7 @@ $buttons = [
---
## 8. API 측 바로빌 연동 (세금계산서)
MNG의 카카오톡 연동 외에, API(`api/`)에서도 바로빌 서비스를 사용한다:
### 8.1 바로빌 설정 API
| HTTP | URI | 설명 |
|------|-----|------|
| GET | `/v1/barobill-settings` | 바로빌 설정 조회 |
| PUT | `/v1/barobill-settings` | 바로빌 설정 저장 (사업자번호, 인증키, 자동발행 등) |
| POST | `/v1/barobill-settings/test-connection` | 연동 테스트 |
### 8.2 세금계산서 발행
`BarobillService`는 세금계산서 발행/취소/국세청 전송 상태 조회도 담당한다:
| API 메서드 | 설명 |
|-----------|------|
| `issueTaxInvoice()` | 세금계산서 발행 (RegistAndIssueTaxInvoice) |
| `cancelTaxInvoice()` | 세금계산서 취소 |
| `checkNtsSendStatus()` | 국세청 전송 상태 조회 |
| `checkBusinessNumber()` | 사업자번호 휴폐업 조회 |
| `testConnection()` | GetAccessToken으로 연동 테스트 |
**인증키 보안:** `cert_key`는 Laravel `Crypt` 파사드로 자동 암/복호화
→ 상세: [세금계산서 관리](../finance/tax-invoices.md)
---
## 9. 참고 자료
## 8. 참고 자료
- [바로빌 API 문서](https://dev.barobill.co.kr)
- [카카오비즈니스 채널 관리](https://business.kakao.com)
@@ -420,6 +404,7 @@ MNG의 카카오톡 연동 외에, API(`api/`)에서도 바로빌 서비스를
| 날짜 | 버전 | 변경 내용 |
|------|------|----------|
| 2026-02-27 | 1.1 | 역할 기반 알림, OTP SMS, 환경별 템플릿 분기, 완료 알림톡 추가 |
| 2026-02-24 | 1.0 | 전자계약 알림톡 연동 완료, 트러블슈팅 문서화, v2 템플릿 가이드 추가 |
| 2026-02-14 | 0.2 | 전자계약(E-Sign) 알림톡 연동 활용 계획 추가 |
| 2026-02-14 | 0.1 | 초안 작성 - 코드 구현 완료, 실 서비스 연동 대기 |

4
features/documents/README.md
View File

@@ -111,10 +111,12 @@ DRAFT → PENDING → APPROVED
## 관련 문서
- [MNG 문서관리 시스템 상세](mng-document-system.md) — MNG 화면 구성, 탭별 기능, 서식 빌더, EAV 저장 패턴 상세
- [MNG 문서양식관리](mng-document-template.md) — 서식 생성/편집, Legacy/Block Builder, 프리셋, 연결품목 관리
- [DB 스키마 — 문서/전자서명](../../system/database/documents.md)
- [게시판 시스템](../boards/README.md) — 유사한 EAV 패턴 적용
- Swagger: `/api-docs` → Documents 섹션
---
**최종 업데이트**: 2026-02-27
**최종 업데이트**: 2026-03-06

57
projects/index_projects.md
View File

@@ -1,7 +1,7 @@
# 프로젝트 문서 인덱스
> SAM 시스템 개발 프로젝트별 문서 모음
> **최종 업데이트**: 2026-02-12
> **최종 업데이트**: 2026-03-08
---
@@ -18,6 +18,8 @@
| [auto-login](#auto-login---자동-로그인) | ⚪ 대기 | 자동 로그인 기능 |
| [migration-5130-mng](#migration-5130-mng---5130--mng-마이그레이션) | 🟡 진행중 | 5130 → mng 통합 마이그레이션 |
| [e-sign](#e-sign---전자계약-서명) | 🟢 v1.0 구현 완료 | 전자계약 서명 솔루션 (SAM E-Sign) |
| [org-chart](#org-chart---조직도-관리) | 🟢 v1.0 구현 완료 | 트리형 조직도 관리 (드래그앤드롭, 숨기기) |
| [planning-design](#planning-design---기획디자인-스토리보드-에디터) | 🟢 v1.2 운영 중 | 브라우저 블록 에디터 (Notion/Figma 스타일) |
---
@@ -204,6 +206,53 @@
---
### org-chart - 조직도 관리
**경로**: `docs/projects/org-chart/`
**상태**: 🟢 v1.0 구현 완료 (2026-03-06)
**목표**: 테넌트별 조직 구조를 시각적으로 관리하는 트리형 조직도
**핵심 문서**:
- [README.md](./org-chart/README.md) - 기술 문서 (아키텍처, API, DB, 프론트엔드 상세)
**구현 범위**:
| 영역 | 수량 |
|------|------|
| MNG 컨트롤러 메서드 | 7개 (RdController) |
| API 엔드포인트 | 6개 (조회, 배치, 해제, 순서변경, 숨기기) |
| DB 마이그레이션 | 1개 (departments.options JSON 추가) |
| 뷰 | 1개 (Alpine.js + SortableJS) |
**기술 스택**: Alpine.js + SortableJS + 수동 DOM 렌더링 (x-for 미사용)
---
### planning-design - 기획디자인 스토리보드 에디터
**경로**: `docs/projects/planning-design/`
**상태**: 🟢 v1.2 운영 중 (고도화 진행중)
**목표**: 브라우저 내 Notion/Figma 스타일 블록 에디터로 ERP 화면 기획서 작성
**핵심 문서**:
- [README.md](./planning-design/README.md) - 프로젝트 개요 및 구현 이력
**구현 범위**:
| 영역 | 수량 |
|------|------|
| 블록 유형 | 15종 (텍스트/레이아웃/UI모형/미디어/체크리스트) |
| 편집 기능 | 올가미 선택, Undo/Redo, 복사/잘라내기, 서식 |
| 서식 시스템 | 글자색/배경색/크기/굵기/기울임/정렬/z-index |
| 작업 영역 | 사이드바/Description 접기/펼치기, 캔버스 폭 자동 확장 |
| 출력 | HTML 내보내기 + A4 인쇄 (좌표 기반 WYSIWYG) |
**기술 스택**: Alpine.js + localStorage (서버 API 없음)
**기술 스펙**: [features/rd/planning-design.md](../features/rd/planning-design.md)
---
## 디렉토리 구조
```
@@ -232,7 +281,9 @@ docs/projects/
├── mng-mobile-responsive/ # 모바일 반응형
├── auto-login/ # 자동 로그인
├── migration-5130-mng/ # 5130→mng 마이그레이션
└── e-sign/ # 전자계약 서명 (SAM E-Sign)
├── e-sign/ # 전자계약 서명 (SAM E-Sign)
├── org-chart/ # 조직도 관리
└── planning-design/ # 기획디자인 스토리보드 에디터
```
---
@@ -240,7 +291,7 @@ docs/projects/
## 관련 문서
- [docs/INDEX.md](../INDEX.md) - 전체 문서 인덱스
- [docs/dev_plans/index_plans.md](../plans/index_plans.md) - 기획 문서 인덱스
- [docs/plans/index_plans.md](../plans/index_plans.md) - 기획 문서 인덱스
- [docs/guides/PROJECT_DEVELOPMENT_POLICY.md](../guides/PROJECT_DEVELOPMENT_POLICY.md) - 공통 개발 정책
- [CURRENT_WORKS.md](../../CURRENT_WORKS.md) - 현재 작업

3
rules/billing-policy.md
View File

@@ -54,8 +54,7 @@ SAM 프로젝트의 과금정책 중 **본사 지출 원가**, **마진 구조**
|--------|--------|------|
| 계좌조회 | 10,000원 | 고객 부담 |
| 카드내역 | 10,000원 | 고객 부담 |
| 홈택스 매입 | 33,000원 (VAT 포함) | 코드브릿지엑스 지원 → 본사 부담 (무료) |
| 홈택스 매출 | 33,000원 (VAT 포함) | 코드브릿지엑스 지원 → 본사 부담 (무료) |
| 홈택스 매입/매출 | 33,000원 (VAT 포함) | 코드브릿지엑스 지원 → 본사 부담 (무료) |
> **참고**: 계좌조회/카드내역 월정액은 고객에게 전가한다. 홈택스는 본사가 흡수한다.

2
rules/customer-pricing.md
View File

@@ -92,7 +92,7 @@ SAM 서비스 도입 시 고객에게 안내하는 요금 체계를 정리한다
|--------|---------|---------|---------|----------|
| 계좌조회 | 월정액 10,000원 | 1계좌 | 추가 1계좌당 10,000원 | 고객 |
| 카드내역 | 월정액 10,000원 | 5장 | 추가 1장당 5,000원 | 고객 |
| 홈택스 매입/매출 | 월 33,000원 × 2 | - | - | 본사 (무료) |
| 홈택스 매입/매출 | 월 33,000원 | - | - | 본사 (무료) |
| 세금계산서 발행 | 건별 | 100건 | 추가 50건당 5,000원 | 고객 |
> **과금 계산 예시**:

12
rules/slides/billing-policy/slide-03.html
View File

@@ -50,18 +50,12 @@
<div style="flex: 0.8; text-align: right;"><p style="font-size: 8.5pt; color: #1a1a1a;">10,000원</p></div>
<div style="flex: 1.6; text-align: right;"><p style="font-size: 8.5pt; color: #666;">고객 부담 (전가)</p></div>
</div>
<!-- 홈택스 매입 -->
<div style="display: flex; padding: 7pt 10pt; background: #f0faf4;">
<div style="flex: 1.2;"><p style="font-size: 8.5pt; color: #1a1a1a;">홈택스 매입</p></div>
<!-- 홈택스 매입/매출 -->
<div style="display: flex; padding: 7pt 10pt; background: #f0faf4; border-radius: 0 0 4pt 4pt;">
<div style="flex: 1.2;"><p style="font-size: 8.5pt; color: #1a1a1a;">홈택스 매입/매출</p></div>
<div style="flex: 0.8; text-align: right;"><p style="font-size: 8.5pt; color: #1a1a1a;">33,000원</p></div>
<div style="flex: 1.6; text-align: right;"><p style="font-size: 8.5pt; font-weight: 600; color: #27AE60;">본사 흡수 (코드브릿지엑스 → 무료)</p></div>
</div>
<!-- 홈택스 매출 -->
<div style="display: flex; padding: 7pt 10pt; background: #f0faf4; border-radius: 0 0 4pt 4pt;">
<div style="flex: 1.2;"><p style="font-size: 8.5pt; color: #1a1a1a;">홈택스 매출</p></div>
<div style="flex: 0.8; text-align: right;"><p style="font-size: 8.5pt; color: #1a1a1a;">33,000원</p></div>
<div style="flex: 1.6; text-align: right;"><p style="font-size: 8.5pt; font-weight: 600; color: #27AE60;">본사 흡수 (무료)</p></div>
</div>
</div>
<!-- 우측 -->

2
rules/slides/customer-pricing/slide-06.html
View File

@@ -67,7 +67,7 @@
<!-- 행3: 홈택스 매입/매출 -->
<div style="display: flex; background: #f7f9fc; padding: 8pt 12pt; align-items: center;">
<div style="flex: 1;"><p style="font-size: 9pt; font-weight: 600; color: #1e2a3a;">홈택스 매입/매출</p></div>
<div style="flex: 1;"><p style="font-size: 8pt; color: #5a6b7d;">월 33,000원 x 2</p></div>
<div style="flex: 1;"><p style="font-size: 8pt; color: #5a6b7d;">월 33,000원</p></div>
<div style="flex: 0.7;"><p style="font-size: 8pt; color: #5a6b7d;">-</p></div>
<div style="flex: 1.2;"><p style="font-size: 8pt; color: #5a6b7d;">-</p></div>
<div style="flex: 0.4; text-align: center;">

685
sam/coocon/쿠콘_나이스평가정보_API_개발가이드.md
View File

@@ -1,685 +0,0 @@
# 개발가이드 나이스평가정보연계 API
> Ver 1.0.0
> 최종수정일: 2024-06-28
---
## 개정 내역
| 개정버전 | 개정일자 | 개정내용 |
|--------|----------|--------|
| 1.0.0 | 2024.06.28 | 초안작성 |
---
## 목차
1. [개요](#1-개요)
2. [용어정의](#2-용어정의)
3. [개발절차](#3-개발절차)
4. [API 인증키](#4-api-인증키)
5. [개발가이드](#5-개발가이드)
6. [개발 유의사항](#6-개발-유의사항)
7. [결과코드](#참조-1-결과코드)
---
## 1. 개요
### 1.1 설명
나이스평가 정보 연동하여 업무를 처리합니다.
### 1.2 기본정보
| 항목 | 값 |
|------|-----|
| Protocol | HTTPS |
| 데이터형식 | JSON |
| Network | 인터넷망 |
| 데이터 제공방식 | 실시간 |
| Content-Type | application/json |
### 1.3 API 목록
| API 명 | 환경 | URL | 설명 |
|--------|------|-----|------|
| [기업]지표-주요경영지표 (OA07) | 개발 | https://dev2.coocon.co.kr:8443/sol/gateway/oapi_relay.jsp | 업무구분 API_ID(OA07) |
| | 운영 | https://sgw.coocon.co.kr/sol/gateway/oapi_relay.jsp | |
| [기업]개요-기본정보 (OA08) | 개발 | https://dev2.coocon.co.kr:8443/sol/gateway/oapi_relay.jsp | 업무구분 API_ID(OA08) |
| | 운영 | https://sgw.coocon.co.kr/sol/gateway/oapi_relay.jsp | |
| [기업]검색-통합기업검색 (OA09) | 개발 | https://dev2.coocon.co.kr:8443/sol/gateway/oapi_relay.jsp | 업무구분 API_ID(OA09) |
| | 운영 | https://sgw.coocon.co.kr/sol/gateway/oapi_relay.jsp | |
| [기업]등급-기업평가등급 (OA10) | 개발 | https://dev2.coocon.co.kr:8443/sol/gateway/oapi_relay.jsp | 업무구분 API_ID(OA10) |
| | 운영 | https://sgw.coocon.co.kr/sol/gateway/oapi_relay.jsp | |
| [기업]등급-WATCH 등급 (OA11) | 개발 | https://dev2.coocon.co.kr:8443/sol/gateway/oapi_relay.jsp | 업무구분 API_ID(OA11) |
| | 운영 | https://sgw.coocon.co.kr/sol/gateway/oapi_relay.jsp | |
| [기업]신용-신용요약정보 (OA12) | 개발 | https://dev2.coocon.co.kr:8443/sol/gateway/oapi_relay.jsp | 업무구분 API_ID(OA12) |
| | 운영 | https://sgw.coocon.co.kr/sol/gateway/oapi_relay.jsp | |
| [기업]신용-단기연체정보 (한국신용정보원) (OA13) | 개발 | https://dev2.coocon.co.kr:8443/sol/gateway/oapi_relay.jsp | 업무구분 API_ID(OA13) |
| | 운영 | https://sgw.coocon.co.kr/sol/gateway/oapi_relay.jsp | |
| [기업]신용-신용도 판단정보(공공정보 포함) (한국신용정보원) (OA14) | 개발 | https://dev2.coocon.co.kr:8443/sol/gateway/oapi_relay.jsp | 업무구분 API_ID(OA14) |
| | 운영 | https://sgw.coocon.co.kr/sol/gateway/oapi_relay.jsp | |
| [기업]신용-신용도-판단정보 (신용정보사) (OA15) | 개발 | https://dev2.coocon.co.kr:8443/sol/gateway/oapi_relay.jsp | 업무구분 API_ID(OA15) |
| | 운영 | https://sgw.coocon.co.kr/sol/gateway/oapi_relay.jsp | |
| [기업]신용-당좌거래정지 정보 (금융결제원) (OA16) | 개발 | https://dev2.coocon.co.kr:8443/sol/gateway/oapi_relay.jsp | 업무구분 API_ID(OA16) |
| | 운영 | https://sgw.coocon.co.kr/sol/gateway/oapi_relay.jsp | |
| [기업]신용-법정관리/워크아웃정보 (OA17) | 개발 | https://dev2.coocon.co.kr:8443/sol/gateway/oapi_relay.jsp | 업무구분 API_ID(OA17) |
| | 운영 | https://sgw.coocon.co.kr/sol/gateway/oapi_relay.jsp | |
### 1.4 서버 접속 정보
> 전용선 및 VPN 이용고객은 아래 서버정보 참고
| 구분 | IP | PORT |
|------|-----|------|
| 개발 | #1 : 183.111.160.137 | 8443 |
| 운영 | #1 : 112.175.51.59 | 443 |
### 1.5 API 구성/흐름도
```
Application COOCON API Server OpenAPI Provider
│ │ │
│ 1. INPUT 데이터 조립 │ │
│ - API 인증키 │ │
│ - 사업자정보 │ │
│ │ │
├──────── 2. Request ──────────>│ │
│ │ INPUT 데이터 수신 및 재조립 │
│ │ [쿠콘 API GW] │
│ │ │
│ ├────── 3. Call ──────────────>│
│ │ [나이스평가정보 API] │
│ │ │
│ │<───── 4. OUTPUT 데이터 수신 ──│
│ │ │
│<──────── 5. Response ─────────│ │
│ │ │
│ OUTPUT 데이터 추출 │ │
│ - 결과코드/메시지 │ │
│ - 출력값 │ │
```
**흐름도 설명:**
1. Application에서 INPUT 데이터를 조립하여 [나이스 API]를 호출합니다.
2. INPUT 데이터가 API 서버로 전송되고, 쿠콘 API GW에서 INPUT 데이터를 수신합니다.
3. 쿠콘 API GW에서 수신된 INPUT 데이터를 오픈 API 포맷에 맞게 조립하고, 오픈 API 제공자에게 요청 후에 응답을 수신합니다.
4. Application에 수신받은 응답데이터를 전달합니다.
5. Application에서 필요한 데이터 추출 및 파싱을 합니다.
### 1.6 API 인터페이스 구조
```
S/W 개발사 Application 서버 COOCON API 서버
┌─────────────────────────────────┐ ┌─────────────────┐
│ ┌────────┐ ┌────────┐ │ │ │
│ │ 공통 │ │ INPUT │ │ Request │ OUTPUT │
│ │ 입력 │ -> │ │ ────────────────>│ │
│ │ 항목 │ │ │ <────────────────│ │
│ └────────┘ └────────┘ │ Response │ │
└─────────────────────────────────┘ └─────────────────┘
```
---
## 2. 용어정의
| 용어 | 정의 |
|------|------|
| 이용기업 | API 상품을 구매하여 Application을 개발하는 회사 (S/W 개발사) |
| Application | 이용기업에서 API를 적용하려는 Application |
| COOCON API Server | COOCON에서 제공하는 API가 실행되는 서버 |
| API 인증키 | COOCON에서 제공하는 API를 호출한 이용 기관을 인증하는 고유값. 이 때 COOCON에 등록된 이용 기관의 고유 IP에서 요청(Request)된 API 호출만 정상 처리됩니다. |
---
## 3. 개발절차
```
┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐
│ 1 │ │ 2 │ │ 3 │ │ 4 │
│ API │ -> │ 개발 │ -> │ 테스트 │ -> │ 운영 │
│ 인증키 │ │ │ │ │ │ 적용 │
└─────────┘ └─────────┘ └─────────┘ └─────────┘
```
---
## 4. API 인증키
### 4.1 발급
API 인증키 발급 과정은 다음과 같습니다.
1. 구매신청 담당자에게 "API 인증키 신청서"가 이메일로 전달됩니다.
2. API 이용기업 담당자는 "API 인증키 신청서" 양식을 작성하여 이메일로 답장을 보냅니다.
3. COOCON 기술지원 담당자는 신청내용 검토 후 인증키를 이메일로 발송합니다.
### 4.2 개발
1. API를 이용하여 Application 개발을 합니다.
2. 자세한 내용은 "5 개발 가이드"를 참조해 주세요.
### 4.3 테스트
개발 혹은 테스트 시스템에서 API 호출 테스트를 진행합니다.
1. 개발용 API를 이용해서 테스트해야 합니다.
**[주의사항]**
1. 개발 혹은 테스트 시스템에서 대량거래 혹은 부하테스트 같이 짧은 시간 내에 너무 많은 거래를 테스트하면 경우에 따라서 정보제공 기관(금융사 등)에서 테스트 거래를 차단할 수 있으니 주의하시기 바랍니다.
2. 테스트 시스템에서 확인한 금융 정보는 정보제공 기관(금융사) 시스템에 따라 정확하지 않을 수 있습니다.
3. 만일 운영 API를 이용하여 테스트를 하게 되면 수수료가 발생하니 유의하시기 바랍니다.
### 4.4 운영적용
개발된 Application이 운영으로 이관되면 반드시 "운영 API 인증키"로 변경해 주어야 정상 거래가 가능합니다.
---
## 5. 개발가이드
### 5.1 공통 입력 항목
| 공통 입력 ID | 공통 입력 명 | 타입 | 최대길이 | 필수여부 | 비고 |
|-------------|-------------|------|---------|---------|------|
| API_KEY | 인증키 | String | 20 | 필수 | 이용기업 인증키 값 (이용기업 별로 발급됨) |
| API_ID | 업무코드 | String | 4 | 필수 | 나이스 연동: 1.3 API 목록 참조 |
| TR_SEQ | 거래일련번호 | String | 20 | 옵션 | 거래추적 용도 번호 |
---
### 5.2 [기업] 신용-신용요약정보 (OA12)
#### [INPUT]
| 개별 입력 ID | 개별 입력 명 | 타입 | 최대길이 | 필수여부 | 비고 |
|-------------|-------------|------|---------|---------|------|
| Companykey | 사업자정보 | String | 13 | 필수 | 조회할 기업의 사업자번호, 법인번호, 업체 코드 중 한 개만 입력 |
#### [OUTPUT]
| 출력 항목 | 반복여부 | 출력 항목 명 | 타입 | 최대길이 | 설명 |
|---------|---------|------------|------|---------|------|
| RSLT_CD | - | 결과코드 | String | 8 | 조회 결과 코드값, 정상 00000000 |
| RSLT_MSG | - | 결과메세지 | String | 255 | 조회 결과 메시지 |
| TR_SEQ | - | 거래일련번호 | String | 20 | 거래 추적용도 번호 |
| RSLT_DATA | - | 결과데이터 | Object | - | 나이스 결과데이터 |
| request | | 요청한 값 | Object | - | 단기연체정보 요청항목 |
| requestKey | | 요청 KEY | String | 13 | 사용자가요청한 companyKey |
| requestKeyType | | 요청한 KEY 타입 | String | 6 | BIZNO: 사업자번호, CRPNO: 법인번호, UPCHECD: 업체코드 |
| data | | 기업요약 신용정보 결과 | Object | | |
| listCount | | list 건수 | integer | | |
| creditSummaryList | | 기업신용 요약정보 | Array | | |
| shorttermOverdueCnt | ● | 단기연체정보(한국신용정보원) 건수 | integer | | |
| negativeInfoBbCnt | ● | 신용도판단정보(한국신용정보원) 건수 | integer | | |
| negativeInfoPbCnt | ● | 공공정보 건수 | integer | | |
| negativeInfoCbCnt | ● | 신용도판단정보(신용정보사) 건수 | integer | | |
| suspensionInfoCnt | ● | 당좌거래정지정보 건수 | integer | | |
| workoutCnt | ● | 법정관리/워크아웃정보 건수 | integer | | |
---
### 5.3 [기업]신용-단기연체정보 (한국신용정보원) (OA13)
#### [INPUT]
| 개별 입력 ID | 개별 입력 명 | 타입 | 최대길이 | 필수여부 | 비고 |
|-------------|-------------|------|---------|---------|------|
| Companykey | 사업자정보 | String | 13 | 필수 | 조회대상 사업자번호, 법인번호, 업체코드 중 한개만 입력 |
| reqDate | 기준일자 | String | 8 | 옵션 | 기본값(현재날짜(YYYYMMDD) 미입력시 최신일자 기준으로 조회) |
#### [OUTPUT]
| 출력 항목 | 반복여부 | 출력 항목 명 | 타입 | 최대길이 | 설명 |
|---------|---------|------------|------|---------|------|
| RSLT_CD | - | 결과코드 | String | 8 | 조회 결과 코드값, 정상 00000000 |
| RSLT_MSG | - | 결과 메시지 | String | 255 | 조회 결과 메시지 |
| TR_SEQ | - | 거래일련번호 | String | 20 | 거래 추적용도 번호 |
| RSLT_DATA | - | 결과데이터 | Object | - | 나이스 결과데이터 |
| request | | 요청한 값 | Object | - | 단기연체정보 요청항목 |
| requestKey | | 요청 KEY | String | 13 | 사용자가요청한 companyKey |
| requestKeyType | | 요청 KEY 타입 | String | 6 | BIZNO: 사업자번호, CRPNO: 법인번호, UPCHECD: 업체코드 |
| reqDate | | 기준일자 | String | 8 | |
| data | | | Object | | 기업신용 단기연체 결과 |
| listCount | | 단기연체정보 건수 | Integer | | |
| creditShorttermOverdueList | | 단기연체정보 | Array | | |
| count | ● | 단기연체정보건수 | Integer | | |
| rcno | ● | 차주대상번호 | String | | |
| rcnoKind | ● | 차주대상구분 | String | | 2: 사업자등록번호, 3: 법인등록번호 |
| name | ● | 기관명 | String | | |
| reqdate | ● | 요청일자 | String | | yyyymmdd |
| basedate | ● | 기준일자 | String | | yyyymmdd |
| organnizationsList | ● | 단기연체정보 기관별 정보 | Array | | |
| orgcd | ● | 한국신용정보원 | String | | |
| orgname | ● | 한국신용정보원기관명 | String | | |
| orgnameEng | ● | 한국신용정보원기관영문명 | String | | |
| principlaOduYn | ● | 연체금액여부(계정과목코드 6909) | String | | |
| accountSubjectsList | ● | 단기연체정보 계정과목별정보 | Array | | |
| acccd | ● | 계정과목코드 | String | | |
| accname | ● | 계정과목명 | String | | |
| kindcode1 | ● | 계정과목대과목코드 | String | | |
| kind1 | ● | 계정과목대과목명 | String | | |
| kindcode2 | ● | 계정과목중과목코드 | String | | |
| kind2 | ● | 계정과목중과목명 | String | | |
| categorycd | ● | 한국신용정보원만기코드 | String | | |
| category | ● | 한국신용정보원만기코드명 | String | | |
| accamt | ● | 거래금액 | String | | |
---
### 5.4 [기업]신용도 판단정보(공공정보 포함)(한국 신용정보원) (OA14)
#### [INPUT]
| 개별 입력 ID | 개별 입력 명 | 타입 | 최대길이 | 필수여부 | 비고 |
|-------------|-------------|------|---------|---------|------|
| Companykey | 사업자정보 | String | 13 | 필수 | 조회할 기업의 사업자번호, 법인번호, 업체코드 중 한개만 입력 |
#### [OUTPUT]
| 출력 항목 | 반복여부 | 출력 항목 명 | 타입 | 최대길이 | 설명 |
|---------|---------|------------|------|---------|------|
| RSLT_CD | - | 결과코드 | String | 8 | 조회 결과 코드값, 정상 00000000 |
| RSLT_MSG | - | 결과메세지 | String | 255 | 조회 결과 메시지 |
| TR_SEQ | - | 거래일련번호 | String | 20 | 거래 추적용도 번호 |
| RSLT_DATA | - | 결과데이터 | Object | - | 나이스 결과데이터 |
| request | | 요청한 값 | Object | - | 단기연체정보 요청항목 |
| requestKey | | 요청 KEY | String | 13 | 사용자가요청한 companyKey |
| requestKeyType | | 요청한 KEY 타입 | String | 6 | BIZNO: 사업자번호, CRPNO: 법인번호, UPCHECD: 업체코드 |
| data | | | Object | | 신용도판단정보 결과 |
| listCount | | list 건수 | Integer | | |
| creditNegativeInfoList | | 신용도판단정보 | Array | | |
| totaloccCnt | ● | 발생 총 건수 | integer | | |
| bbCnt | ● | 채무불이행건수 | integer | | |
| fdCnt | ● | 금용질서문란 건수 | String | | |
| pbCnt | ● | 공공기록정보건수 | integer | | |
| sbCnt | ● | 특수기록정보건수 | integer | | |
| totalrelCnt | ● | 해제 총건수 | integer | | |
| bbrelCnt | ● | 채무불이행 해제건수 | integer | | |
| fdrelCnt | ● | 금융질서문란 해제건수 | integer | | |
| pbrelCnt | ● | 공공기록정보 해제건수 | integer | | |
| sbrelCnt | ● | 특수기록정보 해제건수 | integer | | |
| negativeInfoDetailList | ● | 신용도판단정보 item | Array | | |
| typecode | ● | 유형구분코드 | String | | BB: 신용도판단정보(채무불이행), FD: 금융질서문란, PB: 공공정보, SB: 특수기록정보 |
| typename | ● | 용도판단정보 | String | | (한국 신용정보원), 신용도판단정보(공공기록정보) 등 |
| gubn | ● | 구분 | String | | |
| delayamt | ● | 연체금액 | String | | |
| causecode | ● | 등록코드 | String | | |
| causename | ● | 등록사유명 | String | | |
| causenameEng | ● | 등록사유영문명 | String | | |
| causecont | ● | 등록사유설명 | String | | |
| causedetail | ● | 등록사유상세설명 | String | | |
| regamt | ● | 등록금액 | String | | |
| regdate | ● | 등록일자 | String | | yyyymmdd |
| relscode | ● | 해제코드 | String | | |
| reldate | ● | 해재일자 | String | | yyyymmdd |
| orgname | ● | 발생기관명 | String | | |
| orgnameEng | ● | 발생기관영문명 | String | | |
| brcname | ● | 발생지점명 | String | | |
| occdate | ● | 발생일자 | String | | yyyymmdd |
---
### 5.5 [기업]신용-신용도 판단정보(신용정보사) (OA15)
#### [INPUT]
| 개별 입력 ID | 개별 입력 명 | 타입 | 최대길이 | 필수여부 | 비고 |
|-------------|-------------|------|---------|---------|------|
| Companykey | 사업자정보 | String | 13 | 필수 | 조회할 기업의 사업자번호, 법인번호, 업체코드 중 한개만 입력 |
#### [OUTPUT]
| 출력 항목 | 반복여부 | 출력 항목 명 | 타입 | 최대길이 | 설명 |
|---------|---------|------------|------|---------|------|
| RSLT_CD | - | 결과코드 | String | 8 | 조회 결과 코드값, 정상 00000000 |
| RSLT_MSG | - | 결과메세지 | String | 255 | 조회 결과 메시지 |
| TR_SEQ | - | 거래일련번호 | String | 20 | 거래 추적용도 번호 |
| RSLT_DATA | - | 결과데이터 | Object | - | 나이스 결과데이터 |
| request | | 요청한 값 | Object | - | 단기연체정보 요청항목 |
| requestKey | | 요청 KEY | String | 13 | 사용자가요청한 companyKey |
| requestKeyType | | 요청한 KEY 타입 | String | 6 | BIZNO: 사업자번호, CRPNO: 법인번호, UPCHECD: 업체코드 |
| data | | | Object | | 기업 신용 신용도판단 정보(신용정보사) 결과 |
| listCount | | list 건수 | Integer | | |
| creditNegativeInfoCdList | | | Array | | 기업 신용 신용도판단 정보(신용정보사) |
| typecode | ● | 유형구분코드 | String | | CB: 신용도판단정보(신용정보사) |
| typename | ● | 유형구분명 | String | | (예: 신용도판단정보(신용정보사)) |
| causecode | ● | 등록코드 | String | | |
| causename | ● | 등록사유 명 | String | | |
| causenameEng | ● | 등록사유영문명 | String | | |
| causecont | ● | 등록사유설명 | String | | |
| causedetail | ● | 등록사유상세설명 | String | | |
| regamt | ● | 등록금액 | String | | |
| regdate | ● | 등록일자 | String | | yyyymmdd |
| relscode | ● | 해제코드 | String | | |
| relsdate | ● | 해제일자 | String | | yyyymmdd |
| relsname | ● | 해제 명 | String | | |
| orgname | ● | 발생기관명 | String | | |
| orgnameEng | ● | 발생기관영문명 | String | | |
| brcname | ● | 발생지점명 | String | | |
| occdate | ● | 발생일자 | String | | yyyymmdd |
---
### 5.6 [기업]신용-당좌거래정지정보(금융결제원) (OA16)
#### [INPUT]
| 개별 입력 ID | 개별 입력 명 | 타입 | 최대길이 | 필수여부 | 비고 |
|-------------|-------------|------|---------|---------|------|
| Companykey | 사업자정보 | String | 13 | 필수 | 조회할 기업의 사업자번호, 법인번호, 업체코드 중 한개만 입력 |
#### [OUTPUT]
| 출력 항목 | 반복여부 | 출력 항목 명 | 타입 | 최대길이 | 설명 |
|---------|---------|------------|------|---------|------|
| RSLT_CD | - | 결과코드 | String | 8 | 조회 결과 코드값, 정상 00000000 |
| RSLT_MSG | - | 결과메세지 | String | 255 | 조회 결과 메시지 |
| TR_SEQ | - | 거래일련번호 | String | 20 | 거래 추적용도 번호 |
| RSLT_DATA | - | 결과데이터 | Object | - | 나이스 결과데이터 |
| request | | 요청한 값 | Object | - | 단기연체정보 요청항목 |
| requestKey | | 요청 KEY | String | 13 | 사용자가요청한 companyKey |
| requestKeyType | | 요청한 KEY 타입 | String | 6 | BIZNO: 사업자번호, CRPNO: 법인번호, UPCHECD: 업체코드 |
| data | | | Object | | 기업 신용 당좌거래정지정보 결과 |
| listCount | | list 건수 | Integer | | |
| creditSuspensionInfoList | | | Array | | 기업 신용 당좌거래정 지정보 |
| datSeq | ● | 데이터일련번호 | Integer | | |
| changeHouse | ● | 교환소 | String | 20 | |
| koreantrnm | ● | 업체 명 | String | 70 | |
| korrenprnm | ● | 대표자명 | String | 30 | |
| bizno | ● | 사업자등록번호 | String | 10 | |
| regno | ● | 주민등록번호 | String | 13 | |
| address | ● | 주소 | String | 100 | |
| occdate | ● | 발행일 | String | 8 | yyyymmdd |
| relsdate | ● | 해제일 | String | 8 | yyyymmdd |
---
### 5.7 [기업]신용-법정관리/워크아웃정보 (OA17)
#### [INPUT]
| 개별 입력 ID | 개별 입력 명 | 타입 | 최대길이 | 필수여부 | 비고 |
|-------------|-------------|------|---------|---------|------|
| Companykey | 사업자정보 | String | 13 | 필수 | 조회할 기업의 사업자번호, 법인번호, 업체코드 중 한개만 입력 |
| pageNo | 페이지 번호 | String | | | |
| pageSize | 페이지 사이즈 | String | | | |
#### [OUTPUT]
| 출력 항목 | 반복여부 | 출력 항목 명 | 타입 | 최대길이 | 설명 |
|---------|---------|------------|------|---------|------|
| RSLT_CD | - | 결과코드 | String | 8 | 조회 결과 코드값, 정상 00000000 |
| RSLT_MSG | - | 결과메세지 | String | 255 | 조회 결과 메시지 |
| TR_SEQ | - | 거래일련번호 | String | 20 | 거래 추적용도 번호 |
| RSLT_DATA | - | 결과데이터 | Object | - | 나이스 결과데이터 |
| request | | 요청한 값 | Object | - | 단기연체정보 요청항목 |
| requestKey | | 요청 KEY | String | 13 | 사용자가요청한 companyKey |
| requestKeyType | | 요청 KEY 타입 | String | 6 | BIZNO: 사업자번호, CRPNO: 법인번호, UPCHECD: 업체코드 |
| pageNo | | | integer | | |
| pageSize | | | integer | | |
| data | | | Object | | 법정관리/워크아웃정보 결과 |
| listCount | | list 건수 | Integer | | |
| totalCount | | 총 건수 | integer | | |
| creditworkoutList | | 기업 신용 법정관리/워크아웃정보 | Array | | |
| upchecd | ● | 업체코드 | String | 6 | |
| lglmgmtRldDate | ● | 법정관리관례일자 | String | 8 | |
| hngno | ● | 사건번호 | String | 14 | |
| lwccd | ● | 법원코드 | String | 3 | |
| lwccd | ● | 법원 명 | String | 100 | |
| crgJudgDeptnm | ● | 담당판사부서명 | String | 30 | |
| crgJudgNam | ● | 담당판사 명 | String | 100 | |
| korentrnm | ● | 업체 명 | String | 100 | |
| lglmgmtdivcd | ● | 법정관리유형코드 | String | 2 | |
| lglmgmtdivnm | ● | 법정관리유형명 | String | 150 | |
---
### 5.8 소스코딩 예제
#### 1. [기업]지표-주요경영지표 (OA07)
**[입력값]**
```json
{
"API_KEY": "업체 인증키",
"API_ID": "OA07",
"TR_SEQ": "123456789",
"Companykey": "2178149522",
"tpCd": "01",
"fatpCd": "0"
}
```
#### 2. [기업]개요-기본정보 (OA08)
**[입력값]**
```json
{
"API_KEY": "업체 인증키",
"API_ID": "OA08",
"TR_SEQ": "123456789",
"Companykey": "2178149522",
"idscdcg": "09"
}
```
#### 3. [검색]통합기업검색 (OA09)
**[입력값]**
```json
{
"API_KEY": "업체 인증키",
"API_ID": "OA09",
"TR_SEQ": "123456789",
"pageNo": "1",
"pageSize": "10",
"keyword": "삼성전자",
"upchecd": "380725"
}
```
#### 4. [기업]등급-기업평가등급 (OA10)
**[입력값]**
```json
{
"API_KEY": "업체 인증키",
"API_ID": "OA10",
"TR_SEQ": "123456789",
"Companykey": "2178149522",
"pageNo": "1",
"pageSize": "10",
"startDate": "20220101",
"endDate": "20240101"
}
```
#### 5. [기업]등급-WATCH 등급 (OA11)
**[입력값]**
```json
{
"API_KEY": "업체 인증키",
"API_ID": "OA11",
"TR_SEQ": "123456789",
"Companykey": "2178149522",
"addWatchRsn": "1",
"pageNo": "1",
"pageSize": "10",
"startDate": "20220101",
"endDate": "20240101"
}
```
#### 6. [기업]신용-신용요약정보 (OA12)
**[입력값]**
```json
{
"API_KEY": "업체 인증키",
"API_ID": "OA12",
"TR_SEQ": "123456789",
"Companykey": "2178149522"
}
```
#### 7. [기업]신용-단기연체정보(한국신용정보원) (OA13)
**[입력값]**
```json
{
"API_KEY": "업체 인증키",
"API_ID": "OA13",
"TR_SEQ": "123456789",
"Companykey": "2178149522",
"reqDate": "20220101"
}
```
#### 8. [기업]신용도-판단정보(공공정보 포함)(한국 신용정보원) (OA14)
**[입력값]**
```json
{
"API_KEY": "업체 인증키",
"API_ID": "OA14",
"TR_SEQ": "123456789",
"Companykey": "2178149522"
}
```
#### 9. [기업]신용-신용도 판단정보(신용정보사) (OA15)
**[입력값]**
```json
{
"API_KEY": "업체 인증키",
"API_ID": "OA15",
"TR_SEQ": "123456789",
"Companykey": "2178149522"
}
```
#### 10. [기업]신용-당좌거래정지정보(금융결제원) (OA16)
**[입력값]**
```json
{
"API_KEY": "업체 인증키",
"API_ID": "OA16",
"TR_SEQ": "123456789",
"Companykey": "2178149522"
}
```
#### 11. [기업]신용-법정관리/워크아웃정보 (OA17)
**[입력값]**
```json
{
"API_KEY": "업체 인증키",
"API_ID": "OA17",
"TR_SEQ": "123456789",
"Companykey": "5148145785",
"pageNo": "1",
"pageSize": "10"
}
```
---
## 6. 개발 유의사항
API를 호출하실 경우에는 자바스크립트, VB 스크립트 등의 클라이언트 사이트 스크립트 언어가 아닌 **서버 사이드 스크립트 언어(JSP, PHP, ASP 등)**로 호출하여 주셔야 정상적인 거래가 가능합니다.
### 서버 사이드 스크립트 사용 JSP 페이지 샘플
```jsp
<%@ page contentType="text/html; charset=utf-8"%>
<%@ page import="java.net.*"%>
<%@ page import = "java.io.*" %>
<%@ page import = "java.net.URLConnection" %>
<%@ page import = "javax.net.ssl.HttpsURLConnection" %>
<%
response.setHeader("Cache-Control","no-store"); // HTTP 1.1
response.setHeader("Pragma","no-cache"); // HTTP 1.0
response.setDateHeader("Expires", 0);
String url = "https://dev2.coocon.co.kr:8443/sol/gateway/oapi_relay.jsp";
byte[] resMessage = null;
HttpsURLConnection conn;
try {
conn = (HttpsURLConnection) new URL(url).openConnection();
conn.setDoInput(true);
conn.setDoOutput(true);
conn.setRequestMethod("POST");
conn.setRequestProperty("Content-Type","application/json");
conn.setUseCaches(false);
OutputStreamWriter os = new OutputStreamWriter(conn.getOutputStream());
JSONObject inputObj = new JSONObject();
inputObj.put("API_KEY","발급인증키");
inputObj.put("API_ID","업무코드");
inputObj.put("Companykey","사업자정보");
os.write(inputObj.toString());
os.flush();
os.close();
DataInputStream in = new DataInputStream(conn.getInputStream());
ByteArrayOutputStream bout = new ByteArrayOutputStream();
int bcount = 0;
byte[] buf = new byte[2048];
while (true) {
int n = in.read(buf);
if (n == -1) break;
bout.write(buf, 0, n);
}
bout.flush();
resMessage = bout.toByteArray();
conn.disconnect();
}
catch (MalformedURLException e) {
System.out.println("MalformedURLException");
}
catch (IOException e) {
e.printStackTrace();
}
//결과처리
String temp = new String(resMessage, "UTF-8");
temp = temp.replaceAll("\r\n","");
temp = temp.replaceAll("\r","");
temp = temp.replaceAll("\n","");
out.println(temp.trim());
%>
```
---
## [참조 1] 결과코드
| Code | 내용 |
|------|------|
| 00000000 | 정상처리되었습니다. |
| GWS06001 | 수신자료 포맷 오류. (REQ_DATA 미입력 오류로 입력값중에 개별입력값 확인 필요) |
| GWS06002 | 수신자료 변환 오류. (입력값 JSON 형식인지 확인필요) |
| GWS06003 | 잘못된 전문번호 입니다. (API ID 오입력으로 API ID 값 확인 필요) |
| GWS06004 | 응답시간을 초과하였습니다. (업무 담당자에게 문의) |
| GWS06005 | 결과처리중 오류가 발생하였습니다. (업무 담당자에게 문의) |
| GWS06006 | 정의되지 않은 응답오류입니다. (업무 담당자에게 문의) |
| GWS06013 | 거래고유번호(TR_SEQ)이 미입력되었습니다. |
| GWS06020 | 서비스가능한 시간대가 아닙니다. |
| GWS09979 | 내부 서버오류 (업무 담당자에게 문의) |
| GWS09984 | 잘못된 인증키 입니다. (API_KEY 값 오입력으로 API KEY 값 확인 필요) |
| GWS09985 | 보안키(API_KEY)값이 미입력되었습니다. |
| GWS09989 | 허용된 아이피가 아닙니다 (접속아이피 확인필요) |
| GWS09990 | 사용가능 아이피가 등록되지 않았습니다. |
| GWS09993 | 서비스 설정값이 잘못되었습니다. (업무 담당자에게 문의) |
| GWS09998 | 인증과정중 알수없는 오류가 발생했습니다. |
| OAPI0005 | Companykey 미입력 되었습니다. |

33
sam/docker/api/opcache.ini
View File

@@ -1,33 +0,0 @@
; OPcache 설정 (성능 향상)
; PHP OPcode 캐시를 활성화하여 애플리케이션 성능을 크게 향상시킵니다
[opcache]
; OPcache 활성화
opcache.enable=1
; CLI 환경에서도 OPcache 활성화 (개발 환경)
opcache.enable_cli=1
; OPcache 메모리 사용량 (MB)
; 256MB 권장 (프로젝트 크기에 따라 조정) - 개발 환경 성능 향상
opcache.memory_consumption=256
; 내부 문자열 버퍼 크기 (MB)
opcache.interned_strings_buffer=16
; 최대 가속화 파일 수
opcache.max_accelerated_files=20000
; 타임스탬프 검증 활성화 (개발 환경)
; 프로덕션에서는 0으로 설정하여 성능 최적화
opcache.validate_timestamps=1
; 재검증 주기 (초) - 개발 환경 성능 향상을 위해 단축
; validate_timestamps가 1일 때만 사용됨
opcache.revalidate_freq=1
; 빠른 종료 활성화
opcache.fast_shutdown=1
; 최적화 레벨 (0-7, 높을수록 느리지만 더 최적화됨)
opcache.optimization_level=0x7FFFBFFF

36
sam/docker/api/supervisord.conf
View File

@@ -1,36 +0,0 @@
[supervisord]
nodaemon=true
[program:php-fpm]
command=/usr/local/sbin/php-fpm
[program:nginx]
command=nginx -g "daemon off;"
[program:queue-worker]
command=php /var/www/api/artisan queue:work database --queue=api,default --sleep=3 --tries=3 --timeout=1800 --max-jobs=100 --max-time=3600
process_name=%(program_name)s_%(process_num)02d
numprocs=1
directory=/var/www/api
autostart=true
autorestart=true
startsecs=5
startretries=3
stopwaitsecs=1830
stdout_logfile=/var/www/api/storage/logs/queue-worker.log
stdout_logfile_maxbytes=5MB
stderr_logfile=/var/www/api/storage/logs/queue-worker-error.log
stderr_logfile_maxbytes=5MB
[program:scheduler]
command=bash -c "while true; do php /var/www/api/artisan schedule:run --no-interaction; sleep 60; done"
process_name=%(program_name)s
numprocs=1
directory=/var/www/api
autostart=true
autorestart=true
startsecs=0
stdout_logfile=/var/www/api/storage/logs/scheduler.log
stdout_logfile_maxbytes=5MB
stderr_logfile=/var/www/api/storage/logs/scheduler-error.log
stderr_logfile_maxbytes=5MB

225
sam/docker/docker-compose.yml
View File

@@ -1,225 +0,0 @@
services:
nginx:
image: nginx:latest
ports:
- "80:80"
- "443:443"
volumes:
- /home/aweso/sam/api:/var/www/api
- /home/aweso/sam/admin:/var/www/admin
- /home/aweso/sam/mng:/var/www/mng
- /home/aweso/sam/5130:/var/www/5130
- /home/aweso/sam/docker/nginx/nginx.conf:/etc/nginx/nginx.conf:ro
- /home/aweso/sam/docker/nginx/ssl:/etc/nginx/ssl:ro
command: >
sh -c "rm -f /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"
depends_on:
- api
- admin
- mng
- react
- design
- sales
- php73
networks:
- samnet
api:
build:
context: .
dockerfile: /home/aweso/sam/docker/api/Dockerfile
volumes:
- /home/aweso/sam/api:/var/www/api
- api_vendor:/var/www/api/vendor
- api_node_modules:/var/www/api/node_modules
- /home/aweso/sam/docker/api/nginx.conf:/etc/nginx/conf.d/default.conf
- /home/aweso/sam/docker/api/supervisord.conf:/etc/supervisor/conf.d/supervisord.conf
- /home/aweso/sam/docker/api/uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
- /home/aweso/sam/docker/api/opcache.ini:/usr/local/etc/php/conf.d/opcache.ini
- /home/aweso/sam/docker/mysql/client-skip-ssl.cnf:/etc/mysql/conf.d/disable-ssl.cnf:ro
environment:
- DB_HOST=sam-mysql-1
- DB_PORT=3306
- DB_DATABASE=samdb
- DB_USERNAME=samuser
- DB_PASSWORD=sampass
networks:
- samnet
working_dir: /var/www/api
admin:
build:
context: .
dockerfile: /home/aweso/sam/docker/admin/Dockerfile
volumes:
- /home/aweso/sam/admin:/var/www/admin
- admin_vendor:/var/www/admin/vendor
- admin_node_modules:/var/www/admin/node_modules
- /home/aweso/sam/docker/admin/nginx.conf:/etc/nginx/conf.d/default.conf
- /home/aweso/sam/docker/admin/supervisord.conf:/etc/supervisor/conf.d/supervisord.conf
- /home/aweso/sam/docker/admin/uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
environment:
- DB_HOST=sam-mysql-1
- DB_PORT=3306
- DB_DATABASE=samdb
- DB_USERNAME=samuser
- DB_PASSWORD=sampass
networks:
- samnet
working_dir: /var/www/admin
mng:
build:
context: .
dockerfile: mng/Dockerfile
volumes:
- ../mng:/var/www/mng
- mng_vendor:/var/www/mng/vendor
- mng_node_modules:/var/www/mng/node_modules
- ./mng/nginx.conf:/etc/nginx/conf.d/default.conf
- ./mng/supervisord.conf:/etc/supervisor/conf.d/supervisord.conf
- ./mng/opcache.ini:/usr/local/etc/php/conf.d/opcache.ini
- ./mng/uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
# - ./mng/www.conf:/usr/local/etc/php-fpm.d/www.conf
- ../api/storage/logs:/var/www/api/storage/logs:ro
- ./mysql/client-skip-ssl.cnf:/etc/mysql/conf.d/disable-ssl.cnf:ro
- ../sales/apikey:/var/www/sales/apikey:ro # Google 서비스 계정 파일 접근용
- ../sales:/var/www/sales-docs:ro # 영업 PPTX 문서 접근용
# shared-storage 제거됨 → mng/storage/app/tenants 로 이동 (2026-02-23)
- ../docs:/var/www/docs:ro # SAM 프로젝트 문서 (RAG 검색용)
environment:
- DB_HOST=sam-mysql-1
- DB_PORT=3306
- DB_DATABASE=samdb
- DB_USERNAME=samuser
- DB_PASSWORD=sampass
networks:
- samnet
working_dir: /var/www/mng
react:
build:
context: /home/aweso/sam
dockerfile: docker/react/Dockerfile
volumes:
- /home/aweso/sam/react:/app
- /app/node_modules
- /app/.next
environment:
- NEXT_PUBLIC_API_URL=https://api.sam.kr
- NEXT_PUBLIC_ADMIN_URL=https://admin.sam.kr
- NEXT_PUBLIC_API_KEY=42Jfwc6EaRQ04GNRmLR5kzJp5UudSOzGGqjmdk1a
- NEXT_PUBLIC_APP_NAME=SAM
- NODE_ENV=development
- NODE_TLS_REJECT_UNAUTHORIZED=0
extra_hosts:
- "api.sam.kr:host-gateway"
networks:
- samnet
working_dir: /app
design:
build:
context: /home/aweso/sam
dockerfile: docker/design/Dockerfile
volumes:
- /home/aweso/sam/design:/app
- /app/node_modules
environment:
- NODE_ENV=development
networks:
- samnet
working_dir: /app
sales:
build:
context: .
dockerfile: /home/aweso/sam/docker/sales/Dockerfile
volumes:
- /home/aweso/sam/sales:/var/www/sales
- sales_vendor:/var/www/sales/vendor
- sales_node_modules:/var/www/sales/node_modules
- /home/aweso/sam/docker/sales/nginx.conf:/etc/nginx/conf.d/default.conf
- /home/aweso/sam/docker/sales/supervisord.conf:/etc/supervisor/conf.d/supervisord.conf
- /home/aweso/sam/docker/sales/uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
environment:
- TZ=Asia/Seoul
networks:
- samnet
working_dir: /var/www/sales
php73:
build:
context: .
dockerfile: /home/aweso/sam/docker/5130/Dockerfile
volumes:
- /home/aweso/sam/5130:/var/www/5130
- php73_vendor:/var/www/5130/vendor
- php73_node_modules:/var/www/5130/node_modules
- /home/aweso/sam/docker/5130/nginx.conf:/etc/nginx/conf.d/default.conf
- /home/aweso/sam/docker/5130/supervisord.conf:/etc/supervisor/conf.d/supervisord.conf
- /home/aweso/sam/docker/5130/uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
environment:
- DB_HOST=sam-mysql-1
- DB_PORT=3306
- DB_DATABASE=chandj
- DB_USERNAME=root
- DB_PASSWORD=root
- TZ=Asia/Seoul
networks:
- samnet
working_dir: /var/www/5130
mysql:
image: mysql:8.0
restart: always
environment:
MYSQL_DATABASE: samdb
MYSQL_USER: samuser
MYSQL_PASSWORD: sampass
MYSQL_ROOT_PASSWORD: root
TZ: Asia/Seoul
command: --sql-mode="NO_ENGINE_SUBSTITUTION" --default-time-zone="+09:00" --default-authentication-plugin=mysql_native_password
volumes:
- db_data:/var/lib/mysql
- /home/aweso/sam/docker/mysql/init.sql:/docker-entrypoint-initdb.d/01-init.sql
# - /home/aweso/sam/chandj_dump.sql:/docker-entrypoint-initdb.d/02-chandj-dump.sql
ports:
- "3306:3306"
networks:
- samnet
phpmyadmin:
image: phpmyadmin:latest
restart: always
ports:
- "8080:80"
environment:
- PMA_ARBITRARY=1
- PMA_HOST=mysql
- PMA_PORT=3306
- PMA_USER=root
- PMA_PASSWORD=root
- TZ=Asia/Seoul
depends_on:
- mysql
networks:
- samnet
volumes:
db_data:
# 의존성 디렉토리 분리 (성능 향상)
api_vendor:
api_node_modules:
mng_vendor:
mng_node_modules:
admin_vendor:
admin_node_modules:
sales_vendor:
sales_node_modules:
php73_vendor:
php73_node_modules:
networks:
samnet:
driver: bridge

43
sam/docker/mng/Dockerfile
View File

@@ -1,43 +0,0 @@
FROM php:8.4-fpm
# 필수 패키지/확장 설치
RUN apt-get update && apt-get install -y \
git \
unzip \
libzip-dev \
libicu-dev \
libxml2-dev \
libpng-dev \
libfreetype-dev \
libjpeg62-turbo-dev \
nginx \
supervisor \
libreoffice-writer-nogui \
fonts-nanum fonts-nanum-extra \
ffmpeg \
wget \
&& docker-php-ext-configure gd --with-freetype --with-jpeg \
&& docker-php-ext-install zip mysqli pdo pdo_mysql intl soap gd \
# Pretendard 폰트 설치 (Word→PDF 변환 시 한글 폰트 지원)
&& mkdir -p /usr/share/fonts/truetype/pretendard \
&& wget -q "https://github.com/orioncactus/pretendard/releases/download/v1.3.9/Pretendard-1.3.9.zip" -O /tmp/pretendard.zip \
&& unzip -jo /tmp/pretendard.zip "*/Pretendard-*.otf" -d /usr/share/fonts/truetype/pretendard/ \
&& rm -f /tmp/pretendard.zip \
&& fc-cache -f
# Composer 설치
COPY --from=composer:2 /usr/bin/composer /usr/bin/composer
# 타임존 설정
RUN echo "date.timezone=Asia/Seoul" > /usr/local/etc/php/conf.d/timezone.ini
# 포트 개방
EXPOSE 80
# supervisor로 nginx+php-fpm 동시 기동
CMD ["/usr/bin/supervisord"]
# entrypoint.sh 복사 및 권한
COPY ./mng/entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh
ENTRYPOINT ["/entrypoint.sh"]

19
sam/docker/mng/entrypoint.sh
View File

@@ -1,19 +0,0 @@
#!/bin/bash
# 0. Nginx 기본 사이트 설정 비활성화 (충돌 방지)
rm -f /etc/nginx/sites-enabled/default
# 1. 퍼미션 설정 (mng)
chown -R www-data:www-data /var/www/mng/storage /var/www/mng/bootstrap/cache
chmod -R 775 /var/www/mng/storage /var/www/mng/bootstrap/cache
# 2. tenant storage 퍼미션 (명함/신분증/통장/게시판 첨부파일 등)
mkdir -p /var/www/mng/storage/app/tenants
chown -R www-data:www-data /var/www/mng/storage/app/tenants
chmod -R 775 /var/www/mng/storage/app/tenants
# 3. storage:link (실패해도 무시)
cd /var/www/mng && php artisan storage:link || true
# 4. supervisor 실행(nginx+php-fpm)
exec /usr/bin/supervisord

32
sam/docker/mng/nginx.conf
View File

@@ -1,32 +0,0 @@
server {
listen 80;
server_name _;
root /var/www/mng/public;
index index.php index.html;
access_log /var/log/nginx/mng_access.log;
error_log /var/log/nginx/mng_error.log;
# 심볼릭 링크 허용
disable_symlinks off;
# tenant-storage 정적 파일 서빙
location /tenant-storage/ {
alias /var/www/mng/storage/app/tenants/;
expires 7d;
add_header Cache-Control "public, immutable";
}
location / {
try_files $uri $uri/ /index.php?$query_string;
}
location ~ \.php$ {
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
fastcgi_read_timeout 300s;
}
}

23
sam/docker/mng/supervisord.conf
View File

@@ -1,23 +0,0 @@
[supervisord]
nodaemon=true
[program:php-fpm]
command=/usr/local/sbin/php-fpm
[program:nginx]
command=nginx -g "daemon off;"
[program:queue-worker]
command=php /var/www/mng/artisan queue:work database --queue=mng,default --sleep=3 --tries=1 --timeout=1800 --max-jobs=10 --max-time=3600
process_name=%(program_name)s_%(process_num)02d
numprocs=2
directory=/var/www/mng
autostart=true
autorestart=true
startsecs=5
startretries=3
stopwaitsecs=1830
stdout_logfile=/var/www/mng/storage/logs/queue-worker.log
stdout_logfile_maxbytes=5MB
stderr_logfile=/var/www/mng/storage/logs/queue-worker-error.log
stderr_logfile_maxbytes=5MB

876
sam/docs/CLAUDE.md
View File

@@ -1,876 +0,0 @@
# Claude Code 전역 설정
> 이 파일은 모든 프로젝트에 적용되는 전역 규칙입니다.
## 메모리
### sam설명
SAM 프로젝트의 기술적 개요 문서입니다. 이 문서를 참조하면 SAM 프로젝트가 무엇인지 이해할 수 있습니다.
**파일 경로**: `/home/aweso/sam/docs/SAM_PROJECT_OVERVIEW_FOR_AI.md`
**핵심 요약**:
- **회사**: 주일/경동 (블라인드/스크린 제조업체)
- **프로젝트**: SAM (Smart Automation Management) - 차세대 ERP/MES 통합 시스템
- **기술 스택**: Laravel 12 + HTMX + Tailwind CSS + MySQL 8.0 (PHP 8.4)
- **아키텍처**: Multi-tenant (tenant_id 기반 데이터 격리)
- **레거시**: 5130.co.kr (PHP 기반) → SAM으로 마이그레이션 중
**사용자가 'sam설명'이라고 말하면**:
1. 위 경로의 `SAM_PROJECT_OVERVIEW_FOR_AI.md` 파일을 읽어서 전체 내용을 파악하세요
2. SAM 프로젝트의 비즈니스 도메인, 기술 스택, 현재 작업 현황을 이해한 상태로 작업하세요
---
## Git 커밋 규칙 (최우선 필수 규칙)
> **경고: 이 규칙은 절대 누락되어서는 안 됩니다!**
> **기준 문서**: `sam/docs/standards/git-conventions.md`
### 필수 수행 절차
**모든 코드 작업 완료 후 반드시 다음을 수행:**
1. 변경된 파일이 있는 Git 저장소로 이동
2. `git status`로 변경사항 확인
3. `git add <파일들>` 로 스테이징
4. `git commit -m "type: [scope] 작업내용"` 로 커밋
### 커밋 메시지 형식 (필수)
```
type: [scope] 작업내용
- 세부항목 (생략가능)
- 세부항목 2
Issue: URL (생략가능)
```
**예시:**
```bash
feat: [calendar] 달력 기능 개선
- 클릭시 오류 기능 개선
- 색상 변경
```
```bash
fix: [auth] 로그인 시 세션 만료 오류 수정
```
### Commit Types
| Type | 설명 | 예시 |
|------|------|------|
| `feat` | 새로운 기능 추가 | `feat: [file] 파일 업로드 기능 추가` |
| `fix` | 버그 수정 | `fix: [auth] 세션 만료 오류 수정` |
| `chore` | 설정, 빌드 등 변경 | `chore: composer 패키지 업데이트` |
| `refactor` | 프로덕션 코드 리팩토링 | `refactor: [user] 서비스 메서드 분리` |
| `style` | 포맷/코딩 스타일 수정 | `style: Pint 포맷팅 적용` |
| `test` | 테스트 추가/수정 | `test: Product API 테스트 추가` |
| `docs` | 문서 변경 | `docs: API 문서 업데이트` |
### Claude 서명 제외 (필수)
```
❌ Co-Authored-By: Claude <noreply@anthropic.com> — 포함 금지
❌ 🤖 Generated with Claude Code — 포함 금지
```
- Git hooks로 자동 제거됨
- 간결하고 명확한 한글 커밋 메시지만 유지
### 푸시 정책
- **사용자가 수동으로 푸시 진행**
- 자동 푸시 하지 않음
- 커밋 후 푸시 여부를 묻지 않음
### Claude Code 설정 파일도 커밋 대상
다음 파일들이 변경되면 반드시 커밋:
| 파일/폴더 | 설명 | 커밋 예시 |
|-----------|------|----------|
| `CLAUDE.md` | 프로젝트 설정 | `docs: CLAUDE.md 규칙 업데이트` |
| `claudedocs/` | Claude 관련 문서 | `docs: 기능 분석 문서 추가` |
| `.claude/settings.json` | Claude 설정 | `chore: Claude 설정 변경` |
| `agents/`, `skills/` | 커스텀 에이전트/스킬 | `feat: [claude] 새 스킬 추가` |
### 커밋 전 체크리스트
- [ ] `./vendor/bin/pint` 실행 (코드 포맷팅, 해당 시)
- [ ] `git diff`로 변경사항 검토
- [ ] 불필요한 파일 제외 (.env, node_modules 등)
- [ ] 변경된 파일이 있는 저장소에서 git add → git commit
- [ ] CLAUDE.md, claudedocs/, agents/, skills/ 변경 확인 → git commit
- [ ] 커밋 메시지: `type: [scope] 한글 작업내용` 형식 준수
- [ ] Co-Authored-By 서명 미포함 확인
---
## 주요 프로젝트 경로
| 경로 | 설명 | Git 저장소 |
|------|------|-----------|
| `/home/aweso/sam/mng` | 관리자 웹 (Laravel) | 독립 저장소 |
| `/home/aweso/sam/api` | API 서버 (Laravel) | 독립 저장소 |
| `/home/aweso/sam/react` | 프론트엔드 (Next.js) | 독립 저장소 |
**각 폴더는 독립적인 Git 저장소입니다. 해당 폴더에서 git 명령을 실행해야 합니다.**
> **서버 경로 참고**:
> - 개발/운영 서버 모두 `/home/webservice/` 하위에 동일한 구조로 배치
> - 서버: `/home/webservice/api`, `/home/webservice/mng`, `/home/webservice/react`, `/home/webservice/sales`
---
## 서버 직접 접근 금지 (최우선 필수 규칙)
> **경고: 운영/개발 서버에 SSH로 직접 접속하여 파일을 수정하거나 명령을 실행하지 마세요!**
> **2026-02-21 사고**: Claude가 서버에 SSH로 직접 접속하여 설정을 변경한 결과 502 Bad Gateway 발생. 개발팀장이 복구함.
### 핵심 원칙
서버는 **개발팀장이 관리**한다. Claude는 서버에 절대 직접 접근하지 않는다.
### 금지 사항
```
❌ ssh pro@114.203.209.83 ... 로 서버 접속 금지
❌ ssh hskwon@114.203.209.83 ... 로 서버 접속 금지
❌ 서버에서 파일 수정, 프로세스 종료/시작, 설정 변경 금지
❌ 서버에서 npm run build, npm start, node server.js 등 실행 금지
❌ 서버에서 git pull, composer install, php artisan 등 실행 금지
❌ scp, rsync로 서버에 파일 직접 전송 금지
```
### 허용 사항
```
✅ 로컬에서 코드 작성 및 수정
✅ 로컬에서 git add → git commit
✅ 사용자에게 git push 안내 (사용자가 수동으로 실행)
✅ 사용자에게 서버 배포 절차 안내 (사용자가 수동으로 실행)
```
### 서버 접속 정보
| 서버 | 호스트 | 계정 | 역할 |
|------|--------|------|------|
| 개발 서버 | `114.203.209.83` | `pro`, `hskwon` | 개발/스테이징 + Jenkins CI/CD + Gitea |
| 운영 서버 | (신규, 미확정) | 별도 계정 | 정식 서비스 |
> **참고**: Jenkins(`114.203.209.83:8080`)와 Gitea(`114.203.209.83:3000`)는 개발 서버에서 운영한다.
### 배포 흐름 (Jenkins CI/CD)
```
Claude 역할 Jenkins (자동) 운영 서버
┌───────────────────┐ ┌──────────────────┐ ┌──────────────┐
│ 코드 작성/수정 │ │ │ │ │
│ git add / commit │ │ │ │ │
│ │─push──→ │ Gitea Webhook │ │ │
│ │(사용자) │ → Jenkins 빌드 │ │ │
│ │ │ → Lint/Test │ │ │
│ │ │ → SSH Deploy ────│──→ │ git pull │
│ │ │ │ │ composer │
│ │ │ │ │ migrate │
└───────────────────┘ └──────────────────┘ └──────────────┘
```
> **브랜치 전략**: `develop` → 개발 서버 (자동 배포), `main`/`master` → 운영 서버 (PR 머지 + 팀장 승인)
### 서버 작업이 필요한 경우
사용자에게 명령어를 안내만 한다:
```
서버에서 다음 명령을 실행해주세요:
cd /home/webservice/api && git pull && composer install && php artisan migrate
```
### 체크리스트 (모든 작업 시)
- [ ] SSH 명령 사용하지 않음
- [ ] 서버 파일 직접 수정하지 않음
- [ ] 배포가 필요하면 사용자에게 안내만 제공
- [ ] git push까지만 Claude 역할
---
## React 빌드/배포 정책 (필수 규칙)
> **경고: React(Next.js) 빌드를 운영 서버에서 직접 실행하지 않는다!**
### 배경
개발 서버(2코어, 3.8GB RAM + Swap 4GB)에서 Jenkins가 React 빌드를 수행한다.
Jenkins 빌드 실패 시 로컬(WSL)에서 빌드 후 결과물을 서버에 배포한다(fallback).
### 금지 사항
```
❌ 운영 서버에서 npm run build 실행 금지
❌ 서버 SSH 접속 후 빌드 명령 실행 금지
❌ Claude가 직접 npm run build 실행 금지 (로컬 포함)
```
### 빌드/배포 방법 (Jenkins 자동화)
```
Claude 역할 Jenkins (자동) 운영 서버
┌─────────────────┐ ┌──────────────────┐ ┌──────────────┐
│ 코드 작성/수정 │ │ Checkout │ │ │
│ git commit │─push──→ │ Install + Lint │ │ │
│ │(사용자) │ Build (Next.js) │ │ │
│ │ │ Package (tar.gz) │──scp→ │ 압축 해제 │
│ │ │ │ │ node 재시작 │
└─────────────────┘ └──────────────────┘ └──────────────┘
```
> **Fallback**: Jenkins 빌드 실패(OOM) 시 로컬에서 `react/deploy.sh`로 수동 배포
### 빌드가 필요한 상황
사용자에게 다음과 같이 안내한다:
```
React 코드가 변경되었습니다. git push 후 Jenkins가 자동 배포합니다.
(Jenkins 실패 시 로컬에서 deploy.sh로 수동 배포해주세요.)
```
---
## 데이터베이스 아키텍처 (필수 규칙)
> **경고: 이 규칙을 반드시 준수하세요!**
### 핵심 원칙
**모든 데이터베이스 관련 파일은 API 프로젝트에서만 관리합니다.**
| 항목 | API (`/home/aweso/sam/api`) | MNG (`/home/aweso/sam/mng`) |
|------|----------------------------|----------------------------|
| 마이그레이션 | ✅ 여기에 생성 | ❌ 생성 금지 |
| 시더 | ✅ 여기에 생성 | ⚠️ MNG 전용만 허용 |
| 팩토리 | ✅ 여기에 생성 | ❌ 생성 금지 |
### 금지 사항
```
❌ /home/aweso/sam/mng/database/migrations/ 에 파일 생성 금지
❌ MNG에서 테이블 생성/수정 마이그레이션 작성 금지
```
### 허용 사항
```
✅ /home/aweso/sam/api/database/migrations/ 에 모든 마이그레이션 생성
✅ MNG에서는 MngMenuSeeder 같은 MNG 전용 시더만 허용
```
### 마이그레이션 실행
```bash
# 로컬: 마이그레이션은 반드시 API 컨테이너에서 실행
docker exec sam-api-1 php artisan migrate
# 개발 서버: Docker 없음, 직접 실행
cd /home/webservice/api && php artisan migrate
# 운영 서버: --force 플래그 필수 (production 환경)
cd /home/webservice/api && php artisan migrate --force
# MNG에서 마이그레이션 실행 금지 (로컬/서버 모두)
```
### DB 환경 분리
| 환경 | DB명 | 호스트 | 용도 |
|------|------|--------|------|
| 로컬 (Docker) | `samdb` | `sam-mysql-1:3306` | 개발/테스트 |
| 개발 서버 | `samdb` | `localhost` | 스테이징 |
| 운영 서버 | `sam_prod` | `localhost` | 정식 서비스 |
| 통계 DB | `sam_stat` | 동일 서버 | StatMonitorService 전용 |
> **참고**: `sam_stat`은 API/MNG 모두 `config/database.php`의 별도 connection으로 접속한다.
### 이유
- MNG: 프론트엔드/관리자 화면 담당 (컨트롤러, 뷰, 라우트)
- API: 백엔드/데이터베이스 담당 (마이그레이션, 모델 정의, API)
- 단일 DB를 두 프로젝트가 공유하므로 마이그레이션은 한 곳에서만 관리
---
## 메뉴 관리 규칙 (필수)
> **경고: 메뉴 시더(Seeder)를 절대 실행하지 마세요!**
### 배경
메뉴 시더 실행 시 부서별 권한 설정(permission_overrides)이 초기화되는 문제가 반복 발생합니다.
메뉴 ID가 변경되면 기존 부서-메뉴 권한 매핑이 깨지기 때문입니다.
### 금지 사항
```
❌ php artisan db:seed --class=MngMenuSeeder 실행 금지
❌ php artisan db:seed --class=*MenuSeeder 실행 금지
❌ 메뉴 시더 파일 생성 금지
❌ 메뉴 데이터를 일괄 삭제 후 재생성하는 방식 금지
```
### 메뉴 변경 시 올바른 절차
메뉴 추가/수정/삭제/이동이 필요할 때는 **사용자에게 수동 실행 안내**를 제공합니다:
1. **tinker 명령어를 안내** (사용자가 직접 실행)
2. **또는 SQL 쿼리를 안내** (사용자가 phpMyAdmin 등에서 직접 실행)
3. **절대 시더를 만들어 실행하지 않음**
### 안내 예시
```
메뉴를 추가하려면 아래 명령을 서버에서 실행해 주세요:
# 개발 서버
ssh pro@114.203.209.83 "cd /home/webservice/mng && php artisan tinker --execute=\"
App\\Models\\Commons\\Menu::create([
'tenant_id' => 1,
'parent_id' => <부모ID>,
'name' => '새 메뉴',
'url' => '/new-menu',
'icon' => 'icon-name',
'sort_order' => 1,
'is_active' => true,
]);
\""
# 운영 서버 (동일 경로, 서버 주소만 변경)
ssh <운영계정>@<운영서버IP> "cd /home/webservice/mng && php artisan tinker --execute=\"...동일...\""
```
### 체크리스트 (메뉴 변경 요청 시)
- [ ] 시더 파일 생성하지 않음
- [ ] 시더 실행하지 않음
- [ ] tinker 또는 SQL로 개별 레코드만 수정
- [ ] 변경 후 부서 권한 설정이 유지되는지 확인
---
## 실행 환경 (필수 인지)
> **중요: 로컬 / 개발 서버 / 운영 서버의 환경이 다릅니다!**
### 환경 비교 (3-Tier)
| 항목 | 로컬 (WSL) | 개발 서버 | 운영 서버 |
|------|-----------|----------|----------|
| **구성 방식** | Docker 컨테이너 | Bare-metal (네이티브) | Bare-metal (네이티브) |
| **PHP** | 컨테이너 내부 (8.4) | 직접 설치 (8.4) | 직접 설치 (8.4) |
| **MySQL** | 컨테이너 (sam-mysql-1) | 직접 설치 (8.0) | 직접 설치 (8.0) |
| **Nginx** | 컨테이너 (sam-nginx-1) | 직접 설치 | 직접 설치 |
| **명령 실행** | `docker exec` 필요 | 직접 실행 | 직접 실행 |
| **서버 IP** | localhost | `114.203.209.83` | (신규, 미확정) |
| **추가 서비스** | — | Jenkins, Gitea | — |
| **DB** | `samdb` | `samdb` | `sam_prod` |
> **배경**: 서버는 Docker가 무거워서 PHP, Nginx, MySQL 등을 네이티브로 설치하여 운영한다.
### 로컬 환경 (Docker)
PHP, Laravel, Node.js 등이 **Docker 컨테이너 안에** 설치되어 있다.
로컬 PC(WSL)에는 이런 도구들이 없으므로, 반드시 Docker 컨테이너를 통해 실행한다.
```
로컬 PC (WSL)
└── Docker
├── sam-mng-1 ← PHP + Laravel (MNG 앱)
├── sam-api-1 ← PHP + Laravel (API 앱)
├── sam-mysql-1 ← MySQL DB
└── sam-nginx-1 ← Nginx 웹서버
```
### 서버 환경 (Bare-metal — 개발/운영 동일 구조)
서버에는 Docker가 없다. PHP 8.4, Nginx, MySQL 8.0이 직접 설치되어 있다.
```
개발 서버 (114.203.209.83) 운영 서버 (신규)
├── Nginx ├── Nginx
├── PHP-FPM (3 pools) ├── PHP-FPM (3 pools)
│ ├── api.sock │ ├── api.sock
│ ├── mng.sock │ ├── mng.sock
│ └── sales.sock │ └── sales.sock
├── MySQL 8.0 (samdb) ├── MySQL 8.0 (sam_prod)
├── Supervisor ├── Supervisor
│ ├── sam-api-worker (x1) │ ├── sam-api-worker (x1)
│ ├── sam-mng-worker (x2) │ ├── sam-mng-worker (x2)
│ └── sam-api-scheduler │ └── sam-api-scheduler
├── Node.js (React SSR :3000) ├── Node.js (React SSR :3000)
├── Jenkins (:8080) │
├── Gitea (:3000) │
├── /home/webservice/api ├── /home/webservice/api
├── /home/webservice/mng ├── /home/webservice/mng
├── /home/webservice/react ├── /home/webservice/react
└── /home/webservice/sales └── /home/webservice/sales
```
### 도메인 매핑
| 서비스 | 로컬 (Docker) | 개발 서버 | 운영 서버 |
|--------|--------------|----------|----------|
| React (사용자) | `dev.sam.kr` | `dev.codebridge-x.com` | `codebridge-x.com` |
| API | `api.sam.kr` | `api.dev.codebridge-x.com` | `api.codebridge-x.com` |
| MNG (관리자) | `mng.sam.kr` | `admin.codebridge-x.com` | `mng.codebridge-x.com` |
| Sales | `sales.sam.kr` | `sales.dev.codebridge-x.com` | `sales.codebridge-x.com` |
| 5130 (레거시) | `5130.sam.kr` | — | — |
### 명령어 비교 (로컬 vs 개발 vs 운영)
| 작업 | 로컬 (Docker) | 개발/운영 서버 (네이티브) |
|------|--------------|-------------------------|
| artisan 실행 | `docker exec sam-api-1 php artisan <명령>` | `cd /home/webservice/api && php artisan <명령>` |
| composer 실행 | `docker exec sam-api-1 composer install` | `cd /home/webservice/api && composer install` |
| 마이그레이션 | `docker exec sam-api-1 php artisan migrate` | 개발: `php artisan migrate` / 운영: `php artisan migrate --force` |
| 캐시 클리어 | `docker exec sam-mng-1 php artisan cache:clear` | `cd /home/webservice/mng && php artisan cache:clear` |
| Queue 재시작 | — | `sudo supervisorctl restart sam-api-worker:*` |
### 로컬 Docker 명령어 패턴
```bash
# MNG 앱에서 artisan 명령 실행
docker exec sam-mng-1 php artisan <명령어>
# API 앱에서 artisan 명령 실행
docker exec sam-api-1 php artisan <명령어>
# 예시: 시더 실행
docker exec sam-mng-1 php artisan db:seed --class=MngMenuSeeder
# 예시: 마이그레이션 실행 (API에서만!)
docker exec sam-api-1 php artisan migrate
# 예시: 캐시 클리어
docker exec sam-mng-1 php artisan cache:clear
```
### 체크리스트 (명령 실행 시)
- [ ] **로컬**: `php artisan` → `docker exec sam-mng-1 php artisan` 또는 `sam-api-1` 사용
- [ ] **로컬**: `composer` → `docker exec sam-mng-1 composer` 또는 `sam-api-1` 사용
- [ ] **서버**: `php artisan`, `composer` 직접 실행 (Docker 없음)
- [ ] **운영 서버 마이그레이션**: `--force` 플래그 필수
- [ ] **마이그레이션은 반드시 API에서 실행** (로컬: `docker exec sam-api-1`, 서버: 직접)
---
## 공동 개발 워크플로우 (필수)
> **중요: 코드를 pull 받은 후 반드시 필요한 명령을 실행하세요!**
### 브랜치 전략
| 브랜치 | 배포 대상 | 트리거 | 승인 |
|--------|----------|--------|------|
| `feature/*` | — | — | — |
| `develop` | 개발 서버 (`dev.codebridge-x.com`) | Push 시 자동 배포 | 불필요 |
| `main`/`master` | 운영 서버 (`codebridge-x.com`) | PR 머지 시 Jenkins 배포 | 팀장 승인 필수 |
```
feature/* ──→ develop ──→ main/master
(push) (PR merge)
↓ ↓
개발 서버 운영 서버
(자동 배포) (Jenkins CI/CD)
```
### 로컬 환경 (Docker) 업데이트
```bash
# 1. 코드 받기 (WSL에서 실행)
cd /home/aweso/sam/api
git pull
cd /home/aweso/sam/mng
git pull
# 2. 의존성 업데이트 (composer.json 변경 시)
docker exec sam-api-1 composer install
docker exec sam-mng-1 composer install
# 3. DB 마이그레이션 (API에서만!)
docker exec sam-api-1 php artisan migrate
# 4. 캐시 클리어 (설정 변경 시)
docker exec sam-api-1 php artisan config:clear
docker exec sam-mng-1 php artisan config:clear
```
### 개발 서버 업데이트 (자동)
> `develop` 브랜치에 Push 시 Gitea Webhook → Jenkins가 자동으로 배포한다.
> 수동 배포가 필요한 경우:
```bash
# API 프로젝트
cd /home/webservice/api
git pull origin develop
composer install
php artisan migrate
php artisan config:clear
# MNG 프로젝트 (마이그레이션 없음)
cd /home/webservice/mng
git pull origin develop
composer install
php artisan config:clear
```
### 운영 서버 배포 (Jenkins 자동화)
> `main`/`master` 브랜치에 PR 머지 시 Jenkins가 자동으로 배포한다.
> 수동 배포는 **비상 절차**로만 사용한다.
```bash
# 비상 수동 배포 (Jenkins 장애 시에만)
# API 프로젝트
cd /home/webservice/api
git pull origin main
composer install --no-dev --optimize-autoloader
php artisan migrate --force
php artisan config:clear && php artisan cache:clear && php artisan route:cache && php artisan view:cache
sudo supervisorctl restart sam-api-worker:*
# MNG 프로젝트
cd /home/webservice/mng
git pull origin master
composer install --no-dev --optimize-autoloader
php artisan config:clear && php artisan cache:clear && php artisan view:cache
sudo supervisorctl restart sam-mng-worker:*
```
### 요약 표
| 작업 | 로컬 (Docker) | 개발 서버 | 운영 서버 |
|------|--------------|----------|----------|
| 배포 방식 | 수동 | Jenkins 자동 (develop push) | Jenkins 자동 (main/master PR) |
| git pull | WSL에서 직접 | Jenkins 자동 | Jenkins 자동 |
| composer install | `docker exec sam-api-1 composer install` | Jenkins 자동 | `--no-dev --optimize-autoloader` |
| migrate | `docker exec sam-api-1 php artisan migrate` | Jenkins 자동 | `--force` 플래그 포함 |
| config:clear | `docker exec sam-api-1 php artisan config:clear` | Jenkins 자동 | `route:cache` + `view:cache` 포함 |
### 체크리스트 (pull 후)
- [ ] API: `git pull` → `composer install` → `php artisan migrate` → `config:clear`
- [ ] MNG: `git pull` → `composer install` → `config:clear` (마이그레이션 없음)
- [ ] 운영 배포: `main`/`master`에 PR 머지 → Jenkins 자동 처리 (수동 금지)
---
## 사용 가능한 Agents
`~/.claude/agents/` 폴더에 있는 에이전트들:
### 코드 품질 & 개발
| Agent | 모델 | 설명 | 출처 |
|-------|------|------|------|
| `code-reviewer` | sonnet | 코드 리뷰 (품질/보안/유지보수성), 메모리 학습 지원 | 공식 문서 패턴 |
| `debugger` | sonnet | 에러/테스트 실패 근본 원인 분석 및 수정 | 공식 문서 패턴 |
| `test-runner` | haiku | 테스트 실행 및 결과 분석/요약 | 커뮤니티 인기 |
| `security-auditor` | sonnet | OWASP Top 10 기반 보안 취약점 감사 | 커뮤니티 인기 |
| `performance-optimizer` | sonnet | N+1 쿼리, 알고리즘, 캐싱 최적화 | 커뮤니티 인기 |
| `refactoring-agent` | sonnet | 코드 구조 개선, SOLID 원칙, DRY 위반 제거 | 커뮤니티 인기 |
| `laravel-expert` | sonnet | Laravel 전문가 (SAM 프로젝트 환경 인지) | 커스텀 |
### 워크플로우 & 문서
| Agent | 모델 | 설명 | 출처 |
|-------|------|------|------|
| `git-manager` | haiku | Git 브랜치/커밋/머지/PR 관리 | 커뮤니티 인기 |
| `doc-writer` | haiku | API 문서, README, 기술 가이드 작성 | 커뮤니티 인기 |
| `research-agent` | sonnet | 웹 리서치 및 자료 조사 | 기존 |
| `organizer-agent` | - | 프로젝트 구조화 및 정리 | 기존 |
| `proposal-agent` | - | 제안서 작성 | 기존 |
---
## 사용 가능한 Skills
`~/.claude/skills/` 폴더에 있는 스킬들 (슬래시 명령어로 사용):
### 문서/프레젠테이션
| Skill | 설명 |
|-------|------|
| `pptx-skill` | PowerPoint 생성 |
| `ppt-auto-generator` | 마크다운/텍스트에서 PPT 생성 |
| `pdf-template-skill` | PDF 템플릿 분석/생성 |
| `text-analyzer-skill` | 텍스트 분석 및 PDF 구조 매핑 |
| `proposal-skill` | 제안서 생성 |
| `storyboard-generator` | 스토리보드 생성 |
| `design-skill` | 프레젠테이션 HTML 디자인 |
### 코드 분석/시각화
| Skill | 설명 |
|-------|------|
| `code-flow-web-report` | 웹 앱 런타임 흐름 시각화 리포트 |
| `code-flow-web-doc-generator` | 소스 코드 호출/데이터 흐름 다이어그램 HTML 생성 |
| `codebase-analysis-web-report` | 코드베이스 아키텍처 인터랙티브 HTML 리포트 |
| `uml-generator` | UML 다이어그램 생성 |
### 코드 품질 (levnikolaevich/claude-code-skills)
| Skill | 설명 | 출처 |
|-------|------|------|
| `code-bug-finder` | 버그 자동 탐지 및 보고서 생성 | 기존 |
| `code-refactoring` | 리팩토링 권장사항/성능 분석/코드 패치 | 기존 |
| `code-commenter` | 소스 코드에 이해하기 쉬운 주석 추가 | 기존 |
| `async-await-keyword-fixer` | JS/TS 누락된 async/await 수정 | 기존 |
| `code-quality-checker` | DRY/KISS/YAGNI 위반 탐지 | levnikolaevich |
| `code-quality-auditor` | 코드 복잡도, 매직넘버 분석 | levnikolaevich |
| `code-principles-auditor` | DRY/KISS/YAGNI, TODO, DI 패턴 검사 | levnikolaevich |
| `dead-code-auditor` | 미사용 코드 탐지 | levnikolaevich |
| `build-auditor` | 컴파일러/타입 에러 검사 | levnikolaevich |
| `concurrency-auditor` | 레이스 컨디션 탐지 | levnikolaevich |
| `layer-boundary-auditor` | 레이어 위반, I/O 격리 검사 | levnikolaevich |
| `observability-auditor` | 로깅, 메트릭 적절성 검사 | levnikolaevich |
| `query-efficiency-auditor` | DB 쿼리 효율성 분석 | levnikolaevich |
| `dependencies-auditor` | 오래된 패키지, CVE 취약점 검사 | levnikolaevich |
| `regression-checker` | 기존 테스트 실행으로 사이드이펙트 탐지 | levnikolaevich |
| `story-quality-gate` | 코드리뷰 + 테스트 2단계 품질 검증 | levnikolaevich |
### 테스트/커버리지
| Skill | 설명 | 출처 |
|-------|------|------|
| `app-comprehensive-test-generator` | 테스트 시나리오 생성/실행, QA 리포트 | 기존 |
| `coverage-improvement-planner` | 테스트 커버리지 분석 및 개선 계획 | 기존 |
| `test-coverage-auditor` | 테스트 커버리지 측정/분석 | levnikolaevich |
| `test-isolation-auditor` | 테스트 독립성/격리 검사 | levnikolaevich |
| `webapp-testing` | Playwright 기반 웹 앱 UI 테스트 | anthropics 공식 |
### 보안 (Trail of Bits)
| Skill | 설명 | 출처 |
|-------|------|------|
| `security-auditor` | 시크릿 노출, Injection, XSS 탐지 | levnikolaevich |
| `static-analysis` | CodeQL/Semgrep/SARIF 정적 분석 (3개 하위 스킬) | Trail of Bits |
| `insecure-defaults` | 위험한 기본 설정, 하드코딩 자격증명 탐지 | Trail of Bits |
| `sharp-edges` | 에러 유발 API, 위험한 디자인 패턴 탐지 | Trail of Bits |
| `differential-review` | 보안 중심 코드 변경 리뷰 | Trail of Bits |
### 디버깅/로깅
| Skill | 설명 |
|-------|------|
| `system-debug-logger` | 에러/예외 자동 캡처 디버그 로깅 |
| `node-debug-logging-middleware` | Node.js Express/Koa 디버깅 로그 미들웨어 |
### 프론트엔드/UI
| Skill | 설명 | 출처 |
|-------|------|------|
| `frontend-design` | 프론트엔드 디자인 품질 향상 (AI slop 방지) | anthropics 공식 |
| `flutter-ux-hardening` | Flutter 앱 UI/UX 강화 | 기존 |
| `웹문서` | SAM 프로젝트 웹문서 디자인 표준 | 기존 |
### 유틸리티
| Skill | 설명 |
|-------|------|
| `duplicate-file-cleaner` | 중복 이미지/미디어 파일 정리 |
| `npm-release-manager` | NPM 패키지 배포 자동화 |
**사용 방법**: `/skill-name` 형식으로 호출 (예: `/code-quality-checker`)
---
## 문서 작성 규칙 (개발팀 협약 - 필수 준수)
> **경고: 개발자들이 `sam/docs`의 문서 작성 기법을 준용하기로 협약했습니다. 모든 문서 작성 시 반드시 따르세요!**
### 참조 경로
- **인덱스**: `/home/aweso/sam/docs/INDEX.md` (전체 문서 목록 및 폴더 구조)
- **작업 전 확인**: 작업 유형에 맞는 문서를 `INDEX.md`에서 찾아 먼저 읽고 시작
### 폴더 선택 기준 (의미 기반 분류)
| 폴더 | 질문 | 설명 |
|------|------|------|
| `plans/` | "무슨 작업을 할 것인가?" | 임시 개발 계획 (완료 후 삭제) |
| `standards/` | "어떻게 코드를 작성할 것인가?" | 코딩 컨벤션, 스타일 가이드 |
| `architecture/` | "왜 이렇게 설계하는가?" | 시스템 설계, 아키텍처 결정 |
| `rules/` | "무엇이 유효한 데이터인가?" | 비즈니스 규칙, 검증 규칙 |
| `specs/` | "무엇을 구현할 것인가?" | 기술 스펙, DB 스키마 |
| `guides/` | "어떻게 구현할 것인가?" | 단계별 구현 매뉴얼 |
| `features/` | 기능별 상세 | 기능 단위 심층 문서 |
| `changes/` | "무엇이 변경되었는가?" | 완료된 변경 이력 |
### 파일명 규칙
- **일반 문서**: `kebab-case.md` (소문자 + 하이픈) 예: `api-rules.md`, `item-policy.md`
- **변경 이력**: `YYYYMMDD_short_description.md` 예: `20260109_handover_report_api.md`
- **폴더 인덱스**: `README.md` (대문자)
- **크기 목표**: 10KB 이하
- **새 문서 작성 시**: 반드시 `docs/INDEX.md`에 추가
### 문서 구조 템플릿
#### 정책/규칙 문서 (`rules/`, `standards/`)
```markdown
# 제목
> **작성일**: YYYY-MM-DD
> **상태**: 설계 확정
---
## 1. 개요
### 1.1 목적
### 1.2 핵심 원칙
---
## 2. 테이블 구조 (해당 시)
### 2.1 ERD 개요
---
## N. 비즈니스 규칙
### N.1 검증 규칙
---
## N. API 엔드포인트
---
## 관련 문서
---
**최종 업데이트**: YYYY-MM-DD
```
#### 변경 이력 문서 (`changes/`)
```markdown
# 변경 내용 요약
**날짜:** YYYY-MM-DD
**작업자:** Claude Code
## 변경 개요
## 수정된 파일
| 파일 | 변경 내용 |
|------|----------|
## 상세 변경 사항
## 테스트 체크리스트
- [x] 완료 항목
- [ ] 미완료 항목
## 관련 문서
```
### 작성 스타일 규칙
| 항목 | 규칙 |
|------|------|
| **언어** | 한글 기본, 코드/경로/기술 식별자만 영어 |
| **어조** | 서술형 ("X를 해야 한다" 아닌 "X 한다") |
| **경고** | `> **경고: ...**` 블록인용 형식 |
| **금지/필수** | `❌` 금지, `✅` 필수 접두사 |
| **우선순위** | `🔴 필수`, `🟡 중요`, `🟢 권장` |
| **섹션 번호** | `## 1.`, `### 1.1` 번호 매기기 |
| **규칙 번호** | R1, R2, R3... 순차 라벨 |
| **코드 블록** | 반드시 언어 지정 (```php, ```bash, ```json, ```sql) |
| **인라인 코드** | 파일 경로, 메서드명, 변수명, 컬럼명에 백틱 |
| **다이어그램** | `┌─┐│└─┘` 박스 문자, `→` 화살표 사용 |
| **구분선** | `---` 주요 섹션 사이마다 |
| **테이블** | API: `| Method | Path | 설명 |`, 필드: `| 필드 | 타입 | 설명 |` |
### plans/ 워크플로우
1. 개발 계획 문서를 `plans/`에 작성
2. 작업 진행
3. 완료 후 결과물을 해당 폴더(`features/`, `changes/` 등)에 정리
4. plan 문서 삭제
### 체크리스트 (문서 작성 시)
- [ ] 적절한 폴더에 배치 (위 폴더 선택 기준 참고)
- [ ] `kebab-case.md` 파일명 사용
- [ ] 문서 구조 템플릿 준수
- [ ] 한글 기본, 기술 용어만 영어
- [ ] 코드 블록에 언어 지정
- [ ] `docs/INDEX.md`에 새 문서 등록
- [ ] 10KB 이하 크기 유지
---
## PPT / 프레젠테이션 제작 규칙 (필수 준수)
> **경고: 모든 프레젠테이션 및 문서 제작 시 반드시 따르세요!**
### 회사 정보
| 항목 | 값 |
|------|------|
| **공식 회사명** | **(주)코드브릿지엑스** |
| **서비스명** | **SAM** (Smart Automation Management) |
| **푸터 표기 예시** | `SAM 서비스 요금 안내 | (주)코드브릿지엑스` |
### 금지 사항
```
❌ "주일/경동" — 문서, 슬라이드, 푸터 어디에도 사용 금지
❌ "주일", "경동" 단독 사용 금지
❌ 내부 제조사(주일/경동) 이름을 외부 문서에 노출 금지
```
> **배경**: 주일/경동은 SAM을 기반으로 만든 내부 제조업체 이름이며, 대외 문서에 노출되어서는 안 된다.
> 모든 대외 문서의 회사명은 **(주)코드브릿지엑스**를 사용한다.
### SAM BI (Brand Identity) 이미지
**프로젝트 내 경로**: `/home/aweso/sam/docs/assets/bi/`
| 파일 | 용도 | 배경 |
|------|------|------|
| `sam_bi_black.png` | 밝은 배경 슬라이드 | 투명 배경, 검정 로고 |
| `sam_bi_white.png` | 다크 배경 슬라이드 | 투명 배경, 흰색 로고 |
| `sam_bi_blue.png` | 청색 테마 슬라이드 | 투명 배경, 파란 로고 |
| `sam_bi_green.png` | 녹색 테마 슬라이드 | 녹색 배경, 흰색 로고 |
| `sam_bi_red.png` | 적색/대외비 슬라이드 | 적색 배경, 흰색 로고 |
| `sam_bi_orange.png` | 주황 포인트 슬라이드 | 주황 배경, 흰색 로고 |
| `sam_bi_purple.png` | 보라 테마 슬라이드 | 보라 배경, 흰색 로고 |
### PPT 슬라이드 제작 시 적용 규칙
1. **표지(slide-01)에 BI 로고 필수** — 배경색에 맞는 BI 이미지 사용
2. **푸터에 회사명**: `(주)코드브릿지엑스` (주일/경동 절대 금지)
3. **BI 로고 + "SAM" 텍스트** 조합 사용 권장
4. **배경색별 BI 선택**:
- 다크 배경 → `sam_bi_white.png`
- 밝은 배경 → `sam_bi_black.png`
- 테마 컬러 배경 → 해당 색상 BI (green, blue, red 등)
### 체크리스트 (PPT 제작 시)
- [ ] 회사명: (주)코드브릿지엑스 사용
- [ ] "주일/경동" 미포함 확인
- [ ] 표지에 SAM BI 로고 포함
- [ ] 푸터에 (주)코드브릿지엑스 표기
- [ ] 배경색에 맞는 BI 색상 선택

421
sam/docs/INDEX.md
View File

@@ -1,421 +0,0 @@
# SAM 프로젝트 문서 인덱스
> **Claude Code 작업 전 필수 확인** — 작업 유형에 맞는 문서를 먼저 읽고 시작하세요.
> **최종 갱신**: 2026-03-08
---
## 🎯 작업별 필수 문서
| 작업 유형 | 필수 문서 | 용도 |
|----------|----------|------|
| **API 개발** | `standards/api-rules.md` | Service-First, FormRequest, i18n 규칙 |
| **DB 변경** | `system/database/README.md` | 테이블 구조, 관계, 컬럼 규칙 |
| **새 기능 구현** | `system/overview.md` | 전체 아키텍처 이해 |
| **보안 관련** | `system/security-policy.md` | 인증/인가, 보안 규칙 |
| **Git 커밋** | `standards/git-conventions.md` | 커밋 메시지, 브랜치 전략 |
| **품질 검증** | `standards/quality-checklist.md` | 코드 품질 체크리스트 |
| **Swagger 작성** | `guides/swagger-guide.md` | API 문서 작성 방법 |
| **품목관리** | `rules/item-policy.md` | 품목 정책 (유형, 예약어, API 규칙) |
| **단가관리** | `rules/pricing-policy.md` | 원가/판매가 계산, 리비전 관리 |
| **견적관리** | `features/quotes/README.md` | 견적 시스템, BOM 계산, 10단계 로직 |
| **결재관리** | `features/approvals/README.md` | 결재 시스템 (워크플로우, API, UI) |
| **운영 배포** | `plans/production-deployment-plan.md` | 운영 환경 배포 계획 |
| **서버 운영** | `deploys/ops-manual/README.md` | 서버 운영 매뉴얼 |
| **MES 개발** | `projects/mes/README.md` | MES 프로젝트 개요 |
---
## 📁 폴더 구조
```
docs/
├── system/ # 시스템 현황 — 아키텍처, DB 스키마, 인프라 (architecture/ + specs/ 통합)
├── standards/ # 개발 표준 — "어떻게 코드를 작성할 것인가"
├── rules/ # 비즈니스 규칙 — "무엇이 유효한 데이터인가"
├── features/ # 기능별 상세 — 도메인별 기능 문서
├── guides/ # 구현 가이드 — "어떻게 구현할 것인가"
├── quickstart/ # 빠른 시작 — 핵심 요약, 명령어
├── plans/ # 작업 추적 — 예정 → 진행 → 완료 → archive/
├── projects/ # 프로젝트 자료 — 프로젝트성 분석, 설계, 참고
├── deploys/ # 운영 매뉴얼 — 서버 운영, 배포
├── changes/ # 변경 이력
├── data/ # 데이터 분석
├── history/ # 히스토리 기록
├── api/ # API 통합 문서
├── requests/ # 요청/기획 문서
└── assets/ # BI 등 정적 자산
```
---
## 📚 폴더별 문서 목록
### system/ — 시스템 현황
> 아키텍처, DB 스키마, 기술 스펙, 인프라 (기존 architecture/ + specs/ 통합)
| 문서 | 설명 |
|------|------|
| [overview.md](system/overview.md) | 전체 시스템 아키텍처 (api/react/mng 구조, 기술 스택) |
| [api-structure.md](system/api-structure.md) | API 서버 구조 (~1,027 엔드포인트, 18 도메인) |
| [react-structure.md](system/react-structure.md) | React 프론트엔드 구조 (249 페이지, 612 컴포넌트) |
| [mng-structure.md](system/mng-structure.md) | MNG 관리자 패널 구조 (171 컨트롤러, 436 뷰) |
| [docker-setup.md](system/docker-setup.md) | Docker 환경 + CI/CD (7 서비스, Jenkins) |
| [database/README.md](system/database/README.md) | DB 스키마 인덱스 (220 모델, 32 도메인, 459 마이그레이션) |
**DB 도메인별 스키마:**
| 문서 | 포함 도메인 |
|------|-----------|
| [database/tenants.md](system/database/tenants.md) | 테넌트, 사용자, 권한 (63 모델) |
| [database/products.md](system/database/products.md) | 제품, 품목, 설계 (21 모델) |
| [database/sales.md](system/database/sales.md) | 영업, 수주, 견적 (18 모델) |
| [database/production.md](system/database/production.md) | 생산, 시공, 자재, 품질 (20 모델) |
| [database/finance.md](system/database/finance.md) | 재무, 회계 |
| [database/hr.md](system/database/hr.md) | 인사, 면접 |
| [database/documents.md](system/database/documents.md) | 문서, 전자서명 (19 모델) |
| [database/commons.md](system/database/commons.md) | 공통, 게시판, 감사 (17 모델) |
| [database/stats.md](system/database/stats.md) | 통계 (21 모델, sam_stat DB) |
| [database/codebridge-separation.md](system/database/codebridge-separation.md) | codebridge DB 분리 (MNG 전용 118 테이블, 78 모델) |
**이관 완료 (architecture/ + specs/ → system/):**
| 문서 | 설명 |
|------|------|
| [security-policy.md](system/security-policy.md) | 보안 정책 (다층 방어, Sanctum, RBAC) |
| [scaling-roadmap.md](system/scaling-roadmap.md) | 10K 테넌트 스케일링 로드맵 |
| [ai-automation-vision.md](system/ai-automation-vision.md) | SAM AI 자동화 비전 및 장기 로드맵 |
| [board-system-spec.md](system/board-system-spec.md) | 게시판 시스템 설계 스펙 |
| [item-master-integration.md](system/item-master-integration.md) | 품목 마스터 통합 설계 |
| [remote-work-setup.md](system/remote-work-setup.md) | 원격 개발 설정 (DEPRECATED) |
| [erp-analysis/](system/erp-analysis/) | ERP 스토리보드 분석 (9개 파일) |
---
### standards/ — 개발 표준
> 코딩 컨벤션, 스타일 가이드, 품질 기준
| 문서 | 설명 | 필수 확인 시점 |
|------|------|--------------|
| [api-rules.md](standards/api-rules.md) | API 개발 규칙 (Service-First, FormRequest, i18n) | API 개발 전 |
| [git-conventions.md](standards/git-conventions.md) | Git 커밋 메시지, 브랜치 전략 | 커밋 전 |
| [quality-checklist.md](standards/quality-checklist.md) | 코드 품질 체크리스트 | PR 전 |
| [pagination-policy.md](standards/pagination-policy.md) | 페이지네이션 표준 | 목록 API 구현 시 |
| [options-column-policy.md](standards/options-column-policy.md) | JSON options 컬럼 표준 정책 (마이그레이션, 모델, 쿼리) | 테이블 생성/확장 시 |
---
### rules/ — 비즈니스 규칙
> 도메인 로직, 검증 규칙, 정책
| 문서 | 설명 | 필수 확인 시점 |
|------|------|--------------|
| [README.md](rules/README.md) | 비즈니스 규칙 개요 | 도메인 로직 구현 전 |
| [item-policy.md](rules/item-policy.md) | 품목 정책 (유형, 예약어, API 규칙) | 품목 관련 작업 전 |
| [pricing-policy.md](rules/pricing-policy.md) | 단가 정책 (원가/판매가, 리비전) | 단가 관련 작업 전 |
| [customer-pricing.md](rules/customer-pricing.md) | 고객 안내용 서비스 요금표 | 고객 요금 안내 시 |
| [partner-commission.md](rules/partner-commission.md) | 영업파트너 수당 체계 및 정산 | 수당/정산 관련 작업 전 |
| [billing-policy.md](rules/billing-policy.md) | 내부용 원가/마진/코드참조 (CONFIDENTIAL) | 과금 코드 개발 전 |
| [client-policy.md](rules/client-policy.md) | 고객사 관리 정책 | 고객 관련 작업 전 |
| [attendance-api.md](rules/attendance-api.md) | 근태 API 규칙 | 근태 관련 작업 전 |
| [department-tree-api.md](rules/department-tree-api.md) | 부서 트리 API 규칙 | 부서 관련 작업 전 |
| [employee-api.md](rules/employee-api.md) | 직원 API 규칙 | 직원 관련 작업 전 |
| [numbering-rules.md](rules/numbering-rules.md) | 채번규칙 (패턴 기반 자동 번호 생성) | 채번 로직 수정 전 |
---
### features/ — 기능별 문서
> 도메인별 기능 상세 (기능 설명 + 엔드포인트 경로 + Swagger 참조)
| 문서 | 설명 |
|------|------|
| [quotes/README.md](features/quotes/README.md) | 견적 시스템 (BOM 계산, 10단계 로직) |
| [boards/README.md](features/boards/README.md) | 게시판 시스템 구현 |
| [boards/mng-implementation.md](features/boards/mng-implementation.md) | MNG 게시판 구현 상세 |
| [hr/attendance-management-spec.md](features/hr/attendance-management-spec.md) | 근태관리 기획서 |
| [hr/hr-api-analysis.md](features/hr/hr-api-analysis.md) | HR API 분석 (근태/직원/부서) |
| [barobill-kakaotalk/README.md](features/barobill-kakaotalk/README.md) | 바로빌 카카오톡 + 세금계산서 연동 |
| ~~business-card-request.md~~ | 명함신청 관리 (DB 마이그레이션만 존재, 문서 미작성) |
| [sales/README.md](features/sales/README.md) | 영업 관리 (면접 시나리오 포함) |
| [crm/README.md](features/crm/README.md) | CRM (거래처, 미수금, 미지급금) |
| [finance/README.md](features/finance/README.md) | 재무 관리 (14개 하위 문서) |
| [card-vehicle/README.md](features/card-vehicle/README.md) | 법인카드·차량 관리 |
| [settlement/README.md](features/settlement/README.md) | 정산 관리 |
| [esign/README.md](features/esign/README.md) | 전자서명 (계약·OTP·PDF 합성) |
| [documents/README.md](features/documents/README.md) | 문서관리 (EAV 기반 서식·결재) |
| [ai/README.md](features/ai/README.md) | AI 분석 리포트 (Gemini 연동) |
| [equipment/README.md](features/equipment/README.md) | 설비관리 (MNG 전용) |
| [approvals/README.md](features/approvals/README.md) | 결재관리 시스템 (순차결재, 보류/전결/참조/복사재기안) |
| [planning/README.md](features/planning/README.md) | 주일기업 기획 (견적/프로젝트/사진대지/회의록/AI) |
| [rd/README.md](features/rd/README.md) | R&D (조직도/AI견적/기획디자인/디자인 인사이트/사운드 로고/CM송) |
| [rd/planning-design.md](features/rd/planning-design.md) | 기획디자인 스토리보드 에디터 기술 명세 |
| [rd/design-insight.md](features/rd/design-insight.md) | 디자인 인사이트 UI/UX 연구 도구 (100종 패턴, AI 프롬프트) |
| [rd/sound-logo-studio.md](features/rd/sound-logo-studio.md) | 사운드 로고 스튜디오 (시퀀서 + Gemini TTS + Lyria BGM 합성) |
---
### guides/ — 구현 가이드
> 특정 기능 구현을 위한 단계별 매뉴얼
| 문서 | 설명 | 필수 확인 시점 |
|------|------|--------------|
| [swagger-guide.md](guides/swagger-guide.md) | Swagger API 문서 작성법 | API 문서 작성 전 |
| [file-storage-guide.md](guides/file-storage-guide.md) | 파일 업로드/다운로드 구현 | 파일 기능 구현 전 |
| [item-management-migration.md](guides/item-management-migration.md) | Item 시스템 전환 가이드 | 마이그레이션 작업 전 |
| [project-launch-roadmap.md](guides/project-launch-roadmap.md) | 런칭 준비 현황 | 런칭 관련 작업 시 |
| [production-env-sync.md](guides/production-env-sync.md) | 운영 전환 시 .env 동기화 | 테스트→운영 전환 시 |
| [server-how-it-works.md](guides/server-how-it-works.md) | 서버 동작 원리 | 신규 합류 시 |
| [nginx-fastcgi-guide.md](guides/nginx-fastcgi-guide.md) | Nginx & FastCGI 가이드 | 서버 이해 시 |
| [php-fpm-guide.md](guides/php-fpm-guide.md) | PHP-FPM 가이드 | 서버 이해 시 |
| [jenkins-setup-guide.md](guides/jenkins-setup-guide.md) | Jenkins CI/CD 셋업 | Jenkins 설치/설정 시 |
| [auto-login-guide.md](guides/auto-login-guide.md) | MNG→DEV 자동 로그인 | 자동 로그인 구현 시 |
| [erp-api-list.md](guides/erp-api-list.md) | ERP API 목록 (List vs Detail 구분) | 프론트 API 연동 시 |
| [erp-api-detail.md](guides/erp-api-detail.md) | ERP API 상세 스펙 | 프론트 API 연동 시 |
| [table-design-guide.md](guides/table-design-guide.md) | 테이블 설계 가이드 (비전문가용, options JSON 패턴) | 테이블 구조 이해 시 |
| [item-master-guide.md](guides/item-master-guide.md) | 품목기준관리 페이지-섹션-필드 구조 | 품목 UI 구현 시 |
| [item-master-items-api.md](guides/item-master-items-api.md) | ItemMaster & Items API 문서 | 품목 API 연동 시 |
| [ai-management.md](guides/ai-management.md) | AI 관리 종합 가이드 (아키텍처, 버전 이력, 온보딩) | AI 관련 작업 시 |
| [ai-model-update-workflow.md](guides/ai-model-update-workflow.md) | AI 모델 업데이트 표준 절차 (7단계) | AI 모델 변경 시 |
| [ai-config-settings.md](guides/ai-config-settings.md) | AI 설정 기술문서 (DB 구조, 메서드) | AI 설정 구현 시 |
---
### quickstart/ — 빠른 시작
> 핵심 규칙 요약, 자주 쓰는 명령어
| 문서 | 설명 |
|------|------|
| [quick-start.md](quickstart/quick-start.md) | 프로젝트 핵심 규칙 요약 |
| [dev-commands.md](quickstart/dev-commands.md) | 일상 개발 명령어 모음 |
---
### plans/ — 작업 추적
> 예정 → 진행 → 완료 → archive/ (이미 정리 완료, 현행 유지)
| 문서 | 설명 |
|------|------|
| [index_plans.md](plans/index_plans.md) | 계획 인덱스 (ACTIVE + PLANNED) |
| [GUIDE.md](plans/GUIDE.md) | 계획 문서 작성 가이드 |
| [fire-shutter-drawing-generator-plan.md](plans/fire-shutter-drawing-generator-plan.md) | 방화셔터 도면생성 기능 기획서 (가이드레일 단면도 + 셔터박스 + 3D 렌더링) |
---
### projects/ — 프로젝트 자료
> 프로젝트성 분석, 설계, 참고 자료 (지속 보관)
| 프로젝트 | 문서 | 설명 |
|---------|------|------|
| [index_projects.md](projects/index_projects.md) | 프로젝트 인덱스 | |
| **MES** | [README.md](projects/mes/README.md) | MES 프로젝트 개요 |
| **MES** | [MES_PROJECT_ROADMAP.md](projects/mes/MES_PROJECT_ROADMAP.md) | 개발 로드맵 |
| **5130 이관** | [MASTER_PLAN.md](projects/5130-migration/MASTER_PLAN.md) | 레거시 이관 마스터 플랜 |
| **API 연동** | [MASTER_PLAN.md](projects/api-integration/MASTER_PLAN.md) | React↔API 연동 |
| **Legacy** | [draw-module.md](projects/legacy-5130/draw-module.md) | 레거시 드로우 모듈 |
| **견적** | [quotation/](projects/quotation/) | 견적 프로젝트 자료 |
| **전자서명** | [e-sign/](projects/e-sign/) | 전자서명 프로젝트 자료 |
| **조직도** | [org-chart/README.md](projects/org-chart/README.md) | 조직도 관리 (트리형, 드래그앤드롭, 숨기기) |
---
### deploys/ — 운영 매뉴얼
> 서버 운영, 배포 (현행 유지)
| 문서 | 설명 |
|------|------|
| [ops-manual/README.md](deploys/ops-manual/README.md) | 서버 운영 매뉴얼 (11부 구성) |
---
### changes/ — 변경 이력
> 파일명 형식: `YYYYMMDD_description.md`
| 문서 | 설명 |
|------|------|
| [20260304_eaccount_infinite_loop_fix.md](changes/20260304_eaccount_infinite_loop_fix.md) | 계좌 입출금내역 부분 월 조회 시 무한루프 크래시 수정 |
| [20260306_purchase_request_payment_method.md](changes/20260306_purchase_request_payment_method.md) | 품의서 지급방법 UI 개선 (구매품의서 추가, 비용정산품의서 행별 변경) |
---
### data/ — 데이터 분석
| 문서 | 설명 |
|------|------|
| [analysis/item-db-analysis.md](data/analysis/item-db-analysis.md) | Item DB/API 분석 최종본 |
| [analysis/bom-item-mapping-analysis.md](data/analysis/bom-item-mapping-analysis.md) | BOM-품목 매핑 분석 |
### contracts/ - 전자계약서 버전 관리
> DOCX 배포본 + Markdown 추적본 + 자동화 스크립트
| 문서 | 설명 |
|------|------|
| [CHANGELOG.md](contracts/CHANGELOG.md) | 전체 개정이력 |
| [revisions.json](contracts/revisions.json) | 개정 데이터 |
| [docx/](contracts/docx/) | DOCX 배포본 (전자서명용 4종, 바로 사용 가능) |
| [markdown/](contracts/markdown/) | Markdown 추적본 (Git diff용 4종) |
| [scripts/extract_to_markdown.py](contracts/scripts/extract_to_markdown.py) | DOCX → Markdown 추출 |
| [scripts/sync_check.py](contracts/scripts/sync_check.py) | DOCX ↔ Markdown 동기화 검증 |
### plans/ - 개발 계획
> 임시 개발 계획 문서 (작업 완료 후 정리 → 삭제)
| 문서 | 설명 |
|------|------|
| [SAM_ERP_Storyboard_D1.4_260116.md](plans/SAM_ERP_Storyboard_D1.4_260116.md) | ERP 전체 스토리보드 D1.4 (167p PDF → 마크다운 변환, 14개 섹션 146개 화면) |
| [SAM_ERP_Storyboard_D1.4.md](plans/SAM_ERP_Storyboard_D1.4.md) | ERP 스토리보드 D1.4 AI 최적화 버전 (구조화된 한글 마크다운, 15개 섹션) |
| [SAM_ERP_회계관리_Storyboard_D1.6.md](plans/SAM_ERP_회계관리_Storyboard_D1.6.md) | ERP 회계관리 스토리보드 D1.6 (65p PDF → 마크다운 변환) |
| [SAM_General_Rule_Storyboard_D1.0.md](plans/SAM_General_Rule_Storyboard_D1.0.md) | General Rule 스토리보드 D1.0 (43p PDF → 마크다운 변환, UIUX 공통 규칙) |
| [production-deployment-plan.md](plans/production-deployment-plan.md) | 운영 환경 배포 계획 (CI/CD, 서버 아키텍처) |
| [attendance-management-plan.md](plans/attendance-management-plan.md) | 근태현황 개발 계획 (Phase 1~2, HTMX 기반) |
| [leave-management-plan.md](plans/leave-management-plan.md) | 휴가관리 모듈 개발 계획 (연차 발생/신청/승인/정책) |
| [approval-management-system-plan.md](plans/approval-management-system-plan.md) | 결재관리 시스템 기획서 (전자결재 전체 설계: 기안~회수, DB 설계, 17개 양식, 4 Phase) |
| [block-builder-evolution-plan.md](plans/block-builder-evolution-plan.md) | 양식 디자이너(Block Builder) 고도화 계획 (6 Phase: 렌더러→결재→동적테이블→수식→인쇄→Legacy 대체) |
| [design-insight-menu-plan.md](plans/design-insight-menu-plan.md) | UI/UX 디자인 인사이트 연구 메뉴 기획서 (레퍼런스 수집, 화면 분석, 패턴 라이브러리, Before/After) |
| [sound-logo-generator-plan.md](plans/sound-logo-generator-plan.md) | 사운드 로고 생성기 기획서 (Web Audio + Gemini AI 어시스트 + Lyria 자동 생성) |
### features/ - 기능별 문서
| 문서 | 설명 |
|------|------|
| [barobill-kakaotalk/README.md](features/barobill-kakaotalk/README.md) | 바로빌 카카오톡 (알림톡/친구톡) 연동 |
| [boards/README.md](features/boards/README.md) | 게시판 시스템 구현 |
| [boards/mng-implementation.md](features/boards/mng-implementation.md) | MNG 게시판 구현 상세 |
| [hr/attendance-management-spec.md](features/hr/attendance-management-spec.md) | 근태관리 기획서 (화면/데이터/비즈니스규칙/API) |
| [hr/hr-api-analysis.md](features/hr/hr-api-analysis.md) | HR API 분석 (근태/직원/부서) |
| [quotes/README.md](features/quotes/README.md) | 견적 시스템 분석 (BOM 계산, 10단계 로직) |
| [business-card-request.md](features/business-card-request.md) | 명함신청 관리 (3단계 워크플로우: 요청→제작의뢰→처리완료) |
| [academy/fire-shutter-image-prompts.md](features/academy/fire-shutter-image-prompts.md) | 방화셔터 백과사전 이미지 생성 프롬프트 (Gemini용) |
| [approvals/README.md](features/approvals/README.md) | 결재관리 시스템 개요 (아키텍처, DB, 상태관리, 권한) |
| [approvals/workflows.md](features/approvals/workflows.md) | 결재관리 워크플로우 상세 (승인/반려/회수/보류/전결/복사재기안) |
| [approvals/api-reference.md](features/approvals/api-reference.md) | 결재관리 API 명세 (20개 엔드포인트) |
| [approvals/ui-screens.md](features/approvals/ui-screens.md) | 결재관리 UI 화면 구성 (Blade + HTMX) |
| [approvals/db-changes-and-model-sync.md](features/approvals/db-changes-and-model-sync.md) | 결재관리 DB 변경사항 및 API 모델 동기화 현황 (2026-02~03) |
### projects/ - 프로젝트별 문서
| 프로젝트 | 문서 | 설명 |
|---------|------|------|
| **MES** | [README.md](projects/mes/README.md) | MES 프로젝트 개요 |
| **MES** | [MES_PROJECT_ROADMAP.md](projects/mes/MES_PROJECT_ROADMAP.md) | 개발 로드맵 |
| **Legacy** | [draw-module.md](projects/legacy-5130/draw-module.md) | 레거시 드로우 모듈 |
| **조직도** | [README.md](projects/org-chart/README.md) | 조직도 관리 (Alpine.js + SortableJS) |
### history/ - 히스토리
| 기간 | 문서 |
|------|------|
| **2025-11** | [item-master-gap-analysis.md](history/2025-11/item-master-gap-analysis.md), [item-master-spec.md](history/2025-11/item-master-spec.md), [front-requests/](history/2025-11/front-requests/), [item-master-archived/](history/2025-11/item-master-archived/) |
| **2025-09** | [checkpoint.md](history/2025-09/checkpoint.md), [database-schema.md](history/2025-09/database-schema.md) |
| **Roadmaps** | [december-2025.md](history/roadmaps/december-2025.md) |
---
### 서브프로젝트 문서
각 서브프로젝트는 독립적인 `docs/` 디렉토리를 가집니다.
| 프로젝트 | 문서 경로 | 설명 |
|---------|----------|------|
| **API** | [api/docs/](../api/docs/) | REST API 프로젝트 |
| **MNG** | [mng/docs/](../mng/docs/) | Plain Laravel 관리자 |
| **React** | [react/docs/](../react/docs/) | Next.js 프론트엔드 |
---
## 📝 문서 작성 규칙
### 폴더 선택 기준
| 질문 | 폴더 |
|------|------|
| "시스템이 현재 어떤 상태인가?" | `system/` |
| "어떻게 코드를 작성할 것인가?" | `standards/` |
| "무엇이 유효한 데이터인가?" | `rules/` |
| "이 기능은 어떻게 동작하는가?" | `features/` |
| "어떻게 구현할 것인가?" | `guides/` |
| "무슨 작업을 할 것인가?" | `plans/` |
| "프로젝트 자료를 보관하고 싶다" | `projects/` |
| "무엇이 변경되었는가?" | `changes/` |
### 파일명 규칙
| 유형 | 규칙 | 예시 |
|------|------|------|
| 기술 문서 (코드 참조) | 영문 kebab-case | `api-rules.md`, `database-schema.md` |
| 업무/비즈니스 문서 | 한글 허용 | `영업파트너가이드북.md`, `수당지급.md` |
| 변경 이력 | `YYYYMMDD_description.md` | `20260205_sus_inspection_template.md` |
| 폴더 인덱스 | `README.md` (대문자) | `features/finance/README.md` |
| **혼용 금지** | 한글+영문 섞지 않음 | ❌ `영업partner가이드.md` |
### 크기 제한
- **목표**: 10KB 이하
- 초과 시 도메인별로 분할
### 문서 구조 템플릿
#### 정책/규칙 문서 (`rules/`, `standards/`)
```markdown
# 제목
> **작성일**: YYYY-MM-DD
> **상태**: 설계 확정
---
## 1. 개요
## 2. 핵심 원칙
## 3. 상세 규칙
## 4. API 엔드포인트 (해당 시)
## 관련 문서
---
**최종 업데이트**: YYYY-MM-DD
```
#### 변경 이력 문서 (`changes/`)
```markdown
# 변경 내용 요약
**날짜:** YYYY-MM-DD
## 변경 개요
## 수정된 파일
## 상세 변경 사항
## 테스트 체크리스트
```
### 작성 스타일
| 항목 | 규칙 |
|------|------|
| **언어** | 한글 기본, 코드/경로/기술 식별자만 영어 |
| **어조** | 서술형 ("X 한다") |
| **경고** | `> **경고: ...**` 블록인용 |
| **금지/필수** | `❌` 금지, `✅` 필수 |
| **우선순위** | `🔴 필수`, `🟡 중요`, `🟢 권장` |
| **코드 블록** | 반드시 언어 지정 (```php, ```bash 등) |
| **인라인 코드** | 파일 경로, 메서드명, 변수명에 백틱 |
| **구분선** | `---` 주요 섹션 사이 |
### 새 문서 작성 시 체크리스트
- [ ] 적절한 폴더에 배치
- [ ] 파일명 규칙 준수
- [ ] 문서 구조 템플릿 준수
- [ ] 이 INDEX.md에 등록
---
## 🔄 문서 정비 진행 현황
> 참조: [docs-comprehensive-update-plan.md](plans/docs-comprehensive-update-plan.md)
| Phase | 작업 | 상태 |
|-------|------|------|
| **Phase 0** | 문서 정책 재정립 | ✅ 완료 |
| **Phase 1** | 시스템 현황 문서화 (DB, API, React, MNG, Docker) | ✅ 완료 (14개 문서) |
| **Phase 2** | 기존 문서 정비 (architecture/+specs/ → system/ 이관) | ⏳ 대기 |
| **Phase 3** | 신규 도메인 기능 문서 작성 | ⏳ 대기 |
| **Phase 4** | 최종 검증 및 INDEX 갱신 | ⏳ 대기 |

BIN
sam/docs/assets/bi/sam_bi_black.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

BIN
sam/docs/assets/bi/sam_bi_blue.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.2 KiB

BIN
sam/docs/assets/bi/sam_bi_green.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
sam/docs/assets/bi/sam_bi_orange.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
sam/docs/assets/bi/sam_bi_purple.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
sam/docs/assets/bi/sam_bi_red.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
sam/docs/assets/bi/sam_bi_white.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

370
sam/docs/brochure/README.md
View File

@@ -1,370 +0,0 @@
# SAM 브로셔 버전 관리
> **작성일**: 2026-03-01
> **상태**: 운영 중
---
## 1. 개요
SAM CEO Dashboard 및 ERP/MES 영업 브로셔의 버전별 디자인 변천을 기록한다.
모든 브로셔는 세로형(9:16) HTML로 작성하며, `pptx-skill`(html2pptx.js)로 PPTX 변환한다.
---
## 2. 버전 요약
| 버전 | 대상 | 테마 | 배경색 | 주 액센트 | 비고 |
|------|------|------|--------|-----------|------|
| **v1** | 전체 고객 | 다크 | `#0F2439` | `#10B981` (에메랄드) | SAM ERP/MES 범용 |
| **v2** | 경영진 | 다크 | `#0B1929` | `#0EA5E9` (스카이블루) | CEO Dashboard 초판 |
| **v3** | 경영진 | 다크 | `#0B1929` | `#0EA5E9` (스카이블루) | v2 개선, Before/After 추가 |
| **v4** | 경영진 | 라이트 | `#F8FAFC` | `#0EA5E9` (스카이블루) | v3의 밝은 배경 변환 |
| **v5** | 경영진 | 프리미엄 그래디언트 | `#0F172A→#312E81` | `#FBBF24` (골드) | 글래스모피즘 + 골드 |
| **v6** | 경영진 | 코퍼레이트 블루 | `#FFFFFF` | `#2563EB` (블루) | 대기업/공공기관 스타일 |
| **v7** | 경영진 | 웜 그레이 + 틸 | `#FAFAF9` | `#0D9488` (틸) | IT/SaaS 스타일 |
| **v8** | 경영진 | 투톤 스플릿 | `#1E293B` / `#FFFFFF` | `#F97316` (오렌지) | 금융/컨설팅 스타일 |
| **v9** | 경영진 | 미니멀 화이트 | `#FFFFFF` | `#6366F1` (인디고) | Apple/디자인 에이전시 |
---
## 3. 버전별 상세
### 3.1 v1 — SAM ERP/MES 범용 브로셔
**컨셉**: 중소 제조업 대상 SAM 플랫폼 전체 기능 소개
| 항목 | 값 |
|------|------|
| 배경 | `#0F2439` (네이비) |
| 주 액센트 | `#10B981` (에메랄드 그린) |
| 보조 액센트 | `#2E86AB`, `#8B5CF6`, `#E86F2C` |
| 카드 스타일 | 반투명 배경 + 컬러 보더 |
| BI 로고 | `sam_bi_white.png` |
**앞면 구성**:
- 히어로: "중소 제조업을 위한 ERP/MES 통합 플랫폼"
- 고민 포인트: Excel 과의존, 실시간 가시성, 품질관리, 높은 ERP 비용
- 효과 지표: 시간 절감 80%, 납기 준수 95%, 추적성 100%, 인사/회계 무료
- 기술 태그: 클라우드, 모바일 대응, 멀티테넌트
**뒷면 구성**:
- 8대 핵심 모듈 (01~08 번호 뱃지): 품목/BOM, 견적/수주, 생산/MES, 출하, 품질, 자재, 인사/회계, 대시보드
- 확장 기능: 전자서명, 알림톡, AI Lab, QR
- 가격표: 기본 2,000만원 + 월 50만원
- 도입 프로세스: 인터뷰 → 개발 → 이관 → 교육
---
### 3.2 v2 — CEO Dashboard 초판
**컨셉**: 경영진 타겟, 대시보드 중심 소개. 문제→해결 스토리텔링
| 항목 | 값 |
|------|------|
| 배경 | `#0B1929` (짙은 네이비) |
| 주 액센트 | `#0EA5E9` (스카이블루) |
| 보조 액센트 | `#10B981`, `#8B5CF6`, `#F59E0B`, `#EF4444`, `#EC4899` |
| 카드 스타일 | 반투명 다크 카드 |
| BI 로고 | `sam_bi_white.png` |
**앞면 구성**:
- 히어로: "대표님, 지금 우리 회사 어떻게 돌아가고 있나요?"
- 시간대별 고민: 오전 9시(매출 보고 대기), 오후 2시(수주 취합), 오후 5시(결재 서류)
- 대시보드 Mock UI: KPI 카드 4개 + 매출 추이 차트 + 조직 성과 바 차트
- 약속 박스: "실시간 KPI 파악"
**뒷면 구성**:
- 대시보드 7대 기능 (01~07 뱃지)
- 역할별 맞춤 화면: CEO, 관리자, 운영자, 영업자
- SAM 플랫폼 연동: 견적/수주, 생산, 품질, 재고, 인사/회계
- 가격표 + 도입 프로세스
**v1 대비 차이**:
- 타겟이 전체→경영진으로 좁혀짐
- 타임라인 기반 문제 제시 (시간대별 고민)
- 대시보드 UI Mock 삽입
- 역할별 화면 분리 소개
---
### 3.3 v3 — CEO Dashboard 개선판 (다크)
**컨셉**: v2 기반 개선. Before/After 인포그래픽 추가, SVG 아이콘 강화
| 항목 | 값 |
|------|------|
| 배경 | `#0B1929` (짙은 네이비) |
| 주 액센트 | `#0EA5E9` (스카이블루) |
| 카드 스타일 | 반투명 다크 + 컬러 보더 |
| BI 로고 | `sam_bi_white.png` |
**v2 대비 개선사항**:
- 1page 통합본 추가
- Before/After 비교 인포그래픽 도입
- 핵심 가치 3카드: 즉시 현황 파악, 데이터로 판단, 모바일 승인
- SVG 인라인 아이콘 전면 적용 (외부 이미지 의존 제거)
- PPTX 텍스트 줄바꿈 방지 패턴 적용 (`white-space: nowrap`, 개별 `<p>` 분리)
---
### 3.4 v4 — CEO Dashboard 라이트 버전
**컨셉**: v3와 동일 콘텐츠, 밝은 배경으로 색상 전환
| 항목 | 값 |
|------|------|
| 배경 | `#F8FAFC` (밝은 슬레이트) |
| 주 액센트 | `#0EA5E9` (스카이블루) |
| 제목 텍스트 | `#0F172A` |
| 본문 텍스트 | `#475569` |
| 보조 텍스트 | `#94A3B8` |
| 카드 스타일 | 화이트 + `box-shadow` + `#E2E8F0` 보더 |
| BI 로고 | `sam_bi_black.png` |
**v3 → v4 색상 변환 규칙**:
| 요소 | v3 (다크) | v4 (라이트) |
|------|-----------|------------|
| 배경 | `#0B1929` | `#F8FAFC` |
| 카드 | `#111D2E` 반투명 | `#FFFFFF` + shadow |
| 제목 | `#FFFFFF` | `#0F172A` |
| 본문 | `rgba(255,255,255,0.55)` | `#475569` |
| 보조 | `rgba(255,255,255,0.3)` | `#94A3B8` |
| 구분선 | `rgba(14,165,233,0.15)` | `#E2E8F0` |
| 기술 태그 | `rgba(255,255,255,0.03)` | `#F1F5F9` |
| 액센트 | 동일 유지 | 동일 유지 |
---
### 3.5 v5 — Premium Executive Gradient
**컨셉**: 고급 프리미엄 감성. 네이비→인디고 그래디언트 + 골드 액센트 + 글래스모피즘
| 항목 | 값 |
|------|------|
| 배경 | `#0F172A → #1E1B4B → #312E81` (175deg 그래디언트) |
| 주 액센트 | `#FBBF24` (골드/앰버) |
| 보조 액센트 | `#10B981`, `#8B5CF6`, `#EF4444`, `#F59E0B`, `#EC4899` |
| 카드 스타일 | 글래스모피즘 (`rgba(255,255,255,0.05)` + `rgba(255,255,255,0.1)` border) |
| BI 로고 | `sam_bi_white.png` |
| 뱃지 | "EXECUTIVE EDITION" 골드 뱃지 |
**앞면 구성**:
- 히어로: "대표님의 시간은 보고를 기다리는 데 쓰여선 안 됩니다."
- 잃어버린 시간 카드: 1~2일(매출), 반나절(수주), 30분(결재) — 빨간 톤
- 골드 전환 구분선: "SAM 도입 후"
- 대시보드 Mock: 골드 차트 라인, 글래스모피즘 카드
- 약속 박스: 골드 테두리
**뒷면 구성**:
- 7대 기능 리스트 (글래스모피즘 카드)
- 역할별 맞춤 화면: CEO(골드), 관리자(그린), 운영자(앰버), 영업자(퍼플)
- 가격표: 골드 강조
- 도입 프로세스: 골드 화살표 연결
**기술 특이사항**:
- body CSS gradient → PPTX 미지원 → Sharp로 PNG 사전 렌더링
- HTML body는 `#1A1640`(단색 fallback), convert 스크립트에서 `slide.background`로 그래디언트 PNG 덮어쓰기
- 구분선 gradient도 solid rgba로 변환 (PPTX 호환)
---
### 3.6 v6 — Corporate Blue & White
**컨셉**: 대기업/공공기관 프레젠테이션 스타일. 정돈된 블루 헤더 바 + 순백색 본문
| 항목 | 값 |
|------|------|
| 배경 | `#FFFFFF` (순백) |
| 헤더 바 | `#1E40AF` (로열 블루) |
| 주 액센트 | `#2563EB` (블루) |
| 보조 배경 | `#EFF6FF` (블루-50), `#DBEAFE` (블루-100) |
| 카드 스타일 | 화이트 + `#DBEAFE` 보더 |
| BI 로고 | `sam_bi_white.png` (헤더), `sam_bi_black.png` (본문) |
**특징**:
- 풀 폭 블루 헤더 바에 흰색 BI 로고 + 뱃지 배치
- 섹션 라벨은 블루-50 배경 + 로열블루 텍스트 뱃지
- 대시보드 Mock UI: `#DBEAFE` 보더 카드
- CTA: 블루 배경 풀 폭 바
---
### 3.7 v7 — Warm Gray + Teal
**컨셉**: IT/SaaS 기업 스타일. 따뜻한 그레이 배경 + 틸(Teal) 액센트
| 항목 | 값 |
|------|------|
| 배경 | `#FAFAF9` (웜 그레이) |
| 주 액센트 | `#0D9488` (틸) |
| 보조 액센트 | `#10B981`, `#8B5CF6`, `#EF4444`, `#F59E0B`, `#EC4899` |
| 카드 스타일 | 화이트 + `#E7E5E4` 보더 + 미세 그림자 |
| 구분선 | `#D6D3D1` |
| BI 로고 | `sam_bi_black.png` |
**특징**:
- 부드러운 웜 톤 배경으로 눈의 피로 감소
- 틸 계열 SVG 아이콘 전면 적용
- 가벼운 카드 스타일로 정보 구분
- 타임라인 인포그래픽: 시간대별 고민 (9AM/2PM/5PM)
---
### 3.8 v8 — Two-Tone Navy/White Split
**컨셉**: 금융/컨설팅 프레젠테이션 스타일. 다크 상단 + 화이트 하단 투톤 분할
| 항목 | 값 |
|------|------|
| 상단 배경 | `#1E293B` (슬레이트-800) |
| 하단 배경 | `#FFFFFF` (순백) |
| 주 액센트 | `#F97316` (오렌지) |
| 보조 액센트 | `#FB923C` (오렌지-400) |
| 카드 (다크) | `rgba(255,255,255,0.08)` + `rgba(255,255,255,0.12)` 보더 |
| 카드 (라이트) | 화이트 + `#E2E8F0` 보더 + 컬러 좌측 보더 |
| BI 로고 | `sam_bi_white.png` (다크), `sam_bi_black.png` (라이트) |
**특징**:
- 앞면 상단: 다크 존에 KPI 카드 + 히어로 메시지
- 앞면 하단: 화이트 존에 가치 카드 + 기능 그리드
- 기능 카드에 컬러 좌측 보더 포인트 (오렌지/그린/퍼플/레드)
- 다크 CTA 박스: 하단 풀 폭 다크 배경 + 오렌지 액센트
---
### 3.9 v9 — Minimal White + Indigo
**컨셉**: Apple/디자인 에이전시 스타일. 극도의 미니멀리즘 + 인디고 수직 액센트 라인
| 항목 | 값 |
|------|------|
| 배경 | `#FFFFFF` (순백) |
| 주 액센트 | `#6366F1` (인디고) |
| 카드 배경 | `#F8FAFC` (거의 투명한 그레이) |
| 카드 보더 | `#F1F5F9` |
| 본문 텍스트 | `#334155` (슬레이트-700) |
| 보조 텍스트 | `#94A3B8` |
| BI 로고 | `sam_bi_black.png` |
**특징**:
- 좌측 3pt 인디고 수직 액센트 라인 (풀 하이트)
- 타이포그래피 중심 레이아웃 (아이콘 최소화)
- 거의 보이지 않는 카드 구분 (barely-there cards)
- 기능은 텍스트 로우 형태 (인디고 불릿 도트만)
- 가격/프로세스도 텍스트 기반 미니멀 표현
---
## 4. 폴더 구조
```
docs/brochure/
├── README.md ← 이 파일
├── v1/
│ ├── slides/
│ │ ├── brochure-2page-front.html
│ │ ├── brochure-2page-back.html
│ │ └── brochure-1page.html
│ ├── convert-1page.cjs
│ ├── convert-2page.cjs
│ ├── sam-brochure-1page.pptx
│ └── sam-brochure-2page.pptx
├── v2/
│ ├── slides/
│ │ ├── brochure-dashboard-front.html
│ │ ├── brochure-dashboard-back.html
│ │ └── brochure-dashboard-1page.html
│ ├── convert-1page.cjs
│ ├── convert-2page.cjs
│ ├── sam-brochure-v2-dashboard-1page.pptx
│ └── sam-brochure-v2-dashboard-2page.pptx
├── v3/
│ ├── slides/
│ │ ├── brochure-dashboard-front.html
│ │ ├── brochure-dashboard-back.html
│ │ └── brochure-dashboard-1page.html
│ ├── convert-1page.cjs
│ ├── convert-2page.cjs
│ ├── sam-brochure-v3-dashboard-1page.pptx
│ └── sam-brochure-v3-dashboard-2page.pptx
├── v4/
│ ├── slides/
│ │ ├── brochure-dashboard-front.html
│ │ ├── brochure-dashboard-back.html
│ │ └── brochure-dashboard-1page.html
│ ├── convert-1page.cjs
│ ├── convert-2page.cjs
│ ├── sam-brochure-v4-dashboard-1page.pptx
│ └── sam-brochure-v4-dashboard-2page.pptx
├── v5/
│ ├── slides/
│ │ ├── brochure-dashboard-front.html
│ │ ├── brochure-dashboard-back.html
│ │ └── brochure-dashboard-1page.html
│ ├── convert-1page.cjs ← Sharp 그래디언트 배경 생성 포함
│ ├── convert-2page.cjs ← Sharp 그래디언트 배경 생성 포함
│ ├── sam-brochure-v5-dashboard-1page.pptx
│ └── sam-brochure-v5-dashboard-2page.pptx
├── v6/ ← Corporate Blue & White
│ ├── slides/ (front, back, 1page)
│ ├── convert-1page.cjs
│ ├── convert-2page.cjs
│ ├── sam-brochure-v6-dashboard-1page.pptx
│ └── sam-brochure-v6-dashboard-2page.pptx
├── v7/ ← Warm Gray + Teal
│ ├── slides/ (front, back, 1page)
│ ├── convert-1page.cjs
│ ├── convert-2page.cjs
│ ├── sam-brochure-v7-dashboard-1page.pptx
│ └── sam-brochure-v7-dashboard-2page.pptx
├── v8/ ← Two-Tone Navy/White Split
│ ├── slides/ (front, back, 1page)
│ ├── convert-1page.cjs
│ ├── convert-2page.cjs
│ ├── sam-brochure-v8-dashboard-1page.pptx
│ └── sam-brochure-v8-dashboard-2page.pptx
└── v9/ ← Minimal White + Indigo
├── slides/ (front, back, 1page)
├── convert-1page.cjs
├── convert-2page.cjs
├── sam-brochure-v9-dashboard-1page.pptx
└── sam-brochure-v9-dashboard-2page.pptx
```
---
## 5. PPTX 변환 방법
```bash
# 각 버전 폴더에서 실행
cd docs/brochure/v5
node convert-1page.cjs # 1페이지 통합본
node convert-2page.cjs # 앞면+뒷면 2페이지
```
---
## 6. PPTX 변환 시 주의사항
### 6.1 텍스트 줄바꿈 방지
- 단일행 `<p>` 태그에 `white-space: nowrap` 필수
- `<br>` 멀티라인 `<p>`는 개별 `<p nowrap>` 태그로 분리
- `<span>` 포함 텍스트도 개별 `<p>` 처리 (PPTX 폰트 폭 차이 보정)
### 6.2 CSS gradient 미지원
- html2pptx.js는 CSS `linear-gradient`를 지원하지 않음
- body gradient → Sharp로 PNG 사전 렌더링 후 `slide.background`에 설정
- 구분선 gradient → solid `rgba()` 색상으로 변환
### 6.3 SVG 처리
- 인라인 SVG는 html2pptx가 자동으로 PNG 래스터화
- SVG 내부 fill 색상은 배경에 맞게 조정 필요
---
**최종 업데이트**: 2026-03-01 (v6~v9 추가)

28
sam/docs/brochure/v1/convert-1page.cjs
View File

@@ -1,28 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
// 9:16 세로형 (Portrait)
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const htmlFile = path.join(__dirname, 'slides', 'brochure-1page.html');
console.log('Converting 1-page brochure...');
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error: ${err.message}`);
}
const outputPath = path.join(__dirname, 'sam-brochure-1page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

32
sam/docs/brochure/v1/convert-2page.cjs
View File

@@ -1,32 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
// 9:16 세로형 (Portrait)
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const slidesDir = path.join(__dirname, 'slides');
const slides = ['brochure-2page-front.html', 'brochure-2page-back.html'];
for (const file of slides) {
const htmlFile = path.join(slidesDir, file);
console.log(`Converting ${file} ...`);
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error on ${file}: ${err.message}`);
}
}
const outputPath = path.join(__dirname, 'sam-brochure-2page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

BIN
sam/docs/brochure/v1/sam-brochure-1page.pptx
View File

Binary file not shown.

BIN
sam/docs/brochure/v1/sam-brochure-2page.pptx
View File

Binary file not shown.

210
sam/docs/brochure/v1/slides/brochure-1page.html
View File

@@ -1,210 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #0F2439;
padding: 28pt 24pt 18pt 24pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 14pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 22pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3);">PRODUCT BROCHURE 2026</p>
</div>
<!-- 히어로 섹션 -->
<div style="margin-bottom: 14pt;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 600; color: #10B981; letter-spacing: 0.08em; margin-bottom: 4pt;">SMART AUTOMATION MANAGEMENT</p>
<h1 style="font-size: 19pt; font-weight: 800; color: #ffffff; line-height: 1.3; margin-bottom: 6pt;">중소 제조업을 위한<br>ERP/MES 통합 플랫폼</h1>
<p style="font-size: 8.5pt; color: rgba(255,255,255,0.5); line-height: 1.5;">품목관리, 견적, 수주, 생산, 출하, 품질, 인사/회계까지<br>제조업의 모든 업무를 하나의 시스템으로 통합합니다.</p>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.08); margin-bottom: 12pt;"></div>
<!-- 핵심 과제 -->
<div style="margin-bottom: 12pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #E86F2C; margin-bottom: 6pt;">현재 업무 과제</p>
<div style="display: flex; gap: 5pt;">
<div style="flex: 1; background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.12); border-radius: 5pt; padding: 6pt 8pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #fff;">Excel 수작업</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">오류 잦음, 시간 낭비</p>
</div>
<div style="flex: 1; background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.12); border-radius: 5pt; padding: 6pt 8pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #fff;">현황 파악 불가</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">생산/재고 실시간 X</p>
</div>
<div style="flex: 1; background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.12); border-radius: 5pt; padding: 6pt 8pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #fff;">ERP 도입비 부담</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">수천만~수억원</p>
</div>
</div>
</div>
<!-- 핵심 기능 6개 -->
<div style="margin-bottom: 12pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #2E86AB; margin-bottom: 6pt;">SAM 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 4pt;">
<!-- Row 1 -->
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; background: rgba(46,134,171,0.08); border: 1pt solid rgba(46,134,171,0.15); border-radius: 6pt; padding: 7pt;">
<div style="display: flex; align-items: center; gap: 5pt; margin-bottom: 3pt;">
<div style="width: 18pt; height: 18pt; background: #2E86AB; border-radius: 4pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="font-size: 6.5pt; font-weight: 800; color: #fff; white-space: nowrap;">01</p>
</div>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">견적/수주 자동화</p>
</div>
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">BOM 전개, 단가 적용, PDF 견적서 자동 생성</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.08); border: 1pt solid rgba(139,92,246,0.15); border-radius: 6pt; padding: 7pt;">
<div style="display: flex; align-items: center; gap: 5pt; margin-bottom: 3pt;">
<div style="width: 18pt; height: 18pt; background: #8B5CF6; border-radius: 4pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="font-size: 6.5pt; font-weight: 800; color: #fff; white-space: nowrap;">02</p>
</div>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">생산관리 (MES)</p>
</div>
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">바코드/QR 공정추적, 실시간 현황 대시보드</p>
</div>
</div>
<!-- Row 2 -->
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; background: rgba(16,185,129,0.08); border: 1pt solid rgba(16,185,129,0.15); border-radius: 6pt; padding: 7pt;">
<div style="display: flex; align-items: center; gap: 5pt; margin-bottom: 3pt;">
<div style="width: 18pt; height: 18pt; background: #10B981; border-radius: 4pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="font-size: 6.5pt; font-weight: 800; color: #fff; white-space: nowrap;">03</p>
</div>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">품질/검사 관리</p>
</div>
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">수입/공정/출하 3단계 검사, 인증 자동 알림</p>
</div>
<div style="flex: 1; background: rgba(232,111,44,0.08); border: 1pt solid rgba(232,111,44,0.15); border-radius: 6pt; padding: 7pt;">
<div style="display: flex; align-items: center; gap: 5pt; margin-bottom: 3pt;">
<div style="width: 18pt; height: 18pt; background: #E86F2C; border-radius: 4pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="font-size: 6.5pt; font-weight: 800; color: #fff; white-space: nowrap;">04</p>
</div>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">자재/재고 추적</p>
</div>
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">안전재고, LOT 추적, 바코드 입출고 관리</p>
</div>
</div>
<!-- Row 3 -->
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; background: rgba(46,134,171,0.08); border: 1pt solid rgba(46,134,171,0.15); border-radius: 6pt; padding: 7pt;">
<div style="display: flex; align-items: center; gap: 5pt; margin-bottom: 3pt;">
<div style="width: 18pt; height: 18pt; background: #2E86AB; border-radius: 4pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="font-size: 6.5pt; font-weight: 800; color: #fff; white-space: nowrap;">05</p>
</div>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">인사/회계 (무료)</p>
</div>
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">근태, 급여, 매입매출, 세금계산서 자동 발행</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.08); border: 1pt solid rgba(139,92,246,0.15); border-radius: 6pt; padding: 7pt;">
<div style="display: flex; align-items: center; gap: 5pt; margin-bottom: 3pt;">
<div style="width: 18pt; height: 18pt; background: #8B5CF6; border-radius: 4pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="font-size: 6.5pt; font-weight: 800; color: #fff; white-space: nowrap;">06</p>
</div>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">경영 대시보드</p>
</div>
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">수주/생산/매출/품질 KPI 실시간 모니터링</p>
</div>
</div>
</div>
</div>
<!-- 추가 기능 바 -->
<div style="display: flex; gap: 4pt; margin-bottom: 12pt;">
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.5);">전자서명</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.5);">카카오 알림톡</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.5);">AI 실험실</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.5);">바로빌 연동</p>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.08); margin-bottom: 12pt;"></div>
<!-- 기대 효과 + 가격 -->
<div style="display: flex; gap: 8pt; margin-bottom: 12pt;">
<!-- 기대 효과 -->
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #10B981; margin-bottom: 6pt;">도입 기대 효과</p>
<div style="display: flex; flex-direction: column; gap: 3pt;">
<div style="display: flex; gap: 3pt;">
<div style="flex: 1; background: rgba(46,134,171,0.1); border: 1pt solid rgba(46,134,171,0.2); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 14pt; font-weight: 800; color: #ffffff;">80%</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #2E86AB;">업무 시간 단축</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.1); border: 1pt solid rgba(139,92,246,0.2); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 14pt; font-weight: 800; color: #ffffff;">95%</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #8B5CF6;">납기 준수율</p>
</div>
</div>
<div style="display: flex; gap: 3pt;">
<div style="flex: 1; background: rgba(16,185,129,0.1); border: 1pt solid rgba(16,185,129,0.2); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 14pt; font-weight: 800; color: #ffffff;">100%</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #10B981;">이력 추적성</p>
</div>
<div style="flex: 1; background: rgba(232,111,44,0.1); border: 1pt solid rgba(232,111,44,0.2); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 14pt; font-weight: 800; color: #ffffff;">Free</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #E86F2C;">인사/회계 포함</p>
</div>
</div>
</div>
</div>
<!-- 가격 -->
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #E86F2C; margin-bottom: 6pt;">투자 비용</p>
<div style="background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.12); border-radius: 6pt; padding: 10pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #E86F2C; margin-bottom: 4pt;">제조업 기본 패키지</p>
<p style="white-space: nowrap; font-size: 14pt; font-weight: 800; color: #ffffff;">2,000만원</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4); margin-top: 2pt;">+ 월 50만원 (유지보수)</p>
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin: 6pt 0;"></div>
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">품목-견적-수주-생산-출하<br>인사/회계 무료 포함</p>
</div>
</div>
</div>
<!-- 기술 스택 -->
<div style="display: flex; gap: 5pt; margin-bottom: 12pt;">
<div style="background: rgba(255,255,255,0.04); border-radius: 4pt; padding: 3pt 8pt;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.4);">클라우드 기반 (설치 불필요)</p>
</div>
<div style="background: rgba(255,255,255,0.04); border-radius: 4pt; padding: 3pt 8pt;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.4);">모바일 대응</p>
</div>
<div style="background: rgba(255,255,255,0.04); border-radius: 4pt; padding: 3pt 8pt;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.4);">Multi-tenant</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; border-top: 1pt solid rgba(255,255,255,0.08); padding-top: 10pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: rgba(255,255,255,0.7);">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3);">무료 데모 및 상담</p>
<p style="white-space: nowrap; font-size: 8pt; font-weight: 600; color: #10B981;">contact@codebridge-x.com</p>
</div>
</div>
</div>
</body>
</html>

227
sam/docs/brochure/v1/slides/brochure-2page-back.html
View File

@@ -1,227 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #0F2439;
padding: 20pt 24pt 10pt 24pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 8pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 18pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3);">FEATURES &amp; PRICING</p>
</div>
<!-- 핵심 모듈 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #2E86AB; margin-bottom: 6pt;">SAM 핵심 모듈</p>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<!-- 01 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(46,134,171,0.06); border-radius: 4pt; padding: 3pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #2E86AB; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">01</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 78pt; flex-shrink: 0; white-space: nowrap;">품목/BOM 관리</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">품목 마스터, 다단계 BOM 전개, 단가 관리</p>
</div>
<!-- 02 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(139,92,246,0.06); border-radius: 4pt; padding: 3pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #8B5CF6; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">02</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 78pt; flex-shrink: 0; white-space: nowrap;">견적/수주 자동화</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">견적서 자동 생성, 수주 전환, PDF 출력</p>
</div>
<!-- 03 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(16,185,129,0.06); border-radius: 4pt; padding: 3pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #10B981; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">03</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 78pt; flex-shrink: 0; white-space: nowrap;">생산관리 (MES)</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">작업지시, 바코드/QR 공정추적, 실시간 현황</p>
</div>
<!-- 04 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(232,111,44,0.06); border-radius: 4pt; padding: 3pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #E86F2C; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">04</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 78pt; flex-shrink: 0; white-space: nowrap;">출하/물류 관리</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">출하 지시, 거래명세서, 배송 추적</p>
</div>
<!-- 05 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(46,134,171,0.06); border-radius: 4pt; padding: 3pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #2E86AB; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">05</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 78pt; flex-shrink: 0; white-space: nowrap;">품질/검사 관리</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">수입/공정/출하 검사, 인증 만료 자동 알림</p>
</div>
<!-- 06 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(139,92,246,0.06); border-radius: 4pt; padding: 3pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #8B5CF6; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">06</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 78pt; flex-shrink: 0; white-space: nowrap;">자재/재고 관리</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">안전재고, 입출고, LOT 추적, 바코드 관리</p>
</div>
<!-- 07 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(16,185,129,0.06); border-radius: 4pt; padding: 3pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #10B981; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">07</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 78pt; flex-shrink: 0; white-space: nowrap;">인사/회계 (무료)</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">근태, 급여, 매입매출, 세금계산서 자동 발행</p>
</div>
<!-- 08 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(232,111,44,0.06); border-radius: 4pt; padding: 3pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #E86F2C; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">08</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 78pt; flex-shrink: 0; white-space: nowrap;">경영 대시보드</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">수주/생산/매출/품질 KPI 실시간 모니터링</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.08); margin-bottom: 8pt;"></div>
<!-- 추가 기능 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #8B5CF6; margin-bottom: 6pt;">확장 기능</p>
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; background: rgba(139,92,246,0.06); border: 1pt solid rgba(139,92,246,0.12); border-radius: 4pt; padding: 5pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7);">전자서명</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">계약/확인서</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.06); border: 1pt solid rgba(139,92,246,0.12); border-radius: 4pt; padding: 5pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7);">알림톡</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">카카오 자동발송</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.06); border: 1pt solid rgba(139,92,246,0.12); border-radius: 4pt; padding: 5pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7);">AI 실험실</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">음성요약/문서분류</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.06); border: 1pt solid rgba(139,92,246,0.12); border-radius: 4pt; padding: 5pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7);">QR 코드</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">설비/장비 점검</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.08); margin-bottom: 8pt;"></div>
<!-- 투자비용 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #E86F2C; margin-bottom: 6pt;">투자 비용</p>
<div style="display: flex; gap: 6pt;">
<!-- 기본 패키지 -->
<div style="flex: 1;">
<div style="background: rgba(46,134,171,0.08); border: 1pt solid rgba(46,134,171,0.15); border-radius: 6pt; padding: 8pt 10pt; margin-bottom: 4pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #2E86AB; margin-bottom: 3pt;">제조업 기본 패키지</p>
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #ffffff;">2,000만원</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">+ 월 50만원 (유지보수)</p>
</div>
<div style="background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 3pt 6pt;">
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">품목 - 견적 - 수주 - 생산 - 출하<br>인사/회계 무료 포함</p>
</div>
</div>
<!-- 추가 옵션 -->
<div style="flex: 1;">
<div style="background: rgba(232,111,44,0.08); border: 1pt solid rgba(232,111,44,0.15); border-radius: 6pt; padding: 8pt 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #E86F2C; margin-bottom: 4pt;">추가 옵션 (선택)</p>
<div style="display: flex; flex-direction: column; gap: 3pt;">
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.5);">생산공정 추가</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #E86F2C;">+500만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.5);">품질관리(인정검사)</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #E86F2C;">+2,000만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.5);">사진등록/챗봇/녹음</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #E86F2C;">월 10~20만원</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.08); margin-bottom: 8pt;"></div>
<!-- 도입 로드맵 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981; margin-bottom: 6pt;">도입 프로세스</p>
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; border-radius: 6pt; padding: 6pt 4pt; text-align: center; background: rgba(46,134,171,0.1); border: 1pt solid rgba(46,134,171,0.2);">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #2E86AB;">Step 1</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.5); margin-top: 2pt;">1~2주</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7); margin-top: 2pt;">현장 인터뷰</p>
</div>
<div style="flex: 1; border-radius: 6pt; padding: 6pt 4pt; text-align: center; background: rgba(139,92,246,0.1); border: 1pt solid rgba(139,92,246,0.2);">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #8B5CF6;">Step 2</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.5); margin-top: 2pt;">2~4주</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7); margin-top: 2pt;">맞춤 개발</p>
</div>
<div style="flex: 1; border-radius: 6pt; padding: 6pt 4pt; text-align: center; background: rgba(16,185,129,0.1); border: 1pt solid rgba(16,185,129,0.2);">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981;">Step 3</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.5); margin-top: 2pt;">1~2주</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7); margin-top: 2pt;">데이터 이관</p>
</div>
<div style="flex: 1; border-radius: 6pt; padding: 6pt 4pt; text-align: center; background: rgba(232,111,44,0.1); border: 1pt solid rgba(232,111,44,0.2);">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #E86F2C;">Step 4</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.5); margin-top: 2pt;">1~2주</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7); margin-top: 2pt;">교육/안정화</p>
</div>
</div>
</div>
<!-- 외부 연동 -->
<div style="display: flex; gap: 6pt; margin-bottom: 8pt;">
<div style="flex: 1; background: rgba(255,255,255,0.04); border-radius: 5pt; padding: 5pt 8pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.6);">바로빌 API</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">세금계산서 자동</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.04); border-radius: 5pt; padding: 5pt 8pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.6);">카카오 알림톡</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">점검/납기 알림</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.04); border-radius: 5pt; padding: 5pt 8pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.6);">이카운트 연동</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">기존 ERP 동기화</p>
</div>
</div>
<!-- CTA 푸터 -->
<div style="margin-top: auto; background: rgba(16,185,129,0.08); border: 1pt solid rgba(16,185,129,0.2); border-radius: 8pt; padding: 12pt 14pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #ffffff;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 7.5pt; color: rgba(255,255,255,0.45); margin-top: 3pt;">귀사에 최적화된 맞춤 데모를 제공합니다</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.4); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- 회사명 -->
<div style="margin-top: 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.2);">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
</div>
</body>
</html>

122
sam/docs/brochure/v1/slides/brochure-2page-front.html
View File

@@ -1,122 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #0F2439;
padding: 32pt 24pt 24pt 24pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 20pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 24pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3);">PRODUCT BROCHURE 2026</p>
</div>
<!-- 히어로 섹션 -->
<div style="margin-bottom: 20pt;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 600; color: #10B981; letter-spacing: 0.08em; margin-bottom: 6pt;">SMART AUTOMATION MANAGEMENT</p>
<h1 style="font-size: 21pt; font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 8pt;">중소 제조업을 위한<br>ERP/MES 통합 플랫폼</h1>
<p style="font-size: 9pt; color: rgba(255,255,255,0.5); line-height: 1.6;">품목관리, 견적, 수주, 생산, 출하, 품질, 인사/회계까지<br>제조업의 모든 업무를 하나의 시스템으로 통합합니다.</p>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.08); margin-bottom: 18pt;"></div>
<!-- 현재 과제 -->
<div style="margin-bottom: 18pt;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: #E86F2C; margin-bottom: 8pt;">이런 고민이 있으신가요?</p>
<div style="display: flex; flex-direction: column; gap: 5pt;">
<div style="display: flex; align-items: center; gap: 8pt; background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.1); border-radius: 6pt; padding: 8pt 10pt;">
<div style="width: 4pt; height: 4pt; background: #E86F2C; border-radius: 50%; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 8pt; color: rgba(255,255,255,0.65);">Excel 견적서, 수기 전표로 <span style="color: #E86F2C; font-weight: 700;">업무 시간 낭비</span>가 심하다</p>
</div>
<div style="display: flex; align-items: center; gap: 8pt; background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.1); border-radius: 6pt; padding: 8pt 10pt;">
<div style="width: 4pt; height: 4pt; background: #E86F2C; border-radius: 50%; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 8pt; color: rgba(255,255,255,0.65);">생산 현황을 <span style="color: #E86F2C; font-weight: 700;">실시간으로 파악</span>할 수 없다</p>
</div>
<div style="display: flex; align-items: center; gap: 8pt; background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.1); border-radius: 6pt; padding: 8pt 10pt;">
<div style="width: 4pt; height: 4pt; background: #E86F2C; border-radius: 50%; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 8pt; color: rgba(255,255,255,0.65);">품질/검사 기록이 <span style="color: #E86F2C; font-weight: 700;">체계적으로 관리</span>되지 않는다</p>
</div>
<div style="display: flex; align-items: center; gap: 8pt; background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.1); border-radius: 6pt; padding: 8pt 10pt;">
<div style="width: 4pt; height: 4pt; background: #E86F2C; border-radius: 50%; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 8pt; color: rgba(255,255,255,0.65);">ERP 도입비가 <span style="color: #E86F2C; font-weight: 700;">수천만원~수억원</span>으로 부담된다</p>
</div>
</div>
</div>
<!-- SAM 해결 -->
<div style="background: rgba(16,185,129,0.06); border: 1pt solid rgba(16,185,129,0.15); border-radius: 8pt; padding: 12pt 14pt; margin-bottom: 18pt;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: #10B981; margin-bottom: 6pt;">SAM이 해결합니다</p>
<p style="font-size: 8pt; color: rgba(255,255,255,0.55); line-height: 1.6;">
SAM은 중소 제조업에 특화된 클라우드 ERP/MES 통합 플랫폼입니다.
품목/BOM 관리, 견적 자동화, 바코드 생산추적, 품질검사, 인사/회계까지
별도 설치 없이 웹 브라우저만으로 모든 업무를 통합 관리합니다.
</p>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.08); margin-bottom: 18pt;"></div>
<!-- 기대 효과 4개 -->
<div style="margin-bottom: 18pt;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: #2E86AB; margin-bottom: 10pt;">도입 기대 효과</p>
<div style="display: flex; gap: 6pt;">
<div style="flex: 1; background: rgba(46,134,171,0.1); border: 1pt solid rgba(46,134,171,0.2); border-radius: 8pt; padding: 10pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 20pt; font-weight: 800; color: #ffffff;">80%</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #2E86AB; margin-top: 2pt;">업무 시간 단축</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.1); border: 1pt solid rgba(139,92,246,0.2); border-radius: 8pt; padding: 10pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 20pt; font-weight: 800; color: #ffffff;">95%</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #8B5CF6; margin-top: 2pt;">납기 준수율</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.1); border: 1pt solid rgba(16,185,129,0.2); border-radius: 8pt; padding: 10pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 20pt; font-weight: 800; color: #ffffff;">100%</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #10B981; margin-top: 2pt;">이력 추적성</p>
</div>
<div style="flex: 1; background: rgba(232,111,44,0.1); border: 1pt solid rgba(232,111,44,0.2); border-radius: 8pt; padding: 10pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 20pt; font-weight: 800; color: #ffffff;">Free</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #E86F2C; margin-top: 2pt;">인사/회계 포함</p>
</div>
</div>
</div>
<!-- 기술 특징 -->
<div style="display: flex; gap: 6pt; margin-bottom: 14pt;">
<div style="flex: 1; background: rgba(255,255,255,0.04); border-radius: 5pt; padding: 6pt 8pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.6);">클라우드 기반</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.3);">설치 불필요</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.04); border-radius: 5pt; padding: 6pt 8pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.6);">모바일 대응</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.3);">현장 태블릿/폰</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.04); border-radius: 5pt; padding: 6pt 8pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.6);">Multi-tenant</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.3);">데이터 완전 격리</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; border-top: 1pt solid rgba(255,255,255,0.08); padding-top: 12pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: rgba(255,255,255,0.7);">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.35);">뒷면에서 상세 기능과 가격을 확인하세요</p>
</div>
</div>
</div>
</body>
</html>

28
sam/docs/brochure/v2/convert-1page.cjs
View File

@@ -1,28 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
// 9:16 세로형 (Portrait)
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const htmlFile = path.join(__dirname, 'slides', 'brochure-dashboard-1page.html');
console.log('Converting CEO Dashboard 1-page brochure...');
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error: ${err.message}`);
}
const outputPath = path.join(__dirname, 'sam-brochure-v2-dashboard-1page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

32
sam/docs/brochure/v2/convert-2page.cjs
View File

@@ -1,32 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
// 9:16 세로형 (Portrait)
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const slidesDir = path.join(__dirname, 'slides');
const slides = ['brochure-dashboard-front.html', 'brochure-dashboard-back.html'];
for (const file of slides) {
const htmlFile = path.join(slidesDir, file);
console.log(`Converting ${file} ...`);
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error on ${file}: ${err.message}`);
}
}
const outputPath = path.join(__dirname, 'sam-brochure-v2-dashboard-2page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

BIN
sam/docs/brochure/v2/sam-brochure-v2-dashboard-1page.pptx
View File

Binary file not shown.

BIN
sam/docs/brochure/v2/sam-brochure-v2-dashboard-2page.pptx
View File

Binary file not shown.

261
sam/docs/brochure/v2/slides/brochure-dashboard-1page.html
View File

@@ -1,261 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #0B1929;
padding: 24pt 22pt 14pt 22pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 12pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 20pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.25);">CEO DASHBOARD EDITION 2026</p>
</div>
<!-- 히어로 섹션 -->
<div style="margin-bottom: 12pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 600; color: #0EA5E9; letter-spacing: 0.1em; margin-bottom: 4pt;">EXECUTIVE DASHBOARD</p>
<h1 style="font-size: 18pt; font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 5pt;">대표님, 지금 우리 회사<br>어떻게 돌아가고 있나요?</h1>
<p style="font-size: 8pt; color: rgba(255,255,255,0.45); line-height: 1.5;">보고를 기다리지 마세요. SAM 대시보드 하나면<br>매출, 수주, 조직 실적, 승인 대기까지 한눈에 파악합니다.</p>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 10pt;"></div>
<!-- 대시보드 미리보기 (Mock UI) -->
<div style="background: #111D2E; border: 1pt solid rgba(14,165,233,0.15); border-radius: 8pt; padding: 10pt; margin-bottom: 10pt;">
<!-- 대시보드 타이틀바 -->
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 8pt;">
<div style="width: 5pt; height: 5pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 5pt; height: 5pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 5pt; height: 5pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3); margin-left: 6pt;">SAM CEO Dashboard</p>
</div>
<!-- KPI 카드 4개 -->
<div style="display: flex; gap: 4pt; margin-bottom: 6pt;">
<div style="flex: 1; background: rgba(14,165,233,0.12); border: 1pt solid rgba(14,165,233,0.2); border-radius: 5pt; padding: 6pt 5pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #0EA5E9; font-weight: 600;">월 매출</p>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #fff;">5.2억</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #10B981; font-weight: 600;">+15.3%</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.12); border: 1pt solid rgba(16,185,129,0.2); border-radius: 5pt; padding: 6pt 5pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #10B981; font-weight: 600;">수주 잔량</p>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #fff;">127건</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #10B981; font-weight: 600;">+8건</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.12); border: 1pt solid rgba(139,92,246,0.2); border-radius: 5pt; padding: 6pt 5pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #8B5CF6; font-weight: 600;">납기 준수율</p>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #fff;">96%</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #10B981; font-weight: 600;">목표 초과</p>
</div>
<div style="flex: 1; background: rgba(239,68,68,0.12); border: 1pt solid rgba(239,68,68,0.2); border-radius: 5pt; padding: 6pt 5pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #EF4444; font-weight: 600;">승인 대기</p>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #fff;">5건</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #EF4444; font-weight: 600;">즉시 처리</p>
</div>
</div>
<!-- 차트 영역 (간략 Mock) -->
<div style="display: flex; gap: 4pt;">
<!-- 매출 추이 차트 -->
<div style="flex: 3; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 5pt 6pt;">
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4); margin-bottom: 4pt;">월별 매출 추이</p>
<div style="display: flex; align-items: flex-end; gap: 3pt; height: 32pt;">
<div style="flex: 1; background: rgba(14,165,233,0.25); border-radius: 1.5pt; height: 45%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.3); border-radius: 1.5pt; height: 52%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.35); border-radius: 1.5pt; height: 48%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.4); border-radius: 1.5pt; height: 60%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.5); border-radius: 1.5pt; height: 68%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.6); border-radius: 1.5pt; height: 75%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.7); border-radius: 1.5pt; height: 72%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.8); border-radius: 1.5pt; height: 85%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.9); border-radius: 1.5pt; height: 82%;"></div>
<div style="flex: 1; background: #0EA5E9; border-radius: 1.5pt; height: 95%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.5); border-radius: 1.5pt; height: 70%; border: 1pt dashed rgba(14,165,233,0.5);"></div>
<div style="flex: 1; background: rgba(14,165,233,0.3); border-radius: 1.5pt; height: 50%; border: 1pt dashed rgba(14,165,233,0.3);"></div>
</div>
</div>
<!-- 조직 실적 -->
<div style="flex: 2; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 5pt 6pt;">
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4); margin-bottom: 3pt;">조직별 실적</p>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; align-items: center; gap: 3pt;">
<div style="width: 4pt; height: 4pt; background: #0EA5E9; border-radius: 50%;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.5); flex: 1;">영업1팀</p>
<div style="width: 50pt; height: 4pt; background: rgba(14,165,233,0.15); border-radius: 2pt; overflow: hidden;">
<div style="width: 85%; height: 100%; background: #0EA5E9; border-radius: 2pt;"></div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 3pt;">
<div style="width: 4pt; height: 4pt; background: #10B981; border-radius: 50%;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.5); flex: 1;">영업2팀</p>
<div style="width: 50pt; height: 4pt; background: rgba(16,185,129,0.15); border-radius: 2pt; overflow: hidden;">
<div style="width: 68%; height: 100%; background: #10B981; border-radius: 2pt;"></div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 3pt;">
<div style="width: 4pt; height: 4pt; background: #8B5CF6; border-radius: 50%;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.5); flex: 1;">생산팀</p>
<div style="width: 50pt; height: 4pt; background: rgba(139,92,246,0.15); border-radius: 2pt; overflow: hidden;">
<div style="width: 92%; height: 100%; background: #8B5CF6; border-radius: 2pt;"></div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 3pt;">
<div style="width: 4pt; height: 4pt; background: #F59E0B; border-radius: 50%;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.5); flex: 1;">품질팀</p>
<div style="width: 50pt; height: 4pt; background: rgba(245,158,11,0.15); border-radius: 2pt; overflow: hidden;">
<div style="width: 75%; height: 100%; background: #F59E0B; border-radius: 2pt;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 핵심 가치 3개 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9; margin-bottom: 6pt;">대표님이 얻는 것</p>
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; background: rgba(14,165,233,0.06); border: 1pt solid rgba(14,165,233,0.12); border-radius: 6pt; padding: 7pt 6pt;">
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 3pt;">
<div style="width: 16pt; height: 16pt; background: #0EA5E9; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="font-size: 8pt; font-weight: 800; color: #fff; white-space: nowrap;">1</p>
</div>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">즉시 현황 파악</p>
</div>
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">보고를 기다릴 필요 없이<br>로그인만으로 전사 현황 확인</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.06); border: 1pt solid rgba(16,185,129,0.12); border-radius: 6pt; padding: 7pt 6pt;">
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 3pt;">
<div style="width: 16pt; height: 16pt; background: #10B981; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="font-size: 8pt; font-weight: 800; color: #fff; white-space: nowrap;">2</p>
</div>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">데이터 기반 의사결정</p>
</div>
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">감이 아닌 숫자로 판단<br>매출 추이, KPI, 팀 성과 비교</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.06); border: 1pt solid rgba(139,92,246,0.12); border-radius: 6pt; padding: 7pt 6pt;">
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 3pt;">
<div style="width: 16pt; height: 16pt; background: #8B5CF6; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="font-size: 8pt; font-weight: 800; color: #fff; white-space: nowrap;">3</p>
</div>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">빠른 승인/결재</p>
</div>
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">대기 건수를 실시간 알림<br>모바일에서도 즉시 승인 처리</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 10pt;"></div>
<!-- 대시보드 상세 기능 6개 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #F59E0B; margin-bottom: 6pt;">대시보드 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 3pt;">
<div style="display: flex; gap: 3pt;">
<div style="flex: 1; display: flex; align-items: center; gap: 5pt; background: rgba(14,165,233,0.05); border-radius: 4pt; padding: 5pt 7pt;">
<div style="width: 4pt; height: 4pt; background: #0EA5E9; border-radius: 50%; flex-shrink: 0;"></div>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">실시간 <span style="color: #0EA5E9; font-weight: 700;">매출/수주 KPI</span></p>
</div>
<div style="flex: 1; display: flex; align-items: center; gap: 5pt; background: rgba(16,185,129,0.05); border-radius: 4pt; padding: 5pt 7pt;">
<div style="width: 4pt; height: 4pt; background: #10B981; border-radius: 50%; flex-shrink: 0;"></div>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">조직 계층별 <span style="color: #10B981; font-weight: 700;">실적 트리</span></p>
</div>
</div>
<div style="display: flex; gap: 3pt;">
<div style="flex: 1; display: flex; align-items: center; gap: 5pt; background: rgba(139,92,246,0.05); border-radius: 4pt; padding: 5pt 7pt;">
<div style="width: 4pt; height: 4pt; background: #8B5CF6; border-radius: 50%; flex-shrink: 0;"></div>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">역할별 <span style="color: #8B5CF6; font-weight: 700;">수당 현황</span></p>
</div>
<div style="flex: 1; display: flex; align-items: center; gap: 5pt; background: rgba(239,68,68,0.05); border-radius: 4pt; padding: 5pt 7pt;">
<div style="width: 4pt; height: 4pt; background: #EF4444; border-radius: 50%; flex-shrink: 0;"></div>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">미승인 건수 <span style="color: #EF4444; font-weight: 700;">실시간 알림</span></p>
</div>
</div>
<div style="display: flex; gap: 3pt;">
<div style="flex: 1; display: flex; align-items: center; gap: 5pt; background: rgba(245,158,11,0.05); border-radius: 4pt; padding: 5pt 7pt;">
<div style="width: 4pt; height: 4pt; background: #F59E0B; border-radius: 50%; flex-shrink: 0;"></div>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">기간별 <span style="color: #F59E0B; font-weight: 700;">트렌드 분석</span></p>
</div>
<div style="flex: 1; display: flex; align-items: center; gap: 5pt; background: rgba(236,72,153,0.05); border-radius: 4pt; padding: 5pt 7pt;">
<div style="width: 4pt; height: 4pt; background: #EC4899; border-radius: 50%; flex-shrink: 0;"></div>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">수익 <span style="color: #EC4899; font-weight: 700;">시뮬레이터</span></p>
</div>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 10pt;"></div>
<!-- Before/After 비교 -->
<div style="display: flex; gap: 6pt; margin-bottom: 10pt;">
<!-- Before -->
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #EF4444; margin-bottom: 5pt;">BEFORE</p>
<div style="background: rgba(239,68,68,0.05); border: 1pt solid rgba(239,68,68,0.1); border-radius: 5pt; padding: 6pt 8pt;">
<div style="display: flex; flex-direction: column; gap: 3pt;">
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">"매출 얼마야?" → 보고 대기 1~2일</p>
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">"수주 현황?" → Excel 취합 반나절</p>
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">"승인할 것 있어?" → 서류 뒤지기</p>
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">"팀별 실적?" → 각 팀장 개별 보고</p>
</div>
</div>
</div>
<!-- After -->
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981; margin-bottom: 5pt;">AFTER (SAM)</p>
<div style="background: rgba(16,185,129,0.05); border: 1pt solid rgba(16,185,129,0.1); border-radius: 5pt; padding: 6pt 8pt;">
<div style="display: flex; flex-direction: column; gap: 3pt;">
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">로그인 → <span style="color: #10B981; font-weight: 700;">3초만에 전사 현황</span></p>
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">클릭 한 번 → <span style="color: #10B981; font-weight: 700;">실시간 수주 데이터</span></p>
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">빨간 뱃지 → <span style="color: #10B981; font-weight: 700;">즉시 승인 처리</span></p>
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">트리 구조 → <span style="color: #10B981; font-weight: 700;">전 조직 실적 한눈에</span></p>
</div>
</div>
</div>
</div>
<!-- 기술 태그 -->
<div style="display: flex; gap: 4pt; margin-bottom: 8pt;">
<div style="background: rgba(255,255,255,0.04); border-radius: 3pt; padding: 3pt 7pt;">
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.35);">PC + 모바일</p>
</div>
<div style="background: rgba(255,255,255,0.04); border-radius: 3pt; padding: 3pt 7pt;">
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.35);">실시간 업데이트</p>
</div>
<div style="background: rgba(255,255,255,0.04); border-radius: 3pt; padding: 3pt 7pt;">
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.35);">역할별 권한</p>
</div>
<div style="background: rgba(255,255,255,0.04); border-radius: 3pt; padding: 3pt 7pt;">
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.35);">클라우드 기반</p>
</div>
<div style="background: rgba(255,255,255,0.04); border-radius: 3pt; padding: 3pt 7pt;">
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.35);">데이터 암호화</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; border-top: 1pt solid rgba(255,255,255,0.06); padding-top: 8pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: rgba(255,255,255,0.65);">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.25); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.3);">무료 데모 신청</p>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 600; color: #0EA5E9;">contact@codebridge-x.com</p>
</div>
</div>
</div>
</body>
</html>

242
sam/docs/brochure/v2/slides/brochure-dashboard-back.html
View File

@@ -1,242 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #0B1929;
padding: 20pt 22pt 12pt 22pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 10pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 18pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.25);">DASHBOARD FEATURES &amp; PRICING</p>
</div>
<!-- 대시보드 상세 기능 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9; margin-bottom: 6pt;">대시보드 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<!-- 01 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(14,165,233,0.06); border-radius: 4pt; padding: 4pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #0EA5E9; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">01</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 72pt; flex-shrink: 0; white-space: nowrap;">실시간 KPI 카드</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">월 매출, 수주 잔량, 납기 준수율, 승인 대기 한눈에</p>
</div>
<!-- 02 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(16,185,129,0.06); border-radius: 4pt; padding: 4pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #10B981; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">02</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 72pt; flex-shrink: 0; white-space: nowrap;">조직 실적 트리</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">계층 구조로 각 팀/개인 실적 펼쳐보기</p>
</div>
<!-- 03 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(139,92,246,0.06); border-radius: 4pt; padding: 4pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #8B5CF6; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">03</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 72pt; flex-shrink: 0; white-space: nowrap;">역할별 수당 현황</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">판매자/관리자/협업자 수당 배분 실시간 확인</p>
</div>
<!-- 04 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(239,68,68,0.06); border-radius: 4pt; padding: 4pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #EF4444; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">04</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 72pt; flex-shrink: 0; white-space: nowrap;">승인 대기 알림</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">가입/지급 승인 미처리 건수 빨간 뱃지로 강조</p>
</div>
<!-- 05 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(245,158,11,0.06); border-radius: 4pt; padding: 4pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #F59E0B; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">05</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 72pt; flex-shrink: 0; white-space: nowrap;">기간별 트렌드</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">당월/분기/연간 매출 추이 차트, 성장률 비교</p>
</div>
<!-- 06 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(236,72,153,0.06); border-radius: 4pt; padding: 4pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #EC4899; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">06</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 72pt; flex-shrink: 0; white-space: nowrap;">수익 시뮬레이터</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">가상 시나리오로 수당/마진 사전 계산</p>
</div>
<!-- 07 -->
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(14,165,233,0.06); border-radius: 4pt; padding: 4pt 8pt;">
<div style="width: 18pt; height: 18pt; background: #0EA5E9; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">07</p>
</div>
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 72pt; flex-shrink: 0; white-space: nowrap;">모바일 대응</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">이동중에도 스마트폰으로 KPI 확인 및 승인</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 8pt;"></div>
<!-- 역할별 화면 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981; margin-bottom: 6pt;">역할별 맞춤 화면</p>
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; background: rgba(14,165,233,0.08); border: 1pt solid rgba(14,165,233,0.15); border-radius: 5pt; padding: 7pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 800; color: #0EA5E9; margin-bottom: 2pt;">CEO</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">전사 KPI</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">매출/수주/조직 총괄</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.08); border: 1pt solid rgba(16,185,129,0.15); border-radius: 5pt; padding: 7pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 800; color: #10B981; margin-bottom: 2pt;">관리자</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">팀 실적 관리</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">하위 조직 성과 추적</p>
</div>
<div style="flex: 1; background: rgba(245,158,11,0.08); border: 1pt solid rgba(245,158,11,0.15); border-radius: 5pt; padding: 7pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 800; color: #F59E0B; margin-bottom: 2pt;">운영자</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">인력/승인 관리</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">가입/지급 승인 처리</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.08); border: 1pt solid rgba(139,92,246,0.15); border-radius: 5pt; padding: 7pt 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 800; color: #8B5CF6; margin-bottom: 2pt;">영업자</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">내 실적 조회</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">계약/수당 현황 확인</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 8pt;"></div>
<!-- SAM 전체 플랫폼 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #8B5CF6; margin-bottom: 6pt;">대시보드 + SAM 통합 플랫폼</p>
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 5pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.5);">견적/수주</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 5pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.5);">생산 (MES)</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 5pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.5);">품질/검사</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 5pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.5);">재고/자재</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 5pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.5);">인사/회계</p>
</div>
</div>
<p style="font-size: 6pt; color: rgba(255,255,255,0.3); margin-top: 3pt; text-align: center;">대시보드에 표시되는 모든 데이터는 SAM ERP/MES 실시간 데이터 기반</p>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 8pt;"></div>
<!-- 투자 비용 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #F59E0B; margin-bottom: 6pt;">투자 비용</p>
<div style="display: flex; gap: 6pt;">
<!-- 기본 패키지 -->
<div style="flex: 1;">
<div style="background: rgba(14,165,233,0.08); border: 1pt solid rgba(14,165,233,0.15); border-radius: 6pt; padding: 8pt 10pt; margin-bottom: 3pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #0EA5E9; margin-bottom: 3pt;">대시보드 포함 기본 패키지</p>
<p style="white-space: nowrap; font-size: 13pt; font-weight: 800; color: #ffffff;">2,000만원</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">+ 월 50만원 (유지보수)</p>
</div>
<div style="background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 3pt 6pt;">
<p style="font-size: 6pt; color: rgba(255,255,255,0.35); line-height: 1.4;">CEO 대시보드 + 견적/수주 + 생산<br>인사/회계 무료 포함</p>
</div>
</div>
<!-- 추가 옵션 -->
<div style="flex: 1;">
<div style="background: rgba(245,158,11,0.08); border: 1pt solid rgba(245,158,11,0.15); border-radius: 6pt; padding: 8pt 10pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #F59E0B; margin-bottom: 4pt;">추가 옵션 (선택)</p>
<div style="display: flex; flex-direction: column; gap: 3pt;">
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.5);">생산공정 관리</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #F59E0B;">+500만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.5);">품질관리(인정검사)</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #F59E0B;">+2,000만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.5);">AI 견적 자동 생성</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #F59E0B;">월 10~20만원</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 8pt;"></div>
<!-- 도입 프로세스 -->
<div style="margin-bottom: 8pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981; margin-bottom: 5pt;">도입 프로세스</p>
<div style="display: flex; gap: 3pt;">
<div style="flex: 1; border-radius: 5pt; padding: 5pt 3pt; text-align: center; background: rgba(14,165,233,0.1); border: 1pt solid rgba(14,165,233,0.2);">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9;">1</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.45); margin-top: 1pt;">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.65); margin-top: 1pt;">현장 인터뷰</p>
</div>
<div style="display: flex; align-items: center;">
<p style="font-size: 6pt; color: rgba(255,255,255,0.2);">&#9654;</p>
</div>
<div style="flex: 1; border-radius: 5pt; padding: 5pt 3pt; text-align: center; background: rgba(16,185,129,0.1); border: 1pt solid rgba(16,185,129,0.2);">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981;">2</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.45); margin-top: 1pt;">2~4주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.65); margin-top: 1pt;">맞춤 개발</p>
</div>
<div style="display: flex; align-items: center;">
<p style="font-size: 6pt; color: rgba(255,255,255,0.2);">&#9654;</p>
</div>
<div style="flex: 1; border-radius: 5pt; padding: 5pt 3pt; text-align: center; background: rgba(139,92,246,0.1); border: 1pt solid rgba(139,92,246,0.2);">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #8B5CF6;">3</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.45); margin-top: 1pt;">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.65); margin-top: 1pt;">데이터 이관</p>
</div>
<div style="display: flex; align-items: center;">
<p style="font-size: 6pt; color: rgba(255,255,255,0.2);">&#9654;</p>
</div>
<div style="flex: 1; border-radius: 5pt; padding: 5pt 3pt; text-align: center; background: rgba(245,158,11,0.1); border: 1pt solid rgba(245,158,11,0.2);">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #F59E0B;">4</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.45); margin-top: 1pt;">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.65); margin-top: 1pt;">교육/안정화</p>
</div>
</div>
</div>
<!-- CTA 푸터 -->
<div style="margin-top: auto; background: rgba(14,165,233,0.08); border: 1.5pt solid rgba(14,165,233,0.2); border-radius: 8pt; padding: 10pt 14pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #ffffff;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.4); margin-top: 2pt;">대표님 전용 대시보드를 직접 체험해 보세요</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.35); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- 회사명 -->
<div style="margin-top: 5pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.18);">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
</div>
</body>
</html>

172
sam/docs/brochure/v2/slides/brochure-dashboard-front.html
View File

@@ -1,172 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #0B1929;
padding: 28pt 24pt 20pt 24pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 18pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 22pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.25);">CEO DASHBOARD EDITION</p>
</div>
<!-- 히어로 섹션 -->
<div style="margin-bottom: 22pt;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 600; color: #0EA5E9; letter-spacing: 0.1em; margin-bottom: 6pt;">EXECUTIVE DASHBOARD</p>
<h1 style="font-size: 20pt; font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 8pt;">대표님, 지금 우리 회사<br>어떻게 돌아가고 있나요?</h1>
<p style="font-size: 8.5pt; color: rgba(255,255,255,0.45); line-height: 1.6;">매출이 얼마인지, 수주가 밀려있는지, 승인할 건이 있는지<br>더 이상 보고를 기다리지 마세요.</p>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 18pt;"></div>
<!-- 고민 섹션 -->
<div style="margin-bottom: 18pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #EF4444; margin-bottom: 8pt;">대표님의 하루</p>
<div style="display: flex; flex-direction: column; gap: 4pt;">
<div style="display: flex; align-items: center; gap: 8pt; background: rgba(239,68,68,0.05); border: 1pt solid rgba(239,68,68,0.08); border-radius: 5pt; padding: 7pt 10pt;">
<p style="white-space: nowrap; font-size: 9pt; color: rgba(255,255,255,0.3);">AM 9:00</p>
<p style="font-size: 7.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">"어제 매출 얼마야?" → <span style="color: #EF4444; font-weight: 600;">팀장 보고 대기중...</span></p>
</div>
<div style="display: flex; align-items: center; gap: 8pt; background: rgba(239,68,68,0.05); border: 1pt solid rgba(239,68,68,0.08); border-radius: 5pt; padding: 7pt 10pt;">
<p style="white-space: nowrap; font-size: 9pt; color: rgba(255,255,255,0.3);">PM 2:00</p>
<p style="font-size: 7.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">"수주 밀린 거 없어?" → <span style="color: #EF4444; font-weight: 600;">Excel 취합중...</span></p>
</div>
<div style="display: flex; align-items: center; gap: 8pt; background: rgba(239,68,68,0.05); border: 1pt solid rgba(239,68,68,0.08); border-radius: 5pt; padding: 7pt 10pt;">
<p style="white-space: nowrap; font-size: 9pt; color: rgba(255,255,255,0.3);">PM 5:00</p>
<p style="font-size: 7.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">"결재할 것 좀 정리해줘" → <span style="color: #EF4444; font-weight: 600;">서류 찾는중...</span></p>
</div>
</div>
</div>
<!-- 화살표 구분 -->
<div style="text-align: center; margin-bottom: 14pt;">
<p style="font-size: 10pt; color: rgba(14,165,233,0.6);">&#9660;</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9;">SAM으로 바꾸면</p>
</div>
<!-- 대시보드 미리보기 (Mock UI) -->
<div style="background: #111D2E; border: 1.5pt solid rgba(14,165,233,0.2); border-radius: 8pt; padding: 10pt; margin-bottom: 18pt;">
<!-- 대시보드 타이틀바 -->
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 7pt;">
<div style="width: 5pt; height: 5pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 5pt; height: 5pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 5pt; height: 5pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3); margin-left: 6pt;">SAM CEO Dashboard ― 로그인 후 3초</p>
</div>
<!-- KPI 카드 -->
<div style="display: flex; gap: 4pt; margin-bottom: 5pt;">
<div style="flex: 1; background: rgba(14,165,233,0.12); border: 1pt solid rgba(14,165,233,0.2); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5pt; color: #0EA5E9; font-weight: 600;">월 매출</p>
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #fff;">5.2억</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 15.3%</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.12); border: 1pt solid rgba(16,185,129,0.2); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 600;">누적 수주</p>
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #fff;">127건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 8건</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.12); border: 1pt solid rgba(139,92,246,0.2); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5pt; color: #8B5CF6; font-weight: 600;">납기 준수율</p>
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #fff;">96%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">목표 달성</p>
</div>
<div style="flex: 1; background: rgba(239,68,68,0.15); border: 1pt solid rgba(239,68,68,0.25); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 600;">승인 대기</p>
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
</div>
</div>
<!-- 차트 (바 그래프) -->
<div style="display: flex; gap: 4pt;">
<div style="flex: 3; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 5pt 6pt;">
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.35); margin-bottom: 3pt;">월별 매출 추이</p>
<div style="display: flex; align-items: flex-end; gap: 2pt; height: 30pt;">
<div style="flex: 1; background: rgba(14,165,233,0.3); border-radius: 1pt; height: 45%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.35); border-radius: 1pt; height: 52%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.4); border-radius: 1pt; height: 48%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.5); border-radius: 1pt; height: 62%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.55); border-radius: 1pt; height: 68%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.65); border-radius: 1pt; height: 75%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.7); border-radius: 1pt; height: 72%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.8); border-radius: 1pt; height: 85%;"></div>
<div style="flex: 1; background: rgba(14,165,233,0.85); border-radius: 1pt; height: 80%;"></div>
<div style="flex: 1; background: #0EA5E9; border-radius: 1pt; height: 95%;"></div>
</div>
</div>
<div style="flex: 2; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 5pt 6pt;">
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.35); margin-bottom: 3pt;">조직별 실적</p>
<div style="display: flex; flex-direction: column; gap: 3pt;">
<div style="display: flex; align-items: center; gap: 3pt;">
<div style="width: 3pt; height: 3pt; background: #0EA5E9; border-radius: 50%;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.45); width: 28pt;">영업1팀</p>
<div style="flex: 1; height: 4pt; background: rgba(14,165,233,0.15); border-radius: 2pt; overflow: hidden;">
<div style="width: 85%; height: 100%; background: #0EA5E9; border-radius: 2pt;"></div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 3pt;">
<div style="width: 3pt; height: 3pt; background: #10B981; border-radius: 50%;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.45); width: 28pt;">영업2팀</p>
<div style="flex: 1; height: 4pt; background: rgba(16,185,129,0.15); border-radius: 2pt; overflow: hidden;">
<div style="width: 68%; height: 100%; background: #10B981; border-radius: 2pt;"></div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 3pt;">
<div style="width: 3pt; height: 3pt; background: #8B5CF6; border-radius: 50%;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.45); width: 28pt;">생산팀</p>
<div style="flex: 1; height: 4pt; background: rgba(139,92,246,0.15); border-radius: 2pt; overflow: hidden;">
<div style="width: 92%; height: 100%; background: #8B5CF6; border-radius: 2pt;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 핵심 가치 -->
<div style="background: rgba(14,165,233,0.06); border: 1pt solid rgba(14,165,233,0.12); border-radius: 8pt; padding: 12pt 14pt; margin-bottom: 14pt;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: #0EA5E9; margin-bottom: 5pt;">SAM 대시보드가 드리는 약속</p>
<p style="font-size: 8pt; color: rgba(255,255,255,0.5); line-height: 1.6;">
로그인 한 번이면 전사 매출, 수주, 조직 실적, 승인 대기 건수를
한눈에 파악합니다. 보고를 기다리는 시간을 제로로 만들어 드립니다.
</p>
</div>
<!-- 기술 태그 -->
<div style="display: flex; gap: 5pt; margin-bottom: 10pt;">
<div style="background: rgba(255,255,255,0.04); border-radius: 4pt; padding: 4pt 8pt;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">클라우드 기반 (설치 불필요)</p>
</div>
<div style="background: rgba(255,255,255,0.04); border-radius: 4pt; padding: 4pt 8pt;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">모바일 대응</p>
</div>
<div style="background: rgba(255,255,255,0.04); border-radius: 4pt; padding: 4pt 8pt;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">역할별 권한 분리</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; border-top: 1pt solid rgba(255,255,255,0.06); padding-top: 10pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: rgba(255,255,255,0.65);">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.25); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3);">뒷면에서 상세 기능을 확인하세요</p>
</div>
</div>
</div>
</body>
</html>

27
sam/docs/brochure/v3/convert-1page.cjs
View File

@@ -1,27 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const htmlFile = path.join(__dirname, 'slides', 'brochure-dashboard-1page.html');
console.log('Converting CEO Dashboard v3 1-page brochure...');
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error: ${err.message}`);
}
const outputPath = path.join(__dirname, 'sam-brochure-v3-dashboard-1page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

31
sam/docs/brochure/v3/convert-2page.cjs
View File

@@ -1,31 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const slidesDir = path.join(__dirname, 'slides');
const slides = ['brochure-dashboard-front.html', 'brochure-dashboard-back.html'];
for (const file of slides) {
const htmlFile = path.join(slidesDir, file);
console.log(`Converting ${file} ...`);
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error on ${file}: ${err.message}`);
}
}
const outputPath = path.join(__dirname, 'sam-brochure-v3-dashboard-2page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

BIN
sam/docs/brochure/v3/sam-brochure-v3-dashboard-1page.pptx
View File

Binary file not shown.

BIN
sam/docs/brochure/v3/sam-brochure-v3-dashboard-2page.pptx
View File

Binary file not shown.

405
sam/docs/brochure/v3/slides/brochure-dashboard-1page.html
View File

@@ -1,405 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #0B1929;
padding: 22pt 20pt 12pt 20pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 10pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 20pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.2);">CEO DASHBOARD v3</p>
</div>
<!-- 히어로 -->
<div style="display: flex; align-items: center; gap: 12pt; margin-bottom: 12pt;">
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0EA5E9; letter-spacing: 0.1em; margin-bottom: 3pt;">EXECUTIVE DASHBOARD</p>
<h1 style="font-size: 16pt; font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 5pt;">대표님, 우리 회사<br>지금 어떤 상태인가요?</h1>
<p style="font-size: 7.5pt; color: rgba(255,255,255,0.4); line-height: 1.5;">보고 대기 없이, 로그인 한 번이면<br>전사 현황이 한눈에 들어옵니다.</p>
</div>
<!-- 히어로 SVG 아이콘: 대시보드 모니터 -->
<div style="flex-shrink: 0; width: 72pt; height: 72pt;">
<svg viewBox="0 0 80 80" width="72pt" height="72pt" xmlns="http://www.w3.org/2000/svg">
<rect x="8" y="10" width="64" height="44" rx="4" fill="none" stroke="#0EA5E9" stroke-width="1.5" opacity="0.6"/>
<rect x="12" y="14" width="56" height="36" rx="2" fill="#111D2E"/>
<!-- 미니 차트 바 -->
<rect x="16" y="38" width="6" height="8" rx="1" fill="#0EA5E9" opacity="0.5"/>
<rect x="24" y="34" width="6" height="12" rx="1" fill="#0EA5E9" opacity="0.65"/>
<rect x="32" y="30" width="6" height="16" rx="1" fill="#0EA5E9" opacity="0.8"/>
<rect x="40" y="26" width="6" height="20" rx="1" fill="#0EA5E9" opacity="0.9"/>
<rect x="48" y="22" width="6" height="24" rx="1" fill="#0EA5E9"/>
<rect x="56" y="28" width="6" height="18" rx="1" fill="#10B981" opacity="0.7"/>
<!-- 상단 KPI 표시 -->
<circle cx="18" cy="20" r="3" fill="#10B981" opacity="0.7"/>
<circle cx="28" cy="20" r="3" fill="#8B5CF6" opacity="0.7"/>
<circle cx="38" cy="20" r="3" fill="#F59E0B" opacity="0.7"/>
<circle cx="48" cy="20" r="3" fill="#EF4444" opacity="0.7"/>
<!-- 모니터 받침대 -->
<rect x="32" y="54" width="16" height="3" rx="1" fill="#0EA5E9" opacity="0.4"/>
<rect x="28" y="57" width="24" height="2" rx="1" fill="#0EA5E9" opacity="0.3"/>
<!-- 와이파이 시그널 -->
<path d="M58 62 Q62 58 66 62" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
<path d="M56 66 Q62 60 68 66" fill="none" stroke="#10B981" stroke-width="1" opacity="0.3"/>
<circle cx="62" cy="66" r="1.5" fill="#10B981" opacity="0.6"/>
</svg>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(14,165,233,0.15); margin-bottom: 10pt;"></div>
<!-- 대시보드 Mock UI -->
<div style="background: #111D2E; border: 1pt solid rgba(14,165,233,0.12); border-radius: 7pt; padding: 8pt; margin-bottom: 9pt;">
<!-- 타이틀바 -->
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 6pt;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.25); margin-left: 5pt;">SAM CEO Dashboard</p>
</div>
<!-- KPI 카드 4개 (SVG 아이콘 포함) -->
<div style="display: flex; gap: 3pt; margin-bottom: 5pt;">
<!-- 월 매출 -->
<div style="flex: 1; background: rgba(14,165,233,0.1); border: 1pt solid rgba(14,165,233,0.18); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<path d="M3 16 L3 8 L7 8 L7 16 Z" fill="#0EA5E9" opacity="0.4"/>
<path d="M8 16 L8 5 L12 5 L12 16 Z" fill="#0EA5E9" opacity="0.65"/>
<path d="M13 16 L13 3 L17 3 L17 16 Z" fill="#0EA5E9"/>
<path d="M3 16 L17 16" stroke="#0EA5E9" stroke-width="0.5" opacity="0.4"/>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #fff;">5.2억</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 15.3%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #0EA5E9; font-weight: 600; margin-top: 1pt;">월 매출</p>
</div>
<!-- 수주 잔량 -->
<div style="flex: 1; background: rgba(16,185,129,0.1); border: 1pt solid rgba(16,185,129,0.18); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="3" y="3" width="14" height="14" rx="2" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.5"/>
<path d="M6 10 L9 13 L14 7" fill="none" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #fff;">127건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 8건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 600; margin-top: 1pt;">수주 잔량</p>
</div>
<!-- 납기 준수율 -->
<div style="flex: 1; background: rgba(139,92,246,0.1); border: 1pt solid rgba(139,92,246,0.18); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="10" cy="10" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.3"/>
<circle cx="10" cy="10" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="40 44" stroke-dashoffset="-11" stroke-linecap="round"/>
<text x="10" y="12" text-anchor="middle" fill="#8B5CF6" font-size="5" font-weight="800">96</text>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #fff;">96%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">목표 달성</p>
<p style="white-space: nowrap; font-size: 5pt; color: #8B5CF6; font-weight: 600; margin-top: 1pt;">납기 준수율</p>
</div>
<!-- 승인 대기 -->
<div style="flex: 1; background: rgba(239,68,68,0.12); border: 1pt solid rgba(239,68,68,0.22); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<path d="M10 3 L17 15 L3 15 Z" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linejoin="round"/>
<line x1="10" y1="8" x2="10" y2="11" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="10" cy="13" r="0.8" fill="#EF4444"/>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 600; margin-top: 1pt;">승인 대기</p>
</div>
</div>
<!-- 차트 영역 -->
<div style="display: flex; gap: 4pt;">
<!-- 매출 추이 (라인 차트 SVG) -->
<div style="flex: 3; background: rgba(255,255,255,0.02); border-radius: 4pt; padding: 4pt 5pt;">
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.3); margin-bottom: 2pt;">월별 매출 추이</p>
<svg viewBox="0 0 160 40" width="100%" height="30pt" xmlns="http://www.w3.org/2000/svg">
<!-- 그리드 라인 -->
<line x1="0" y1="10" x2="160" y2="10" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
<line x1="0" y1="20" x2="160" y2="20" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
<line x1="0" y1="30" x2="160" y2="30" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
<!-- 영역 채우기 -->
<path d="M5 35 L20 28 L35 30 L50 22 L65 18 L80 14 L95 16 L110 10 L125 12 L140 5 L155 8 L155 38 L5 38 Z" fill="url(#areaGrad)" opacity="0.4"/>
<!-- 라인 -->
<path d="M5 35 L20 28 L35 30 L50 22 L65 18 L80 14 L95 16 L110 10 L125 12 L140 5 L155 8" fill="none" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<!-- 데이터 포인트 -->
<circle cx="140" cy="5" r="2.5" fill="#0EA5E9"/>
<circle cx="155" cy="8" r="2" fill="#0EA5E9" opacity="0.5" stroke="#0EA5E9" stroke-width="0.5" stroke-dasharray="1 1"/>
<defs>
<linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0EA5E9" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#0EA5E9" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
</div>
<!-- 도넛 차트: 팀별 비중 -->
<div style="flex: 2; background: rgba(255,255,255,0.02); border-radius: 4pt; padding: 4pt 5pt; display: flex; align-items: center; gap: 5pt;">
<svg viewBox="0 0 44 44" width="36pt" height="36pt" xmlns="http://www.w3.org/2000/svg">
<!-- 배경 원 -->
<circle cx="22" cy="22" r="16" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="5"/>
<!-- 영업1팀 38% -->
<circle cx="22" cy="22" r="16" fill="none" stroke="#0EA5E9" stroke-width="5" stroke-dasharray="38 62" stroke-dashoffset="25" stroke-linecap="round"/>
<!-- 영업2팀 25% -->
<circle cx="22" cy="22" r="16" fill="none" stroke="#10B981" stroke-width="5" stroke-dasharray="25 75" stroke-dashoffset="-13" stroke-linecap="round"/>
<!-- 생산팀 22% -->
<circle cx="22" cy="22" r="16" fill="none" stroke="#8B5CF6" stroke-width="5" stroke-dasharray="22 78" stroke-dashoffset="-38" stroke-linecap="round"/>
<!-- 품질팀 15% -->
<circle cx="22" cy="22" r="16" fill="none" stroke="#F59E0B" stroke-width="5" stroke-dasharray="13 87" stroke-dashoffset="-60" stroke-linecap="round"/>
</svg>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #0EA5E9; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.45);">영업1팀 38%</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #10B981; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.45);">영업2팀 25%</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #8B5CF6; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.45);">생산팀 22%</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #F59E0B; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.45);">품질팀 15%</p>
</div>
</div>
</div>
</div>
</div>
<!-- 핵심 가치 3개 (SVG 아이콘) -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9; margin-bottom: 5pt;">대표님이 얻는 것</p>
<div style="display: flex; gap: 4pt;">
<!-- 즉시 현황 파악 -->
<div style="flex: 1; background: rgba(14,165,233,0.05); border: 1pt solid rgba(14,165,233,0.1); border-radius: 6pt; padding: 7pt 5pt; text-align: center;">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<circle cx="14" cy="14" r="10" fill="none" stroke="#0EA5E9" stroke-width="1.2" opacity="0.4"/>
<path d="M14 8 L14 14 L18 17" fill="none" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="14" cy="14" r="1.5" fill="#0EA5E9"/>
<!-- 번개 (빠름) -->
<path d="M22 5 L20 10 L23 10 L21 15" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">즉시 현황 파악</p>
<p style="font-size: 5.5pt; color: rgba(255,255,255,0.35); margin-top: 2pt; line-height: 1.4;">로그인 3초면<br>전사 현황 확인</p>
</div>
<!-- 데이터 기반 의사결정 -->
<div style="flex: 1; background: rgba(16,185,129,0.05); border: 1pt solid rgba(16,185,129,0.1); border-radius: 6pt; padding: 7pt 5pt; text-align: center;">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<!-- 뇌 (의사결정) -->
<circle cx="14" cy="12" r="8" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.4"/>
<path d="M11 8 Q14 6 17 8" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<path d="M10 12 Q14 10 18 12" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<path d="M11 16 Q14 14 17 16" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<!-- 데이터 포인트 -->
<circle cx="8" cy="22" r="1.2" fill="#10B981" opacity="0.6"/>
<circle cx="14" cy="22" r="1.2" fill="#10B981" opacity="0.8"/>
<circle cx="20" cy="22" r="1.2" fill="#10B981"/>
<line x1="8" y1="22" x2="20" y2="22" stroke="#10B981" stroke-width="0.5" opacity="0.3"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">데이터로 판단</p>
<p style="font-size: 5.5pt; color: rgba(255,255,255,0.35); margin-top: 2pt; line-height: 1.4;">감이 아닌 숫자로<br>KPI/팀 성과 비교</p>
</div>
<!-- 빠른 승인 -->
<div style="flex: 1; background: rgba(139,92,246,0.05); border: 1pt solid rgba(139,92,246,0.1); border-radius: 6pt; padding: 7pt 5pt; text-align: center;">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<!-- 체크마크 원 -->
<circle cx="14" cy="14" r="9" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.4"/>
<path d="M9 14 L12.5 17.5 L19 10.5" fill="none" stroke="#8B5CF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<!-- 모바일 아이콘 -->
<rect x="20" y="19" width="5" height="8" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
<circle cx="22.5" cy="25.5" r="0.5" fill="#8B5CF6" opacity="0.5"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">모바일 승인</p>
<p style="font-size: 5.5pt; color: rgba(255,255,255,0.35); margin-top: 2pt; line-height: 1.4;">이동중에도 즉시<br>결재/승인 처리</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(139,92,246,0.15); margin-bottom: 9pt;"></div>
<!-- 대시보드 6대 기능 (SVG 아이콘 + 텍스트) -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #F59E0B; margin-bottom: 5pt;">대시보드 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; gap: 2pt;">
<!-- 01 실시간 KPI -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(14,165,233,0.04); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="10" width="3" height="6" rx="0.5" fill="#0EA5E9" opacity="0.5"/>
<rect x="7" y="6" width="3" height="10" rx="0.5" fill="#0EA5E9" opacity="0.75"/>
<rect x="12" y="2" width="3" height="14" rx="0.5" fill="#0EA5E9"/>
</svg>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">실시간 <span style="color: #0EA5E9; font-weight: 700;">매출/수주 KPI</span></p>
</div>
<!-- 02 조직 트리 -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(16,185,129,0.04); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="9" cy="4" r="2.5" fill="none" stroke="#10B981" stroke-width="1"/>
<line x1="9" y1="6.5" x2="9" y2="9" stroke="#10B981" stroke-width="0.8"/>
<line x1="4" y1="9" x2="14" y2="9" stroke="#10B981" stroke-width="0.8"/>
<circle cx="4" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="9" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="14" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="4" y1="9" x2="4" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="9" y1="9" x2="9" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="14" y1="9" x2="14" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
</svg>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">조직 계층별 <span style="color: #10B981; font-weight: 700;">실적 트리</span></p>
</div>
</div>
<div style="display: flex; gap: 2pt;">
<!-- 03 수당 현황 -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(139,92,246,0.04); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="9" cy="9" r="7" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<text x="9" y="11.5" text-anchor="middle" fill="#8B5CF6" font-size="8" font-weight="800">&#8361;</text>
</svg>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">역할별 <span style="color: #8B5CF6; font-weight: 700;">수당 현황</span></p>
</div>
<!-- 04 승인 알림 -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(239,68,68,0.04); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<path d="M9 3 C5 3 3 6 3 9 L3 12 L2 13 L16 13 L15 12 L15 9 C15 6 13 3 9 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.6"/>
<circle cx="13" cy="5" r="3" fill="#EF4444"/>
<text x="13" y="6.5" text-anchor="middle" fill="#fff" font-size="4" font-weight="700">5</text>
<path d="M7 14 Q9 16 11 14" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.5"/>
</svg>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">미승인 <span style="color: #EF4444; font-weight: 700;">실시간 알림</span></p>
</div>
</div>
<div style="display: flex; gap: 2pt;">
<!-- 05 트렌드 -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(245,158,11,0.04); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<path d="M3 14 L7 10 L10 12 L15 5" fill="none" stroke="#F59E0B" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 5 L15 5 L15 8" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">기간별 <span style="color: #F59E0B; font-weight: 700;">트렌드 분석</span></p>
</div>
<!-- 06 시뮬레이터 -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(236,72,153,0.04); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="3" width="14" height="12" rx="1.5" fill="none" stroke="#EC4899" stroke-width="1" opacity="0.5"/>
<line x1="5" y1="7" x2="13" y2="7" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="9" x2="11" y2="9" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="11" x2="9" y2="11" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<circle cx="14" cy="13" r="3.5" fill="#0B1929" stroke="#EC4899" stroke-width="0.8"/>
<path d="M13 13 L15 13 M14 12 L14 14" stroke="#EC4899" stroke-width="0.8" stroke-linecap="round"/>
</svg>
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">수익 <span style="color: #EC4899; font-weight: 700;">시뮬레이터</span></p>
</div>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 9pt;"></div>
<!-- Before → After 인포그래픽 -->
<div style="display: flex; gap: 4pt; margin-bottom: 9pt;">
<!-- Before -->
<div style="flex: 5; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.08); border-radius: 5pt; padding: 5pt 6pt 12pt 6pt;">
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#EF4444" stroke-width="1"/>
<line x1="4.5" y1="4.5" x2="9.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
<line x1="9.5" y1="4.5" x2="4.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #EF4444;">BEFORE</p>
</div>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">매출? → 보고 대기 1~2일</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">수주? → Excel 취합 반나절</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">승인? → 서류 찾기 30분</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">실적? → 각 팀장 개별 보고</p>
</div>
<!-- 화살표 -->
<div style="display: flex; align-items: center; flex-shrink: 0;">
<svg viewBox="0 0 20 20" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg">
<path d="M4 10 L14 10" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round"/>
<path d="M11 6 L15 10 L11 14" fill="none" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<!-- After -->
<div style="flex: 5; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.08); border-radius: 5pt; padding: 5pt 6pt 12pt 6pt;">
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#10B981" stroke-width="1"/>
<path d="M4.5 7 L6.5 9 L10 5" fill="none" stroke="#10B981" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #10B981;">AFTER (SAM)</p>
</div>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">로그인 → <span style="color:#10B981;font-weight:600;">3초 전사 현황</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">클릭 → <span style="color:#10B981;font-weight:600;">실시간 수주 데이터</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">뱃지 → <span style="color:#10B981;font-weight:600;">즉시 승인 처리</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">트리 → <span style="color:#10B981;font-weight:600;">전 조직 한눈에</span></p>
</div>
</div>
<!-- 기술 태그 -->
<div style="display: flex; gap: 3pt; margin-bottom: 6pt;">
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.03); border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="5" cy="5" r="3.5" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
<path d="M5 2.5 L5 5 L7 6.5" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="0.6" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.3);">실시간 업데이트</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.03); border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2.5" y="1" width="5" height="8" rx="1" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
<circle cx="5" cy="7.5" r="0.5" fill="rgba(255,255,255,0.3)"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.3);">PC + 모바일</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.03); border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<rect x="1.5" y="2" width="7" height="6" rx="1" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
<circle cx="5" cy="5" r="1.5" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="0.6"/>
<line x1="6" y1="3.5" x2="7.5" y2="2" stroke="rgba(255,255,255,0.2)" stroke-width="0.6"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.3);">역할별 권한</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.03); border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1 Q8 1 8 4 L8 5 Q8 8 5 8 Q2 8 2 5 L2 4 Q2 1 5 1 Z" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
<line x1="5" y1="4" x2="5" y2="6" stroke="rgba(255,255,255,0.3)" stroke-width="0.6" stroke-linecap="round"/>
<circle cx="5" cy="3.5" r="0.5" fill="rgba(255,255,255,0.3)"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.3);">데이터 암호화</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.03); border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<path d="M2 7 Q5 3 8 7" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
<path d="M3.5 7 Q5 5 6.5 7" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="0.8"/>
<circle cx="5" cy="7.5" r="0.8" fill="rgba(255,255,255,0.3)"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.3);">클라우드</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; border-top: 1pt solid rgba(255,255,255,0.06); padding-top: 7pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: rgba(255,255,255,0.6);">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.2); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.25);">무료 데모 신청</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0EA5E9;">contact@codebridge-x.com</p>
</div>
</div>
</div>
</body>
</html>

373
sam/docs/brochure/v3/slides/brochure-dashboard-back.html
View File

@@ -1,373 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #0B1929;
padding: 20pt 22pt 12pt 22pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 10pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 18pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.2);">FEATURES &amp; PRICING</p>
</div>
<!-- 대시보드 7대 기능 (SVG 아이콘) -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9; margin-bottom: 6pt;">대시보드 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<!-- 01 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(14,165,233,0.05); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="2" y="11" width="4" height="6" rx="0.5" fill="#0EA5E9" opacity="0.45"/>
<rect x="8" y="7" width="4" height="10" rx="0.5" fill="#0EA5E9" opacity="0.7"/>
<rect x="14" y="3" width="4" height="14" rx="0.5" fill="#0EA5E9"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">실시간 KPI 카드</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">매출, 수주, 납기율, 승인 대기</p>
</div>
<!-- 02 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(16,185,129,0.05); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="10" cy="4.5" r="2.5" fill="none" stroke="#10B981" stroke-width="1.1"/>
<line x1="10" y1="7" x2="10" y2="9.5" stroke="#10B981" stroke-width="0.8"/>
<line x1="5" y1="9.5" x2="15" y2="9.5" stroke="#10B981" stroke-width="0.8"/>
<circle cx="5" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<circle cx="10" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<circle cx="15" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<line x1="5" y1="9.5" x2="5" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="10" y1="9.5" x2="10" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="15" y1="9.5" x2="15" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="3" cy="17" r="1.3" fill="none" stroke="#10B981" stroke-width="0.6" opacity="0.4"/>
<circle cx="7" cy="17" r="1.3" fill="none" stroke="#10B981" stroke-width="0.6" opacity="0.4"/>
<line x1="5" y1="15" x2="3" y2="15.7" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="5" y1="15" x2="7" y2="15.7" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">조직 실적 트리</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">계층별 팀/개인 실적 펼쳐보기</p>
</div>
<!-- 03 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(139,92,246,0.05); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="10" cy="10" r="7.5" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<text x="10" y="12.5" text-anchor="middle" fill="#8B5CF6" font-size="9" font-weight="800">&#8361;</text>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">역할별 수당 현황</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">판매자/관리자/협업자 배분 확인</p>
</div>
<!-- 04 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(239,68,68,0.05); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M10 3 C6 3 3 6 3 9.5 L3 13 L1.5 14.5 L18.5 14.5 L17 13 L17 9.5 C17 6 14 3 10 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.5"/>
<circle cx="15" cy="5" r="3.5" fill="#EF4444"/>
<text x="15" y="7" text-anchor="middle" fill="#fff" font-size="4.5" font-weight="800">!</text>
<path d="M7.5 15.5 Q10 18 12.5 15.5" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">승인 대기 알림</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">가입/지급 미처리 빨간 뱃지</p>
</div>
<!-- 05 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(245,158,11,0.05); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M3 15 L7 11 L10 13 L16 5" fill="none" stroke="#F59E0B" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13 5 L16 5 L16 8" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">기간별 트렌드</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">당월/분기/연간 추이 차트</p>
</div>
<!-- 06 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(236,72,153,0.05); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="2" y="3" width="16" height="14" rx="2" fill="none" stroke="#EC4899" stroke-width="1" opacity="0.4"/>
<line x1="5" y1="7.5" x2="15" y2="7.5" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="10" x2="12" y2="10" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="12.5" x2="9" y2="12.5" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<circle cx="15.5" cy="14.5" r="3.5" fill="#0B1929" stroke="#EC4899" stroke-width="0.9"/>
<path d="M14.5 14.5 L16.5 14.5 M15.5 13.5 L15.5 15.5" stroke="#EC4899" stroke-width="0.8" stroke-linecap="round"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">수익 시뮬레이터</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">가상 시나리오 수당/마진 계산</p>
</div>
<!-- 07 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(14,165,233,0.05); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="5" y="2" width="10" height="16" rx="2" fill="none" stroke="#0EA5E9" stroke-width="1" opacity="0.5"/>
<circle cx="10" cy="16" r="1" fill="#0EA5E9" opacity="0.5"/>
<rect x="7" y="5" width="6" height="8" rx="0.5" fill="rgba(14,165,233,0.15)"/>
<rect x="8" y="6" width="4" height="1.5" rx="0.3" fill="#0EA5E9" opacity="0.4"/>
<rect x="8" y="8.5" width="4" height="1.5" rx="0.3" fill="#10B981" opacity="0.4"/>
<rect x="8" y="11" width="4" height="1.5" rx="0.3" fill="#8B5CF6" opacity="0.4"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">모바일 대응</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">스마트폰으로 KPI 확인/승인</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(14,165,233,0.15); margin-bottom: 8pt;"></div>
<!-- 역할별 맞춤 화면 (SVG 아이콘) -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981; margin-bottom: 5pt;">역할별 맞춤 화면</p>
<div style="display: flex; gap: 4pt;">
<!-- CEO -->
<div style="flex: 1; background: rgba(14,165,233,0.06); border: 1pt solid rgba(14,165,233,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="12" cy="8" r="4" fill="none" stroke="#0EA5E9" stroke-width="1.2"/>
<path d="M4 20 Q4 14 12 14 Q20 14 20 20" fill="none" stroke="#0EA5E9" stroke-width="1.2"/>
<path d="M8 4 L12 1 L16 4" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" opacity="0.7"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #0EA5E9;">CEO</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.55); margin-top: 1pt;">전사 KPI 총괄</p>
</div>
<!-- 관리자 -->
<div style="flex: 1; background: rgba(16,185,129,0.06); border: 1pt solid rgba(16,185,129,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="8" cy="8" r="3" fill="none" stroke="#10B981" stroke-width="1"/>
<circle cx="16" cy="8" r="3" fill="none" stroke="#10B981" stroke-width="1" opacity="0.6"/>
<path d="M2 18 Q2 13 8 13 Q14 13 14 18" fill="none" stroke="#10B981" stroke-width="1"/>
<path d="M12 18 Q12 13 16 13 Q22 13 22 18" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #10B981;">관리자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.55); margin-top: 1pt;">팀 실적 관리</p>
</div>
<!-- 운영자 -->
<div style="flex: 1; background: rgba(245,158,11,0.06); border: 1pt solid rgba(245,158,11,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="12" cy="12" r="8" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.4"/>
<circle cx="12" cy="12" r="3" fill="none" stroke="#F59E0B" stroke-width="1.2"/>
<line x1="12" y1="4" x2="12" y2="6" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="12" y1="18" x2="12" y2="20" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="4" y1="12" x2="6" y2="12" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="18" y1="12" x2="20" y2="12" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #F59E0B;">운영자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.55); margin-top: 1pt;">인력/승인 관리</p>
</div>
<!-- 영업자 -->
<div style="flex: 1; background: rgba(139,92,246,0.06); border: 1pt solid rgba(139,92,246,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="4" y="3" width="16" height="18" rx="2" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.5"/>
<line x1="7" y1="8" x2="17" y2="8" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<line x1="7" y1="11" x2="14" y2="11" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<line x1="7" y1="14" x2="12" y2="14" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<path d="M14 16 L16 18 L20 13" fill="none" stroke="#8B5CF6" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #8B5CF6;">영업자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.55); margin-top: 1pt;">내 실적 조회</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(139,92,246,0.15); margin-bottom: 8pt;"></div>
<!-- SAM 통합 플랫폼 연결 -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #8B5CF6; margin-bottom: 5pt;">대시보드 + SAM ERP/MES 통합</p>
<div style="display: flex; gap: 3pt;">
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="2" width="12" height="12" rx="1.5" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
<line x1="5" y1="6" x2="11" y2="6" stroke="rgba(255,255,255,0.15)" stroke-width="0.5"/>
<line x1="5" y1="8" x2="9" y2="8" stroke="rgba(255,255,255,0.15)" stroke-width="0.5"/>
<line x1="5" y1="10" x2="11" y2="10" stroke="rgba(255,255,255,0.15)" stroke-width="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.45);">견적/수주</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="8" r="5" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
<circle cx="8" cy="8" r="2" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="0.5"/>
<line x1="8" y1="3" x2="8" y2="4.5" stroke="rgba(255,255,255,0.15)" stroke-width="0.5"/>
<line x1="13" y1="8" x2="11.5" y2="8" stroke="rgba(255,255,255,0.15)" stroke-width="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.45);">생산 MES</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<path d="M5 3 L11 3 L13 6 L8 14 L3 6 Z" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
<path d="M3 6 L13 6" stroke="rgba(255,255,255,0.12)" stroke-width="0.5"/>
<path d="M8 6 L8 14" stroke="rgba(255,255,255,0.12)" stroke-width="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.45);">품질/검사</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="3" y="4" width="10" height="9" rx="1" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
<line x1="3" y1="7" x2="13" y2="7" stroke="rgba(255,255,255,0.12)" stroke-width="0.5"/>
<line x1="8" y1="7" x2="8" y2="13" stroke="rgba(255,255,255,0.12)" stroke-width="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.45);">재고/자재</p>
</div>
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="6" r="3" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
<path d="M3 14 Q3 10 8 10 Q13 10 13 14" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.45);">인사/회계</p>
</div>
</div>
<p style="font-size: 5.5pt; color: rgba(255,255,255,0.25); margin-top: 3pt; text-align: center;">대시보드의 모든 데이터는 SAM ERP/MES 실시간 데이터 기반</p>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.05); margin-bottom: 8pt;"></div>
<!-- 투자 비용 -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #F59E0B; margin-bottom: 5pt;">투자 비용</p>
<div style="display: flex; gap: 5pt;">
<!-- 기본 패키지 -->
<div style="flex: 1;">
<div style="background: rgba(14,165,233,0.07); border: 1pt solid rgba(14,165,233,0.14); border-radius: 6pt; padding: 7pt 8pt; margin-bottom: 3pt;">
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="12" height="12" rx="2" fill="none" stroke="#0EA5E9" stroke-width="1" opacity="0.5"/>
<path d="M4 7 L6 9 L10 5" fill="none" stroke="#0EA5E9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #0EA5E9;">대시보드 포함 기본 패키지</p>
</div>
<p style="white-space: nowrap; font-size: 13pt; font-weight: 800; color: #ffffff;">2,000만원</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">+ 월 50만원 (유지보수)</p>
</div>
<div style="background: rgba(255,255,255,0.02); border-radius: 3pt; padding: 3pt 5pt;">
<p style="font-size: 5.5pt; color: rgba(255,255,255,0.3); line-height: 1.4;">CEO 대시보드 + 견적/수주 + 생산<br>인사/회계 무료 포함</p>
</div>
</div>
<!-- 추가 옵션 -->
<div style="flex: 1;">
<div style="background: rgba(245,158,11,0.07); border: 1pt solid rgba(245,158,11,0.14); border-radius: 6pt; padding: 7pt 8pt;">
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 4pt;">
<svg viewBox="0 0 14 14" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.5"/>
<line x1="7" y1="4.5" x2="7" y2="9.5" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="4.5" y1="7" x2="9.5" y2="7" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #F59E0B;">추가 옵션 (선택)</p>
</div>
<div style="display: flex; flex-direction: column; gap: 3pt;">
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.45);">생산공정 관리</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F59E0B;">+500만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.45);">품질관리(인정검사)</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F59E0B;">+2,000만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.45);">AI 견적 자동 생성</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F59E0B;">월 10~20만원</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(255,255,255,0.05); margin-bottom: 8pt;"></div>
<!-- 도입 프로세스 (SVG 화살표 연결) -->
<div style="margin-bottom: 6pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981; margin-bottom: 5pt;">도입 프로세스</p>
<div style="display: flex; gap: 2pt; align-items: center;">
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(14,165,233,0.08); border: 1pt solid rgba(14,165,233,0.15);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="5" r="3" fill="none" stroke="#0EA5E9" stroke-width="0.8"/>
<path d="M4 14 Q4 10 8 10 Q12 10 12 14" fill="none" stroke="#0EA5E9" stroke-width="0.8"/>
<path d="M13 5 L15 5 M14 4 L14 6" stroke="#0EA5E9" stroke-width="0.6" stroke-linecap="round" opacity="0.6"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">현장 인터뷰</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(16,185,129,0.08); border: 1pt solid rgba(16,185,129,0.15);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="3" y="2" width="10" height="12" rx="1.5" fill="none" stroke="#10B981" stroke-width="0.8"/>
<line x1="6" y1="5" x2="10" y2="5" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="7" x2="10" y2="7" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="9" x2="10" y2="9" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="11" x2="9" y2="11" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">2~4주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">맞춤 개발</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(139,92,246,0.08); border: 1pt solid rgba(139,92,246,0.15);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="3" width="5" height="10" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
<rect x="9" y="3" width="5" height="10" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8"/>
<path d="M7 7 L9 8 M7 8 L9 7" stroke="#8B5CF6" stroke-width="0.5" opacity="0.4"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">데이터 이관</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(245,158,11,0.08); border: 1pt solid rgba(245,158,11,0.15);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<path d="M8 2 L14 8 L8 14 L2 8 Z" fill="none" stroke="#F59E0B" stroke-width="0.8"/>
<path d="M5.5 8 L7 9.5 L10.5 6" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">교육/안정화</p>
</div>
</div>
</div>
<!-- CTA 푸터 -->
<div style="margin-top: auto; background: rgba(14,165,233,0.06); border: 1.5pt solid rgba(14,165,233,0.15); border-radius: 7pt; padding: 9pt 12pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 22 22" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="11" cy="11" r="9" fill="none" stroke="#0EA5E9" stroke-width="1.2" opacity="0.5"/>
<path d="M11 6 L11 11 L15 13" fill="none" stroke="#0EA5E9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div>
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #ffffff;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.35); margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
</div>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0EA5E9;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3); margin-top: 1pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- 회사명 -->
<div style="margin-top: 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.15);">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
</div>
</body>
</html>

262
sam/docs/brochure/v3/slides/brochure-dashboard-front.html
View File

@@ -1,262 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #0B1929;
padding: 26pt 22pt 16pt 22pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 16pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 22pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.2);">CEO DASHBOARD v3</p>
</div>
<!-- 히어로 섹션 -->
<div style="display: flex; align-items: center; gap: 14pt; margin-bottom: 18pt;">
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 600; color: #0EA5E9; letter-spacing: 0.1em; margin-bottom: 5pt;">EXECUTIVE DASHBOARD</p>
<h1 style="font-size: 19pt; font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 6pt;">대표님, 우리 회사<br>지금 어떤 상태인가요?</h1>
<p style="font-size: 8pt; color: rgba(255,255,255,0.4); line-height: 1.55;">매출, 수주, 조직 실적, 승인 대기<br>더 이상 보고를 기다리지 마세요.</p>
</div>
<!-- 히어로 아이콘 -->
<div style="flex-shrink: 0; width: 80pt; height: 80pt;">
<svg viewBox="0 0 90 90" width="80pt" height="80pt" xmlns="http://www.w3.org/2000/svg">
<!-- 모니터 외곽 -->
<rect x="8" y="10" width="74" height="50" rx="5" fill="none" stroke="#0EA5E9" stroke-width="1.5" opacity="0.5"/>
<rect x="12" y="14" width="66" height="42" rx="3" fill="#111D2E"/>
<!-- KPI 미니 카드들 -->
<rect x="15" y="17" width="14" height="10" rx="1.5" fill="rgba(14,165,233,0.2)"/>
<rect x="31" y="17" width="14" height="10" rx="1.5" fill="rgba(16,185,129,0.2)"/>
<rect x="47" y="17" width="14" height="10" rx="1.5" fill="rgba(139,92,246,0.2)"/>
<rect x="63" y="17" width="12" height="10" rx="1.5" fill="rgba(239,68,68,0.2)"/>
<!-- 미니 차트 -->
<path d="M16 45 L22 40 L28 42 L34 36 L40 33 L46 30 L52 32 L58 26 L64 28 L70 22 L75 25" fill="none" stroke="#0EA5E9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" opacity="0.8"/>
<path d="M16 45 L22 40 L28 42 L34 36 L40 33 L46 30 L52 32 L58 26 L64 28 L70 22 L75 25 L75 50 L16 50 Z" fill="url(#heroGrad)" opacity="0.3"/>
<!-- 도넛 -->
<circle cx="25" cy="50" r="0" fill="none"/>
<!-- 모니터 받침 -->
<rect x="36" y="60" width="18" height="3" rx="1" fill="#0EA5E9" opacity="0.3"/>
<rect x="32" y="63" width="26" height="2" rx="1" fill="#0EA5E9" opacity="0.2"/>
<!-- 알림 뱃지 -->
<circle cx="73" cy="14" r="5" fill="#EF4444" opacity="0.9"/>
<text x="73" y="16.5" text-anchor="middle" fill="#fff" font-size="6" font-weight="800">5</text>
<!-- 와이파이 -->
<path d="M66 72 Q72 66 78 72" fill="none" stroke="#10B981" stroke-width="1" opacity="0.4"/>
<path d="M63 76 Q72 68 81 76" fill="none" stroke="#10B981" stroke-width="1" opacity="0.25"/>
<circle cx="72" cy="76" r="1.5" fill="#10B981" opacity="0.5"/>
<defs>
<linearGradient id="heroGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0EA5E9" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#0EA5E9" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(14,165,233,0.15); margin-bottom: 16pt;"></div>
<!-- 고민 섹션 (타임라인 인포그래픽) -->
<div style="margin-bottom: 16pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #EF4444; margin-bottom: 8pt;">대표님의 하루</p>
<div style="display: flex; flex-direction: column; gap: 4pt;">
<!-- AM 9:00 -->
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 26 26" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="13" cy="13" r="11" fill="rgba(239,68,68,0.08)" stroke="rgba(239,68,68,0.2)" stroke-width="1"/>
<circle cx="13" cy="13" r="8" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
<path d="M13 7 L13 13 L17 15" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<text x="13" y="22" text-anchor="middle" fill="#EF4444" font-size="3.5" font-weight="600" opacity="0.7">9AM</text>
</svg>
<div style="flex: 1; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.08); border-radius: 4pt; padding: 6pt 8pt;">
<p style="font-size: 7.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">"어제 매출 얼마야?" → <span style="color: #EF4444; font-weight: 600;">팀장 보고 대기중...</span></p>
</div>
</div>
<!-- PM 2:00 -->
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 26 26" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="13" cy="13" r="11" fill="rgba(239,68,68,0.08)" stroke="rgba(239,68,68,0.2)" stroke-width="1"/>
<circle cx="13" cy="13" r="8" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
<path d="M13 7 L13 13 L9 16" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<text x="13" y="22" text-anchor="middle" fill="#EF4444" font-size="3.5" font-weight="600" opacity="0.7">2PM</text>
</svg>
<div style="flex: 1; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.08); border-radius: 4pt; padding: 6pt 8pt;">
<p style="font-size: 7.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">"수주 밀린 거 없어?" → <span style="color: #EF4444; font-weight: 600;">Excel 취합중...</span></p>
</div>
</div>
<!-- PM 5:00 -->
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 26 26" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="13" cy="13" r="11" fill="rgba(239,68,68,0.08)" stroke="rgba(239,68,68,0.2)" stroke-width="1"/>
<circle cx="13" cy="13" r="8" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
<path d="M13 7 L13 13 L8 12" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<text x="13" y="22" text-anchor="middle" fill="#EF4444" font-size="3.5" font-weight="600" opacity="0.7">5PM</text>
</svg>
<div style="flex: 1; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.08); border-radius: 4pt; padding: 6pt 8pt;">
<p style="font-size: 7.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">"결재할 것 정리해줘" → <span style="color: #EF4444; font-weight: 600;">서류 찾는중...</span></p>
</div>
</div>
</div>
</div>
<!-- 전환 화살표 -->
<div style="text-align: center; margin-bottom: 12pt;">
<svg viewBox="0 0 40 24" width="40pt" height="16pt" xmlns="http://www.w3.org/2000/svg">
<path d="M10 6 L20 18 L30 6" fill="none" stroke="#0EA5E9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.6"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0EA5E9;">SAM 도입 후</p>
</div>
<!-- 대시보드 Mock UI -->
<div style="background: #111D2E; border: 1.5pt solid rgba(14,165,233,0.15); border-radius: 7pt; padding: 9pt; margin-bottom: 16pt;">
<!-- 타이틀바 -->
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 6pt;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.25); margin-left: 5pt;">SAM CEO Dashboard ― 로그인 후 3초</p>
</div>
<!-- KPI 카드 (SVG 아이콘 포함) -->
<div style="display: flex; gap: 3pt; margin-bottom: 5pt;">
<div style="flex: 1; background: rgba(14,165,233,0.1); border: 1pt solid rgba(14,165,233,0.18); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="9" width="3" height="5" rx="0.5" fill="#0EA5E9" opacity="0.4"/>
<rect x="6" y="5" width="3" height="9" rx="0.5" fill="#0EA5E9" opacity="0.7"/>
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="#0EA5E9"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #fff;">5.2억</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 15.3%</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #0EA5E9; font-weight: 600; margin-top: 1pt;">월 매출</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.1); border: 1pt solid rgba(16,185,129,0.18); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="2" width="12" height="12" rx="2" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
<path d="M5 8 L7 10 L11 6" fill="none" stroke="#10B981" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #fff;">127건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 8건</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #10B981; font-weight: 600; margin-top: 1pt;">누적 수주</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.1); border: 1pt solid rgba(139,92,246,0.18); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="32 35" stroke-dashoffset="-9" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #fff;">96%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">목표 달성</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #8B5CF6; font-weight: 600; margin-top: 1pt;">납기 준수율</p>
</div>
<div style="flex: 1; background: rgba(239,68,68,0.12); border: 1pt solid rgba(239,68,68,0.22); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<path d="M8 2 L14 12 L2 12 Z" fill="none" stroke="#EF4444" stroke-width="1" stroke-linejoin="round"/>
<line x1="8" y1="6" x2="8" y2="9" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
<circle cx="8" cy="10.5" r="0.6" fill="#EF4444"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #EF4444; font-weight: 600; margin-top: 1pt;">승인 대기</p>
</div>
</div>
<!-- 라인 차트 + 도넛 -->
<div style="display: flex; gap: 4pt;">
<div style="flex: 3; background: rgba(255,255,255,0.02); border-radius: 3pt; padding: 4pt 5pt;">
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.3); margin-bottom: 2pt;">월별 매출 추이</p>
<svg viewBox="0 0 150 35" width="100%" height="26pt" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="10" x2="150" y2="10" stroke="rgba(255,255,255,0.03)" stroke-width="0.5"/>
<line x1="0" y1="20" x2="150" y2="20" stroke="rgba(255,255,255,0.03)" stroke-width="0.5"/>
<path d="M5 30 L18 24 L31 26 L44 20 L57 16 L70 12 L83 14 L96 8 L109 10 L122 4 L135 7 L135 33 L5 33 Z" fill="url(#fGrad)" opacity="0.35"/>
<path d="M5 30 L18 24 L31 26 L44 20 L57 16 L70 12 L83 14 L96 8 L109 10 L122 4 L135 7" fill="none" stroke="#0EA5E9" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="122" cy="4" r="2" fill="#0EA5E9"/>
<defs>
<linearGradient id="fGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0EA5E9" stop-opacity="0.25"/>
<stop offset="100%" stop-color="#0EA5E9" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
</div>
<div style="flex: 2; background: rgba(255,255,255,0.02); border-radius: 3pt; padding: 4pt 5pt; display: flex; align-items: center; gap: 4pt;">
<svg viewBox="0 0 40 40" width="30pt" height="30pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="14" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="4.5"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#0EA5E9" stroke-width="4.5" stroke-dasharray="33 55" stroke-dashoffset="22" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#10B981" stroke-width="4.5" stroke-dasharray="22 66" stroke-dashoffset="-11" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#8B5CF6" stroke-width="4.5" stroke-dasharray="19 69" stroke-dashoffset="-33" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#F59E0B" stroke-width="4.5" stroke-dasharray="12 76" stroke-dashoffset="-52" stroke-linecap="round"/>
</svg>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #0EA5E9; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">영업1팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #10B981; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">영업2팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #8B5CF6; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">생산팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #F59E0B; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">품질팀</p>
</div>
</div>
</div>
</div>
</div>
<!-- 약속 박스 -->
<div style="background: rgba(14,165,233,0.05); border: 1pt solid rgba(14,165,233,0.1); border-radius: 7pt; padding: 10pt 12pt; margin-bottom: 12pt;">
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 22 22" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="11" cy="11" r="9" fill="none" stroke="#0EA5E9" stroke-width="1.2" opacity="0.4"/>
<path d="M7 11 L10 14 L15 8" fill="none" stroke="#0EA5E9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0EA5E9;">SAM 대시보드가 드리는 약속</p>
<p style="font-size: 7pt; color: rgba(255,255,255,0.45); margin-top: 2pt; line-height: 1.5;">로그인 한 번이면 전사 매출, 수주, 승인 대기를 한눈에.<br>보고를 기다리는 시간을 제로로 만들어 드립니다.</p>
</div>
</div>
</div>
<!-- 기술 태그 -->
<div style="display: flex; gap: 4pt; margin-bottom: 8pt;">
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.03); border-radius: 3pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><path d="M2 6 Q4 2 6 6" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="0.7"/><path d="M3 6 Q4 4 5 6" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.6" fill="rgba(255,255,255,0.3)"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">클라우드 기반</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.03); border-radius: 3pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="0.5" width="4" height="7" rx="0.8" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.4" fill="rgba(255,255,255,0.3)"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">PC + 모바일</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.03); border-radius: 3pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1.5" width="6" height="5" rx="0.8" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="0.7"/><circle cx="4" cy="4" r="1.2" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="0.5"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">역할별 권한</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; border-top: 1pt solid rgba(255,255,255,0.06); padding-top: 8pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: rgba(255,255,255,0.6);">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.2); margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.25);">뒷면에서 상세 기능을 확인하세요 &#9654;</p>
</div>
</div>
</div>
</body>
</html>

27
sam/docs/brochure/v4/convert-1page.cjs
View File

@@ -1,27 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const htmlFile = path.join(__dirname, 'slides', 'brochure-dashboard-1page.html');
console.log('Converting CEO Dashboard v4 (Light) 1-page brochure...');
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error: ${err.message}`);
}
const outputPath = path.join(__dirname, 'sam-brochure-v4-dashboard-1page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

31
sam/docs/brochure/v4/convert-2page.cjs
View File

@@ -1,31 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
async function main() {
const pres = new PptxGenJS();
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
const slidesDir = path.join(__dirname, 'slides');
const slides = ['brochure-dashboard-front.html', 'brochure-dashboard-back.html'];
for (const file of slides) {
const htmlFile = path.join(slidesDir, file);
console.log(`Converting ${file} ...`);
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error on ${file}: ${err.message}`);
}
}
const outputPath = path.join(__dirname, 'sam-brochure-v4-dashboard-2page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

BIN
sam/docs/brochure/v4/sam-brochure-v4-dashboard-1page.pptx
View File

Binary file not shown.

BIN
sam/docs/brochure/v4/sam-brochure-v4-dashboard-2page.pptx
View File

Binary file not shown.

405
sam/docs/brochure/v4/slides/brochure-dashboard-1page.html
View File

@@ -1,405 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #F8FAFC;
padding: 22pt 20pt 12pt 20pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 10pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_black.png" style="height: 20pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; color: #CBD5E1;">CEO DASHBOARD v4</p>
</div>
<!-- 히어로 -->
<div style="display: flex; align-items: center; gap: 12pt; margin-bottom: 12pt;">
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0EA5E9; letter-spacing: 0.1em; margin-bottom: 3pt;">EXECUTIVE DASHBOARD</p>
<h1 style="font-size: 16pt; font-weight: 800; color: #0F172A; line-height: 1.35; margin-bottom: 5pt;">대표님, 우리 회사<br>지금 어떤 상태인가요?</h1>
<p style="font-size: 7.5pt; color: #64748B; line-height: 1.5;">보고 대기 없이, 로그인 한 번이면<br>전사 현황이 한눈에 들어옵니다.</p>
</div>
<!-- 히어로 SVG 아이콘: 대시보드 모니터 -->
<div style="flex-shrink: 0; width: 72pt; height: 72pt;">
<svg viewBox="0 0 80 80" width="72pt" height="72pt" xmlns="http://www.w3.org/2000/svg">
<rect x="8" y="10" width="64" height="44" rx="4" fill="none" stroke="#0EA5E9" stroke-width="1.5" opacity="0.6"/>
<rect x="12" y="14" width="56" height="36" rx="2" fill="#FFFFFF"/>
<!-- 미니 차트 바 -->
<rect x="16" y="38" width="6" height="8" rx="1" fill="#0EA5E9" opacity="0.5"/>
<rect x="24" y="34" width="6" height="12" rx="1" fill="#0EA5E9" opacity="0.65"/>
<rect x="32" y="30" width="6" height="16" rx="1" fill="#0EA5E9" opacity="0.8"/>
<rect x="40" y="26" width="6" height="20" rx="1" fill="#0EA5E9" opacity="0.9"/>
<rect x="48" y="22" width="6" height="24" rx="1" fill="#0EA5E9"/>
<rect x="56" y="28" width="6" height="18" rx="1" fill="#10B981" opacity="0.7"/>
<!-- 상단 KPI 표시 -->
<circle cx="18" cy="20" r="3" fill="#10B981" opacity="0.7"/>
<circle cx="28" cy="20" r="3" fill="#8B5CF6" opacity="0.7"/>
<circle cx="38" cy="20" r="3" fill="#F59E0B" opacity="0.7"/>
<circle cx="48" cy="20" r="3" fill="#EF4444" opacity="0.7"/>
<!-- 모니터 받침대 -->
<rect x="32" y="54" width="16" height="3" rx="1" fill="#0EA5E9" opacity="0.4"/>
<rect x="28" y="57" width="24" height="2" rx="1" fill="#0EA5E9" opacity="0.3"/>
<!-- 와이파이 시그널 -->
<path d="M58 62 Q62 58 66 62" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
<path d="M56 66 Q62 60 68 66" fill="none" stroke="#10B981" stroke-width="1" opacity="0.3"/>
<circle cx="62" cy="66" r="1.5" fill="#10B981" opacity="0.6"/>
</svg>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(14,165,233,0.2); margin-bottom: 10pt;"></div>
<!-- 대시보드 Mock UI -->
<div style="background: #FFFFFF; border: 1pt solid #E2E8F0; border-radius: 7pt; padding: 8pt; margin-bottom: 9pt; box-shadow: 0 1pt 4pt rgba(0,0,0,0.06);">
<!-- 타이틀바 -->
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 6pt;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8; margin-left: 5pt;">SAM CEO Dashboard</p>
</div>
<!-- KPI 카드 4개 (SVG 아이콘 포함) -->
<div style="display: flex; gap: 3pt; margin-bottom: 5pt;">
<!-- 월 매출 -->
<div style="flex: 1; background: rgba(14,165,233,0.05); border: 1pt solid rgba(14,165,233,0.15); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<path d="M3 16 L3 8 L7 8 L7 16 Z" fill="#0EA5E9" opacity="0.4"/>
<path d="M8 16 L8 5 L12 5 L12 16 Z" fill="#0EA5E9" opacity="0.65"/>
<path d="M13 16 L13 3 L17 3 L17 16 Z" fill="#0EA5E9"/>
<path d="M3 16 L17 16" stroke="#0EA5E9" stroke-width="0.5" opacity="0.4"/>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #0F172A;">5.2억</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 15.3%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #0EA5E9; font-weight: 600; margin-top: 1pt;">월 매출</p>
</div>
<!-- 수주 잔량 -->
<div style="flex: 1; background: rgba(16,185,129,0.05); border: 1pt solid rgba(16,185,129,0.15); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="3" y="3" width="14" height="14" rx="2" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.5"/>
<path d="M6 10 L9 13 L14 7" fill="none" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #0F172A;">127건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 8건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 600; margin-top: 1pt;">수주 잔량</p>
</div>
<!-- 납기 준수율 -->
<div style="flex: 1; background: rgba(139,92,246,0.05); border: 1pt solid rgba(139,92,246,0.15); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="10" cy="10" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.3"/>
<circle cx="10" cy="10" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="40 44" stroke-dashoffset="-11" stroke-linecap="round"/>
<text x="10" y="12" text-anchor="middle" fill="#8B5CF6" font-size="5" font-weight="800">96</text>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #0F172A;">96%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">목표 달성</p>
<p style="white-space: nowrap; font-size: 5pt; color: #8B5CF6; font-weight: 600; margin-top: 1pt;">납기 준수율</p>
</div>
<!-- 승인 대기 -->
<div style="flex: 1; background: rgba(239,68,68,0.05); border: 1pt solid rgba(239,68,68,0.15); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<path d="M10 3 L17 15 L3 15 Z" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linejoin="round"/>
<line x1="10" y1="8" x2="10" y2="11" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="10" cy="13" r="0.8" fill="#EF4444"/>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 600; margin-top: 1pt;">승인 대기</p>
</div>
</div>
<!-- 차트 영역 -->
<div style="display: flex; gap: 4pt;">
<!-- 매출 추이 (라인 차트 SVG) -->
<div style="flex: 3; background: #F8FAFC; border-radius: 4pt; padding: 4pt 5pt;">
<p style="white-space: nowrap; font-size: 5pt; color: #94A3B8; margin-bottom: 2pt;">월별 매출 추이</p>
<svg viewBox="0 0 160 40" width="100%" height="30pt" xmlns="http://www.w3.org/2000/svg">
<!-- 그리드 라인 -->
<line x1="0" y1="10" x2="160" y2="10" stroke="rgba(15,23,42,0.05)" stroke-width="0.5"/>
<line x1="0" y1="20" x2="160" y2="20" stroke="rgba(15,23,42,0.05)" stroke-width="0.5"/>
<line x1="0" y1="30" x2="160" y2="30" stroke="rgba(15,23,42,0.05)" stroke-width="0.5"/>
<!-- 영역 채우기 -->
<path d="M5 35 L20 28 L35 30 L50 22 L65 18 L80 14 L95 16 L110 10 L125 12 L140 5 L155 8 L155 38 L5 38 Z" fill="url(#areaGrad)" opacity="0.4"/>
<!-- 라인 -->
<path d="M5 35 L20 28 L35 30 L50 22 L65 18 L80 14 L95 16 L110 10 L125 12 L140 5 L155 8" fill="none" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<!-- 데이터 포인트 -->
<circle cx="140" cy="5" r="2.5" fill="#0EA5E9"/>
<circle cx="155" cy="8" r="2" fill="#0EA5E9" opacity="0.5" stroke="#0EA5E9" stroke-width="0.5" stroke-dasharray="1 1"/>
<defs>
<linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0EA5E9" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#0EA5E9" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
</div>
<!-- 도넛 차트: 팀별 비중 -->
<div style="flex: 2; background: #F8FAFC; border-radius: 4pt; padding: 4pt 5pt; display: flex; align-items: center; gap: 5pt;">
<svg viewBox="0 0 44 44" width="36pt" height="36pt" xmlns="http://www.w3.org/2000/svg">
<!-- 배경 원 -->
<circle cx="22" cy="22" r="16" fill="none" stroke="rgba(15,23,42,0.06)" stroke-width="5"/>
<!-- 영업1팀 38% -->
<circle cx="22" cy="22" r="16" fill="none" stroke="#0EA5E9" stroke-width="5" stroke-dasharray="38 62" stroke-dashoffset="25" stroke-linecap="round"/>
<!-- 영업2팀 25% -->
<circle cx="22" cy="22" r="16" fill="none" stroke="#10B981" stroke-width="5" stroke-dasharray="25 75" stroke-dashoffset="-13" stroke-linecap="round"/>
<!-- 생산팀 22% -->
<circle cx="22" cy="22" r="16" fill="none" stroke="#8B5CF6" stroke-width="5" stroke-dasharray="22 78" stroke-dashoffset="-38" stroke-linecap="round"/>
<!-- 품질팀 15% -->
<circle cx="22" cy="22" r="16" fill="none" stroke="#F59E0B" stroke-width="5" stroke-dasharray="13 87" stroke-dashoffset="-60" stroke-linecap="round"/>
</svg>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #0EA5E9; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #64748B;">영업1팀 38%</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #10B981; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #64748B;">영업2팀 25%</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #8B5CF6; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #64748B;">생산팀 22%</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #F59E0B; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #64748B;">품질팀 15%</p>
</div>
</div>
</div>
</div>
</div>
<!-- 핵심 가치 3개 (SVG 아이콘) -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9; margin-bottom: 5pt;">대표님이 얻는 것</p>
<div style="display: flex; gap: 4pt;">
<!-- 즉시 현황 파악 -->
<div style="flex: 1; background: rgba(14,165,233,0.04); border: 1pt solid rgba(14,165,233,0.12); border-radius: 6pt; padding: 7pt 5pt; text-align: center;">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<circle cx="14" cy="14" r="10" fill="none" stroke="#0EA5E9" stroke-width="1.2" opacity="0.4"/>
<path d="M14 8 L14 14 L18 17" fill="none" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="14" cy="14" r="1.5" fill="#0EA5E9"/>
<!-- 번개 (빠름) -->
<path d="M22 5 L20 10 L23 10 L21 15" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #0F172A; white-space: nowrap;">즉시 현황 파악</p>
<p style="font-size: 5.5pt; color: #94A3B8; margin-top: 2pt; line-height: 1.4;">로그인 3초면<br>전사 현황 확인</p>
</div>
<!-- 데이터 기반 의사결정 -->
<div style="flex: 1; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.12); border-radius: 6pt; padding: 7pt 5pt; text-align: center;">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<!-- 뇌 (의사결정) -->
<circle cx="14" cy="12" r="8" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.4"/>
<path d="M11 8 Q14 6 17 8" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<path d="M10 12 Q14 10 18 12" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<path d="M11 16 Q14 14 17 16" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<!-- 데이터 포인트 -->
<circle cx="8" cy="22" r="1.2" fill="#10B981" opacity="0.6"/>
<circle cx="14" cy="22" r="1.2" fill="#10B981" opacity="0.8"/>
<circle cx="20" cy="22" r="1.2" fill="#10B981"/>
<line x1="8" y1="22" x2="20" y2="22" stroke="#10B981" stroke-width="0.5" opacity="0.3"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #0F172A; white-space: nowrap;">데이터로 판단</p>
<p style="font-size: 5.5pt; color: #94A3B8; margin-top: 2pt; line-height: 1.4;">감이 아닌 숫자로<br>KPI/팀 성과 비교</p>
</div>
<!-- 빠른 승인 -->
<div style="flex: 1; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.12); border-radius: 6pt; padding: 7pt 5pt; text-align: center;">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<!-- 체크마크 원 -->
<circle cx="14" cy="14" r="9" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.4"/>
<path d="M9 14 L12.5 17.5 L19 10.5" fill="none" stroke="#8B5CF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<!-- 모바일 아이콘 -->
<rect x="20" y="19" width="5" height="8" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
<circle cx="22.5" cy="25.5" r="0.5" fill="#8B5CF6" opacity="0.5"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #0F172A; white-space: nowrap;">모바일 승인</p>
<p style="font-size: 5.5pt; color: #94A3B8; margin-top: 2pt; line-height: 1.4;">이동중에도 즉시<br>결재/승인 처리</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(139,92,246,0.2); margin-bottom: 9pt;"></div>
<!-- 대시보드 6대 기능 (SVG 아이콘 + 텍스트) -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #F59E0B; margin-bottom: 5pt;">대시보드 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; gap: 2pt;">
<!-- 01 실시간 KPI -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(14,165,233,0.04); border: 1pt solid rgba(14,165,233,0.1); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="10" width="3" height="6" rx="0.5" fill="#0EA5E9" opacity="0.5"/>
<rect x="7" y="6" width="3" height="10" rx="0.5" fill="#0EA5E9" opacity="0.75"/>
<rect x="12" y="2" width="3" height="14" rx="0.5" fill="#0EA5E9"/>
</svg>
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">실시간 <span style="color: #0EA5E9; font-weight: 700;">매출/수주 KPI</span></p>
</div>
<!-- 02 조직 트리 -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.1); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="9" cy="4" r="2.5" fill="none" stroke="#10B981" stroke-width="1"/>
<line x1="9" y1="6.5" x2="9" y2="9" stroke="#10B981" stroke-width="0.8"/>
<line x1="4" y1="9" x2="14" y2="9" stroke="#10B981" stroke-width="0.8"/>
<circle cx="4" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="9" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="14" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="4" y1="9" x2="4" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="9" y1="9" x2="9" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="14" y1="9" x2="14" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
</svg>
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">조직 계층별 <span style="color: #10B981; font-weight: 700;">실적 트리</span></p>
</div>
</div>
<div style="display: flex; gap: 2pt;">
<!-- 03 수당 현황 -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.1); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="9" cy="9" r="7" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<text x="9" y="11.5" text-anchor="middle" fill="#8B5CF6" font-size="8" font-weight="800">&#8361;</text>
</svg>
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">역할별 <span style="color: #8B5CF6; font-weight: 700;">수당 현황</span></p>
</div>
<!-- 04 승인 알림 -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<path d="M9 3 C5 3 3 6 3 9 L3 12 L2 13 L16 13 L15 12 L15 9 C15 6 13 3 9 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.6"/>
<circle cx="13" cy="5" r="3" fill="#EF4444"/>
<text x="13" y="6.5" text-anchor="middle" fill="#fff" font-size="4" font-weight="700">5</text>
<path d="M7 14 Q9 16 11 14" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.5"/>
</svg>
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">미승인 <span style="color: #EF4444; font-weight: 700;">실시간 알림</span></p>
</div>
</div>
<div style="display: flex; gap: 2pt;">
<!-- 05 트렌드 -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(245,158,11,0.04); border: 1pt solid rgba(245,158,11,0.1); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<path d="M3 14 L7 10 L10 12 L15 5" fill="none" stroke="#F59E0B" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 5 L15 5 L15 8" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">기간별 <span style="color: #F59E0B; font-weight: 700;">트렌드 분석</span></p>
</div>
<!-- 06 시뮬레이터 -->
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(236,72,153,0.04); border: 1pt solid rgba(236,72,153,0.1); border-radius: 4pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="3" width="14" height="12" rx="1.5" fill="none" stroke="#EC4899" stroke-width="1" opacity="0.5"/>
<line x1="5" y1="7" x2="13" y2="7" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="9" x2="11" y2="9" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="11" x2="9" y2="11" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<circle cx="14" cy="13" r="3.5" fill="#F8FAFC" stroke="#EC4899" stroke-width="0.8"/>
<path d="M13 13 L15 13 M14 12 L14 14" stroke="#EC4899" stroke-width="0.8" stroke-linecap="round"/>
</svg>
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">수익 <span style="color: #EC4899; font-weight: 700;">시뮬레이터</span></p>
</div>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #E2E8F0; margin-bottom: 9pt;"></div>
<!-- Before → After 인포그래픽 -->
<div style="display: flex; gap: 4pt; margin-bottom: 9pt;">
<!-- Before -->
<div style="flex: 5; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 5pt; padding: 5pt 6pt 12pt 6pt;">
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#EF4444" stroke-width="1"/>
<line x1="4.5" y1="4.5" x2="9.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
<line x1="9.5" y1="4.5" x2="4.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #EF4444;">BEFORE</p>
</div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">매출? → 보고 대기 1~2일</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">수주? → Excel 취합 반나절</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">승인? → 서류 찾기 30분</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">실적? → 각 팀장 개별 보고</p>
</div>
<!-- 화살표 -->
<div style="display: flex; align-items: center; flex-shrink: 0;">
<svg viewBox="0 0 20 20" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg">
<path d="M4 10 L14 10" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round"/>
<path d="M11 6 L15 10 L11 14" fill="none" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<!-- After -->
<div style="flex: 5; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.1); border-radius: 5pt; padding: 5pt 6pt 12pt 6pt;">
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#10B981" stroke-width="1"/>
<path d="M4.5 7 L6.5 9 L10 5" fill="none" stroke="#10B981" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #10B981;">AFTER (SAM)</p>
</div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">로그인 → <span style="color:#10B981;font-weight:600;">3초 전사 현황</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">클릭 → <span style="color:#10B981;font-weight:600;">실시간 수주 데이터</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">뱃지 → <span style="color:#10B981;font-weight:600;">즉시 승인 처리</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">트리 → <span style="color:#10B981;font-weight:600;">전 조직 한눈에</span></p>
</div>
</div>
<!-- 기술 태그 -->
<div style="display: flex; gap: 3pt; margin-bottom: 6pt;">
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="5" cy="5" r="3.5" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
<path d="M5 2.5 L5 5 L7 6.5" fill="none" stroke="#94A3B8" stroke-width="0.6" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">실시간 업데이트</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2.5" y="1" width="5" height="8" rx="1" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
<circle cx="5" cy="7.5" r="0.5" fill="#94A3B8"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">PC + 모바일</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<rect x="1.5" y="2" width="7" height="6" rx="1" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
<circle cx="5" cy="5" r="1.5" fill="none" stroke="#94A3B8" stroke-width="0.6"/>
<line x1="6" y1="3.5" x2="7.5" y2="2" stroke="#94A3B8" stroke-width="0.6"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">역할별 권한</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1 Q8 1 8 4 L8 5 Q8 8 5 8 Q2 8 2 5 L2 4 Q2 1 5 1 Z" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
<line x1="5" y1="4" x2="5" y2="6" stroke="#94A3B8" stroke-width="0.6" stroke-linecap="round"/>
<circle cx="5" cy="3.5" r="0.5" fill="#94A3B8"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">데이터 암호화</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<path d="M2 7 Q5 3 8 7" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
<path d="M3.5 7 Q5 5 6.5 7" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
<circle cx="5" cy="7.5" r="0.8" fill="#94A3B8"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">클라우드</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; border-top: 1pt solid #E2E8F0; padding-top: 7pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #475569;">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6pt; color: #CBD5E1; margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">무료 데모 신청</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0EA5E9;">contact@codebridge-x.com</p>
</div>
</div>
</div>
</body>
</html>

373
sam/docs/brochure/v4/slides/brochure-dashboard-back.html
View File

@@ -1,373 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #F8FAFC;
padding: 20pt 22pt 12pt 22pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 10pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_black.png" style="height: 18pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; color: #CBD5E1;">FEATURES &amp; PRICING</p>
</div>
<!-- 대시보드 7대 기능 (SVG 아이콘) -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9; margin-bottom: 6pt;">대시보드 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<!-- 01 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(14,165,233,0.04); border: 1pt solid rgba(14,165,233,0.1); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="2" y="11" width="4" height="6" rx="0.5" fill="#0EA5E9" opacity="0.45"/>
<rect x="8" y="7" width="4" height="10" rx="0.5" fill="#0EA5E9" opacity="0.7"/>
<rect x="14" y="3" width="4" height="14" rx="0.5" fill="#0EA5E9"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">실시간 KPI 카드</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">매출, 수주, 납기율, 승인 대기</p>
</div>
<!-- 02 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.1); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="10" cy="4.5" r="2.5" fill="none" stroke="#10B981" stroke-width="1.1"/>
<line x1="10" y1="7" x2="10" y2="9.5" stroke="#10B981" stroke-width="0.8"/>
<line x1="5" y1="9.5" x2="15" y2="9.5" stroke="#10B981" stroke-width="0.8"/>
<circle cx="5" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<circle cx="10" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<circle cx="15" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
<line x1="5" y1="9.5" x2="5" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="10" y1="9.5" x2="10" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="15" y1="9.5" x2="15" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="3" cy="17" r="1.3" fill="none" stroke="#10B981" stroke-width="0.6" opacity="0.4"/>
<circle cx="7" cy="17" r="1.3" fill="none" stroke="#10B981" stroke-width="0.6" opacity="0.4"/>
<line x1="5" y1="15" x2="3" y2="15.7" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="5" y1="15" x2="7" y2="15.7" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">조직 실적 트리</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">계층별 팀/개인 실적 펼쳐보기</p>
</div>
<!-- 03 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.1); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="10" cy="10" r="7.5" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<text x="10" y="12.5" text-anchor="middle" fill="#8B5CF6" font-size="9" font-weight="800">&#8361;</text>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">역할별 수당 현황</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">판매자/관리자/협업자 배분 확인</p>
</div>
<!-- 04 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M10 3 C6 3 3 6 3 9.5 L3 13 L1.5 14.5 L18.5 14.5 L17 13 L17 9.5 C17 6 14 3 10 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.5"/>
<circle cx="15" cy="5" r="3.5" fill="#EF4444"/>
<text x="15" y="7" text-anchor="middle" fill="#fff" font-size="4.5" font-weight="800">!</text>
<path d="M7.5 15.5 Q10 18 12.5 15.5" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">승인 대기 알림</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">가입/지급 미처리 빨간 뱃지</p>
</div>
<!-- 05 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(245,158,11,0.04); border: 1pt solid rgba(245,158,11,0.1); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M3 15 L7 11 L10 13 L16 5" fill="none" stroke="#F59E0B" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13 5 L16 5 L16 8" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">기간별 트렌드</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">당월/분기/연간 추이 차트</p>
</div>
<!-- 06 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(236,72,153,0.04); border: 1pt solid rgba(236,72,153,0.1); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="2" y="3" width="16" height="14" rx="2" fill="none" stroke="#EC4899" stroke-width="1" opacity="0.4"/>
<line x1="5" y1="7.5" x2="15" y2="7.5" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="10" x2="12" y2="10" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="12.5" x2="9" y2="12.5" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<circle cx="15.5" cy="14.5" r="3.5" fill="#F8FAFC" stroke="#EC4899" stroke-width="0.9"/>
<path d="M14.5 14.5 L16.5 14.5 M15.5 13.5 L15.5 15.5" stroke="#EC4899" stroke-width="0.8" stroke-linecap="round"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">수익 시뮬레이터</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">가상 시나리오 수당/마진 계산</p>
</div>
<!-- 07 -->
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(14,165,233,0.04); border: 1pt solid rgba(14,165,233,0.1); border-radius: 4pt; padding: 4pt 7pt;">
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="5" y="2" width="10" height="16" rx="2" fill="none" stroke="#0EA5E9" stroke-width="1" opacity="0.5"/>
<circle cx="10" cy="16" r="1" fill="#0EA5E9" opacity="0.5"/>
<rect x="7" y="5" width="6" height="8" rx="0.5" fill="rgba(14,165,233,0.1)"/>
<rect x="8" y="6" width="4" height="1.5" rx="0.3" fill="#0EA5E9" opacity="0.4"/>
<rect x="8" y="8.5" width="4" height="1.5" rx="0.3" fill="#10B981" opacity="0.4"/>
<rect x="8" y="11" width="4" height="1.5" rx="0.3" fill="#8B5CF6" opacity="0.4"/>
</svg>
<div style="flex: 1;">
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">모바일 대응</p>
</div>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">스마트폰으로 KPI 확인/승인</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(14,165,233,0.2); margin-bottom: 8pt;"></div>
<!-- 역할별 맞춤 화면 (SVG 아이콘) -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981; margin-bottom: 5pt;">역할별 맞춤 화면</p>
<div style="display: flex; gap: 4pt;">
<!-- CEO -->
<div style="flex: 1; background: rgba(14,165,233,0.04); border: 1pt solid rgba(14,165,233,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="12" cy="8" r="4" fill="none" stroke="#0EA5E9" stroke-width="1.2"/>
<path d="M4 20 Q4 14 12 14 Q20 14 20 20" fill="none" stroke="#0EA5E9" stroke-width="1.2"/>
<path d="M8 4 L12 1 L16 4" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" opacity="0.7"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #0EA5E9;">CEO</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #475569; margin-top: 1pt;">전사 KPI 총괄</p>
</div>
<!-- 관리자 -->
<div style="flex: 1; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="8" cy="8" r="3" fill="none" stroke="#10B981" stroke-width="1"/>
<circle cx="16" cy="8" r="3" fill="none" stroke="#10B981" stroke-width="1" opacity="0.6"/>
<path d="M2 18 Q2 13 8 13 Q14 13 14 18" fill="none" stroke="#10B981" stroke-width="1"/>
<path d="M12 18 Q12 13 16 13 Q22 13 22 18" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #10B981;">관리자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #475569; margin-top: 1pt;">팀 실적 관리</p>
</div>
<!-- 운영자 -->
<div style="flex: 1; background: rgba(245,158,11,0.04); border: 1pt solid rgba(245,158,11,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="12" cy="12" r="8" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.4"/>
<circle cx="12" cy="12" r="3" fill="none" stroke="#F59E0B" stroke-width="1.2"/>
<line x1="12" y1="4" x2="12" y2="6" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="12" y1="18" x2="12" y2="20" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="4" y1="12" x2="6" y2="12" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="18" y1="12" x2="20" y2="12" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #F59E0B;">운영자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #475569; margin-top: 1pt;">인력/승인 관리</p>
</div>
<!-- 영업자 -->
<div style="flex: 1; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="4" y="3" width="16" height="18" rx="2" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.5"/>
<line x1="7" y1="8" x2="17" y2="8" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<line x1="7" y1="11" x2="14" y2="11" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<line x1="7" y1="14" x2="12" y2="14" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
<path d="M14 16 L16 18 L20 13" fill="none" stroke="#8B5CF6" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #8B5CF6;">영업자</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #475569; margin-top: 1pt;">내 실적 조회</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(139,92,246,0.2); margin-bottom: 8pt;"></div>
<!-- SAM 통합 플랫폼 연결 -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #8B5CF6; margin-bottom: 5pt;">대시보드 + SAM ERP/MES 통합</p>
<div style="display: flex; gap: 3pt;">
<div style="flex: 1; background: #F1F5F9; border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="2" width="12" height="12" rx="1.5" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
<line x1="5" y1="6" x2="11" y2="6" stroke="#CBD5E1" stroke-width="0.5"/>
<line x1="5" y1="8" x2="9" y2="8" stroke="#CBD5E1" stroke-width="0.5"/>
<line x1="5" y1="10" x2="11" y2="10" stroke="#CBD5E1" stroke-width="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #64748B;">견적/수주</p>
</div>
<div style="flex: 1; background: #F1F5F9; border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="8" r="5" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
<circle cx="8" cy="8" r="2" fill="none" stroke="#CBD5E1" stroke-width="0.5"/>
<line x1="8" y1="3" x2="8" y2="4.5" stroke="#CBD5E1" stroke-width="0.5"/>
<line x1="13" y1="8" x2="11.5" y2="8" stroke="#CBD5E1" stroke-width="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #64748B;">생산 MES</p>
</div>
<div style="flex: 1; background: #F1F5F9; border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<path d="M5 3 L11 3 L13 6 L8 14 L3 6 Z" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
<path d="M3 6 L13 6" stroke="#CBD5E1" stroke-width="0.5"/>
<path d="M8 6 L8 14" stroke="#CBD5E1" stroke-width="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #64748B;">품질/검사</p>
</div>
<div style="flex: 1; background: #F1F5F9; border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="3" y="4" width="10" height="9" rx="1" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
<line x1="3" y1="7" x2="13" y2="7" stroke="#CBD5E1" stroke-width="0.5"/>
<line x1="8" y1="7" x2="8" y2="13" stroke="#CBD5E1" stroke-width="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #64748B;">재고/자재</p>
</div>
<div style="flex: 1; background: #F1F5F9; border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="6" r="3" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
<path d="M3 14 Q3 10 8 10 Q13 10 13 14" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #64748B;">인사/회계</p>
</div>
</div>
<p style="font-size: 5.5pt; color: #94A3B8; margin-top: 3pt; text-align: center;">대시보드의 모든 데이터는 SAM ERP/MES 실시간 데이터 기반</p>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #E2E8F0; margin-bottom: 8pt;"></div>
<!-- 투자 비용 -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #F59E0B; margin-bottom: 5pt;">투자 비용</p>
<div style="display: flex; gap: 5pt;">
<!-- 기본 패키지 -->
<div style="flex: 1;">
<div style="background: rgba(14,165,233,0.04); border: 1pt solid rgba(14,165,233,0.14); border-radius: 6pt; padding: 7pt 8pt; margin-bottom: 3pt;">
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="12" height="12" rx="2" fill="none" stroke="#0EA5E9" stroke-width="1" opacity="0.5"/>
<path d="M4 7 L6 9 L10 5" fill="none" stroke="#0EA5E9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #0EA5E9;">대시보드 포함 기본 패키지</p>
</div>
<p style="white-space: nowrap; font-size: 13pt; font-weight: 800; color: #0F172A;">2,000만원</p>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">+ 월 50만원 (유지보수)</p>
</div>
<div style="background: #F1F5F9; border-radius: 3pt; padding: 3pt 5pt;">
<p style="font-size: 5.5pt; color: #94A3B8; line-height: 1.4;">CEO 대시보드 + 견적/수주 + 생산<br>인사/회계 무료 포함</p>
</div>
</div>
<!-- 추가 옵션 -->
<div style="flex: 1;">
<div style="background: rgba(245,158,11,0.04); border: 1pt solid rgba(245,158,11,0.14); border-radius: 6pt; padding: 7pt 8pt;">
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 4pt;">
<svg viewBox="0 0 14 14" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.5"/>
<line x1="7" y1="4.5" x2="7" y2="9.5" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
<line x1="4.5" y1="7" x2="9.5" y2="7" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #F59E0B;">추가 옵션 (선택)</p>
</div>
<div style="display: flex; flex-direction: column; gap: 3pt;">
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">생산공정 관리</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F59E0B;">+500만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">품질관리(인정검사)</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F59E0B;">+2,000만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">AI 견적 자동 생성</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F59E0B;">월 10~20만원</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #E2E8F0; margin-bottom: 8pt;"></div>
<!-- 도입 프로세스 (SVG 화살표 연결) -->
<div style="margin-bottom: 6pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981; margin-bottom: 5pt;">도입 프로세스</p>
<div style="display: flex; gap: 2pt; align-items: center;">
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(14,165,233,0.05); border: 1pt solid rgba(14,165,233,0.15);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="5" r="3" fill="none" stroke="#0EA5E9" stroke-width="0.8"/>
<path d="M4 14 Q4 10 8 10 Q12 10 12 14" fill="none" stroke="#0EA5E9" stroke-width="0.8"/>
<path d="M13 5 L15 5 M14 4 L14 6" stroke="#0EA5E9" stroke-width="0.6" stroke-linecap="round" opacity="0.6"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #475569;">현장 인터뷰</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="#CBD5E1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(16,185,129,0.05); border: 1pt solid rgba(16,185,129,0.15);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="3" y="2" width="10" height="12" rx="1.5" fill="none" stroke="#10B981" stroke-width="0.8"/>
<line x1="6" y1="5" x2="10" y2="5" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="7" x2="10" y2="7" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="9" x2="10" y2="9" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
<line x1="6" y1="11" x2="9" y2="11" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">2~4주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #475569;">맞춤 개발</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="#CBD5E1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(139,92,246,0.05); border: 1pt solid rgba(139,92,246,0.15);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="3" width="5" height="10" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
<rect x="9" y="3" width="5" height="10" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8"/>
<path d="M7 7 L9 8 M7 8 L9 7" stroke="#8B5CF6" stroke-width="0.5" opacity="0.4"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #475569;">데이터 이관</p>
</div>
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="#CBD5E1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(245,158,11,0.05); border: 1pt solid rgba(245,158,11,0.15);">
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<path d="M8 2 L14 8 L8 14 L2 8 Z" fill="none" stroke="#F59E0B" stroke-width="0.8"/>
<path d="M5.5 8 L7 9.5 L10.5 6" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">1~2주</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #475569;">교육/안정화</p>
</div>
</div>
</div>
<!-- CTA 푸터 -->
<div style="margin-top: auto; background: rgba(14,165,233,0.04); border: 1.5pt solid rgba(14,165,233,0.15); border-radius: 7pt; padding: 9pt 12pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 22 22" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="11" cy="11" r="9" fill="none" stroke="#0EA5E9" stroke-width="1.2" opacity="0.5"/>
<path d="M11 6 L11 11 L15 13" fill="none" stroke="#0EA5E9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div>
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #0F172A;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: #94A3B8; margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
</div>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0EA5E9;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8; margin-top: 1pt;">www.codebridge-x.com</p>
</div>
</div>
</div>
<!-- 회사명 -->
<div style="margin-top: 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #CBD5E1;">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
</div>
</body>
</html>

260
sam/docs/brochure/v4/slides/brochure-dashboard-front.html
View File

@@ -1,260 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #F8FAFC;
padding: 26pt 22pt 16pt 22pt;
display: flex; flex-direction: column;
}
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 16pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_black.png" style="height: 22pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; color: #CBD5E1;">CEO DASHBOARD v4</p>
</div>
<!-- 히어로 섹션 -->
<div style="display: flex; align-items: center; gap: 14pt; margin-bottom: 18pt;">
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 8pt; font-weight: 600; color: #0EA5E9; letter-spacing: 0.1em; margin-bottom: 5pt;">EXECUTIVE DASHBOARD</p>
<h1 style="font-size: 19pt; font-weight: 800; color: #0F172A; line-height: 1.35; margin-bottom: 6pt;">대표님, 우리 회사<br>지금 어떤 상태인가요?</h1>
<p style="font-size: 8pt; color: #64748B; line-height: 1.55;">매출, 수주, 조직 실적, 승인 대기<br>더 이상 보고를 기다리지 마세요.</p>
</div>
<!-- 히어로 아이콘 -->
<div style="flex-shrink: 0; width: 80pt; height: 80pt;">
<svg viewBox="0 0 90 90" width="80pt" height="80pt" xmlns="http://www.w3.org/2000/svg">
<!-- 모니터 외곽 -->
<rect x="8" y="10" width="74" height="50" rx="5" fill="none" stroke="#0EA5E9" stroke-width="1.5" opacity="0.5"/>
<rect x="12" y="14" width="66" height="42" rx="3" fill="#FFFFFF"/>
<!-- KPI 미니 카드들 -->
<rect x="15" y="17" width="14" height="10" rx="1.5" fill="rgba(14,165,233,0.15)"/>
<rect x="31" y="17" width="14" height="10" rx="1.5" fill="rgba(16,185,129,0.15)"/>
<rect x="47" y="17" width="14" height="10" rx="1.5" fill="rgba(139,92,246,0.15)"/>
<rect x="63" y="17" width="12" height="10" rx="1.5" fill="rgba(239,68,68,0.15)"/>
<!-- 미니 차트 -->
<path d="M16 45 L22 40 L28 42 L34 36 L40 33 L46 30 L52 32 L58 26 L64 28 L70 22 L75 25" fill="none" stroke="#0EA5E9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" opacity="0.8"/>
<path d="M16 45 L22 40 L28 42 L34 36 L40 33 L46 30 L52 32 L58 26 L64 28 L70 22 L75 25 L75 50 L16 50 Z" fill="url(#heroGrad)" opacity="0.3"/>
<!-- 모니터 받침 -->
<rect x="36" y="60" width="18" height="3" rx="1" fill="#0EA5E9" opacity="0.3"/>
<rect x="32" y="63" width="26" height="2" rx="1" fill="#0EA5E9" opacity="0.2"/>
<!-- 알림 뱃지 -->
<circle cx="73" cy="14" r="5" fill="#EF4444" opacity="0.9"/>
<text x="73" y="16.5" text-anchor="middle" fill="#fff" font-size="6" font-weight="800">5</text>
<!-- 와이파이 -->
<path d="M66 72 Q72 66 78 72" fill="none" stroke="#10B981" stroke-width="1" opacity="0.4"/>
<path d="M63 76 Q72 68 81 76" fill="none" stroke="#10B981" stroke-width="1" opacity="0.25"/>
<circle cx="72" cy="76" r="1.5" fill="#10B981" opacity="0.5"/>
<defs>
<linearGradient id="heroGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0EA5E9" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#0EA5E9" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: rgba(14,165,233,0.2); margin-bottom: 16pt;"></div>
<!-- 고민 섹션 (타임라인 인포그래픽) -->
<div style="margin-bottom: 16pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #EF4444; margin-bottom: 8pt;">대표님의 하루</p>
<div style="display: flex; flex-direction: column; gap: 4pt;">
<!-- AM 9:00 -->
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 26 26" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="13" cy="13" r="11" fill="rgba(239,68,68,0.06)" stroke="rgba(239,68,68,0.2)" stroke-width="1"/>
<circle cx="13" cy="13" r="8" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
<path d="M13 7 L13 13 L17 15" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<text x="13" y="22" text-anchor="middle" fill="#EF4444" font-size="3.5" font-weight="600" opacity="0.7">9AM</text>
</svg>
<div style="flex: 1; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 4pt; padding: 6pt 8pt;">
<p style="font-size: 7.5pt; color: #475569; white-space: nowrap;">"어제 매출 얼마야?" → <span style="color: #EF4444; font-weight: 600;">팀장 보고 대기중...</span></p>
</div>
</div>
<!-- PM 2:00 -->
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 26 26" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="13" cy="13" r="11" fill="rgba(239,68,68,0.06)" stroke="rgba(239,68,68,0.2)" stroke-width="1"/>
<circle cx="13" cy="13" r="8" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
<path d="M13 7 L13 13 L9 16" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<text x="13" y="22" text-anchor="middle" fill="#EF4444" font-size="3.5" font-weight="600" opacity="0.7">2PM</text>
</svg>
<div style="flex: 1; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 4pt; padding: 6pt 8pt;">
<p style="font-size: 7.5pt; color: #475569; white-space: nowrap;">"수주 밀린 거 없어?" → <span style="color: #EF4444; font-weight: 600;">Excel 취합중...</span></p>
</div>
</div>
<!-- PM 5:00 -->
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 26 26" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="13" cy="13" r="11" fill="rgba(239,68,68,0.06)" stroke="rgba(239,68,68,0.2)" stroke-width="1"/>
<circle cx="13" cy="13" r="8" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
<path d="M13 7 L13 13 L8 12" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<text x="13" y="22" text-anchor="middle" fill="#EF4444" font-size="3.5" font-weight="600" opacity="0.7">5PM</text>
</svg>
<div style="flex: 1; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 4pt; padding: 6pt 8pt;">
<p style="font-size: 7.5pt; color: #475569; white-space: nowrap;">"결재할 것 정리해줘" → <span style="color: #EF4444; font-weight: 600;">서류 찾는중...</span></p>
</div>
</div>
</div>
</div>
<!-- 전환 화살표 -->
<div style="text-align: center; margin-bottom: 12pt;">
<svg viewBox="0 0 40 24" width="40pt" height="16pt" xmlns="http://www.w3.org/2000/svg">
<path d="M10 6 L20 18 L30 6" fill="none" stroke="#0EA5E9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.6"/>
</svg>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0EA5E9;">SAM 도입 후</p>
</div>
<!-- 대시보드 Mock UI -->
<div style="background: #FFFFFF; border: 1pt solid #E2E8F0; border-radius: 7pt; padding: 9pt; margin-bottom: 16pt; box-shadow: 0 1pt 4pt rgba(0,0,0,0.06);">
<!-- 타이틀바 -->
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 6pt;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8; margin-left: 5pt;">SAM CEO Dashboard ― 로그인 후 3초</p>
</div>
<!-- KPI 카드 (SVG 아이콘 포함) -->
<div style="display: flex; gap: 3pt; margin-bottom: 5pt;">
<div style="flex: 1; background: rgba(14,165,233,0.06); border: 1pt solid rgba(14,165,233,0.15); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="9" width="3" height="5" rx="0.5" fill="#0EA5E9" opacity="0.4"/>
<rect x="6" y="5" width="3" height="9" rx="0.5" fill="#0EA5E9" opacity="0.7"/>
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="#0EA5E9"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #0F172A;">5.2억</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 15.3%</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #0EA5E9; font-weight: 600; margin-top: 1pt;">월 매출</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.06); border: 1pt solid rgba(16,185,129,0.15); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<rect x="2" y="2" width="12" height="12" rx="2" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
<path d="M5 8 L7 10 L11 6" fill="none" stroke="#10B981" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #0F172A;">127건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 8건</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #10B981; font-weight: 600; margin-top: 1pt;">누적 수주</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.06); border: 1pt solid rgba(139,92,246,0.15); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="32 35" stroke-dashoffset="-9" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #0F172A;">96%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">목표 달성</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #8B5CF6; font-weight: 600; margin-top: 1pt;">납기 준수율</p>
</div>
<div style="flex: 1; background: rgba(239,68,68,0.06); border: 1pt solid rgba(239,68,68,0.15); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
<path d="M8 2 L14 12 L2 12 Z" fill="none" stroke="#EF4444" stroke-width="1" stroke-linejoin="round"/>
<line x1="8" y1="6" x2="8" y2="9" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
<circle cx="8" cy="10.5" r="0.6" fill="#EF4444"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #EF4444; font-weight: 600; margin-top: 1pt;">승인 대기</p>
</div>
</div>
<!-- 라인 차트 + 도넛 -->
<div style="display: flex; gap: 4pt;">
<div style="flex: 3; background: #F8FAFC; border-radius: 3pt; padding: 4pt 5pt;">
<p style="white-space: nowrap; font-size: 5pt; color: #94A3B8; margin-bottom: 2pt;">월별 매출 추이</p>
<svg viewBox="0 0 150 35" width="100%" height="26pt" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="10" x2="150" y2="10" stroke="rgba(15,23,42,0.05)" stroke-width="0.5"/>
<line x1="0" y1="20" x2="150" y2="20" stroke="rgba(15,23,42,0.05)" stroke-width="0.5"/>
<path d="M5 30 L18 24 L31 26 L44 20 L57 16 L70 12 L83 14 L96 8 L109 10 L122 4 L135 7 L135 33 L5 33 Z" fill="url(#fGrad)" opacity="0.35"/>
<path d="M5 30 L18 24 L31 26 L44 20 L57 16 L70 12 L83 14 L96 8 L109 10 L122 4 L135 7" fill="none" stroke="#0EA5E9" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="122" cy="4" r="2" fill="#0EA5E9"/>
<defs>
<linearGradient id="fGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0EA5E9" stop-opacity="0.25"/>
<stop offset="100%" stop-color="#0EA5E9" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
</div>
<div style="flex: 2; background: #F8FAFC; border-radius: 3pt; padding: 4pt 5pt; display: flex; align-items: center; gap: 4pt;">
<svg viewBox="0 0 40 40" width="30pt" height="30pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="14" fill="none" stroke="rgba(15,23,42,0.06)" stroke-width="4.5"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#0EA5E9" stroke-width="4.5" stroke-dasharray="33 55" stroke-dashoffset="22" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#10B981" stroke-width="4.5" stroke-dasharray="22 66" stroke-dashoffset="-11" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#8B5CF6" stroke-width="4.5" stroke-dasharray="19 69" stroke-dashoffset="-33" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#F59E0B" stroke-width="4.5" stroke-dasharray="12 76" stroke-dashoffset="-52" stroke-linecap="round"/>
</svg>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #0EA5E9; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B;">영업1팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #10B981; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B;">영업2팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #8B5CF6; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B;">생산팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #F59E0B; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B;">품질팀</p>
</div>
</div>
</div>
</div>
</div>
<!-- 약속 박스 -->
<div style="background: rgba(14,165,233,0.04); border: 1pt solid rgba(14,165,233,0.15); border-radius: 7pt; padding: 10pt 12pt; margin-bottom: 12pt;">
<div style="display: flex; align-items: center; gap: 6pt;">
<svg viewBox="0 0 22 22" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="11" cy="11" r="9" fill="none" stroke="#0EA5E9" stroke-width="1.2" opacity="0.4"/>
<path d="M7 11 L10 14 L15 8" fill="none" stroke="#0EA5E9" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0EA5E9;">SAM 대시보드가 드리는 약속</p>
<p style="font-size: 7pt; color: #64748B; margin-top: 2pt; line-height: 1.5;">로그인 한 번이면 전사 매출, 수주, 승인 대기를 한눈에.<br>보고를 기다리는 시간을 제로로 만들어 드립니다.</p>
</div>
</div>
</div>
<!-- 기술 태그 -->
<div style="display: flex; gap: 4pt; margin-bottom: 8pt;">
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><path d="M2 6 Q4 2 6 6" fill="none" stroke="#94A3B8" stroke-width="0.7"/><path d="M3 6 Q4 4 5 6" fill="none" stroke="#94A3B8" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.6" fill="#94A3B8"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">클라우드 기반</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="0.5" width="4" height="7" rx="0.8" fill="none" stroke="#94A3B8" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.4" fill="#94A3B8"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">PC + 모바일</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 3pt 6pt;">
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1.5" width="6" height="5" rx="0.8" fill="none" stroke="#94A3B8" stroke-width="0.7"/><circle cx="4" cy="4" r="1.2" fill="none" stroke="#94A3B8" stroke-width="0.5"/></svg>
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">역할별 권한</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; border-top: 1pt solid #E2E8F0; padding-top: 8pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #475569;">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: #CBD5E1; margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6.5pt; color: #94A3B8;">뒷면에서 상세 기능을 확인하세요 &#9654;</p>
</div>
</div>
</div>
</body>
</html>

52
sam/docs/brochure/v5/convert-1page.cjs
View File

@@ -1,52 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
const sharp = require('sharp');
async function generateGradientBg() {
const svgGradient = `<svg width="810" height="1440" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bg" x1="0.087" y1="0" x2="-0.087" y2="1">
<stop offset="0%" stop-color="#0F172A"/>
<stop offset="55%" stop-color="#1E1B4B"/>
<stop offset="100%" stop-color="#312E81"/>
</linearGradient>
</defs>
<rect width="810" height="1440" fill="url(#bg)"/>
</svg>`;
const buf = await sharp(Buffer.from(svgGradient)).png().toBuffer();
return buf.toString('base64');
}
async function main() {
const pres = new PptxGenJS();
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
// Pre-generate gradient background PNG
console.log('Generating gradient background...');
const bgBase64 = await generateGradientBg();
const htmlFile = path.join(__dirname, 'slides', 'brochure-dashboard-1page.html');
console.log('Converting CEO Dashboard v5 (Premium Gradient) 1-page brochure...');
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error: ${err.message}`);
}
// Set gradient background on each slide
for (const slide of pres.slides) {
slide.background = { data: `image/png;base64,${bgBase64}` };
}
const outputPath = path.join(__dirname, 'sam-brochure-v5-dashboard-1page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

56
sam/docs/brochure/v5/convert-2page.cjs
View File

@@ -1,56 +0,0 @@
const path = require('path');
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
const PptxGenJS = require('pptxgenjs');
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
const sharp = require('sharp');
async function generateGradientBg() {
const svgGradient = `<svg width="810" height="1440" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bg" x1="0.087" y1="0" x2="-0.087" y2="1">
<stop offset="0%" stop-color="#0F172A"/>
<stop offset="55%" stop-color="#1E1B4B"/>
<stop offset="100%" stop-color="#312E81"/>
</linearGradient>
</defs>
<rect width="810" height="1440" fill="url(#bg)"/>
</svg>`;
const buf = await sharp(Buffer.from(svgGradient)).png().toBuffer();
return buf.toString('base64');
}
async function main() {
const pres = new PptxGenJS();
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
pres.layout = 'PORTRAIT_9x16';
// Pre-generate gradient background PNG
console.log('Generating gradient background...');
const bgBase64 = await generateGradientBg();
const slidesDir = path.join(__dirname, 'slides');
const slides = ['brochure-dashboard-front.html', 'brochure-dashboard-back.html'];
for (const file of slides) {
const htmlFile = path.join(slidesDir, file);
console.log(`Converting ${file} ...`);
try {
await html2pptx(htmlFile, pres);
} catch (err) {
console.error(`Error on ${file}: ${err.message}`);
}
}
// Set gradient background on each slide
for (const slide of pres.slides) {
slide.background = { data: `image/png;base64,${bgBase64}` };
}
const outputPath = path.join(__dirname, 'sam-brochure-v5-dashboard-2page.pptx');
await pres.writeFile({ fileName: outputPath });
console.log(`\nPPTX created: ${outputPath}`);
}
main().catch(console.error);

Some files were not shown because too many files have changed in this diff Show More