docs: [브랜딩] 주일/경동 → (주)코드브릿지엑스 전환
- e-sign 프로젝트 문서 회사명 교체 - legacy-5130 문서 회사명 교체 - SAM BI 이미지 7종 assets/bi/에 추가
This commit is contained in:
@@ -247,7 +247,7 @@ projects/e-sign/
|
||||
| 개발 | 김보곤 (lightone2017@codebridge-x.com) |
|
||||
| AI 지원 | Claude Opus 4.6 (noreply@anthropic.com) |
|
||||
| 프로젝트 | SAM (Smart Automation Management) |
|
||||
| 조직 | 주일/경동 IT 혁신팀 |
|
||||
| 조직 | (주)코드브릿지엑스 IT 혁신팀 |
|
||||
|
||||
---
|
||||
|
||||
|
||||
268
projects/e-sign/esign-storyboard-config.json
Normal file
268
projects/e-sign/esign-storyboard-config.json
Normal file
@@ -0,0 +1,268 @@
|
||||
{
|
||||
"projectName": "SAM E-Sign (전자계약 서명 솔루션)",
|
||||
"company": "(주)코드브릿지엑스",
|
||||
"author": "IT 혁신팀",
|
||||
"date": "2026.02.13",
|
||||
"version": "v1.0",
|
||||
"purpose": "모두싸인과 유사한 간편 전자계약 서명 솔루션을 SAM 시스템에 구현하여, PDF/DOCX 기반 계약서에 2인 전자서명(OTP 본인인증)을 수행하고 감사 추적까지 완비하는 시스템",
|
||||
"features": [
|
||||
"PDF/DOCX 계약서 업로드 및 관리",
|
||||
"2인 서명 (작성자/상대방) 순차 서명",
|
||||
"서명 위치 지정 (PDF.js 기반 드래그&드롭)",
|
||||
"이메일 OTP 본인인증 (6자리, 5분 유효)",
|
||||
"캔버스 직접 서명 (signature_pad.js)",
|
||||
"PDF 서명 합성 (FPDI/TCPDF)",
|
||||
"DOCX→PDF 자동 변환 (LibreOffice)",
|
||||
"감사 추적 로그 (전체 행위 기록)",
|
||||
"SHA-256 파일 무결성 검증"
|
||||
],
|
||||
"effects": [
|
||||
{ "icon": "📝", "title": "계약 디지털화", "desc": "종이 계약 → 전자 계약으로 전환하여 업무 효율 향상" },
|
||||
{ "icon": "🔒", "title": "보안 강화", "desc": "OTP 인증 + 파일 해시 + 감사 로그로 법적 효력 확보" },
|
||||
{ "icon": "⏱️", "title": "시간 단축", "desc": "이메일 서명 링크로 즉시 서명, 물리적 이동 불필요" },
|
||||
{ "icon": "📊", "title": "추적 관리", "desc": "실시간 서명 현황 추적 및 리마인더 자동 발송" }
|
||||
],
|
||||
"tocItems": [
|
||||
{ "num": "01", "title": "프로젝트 개요", "desc": "목적, 주요 기능, 기대 효과" },
|
||||
{ "num": "02", "title": "메뉴 구조 (IA)", "desc": "전체 화면 계층 및 네비게이션" },
|
||||
{ "num": "03", "title": "계약 대시보드", "desc": "통계, 필터, 계약 목록" },
|
||||
{ "num": "04", "title": "계약 생성", "desc": "계약서 업로드 및 서명자 설정" },
|
||||
{ "num": "05", "title": "계약 상세", "desc": "서명 현황, 감사 로그, 액션" },
|
||||
{ "num": "06", "title": "서명 위치 지정", "desc": "PDF 위 서명 필드 배치" },
|
||||
{ "num": "07", "title": "서명 요청 발송", "desc": "발송 전 확인 및 이메일 발송" },
|
||||
{ "num": "08", "title": "본인인증 (OTP)", "desc": "이메일 OTP 인증 화면" },
|
||||
{ "num": "09", "title": "서명 수행", "desc": "문서 확인 → 서명 → 제출" },
|
||||
{ "num": "10", "title": "서명 완료", "desc": "완료/거절 결과 안내" }
|
||||
],
|
||||
"mainMenus": [
|
||||
{ "title": "계약 대시보드", "children": ["통계 카드", "계약 목록", "필터/검색"] },
|
||||
{ "title": "계약 생성", "children": ["계약 정보", "파일 업로드", "서명자 설정"] },
|
||||
{ "title": "계약 상세", "children": ["서명 현황", "감사 로그", "액션 버튼"] },
|
||||
{ "title": "서명 위치 지정", "children": ["PDF 뷰어", "필드 배치", "필드 설정"] },
|
||||
{ "title": "서명 요청 발송", "children": ["체크리스트", "발송 확인"] }
|
||||
],
|
||||
"screens": [
|
||||
{
|
||||
"taskName": "계약 대시보드",
|
||||
"route": "/esign",
|
||||
"screenName": "E-Sign 대시보드",
|
||||
"screenId": "ESIGN_001",
|
||||
"descriptions": [
|
||||
{ "title": "상태 통계 카드", "content": "전체/진행중/대기/완료/만료 건수를 카드 형태로 표시. 클릭 시 해당 상태로 필터링", "markerX": 2.8, "markerY": 1.4 },
|
||||
{ "title": "필터 영역", "content": "상태 셀렉트, 검색(제목/상대방), 날짜 범위 필터 제공", "markerX": 1.8, "markerY": 2.3 },
|
||||
{ "title": "계약 목록 테이블", "content": "계약코드, 제목, 상대방, 상태배지(색상구분), 기한, 생성일. 클릭 시 상세 이동", "markerX": 3.5, "markerY": 3.2 },
|
||||
{ "title": "페이지네이션", "content": "페이지 이동 + per_page 선택. API 기반 서버 사이드 페이지네이션", "markerX": 3.5, "markerY": 4.8 }
|
||||
],
|
||||
"wireframeElements": [
|
||||
{"type": "rect", "x": 1.6, "y": 1.15, "w": 5.5, "h": 0.35, "fill": "0d9488", "text": "전자계약 관리", "fontSize": 12, "bold": true, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 1.6, "y": 1.55, "w": 1.05, "h": 0.65, "fill": "eff6ff", "text": "전체\n24건", "fontSize": 8, "color": "1e40af"},
|
||||
{"type": "rect", "x": 2.7, "y": 1.55, "w": 1.05, "h": 0.65, "fill": "fef3c7", "text": "진행중\n8건", "fontSize": 8, "color": "92400e"},
|
||||
{"type": "rect", "x": 3.8, "y": 1.55, "w": 1.05, "h": 0.65, "fill": "f0fdf4", "text": "완료\n12건", "fontSize": 8, "color": "166534"},
|
||||
{"type": "rect", "x": 4.9, "y": 1.55, "w": 1.05, "h": 0.65, "fill": "fef2f2", "text": "만료\n4건", "fontSize": 8, "color": "991b1b"},
|
||||
{"type": "rect", "x": 6.0, "y": 1.55, "w": 1.1, "h": 0.65, "fill": "0d9488", "text": "+ 새 계약", "fontSize": 9, "bold": true, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 1.6, "y": 2.3, "w": 1.3, "h": 0.3, "fill": "f1f5f9", "text": "상태 ▼", "fontSize": 8, "color": "64748b"},
|
||||
{"type": "rect", "x": 2.95, "y": 2.3, "w": 2.5, "h": 0.3, "fill": "f1f5f9", "text": "🔍 제목, 상대방 검색...", "fontSize": 8, "color": "94a3b8", "align": "left"},
|
||||
{"type": "rect", "x": 5.5, "y": 2.3, "w": 1.6, "h": 0.3, "fill": "f1f5f9", "text": "📅 기간 선택", "fontSize": 8, "color": "64748b"},
|
||||
{"type": "rect", "x": 1.6, "y": 2.75, "w": 5.5, "h": 0.35, "fill": "1e293b", "text": "계약코드 제목 상대방 상태 기한 생성일", "fontSize": 7, "color": "FFFFFF", "align": "left"},
|
||||
{"type": "rect", "x": 1.6, "y": 3.1, "w": 5.5, "h": 0.3, "fill": "FFFFFF", "text": "ES-20260213-A3F 연간 유지보수 계약 (주)한양 🟢 완료 2026-03-01 2026-02-12", "fontSize": 7, "color": "334155", "align": "left"},
|
||||
{"type": "rect", "x": 1.6, "y": 3.4, "w": 5.5, "h": 0.3, "fill": "f8fafc", "text": "ES-20260213-K7B 장비 납품 계약 삼일테크 🟡 진행중 2026-02-28 2026-02-13", "fontSize": 7, "color": "334155", "align": "left"},
|
||||
{"type": "rect", "x": 1.6, "y": 3.7, "w": 5.5, "h": 0.3, "fill": "FFFFFF", "text": "ES-20260212-P2M 외주 용역 계약 디자인랩 🔵 대기 2026-03-15 2026-02-11", "fontSize": 7, "color": "334155", "align": "left"},
|
||||
{"type": "rect", "x": 1.6, "y": 4.0, "w": 5.5, "h": 0.3, "fill": "f8fafc", "text": "ES-20260210-Q8R 스크린 공급 계약 경동산업 🔴 만료 2026-02-10 2026-02-05", "fontSize": 7, "color": "334155", "align": "left"},
|
||||
{"type": "rect", "x": 3.2, "y": 4.5, "w": 2.2, "h": 0.3, "fill": "f1f5f9", "text": "< 1 2 3 ... 5 >", "fontSize": 8, "color": "64748b"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"taskName": "계약 생성",
|
||||
"route": "/esign/create",
|
||||
"screenName": "새 계약 생성",
|
||||
"screenId": "ESIGN_002",
|
||||
"descriptions": [
|
||||
{ "title": "계약 정보 입력", "content": "계약 제목(필수), 설명(선택), 서명 순서(상대방먼저/작성자먼저), 서명 기한 설정", "markerX": 1.8, "markerY": 1.6 },
|
||||
{ "title": "PDF/DOCX 업로드", "content": "드래그&드롭 또는 클릭 파일 선택. PDF/DOCX 지원. DOCX는 서버에서 LibreOffice로 자동 변환", "markerX": 1.8, "markerY": 2.8 },
|
||||
{ "title": "서명자 정보", "content": "작성자(이름/이메일/전화), 상대방(이름/이메일/전화) 2인 정보 입력. 이메일은 OTP 발송 주소", "markerX": 4.5, "markerY": 1.6 },
|
||||
{ "title": "생성 버튼", "content": "multipart/form-data로 API 호출. 성공 시 서명위치 지정 화면으로 자동 이동", "markerX": 5.5, "markerY": 4.6 }
|
||||
],
|
||||
"wireframeElements": [
|
||||
{"type": "rect", "x": 1.6, "y": 1.15, "w": 5.5, "h": 0.35, "fill": "0d9488", "text": "새 계약 생성", "fontSize": 12, "bold": true, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 1.6, "y": 1.6, "w": 2.6, "h": 0.3, "fill": "f1f5f9", "text": "계약 제목 *", "fontSize": 8, "color": "64748b", "align": "left"},
|
||||
{"type": "rect", "x": 1.6, "y": 1.95, "w": 2.6, "h": 0.55, "fill": "f1f5f9", "text": "계약 설명 (선택)", "fontSize": 8, "color": "94a3b8", "align": "left"},
|
||||
{"type": "rect", "x": 1.6, "y": 2.55, "w": 1.25, "h": 0.3, "fill": "eff6ff", "text": "⦿ 상대방 먼저", "fontSize": 8, "color": "1e40af"},
|
||||
{"type": "rect", "x": 2.9, "y": 2.55, "w": 1.3, "h": 0.3, "fill": "f1f5f9", "text": "○ 작성자 먼저", "fontSize": 8, "color": "64748b"},
|
||||
{"type": "rect", "x": 1.6, "y": 2.95, "w": 5.5, "h": 1.2, "fill": "f8fafc", "text": "📄\n\nPDF 또는 DOCX 파일을\n드래그하거나 클릭하여 업로드\n\n최대 20MB", "fontSize": 8, "color": "64748b"},
|
||||
{"type": "rect", "x": 1.6, "y": 4.2, "w": 2.6, "h": 0.3, "fill": "f1f5f9", "text": "📅 서명 기한: 2026-03-13", "fontSize": 8, "color": "334155", "align": "left"},
|
||||
{"type": "rect", "x": 4.3, "y": 1.6, "w": 2.8, "h": 0.25, "fill": "1e293b", "text": "✍️ 작성자 (본인)", "fontSize": 8, "bold": true, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 4.3, "y": 1.85, "w": 2.8, "h": 0.25, "fill": "f1f5f9", "text": "이름: 홍길동", "fontSize": 8, "color": "334155", "align": "left"},
|
||||
{"type": "rect", "x": 4.3, "y": 2.1, "w": 2.8, "h": 0.25, "fill": "FFFFFF", "text": "이메일: hong@sam.kr", "fontSize": 8, "color": "334155", "align": "left"},
|
||||
{"type": "rect", "x": 4.3, "y": 2.35, "w": 2.8, "h": 0.25, "fill": "f1f5f9", "text": "전화: 010-1234-5678", "fontSize": 8, "color": "334155", "align": "left"},
|
||||
{"type": "rect", "x": 4.3, "y": 2.75, "w": 2.8, "h": 0.25, "fill": "1e293b", "text": "👤 상대방", "fontSize": 8, "bold": true, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 4.3, "y": 3.0, "w": 2.8, "h": 0.25, "fill": "f1f5f9", "text": "이름 *", "fontSize": 8, "color": "94a3b8", "align": "left"},
|
||||
{"type": "rect", "x": 4.3, "y": 3.25, "w": 2.8, "h": 0.25, "fill": "FFFFFF", "text": "이메일 *", "fontSize": 8, "color": "94a3b8", "align": "left"},
|
||||
{"type": "rect", "x": 4.3, "y": 3.5, "w": 2.8, "h": 0.25, "fill": "f1f5f9", "text": "전화 (선택)", "fontSize": 8, "color": "94a3b8", "align": "left"},
|
||||
{"type": "rect", "x": 5.5, "y": 4.5, "w": 1.6, "h": 0.35, "fill": "0d9488", "text": "계약 생성", "fontSize": 10, "bold": true, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 4.3, "y": 4.5, "w": 1.0, "h": 0.35, "fill": "e2e8f0", "text": "취소", "fontSize": 10, "color": "64748b"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"taskName": "계약 상세",
|
||||
"route": "/esign/{id}",
|
||||
"screenName": "계약 상세 정보",
|
||||
"screenId": "ESIGN_003",
|
||||
"descriptions": [
|
||||
{ "title": "계약 기본 정보", "content": "계약 코드, 제목, 상태 배지, 서명 순서, 기한, 생성일시 표시", "markerX": 1.8, "markerY": 1.5 },
|
||||
{ "title": "서명자 현황 카드", "content": "작성자/상대방 2인의 서명 상태, 인증 시각, 서명 시각을 카드로 표시. 진행 상태 시각화", "markerX": 1.8, "markerY": 2.5 },
|
||||
{ "title": "감사 로그 타임라인", "content": "계약 생성→발송→열람→인증→서명→완료 전 과정의 타임라인 로그. IP, 시각 포함", "markerX": 4.5, "markerY": 2.5 },
|
||||
{ "title": "액션 버튼 영역", "content": "상태별 활성 버튼: 발송(draft), 리마인더(pending), 취소, PDF 다운로드, 무결성 검증", "markerX": 1.8, "markerY": 4.5 }
|
||||
],
|
||||
"wireframeElements": [
|
||||
{"type": "rect", "x": 1.6, "y": 1.15, "w": 5.5, "h": 0.35, "fill": "0d9488", "text": "계약 상세 ES-20260213-A3F2K9", "fontSize": 11, "bold": true, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 1.6, "y": 1.55, "w": 3.5, "h": 0.25, "fill": "f1f5f9", "text": "📋 연간 유지보수 계약 | 🟡 진행중 | 기한: 2026-03-01", "fontSize": 7, "color": "334155", "align": "left"},
|
||||
{"type": "rect", "x": 1.6, "y": 1.9, "w": 2.6, "h": 0.25, "fill": "1e293b", "text": "서명자 현황", "fontSize": 8, "bold": true, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 1.6, "y": 2.15, "w": 2.6, "h": 0.65, "fill": "f0fdf4", "text": "✍️ 작성자: 홍길동\n✅ 서명 완료\n2026-02-13 14:30", "fontSize": 7, "color": "166534", "align": "left"},
|
||||
{"type": "rect", "x": 1.6, "y": 2.85, "w": 2.6, "h": 0.65, "fill": "fef3c7", "text": "👤 상대방: 김영수\n⏳ 서명 대기중\nOTP 인증 완료", "fontSize": 7, "color": "92400e", "align": "left"},
|
||||
{"type": "rect", "x": 4.3, "y": 1.9, "w": 2.8, "h": 0.25, "fill": "1e293b", "text": "감사 로그", "fontSize": 8, "bold": true, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 4.3, "y": 2.15, "w": 2.8, "h": 0.25, "fill": "f8fafc", "text": "🕐 14:30 서명 완료 (홍길동) IP: 192.168.1.10", "fontSize": 6, "color": "334155", "align": "left"},
|
||||
{"type": "rect", "x": 4.3, "y": 2.4, "w": 2.8, "h": 0.25, "fill": "FFFFFF", "text": "🕐 14:25 본인인증 완료 (홍길동)", "fontSize": 6, "color": "334155", "align": "left"},
|
||||
{"type": "rect", "x": 4.3, "y": 2.65, "w": 2.8, "h": 0.25, "fill": "f8fafc", "text": "🕐 14:20 OTP 발송 (홍길동)", "fontSize": 6, "color": "334155", "align": "left"},
|
||||
{"type": "rect", "x": 4.3, "y": 2.9, "w": 2.8, "h": 0.25, "fill": "FFFFFF", "text": "🕐 14:15 문서 열람 (홍길동)", "fontSize": 6, "color": "334155", "align": "left"},
|
||||
{"type": "rect", "x": 4.3, "y": 3.15, "w": 2.8, "h": 0.25, "fill": "f8fafc", "text": "🕐 10:00 서명 요청 발송", "fontSize": 6, "color": "334155", "align": "left"},
|
||||
{"type": "rect", "x": 4.3, "y": 3.4, "w": 2.8, "h": 0.25, "fill": "FFFFFF", "text": "🕐 09:30 계약 생성 (관리자)", "fontSize": 6, "color": "334155", "align": "left"},
|
||||
{"type": "rect", "x": 1.6, "y": 4.2, "w": 1.1, "h": 0.3, "fill": "0d9488", "text": "📧 리마인더", "fontSize": 8, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 2.8, "y": 4.2, "w": 0.9, "h": 0.3, "fill": "dc2626", "text": "❌ 취소", "fontSize": 8, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 3.8, "y": 4.2, "w": 1.1, "h": 0.3, "fill": "1e293b", "text": "📥 다운로드", "fontSize": 8, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 5.0, "y": 4.2, "w": 1.0, "h": 0.3, "fill": "f59e0b", "text": "🔒 검증", "fontSize": 8, "color": "FFFFFF"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"taskName": "서명 위치 지정",
|
||||
"route": "/esign/{id}/fields",
|
||||
"screenName": "서명 위치 지정",
|
||||
"screenId": "ESIGN_004",
|
||||
"descriptions": [
|
||||
{ "title": "PDF 뷰어 영역", "content": "PDF.js로 원본 문서 렌더링. 확대/축소, 페이지 네비게이션 지원", "markerX": 2.0, "markerY": 2.0 },
|
||||
{ "title": "서명 필드 배치", "content": "PDF 위 클릭으로 서명 필드 추가. 드래그로 위치 이동, 리사이즈 핸들로 크기 조절. 좌표는 %단위 저장", "markerX": 3.5, "markerY": 3.0 },
|
||||
{ "title": "필드 설정 패널", "content": "서명자 선택(작성자/상대방), 필드 타입(서명/도장/텍스트/날짜/체크박스), 필수 여부 설정", "markerX": 5.8, "markerY": 1.6 },
|
||||
{ "title": "저장 및 네비게이션", "content": "저장 버튼으로 필드 위치 API 전송. 페이지별 필드 관리. 완료 후 발송 화면 이동", "markerX": 5.8, "markerY": 4.5 }
|
||||
],
|
||||
"wireframeElements": [
|
||||
{"type": "rect", "x": 1.6, "y": 1.15, "w": 5.5, "h": 0.35, "fill": "0d9488", "text": "서명 위치 지정 | 페이지 1/3 ◀ ▶", "fontSize": 11, "bold": true, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 1.6, "y": 1.55, "w": 4.0, "h": 3.3, "fill": "FFFFFF", "text": "", "fontSize": 8, "color": "334155"},
|
||||
{"type": "rect", "x": 1.8, "y": 1.7, "w": 3.6, "h": 0.2, "fill": "e2e8f0", "text": "계약서 제목 영역", "fontSize": 7, "color": "64748b"},
|
||||
{"type": "rect", "x": 1.8, "y": 2.0, "w": 3.6, "h": 0.12, "fill": "f1f5f9", "text": "", "fontSize": 6, "color": "94a3b8"},
|
||||
{"type": "rect", "x": 1.8, "y": 2.15, "w": 3.6, "h": 0.12, "fill": "f1f5f9", "text": "", "fontSize": 6, "color": "94a3b8"},
|
||||
{"type": "rect", "x": 1.8, "y": 2.3, "w": 3.6, "h": 0.12, "fill": "f1f5f9", "text": "", "fontSize": 6, "color": "94a3b8"},
|
||||
{"type": "rect", "x": 1.8, "y": 2.45, "w": 3.6, "h": 0.12, "fill": "f1f5f9", "text": "", "fontSize": 6, "color": "94a3b8"},
|
||||
{"type": "rect", "x": 2.0, "y": 3.0, "w": 1.4, "h": 0.55, "fill": "dbeafe", "text": "✍️ 작성자 서명\n(드래그 가능)", "fontSize": 7, "color": "1e40af"},
|
||||
{"type": "rect", "x": 3.6, "y": 3.7, "w": 1.4, "h": 0.55, "fill": "fef3c7", "text": "👤 상대방 서명\n(드래그 가능)", "fontSize": 7, "color": "92400e"},
|
||||
{"type": "rect", "x": 5.8, "y": 1.55, "w": 1.3, "h": 0.25, "fill": "1e293b", "text": "필드 설정", "fontSize": 8, "bold": true, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 5.8, "y": 1.85, "w": 1.3, "h": 0.25, "fill": "f1f5f9", "text": "서명자: 작성자 ▼", "fontSize": 7, "color": "334155"},
|
||||
{"type": "rect", "x": 5.8, "y": 2.15, "w": 1.3, "h": 0.25, "fill": "f1f5f9", "text": "타입: 서명 ▼", "fontSize": 7, "color": "334155"},
|
||||
{"type": "rect", "x": 5.8, "y": 2.45, "w": 1.3, "h": 0.25, "fill": "f1f5f9", "text": "☑ 필수 항목", "fontSize": 7, "color": "334155"},
|
||||
{"type": "rect", "x": 5.8, "y": 2.85, "w": 1.3, "h": 0.25, "fill": "1e293b", "text": "배치된 필드", "fontSize": 8, "bold": true, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 5.8, "y": 3.15, "w": 1.3, "h": 0.2, "fill": "dbeafe", "text": "작성자 서명 (p.1)", "fontSize": 6, "color": "1e40af"},
|
||||
{"type": "rect", "x": 5.8, "y": 3.4, "w": 1.3, "h": 0.2, "fill": "fef3c7", "text": "상대방 서명 (p.1)", "fontSize": 6, "color": "92400e"},
|
||||
{"type": "rect", "x": 5.8, "y": 3.65, "w": 1.3, "h": 0.2, "fill": "dbeafe", "text": "작성자 날짜 (p.3)", "fontSize": 6, "color": "1e40af"},
|
||||
{"type": "rect", "x": 5.8, "y": 4.4, "w": 0.6, "h": 0.3, "fill": "e2e8f0", "text": "취소", "fontSize": 8, "color": "64748b"},
|
||||
{"type": "rect", "x": 6.5, "y": 4.4, "w": 0.6, "h": 0.3, "fill": "0d9488", "text": "저장", "fontSize": 8, "bold": true, "color": "FFFFFF"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"taskName": "서명 요청 발송",
|
||||
"route": "/esign/{id}/send",
|
||||
"screenName": "서명 요청 발송 확인",
|
||||
"screenId": "ESIGN_005",
|
||||
"descriptions": [
|
||||
{ "title": "발송 전 체크리스트", "content": "서명 필드 설정 완료 여부, 서명자 이메일 유효성, 서명 기한 확인. 모두 통과해야 발송 가능", "markerX": 2.5, "markerY": 1.8 },
|
||||
{ "title": "서명 순서 확인", "content": "서명 순서(상대방 먼저/작성자 먼저) 표시. 1번 서명자에게만 먼저 이메일 발송", "markerX": 2.5, "markerY": 2.8 },
|
||||
{ "title": "발송 버튼", "content": "발송 클릭 시 계약 상태 DRAFT→PENDING 변경, 첫 서명자에게 이메일 자동 발송", "markerX": 4.5, "markerY": 4.2 }
|
||||
],
|
||||
"wireframeElements": [
|
||||
{"type": "rect", "x": 1.6, "y": 1.15, "w": 5.5, "h": 0.35, "fill": "0d9488", "text": "서명 요청 발송", "fontSize": 12, "bold": true, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 2.2, "y": 1.7, "w": 4.2, "h": 0.25, "fill": "1e293b", "text": "📋 발송 전 체크리스트", "fontSize": 9, "bold": true, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 2.2, "y": 2.0, "w": 4.2, "h": 0.25, "fill": "f0fdf4", "text": "✅ 서명 필드가 설정되었습니다 (작성자 2개, 상대방 2개)", "fontSize": 8, "color": "166534", "align": "left"},
|
||||
{"type": "rect", "x": 2.2, "y": 2.3, "w": 4.2, "h": 0.25, "fill": "f0fdf4", "text": "✅ 서명자 이메일이 유효합니다", "fontSize": 8, "color": "166534", "align": "left"},
|
||||
{"type": "rect", "x": 2.2, "y": 2.6, "w": 4.2, "h": 0.25, "fill": "f0fdf4", "text": "✅ 서명 기한: 2026-03-13 (28일 남음)", "fontSize": 8, "color": "166534", "align": "left"},
|
||||
{"type": "rect", "x": 2.2, "y": 3.1, "w": 4.2, "h": 0.25, "fill": "1e293b", "text": "📬 서명 순서", "fontSize": 9, "bold": true, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 2.2, "y": 3.4, "w": 2.0, "h": 0.6, "fill": "eff6ff", "text": "1️⃣ 상대방 (먼저)\n김영수\nkim@partner.co.kr", "fontSize": 7, "color": "1e40af"},
|
||||
{"type": "rect", "x": 4.4, "y": 3.55, "w": 0.4, "h": 0.3, "fill": "e2e8f0", "text": "→", "fontSize": 12, "color": "64748b"},
|
||||
{"type": "rect", "x": 5.0, "y": 3.4, "w": 1.4, "h": 0.6, "fill": "f1f5f9", "text": "2️⃣ 작성자\n홍길동\nhong@sam.kr", "fontSize": 7, "color": "64748b"},
|
||||
{"type": "rect", "x": 2.2, "y": 4.3, "w": 1.5, "h": 0.35, "fill": "e2e8f0", "text": "← 돌아가기", "fontSize": 9, "color": "64748b"},
|
||||
{"type": "rect", "x": 5.2, "y": 4.3, "w": 1.4, "h": 0.35, "fill": "0d9488", "text": "📧 발송하기", "fontSize": 10, "bold": true, "color": "FFFFFF"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"taskName": "본인인증 (OTP)",
|
||||
"route": "/esign/sign/{token}",
|
||||
"screenName": "본인인증",
|
||||
"screenId": "ESIGN_006",
|
||||
"noSidebar": true,
|
||||
"descriptions": [
|
||||
{ "title": "계약 정보 표시", "content": "계약 제목, 서명 요청자, 서명 기한 등 기본 정보를 상단에 표시. 토큰 기반 비인증 접근", "markerX": 2.8, "markerY": 1.5 },
|
||||
{ "title": "OTP 발송", "content": "서명자 이메일로 6자리 인증 코드 발송. 5분 유효, 최대 5회 시도 제한", "markerX": 3.5, "markerY": 2.5 },
|
||||
{ "title": "OTP 입력 및 검증", "content": "6자리 숫자 입력 → 검증 성공 시 sign_session_token 발급 → 서명 화면 자동 이동", "markerX": 3.5, "markerY": 3.3 },
|
||||
{ "title": "재발송 기능", "content": "60초 쿨다운 후 OTP 재발송 가능. 시도 횟수 초과 시 접근 차단", "markerX": 3.5, "markerY": 4.3 }
|
||||
],
|
||||
"wireframeElements": [
|
||||
{"type": "rect", "x": 1.5, "y": 0.6, "w": 7.0, "h": 0.45, "fill": "0d9488", "text": "SAM E-Sign 전자계약 서명", "fontSize": 14, "bold": true, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 2.5, "y": 1.3, "w": 5.0, "h": 0.7, "fill": "f1f5f9", "text": "📋 연간 유지보수 계약\n요청자: 홍길동 (hong@sam.kr) | 기한: 2026-03-01", "fontSize": 8, "color": "334155"},
|
||||
{"type": "rect", "x": 2.5, "y": 2.2, "w": 5.0, "h": 0.3, "fill": "1e293b", "text": "🔐 본인인증", "fontSize": 10, "bold": true, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 2.5, "y": 2.55, "w": 5.0, "h": 0.3, "fill": "FFFFFF", "text": "이메일로 발송된 6자리 인증 코드를 입력해주세요", "fontSize": 8, "color": "64748b"},
|
||||
{"type": "rect", "x": 3.2, "y": 3.0, "w": 0.5, "h": 0.5, "fill": "f1f5f9", "text": "3", "fontSize": 16, "bold": true, "color": "1e293b"},
|
||||
{"type": "rect", "x": 3.75, "y": 3.0, "w": 0.5, "h": 0.5, "fill": "f1f5f9", "text": "8", "fontSize": 16, "bold": true, "color": "1e293b"},
|
||||
{"type": "rect", "x": 4.3, "y": 3.0, "w": 0.5, "h": 0.5, "fill": "f1f5f9", "text": "2", "fontSize": 16, "bold": true, "color": "1e293b"},
|
||||
{"type": "rect", "x": 4.85, "y": 3.0, "w": 0.5, "h": 0.5, "fill": "f1f5f9", "text": "9", "fontSize": 16, "bold": true, "color": "1e293b"},
|
||||
{"type": "rect", "x": 5.4, "y": 3.0, "w": 0.5, "h": 0.5, "fill": "f1f5f9", "text": "1", "fontSize": 16, "bold": true, "color": "1e293b"},
|
||||
{"type": "rect", "x": 5.95, "y": 3.0, "w": 0.5, "h": 0.5, "fill": "f1f5f9", "text": "5", "fontSize": 16, "bold": true, "color": "1e293b"},
|
||||
{"type": "rect", "x": 3.5, "y": 3.7, "w": 3.0, "h": 0.4, "fill": "0d9488", "text": "인증 확인", "fontSize": 11, "bold": true, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 3.5, "y": 4.2, "w": 3.0, "h": 0.3, "fill": "f1f5f9", "text": "인증 코드 재발송 (45초 후 가능)", "fontSize": 8, "color": "64748b"},
|
||||
{"type": "rect", "x": 3.5, "y": 4.6, "w": 3.0, "h": 0.2, "fill": "FFFFFF", "text": "⚠️ 유효시간: 4분 23초 남음 | 시도: 1/5회", "fontSize": 7, "color": "f59e0b"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"taskName": "서명 수행",
|
||||
"route": "/esign/sign/{token}/sign",
|
||||
"screenName": "전자서명",
|
||||
"screenId": "ESIGN_007",
|
||||
"noSidebar": true,
|
||||
"descriptions": [
|
||||
{ "title": "3단계 프로세스", "content": "문서 확인 → 서명 입력 → 서명 확인. 단계별 진행바 표시. 이전 단계 돌아가기 가능", "markerX": 3.5, "markerY": 1.2 },
|
||||
{ "title": "문서 확인 & 동의", "content": "PDF 다운로드 링크 + 동의 체크박스. 동의 체크 필수로 다음 단계 진행", "markerX": 2.0, "markerY": 2.0 },
|
||||
{ "title": "서명 캔버스", "content": "signature_pad.js 기반 캔버스. 터치/마우스 입력. 지우기 버튼. base64 PNG로 변환하여 서버 전송", "markerX": 3.5, "markerY": 3.0 },
|
||||
{ "title": "거절 기능", "content": "서명 대신 거절 선택 가능. 사유 입력 필수. 거절 시 계약 상태 REJECTED", "markerX": 5.5, "markerY": 4.5 }
|
||||
],
|
||||
"wireframeElements": [
|
||||
{"type": "rect", "x": 1.5, "y": 0.6, "w": 7.0, "h": 0.45, "fill": "0d9488", "text": "SAM E-Sign 전자서명", "fontSize": 14, "bold": true, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 2.0, "y": 1.15, "w": 1.8, "h": 0.25, "fill": "0d9488", "text": "① 문서 확인", "fontSize": 8, "bold": true, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 3.9, "y": 1.15, "w": 1.8, "h": 0.25, "fill": "e2e8f0", "text": "② 서명 입력", "fontSize": 8, "color": "64748b"},
|
||||
{"type": "rect", "x": 5.8, "y": 1.15, "w": 1.8, "h": 0.25, "fill": "e2e8f0", "text": "③ 서명 확인", "fontSize": 8, "color": "64748b"},
|
||||
{"type": "rect", "x": 2.0, "y": 1.6, "w": 6.0, "h": 0.5, "fill": "f1f5f9", "text": "📄 계약서: 연간 유지보수 계약.pdf\n아래 문서를 확인한 후 서명을 진행해주세요", "fontSize": 8, "color": "334155"},
|
||||
{"type": "rect", "x": 2.0, "y": 2.2, "w": 6.0, "h": 1.8, "fill": "FFFFFF", "text": "\n\n✍️ 서명 캔버스\n\n마우스 또는 터치로 서명해주세요\n(signature_pad.js)", "fontSize": 9, "color": "94a3b8"},
|
||||
{"type": "rect", "x": 2.0, "y": 4.1, "w": 1.2, "h": 0.3, "fill": "f1f5f9", "text": "🗑 지우기", "fontSize": 8, "color": "64748b"},
|
||||
{"type": "rect", "x": 2.0, "y": 4.5, "w": 1.5, "h": 0.3, "fill": "f1f5f9", "text": "☑ 동의합니다", "fontSize": 8, "color": "334155", "align": "left"},
|
||||
{"type": "rect", "x": 5.0, "y": 4.5, "w": 1.4, "h": 0.35, "fill": "0d9488", "text": "서명 제출", "fontSize": 10, "bold": true, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 6.5, "y": 4.5, "w": 1.2, "h": 0.35, "fill": "dc2626", "text": "서명 거절", "fontSize": 9, "color": "FFFFFF"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"taskName": "서명 완료",
|
||||
"route": "/esign/sign/{token}/done",
|
||||
"screenName": "서명 완료",
|
||||
"screenId": "ESIGN_008",
|
||||
"noSidebar": true,
|
||||
"descriptions": [
|
||||
{ "title": "완료 상태 표시", "content": "서명 완료/거절/기타 상태에 따라 아이콘과 메시지 분기 표시. 성공 시 녹색, 거절 시 빨간색", "markerX": 3.5, "markerY": 2.0 },
|
||||
{ "title": "서명 정보 요약", "content": "계약 제목, 서명자 이름, 서명 일시, IP 주소 등 서명 증적 정보 표시", "markerX": 3.5, "markerY": 3.2 },
|
||||
{ "title": "안내 메시지", "content": "양측 서명 완료 시 완료 이메일 발송 안내. 브라우저 닫기 안내", "markerX": 3.5, "markerY": 4.2 }
|
||||
],
|
||||
"wireframeElements": [
|
||||
{"type": "rect", "x": 1.5, "y": 0.6, "w": 7.0, "h": 0.45, "fill": "0d9488", "text": "SAM E-Sign", "fontSize": 14, "bold": true, "color": "FFFFFF"},
|
||||
{"type": "rect", "x": 3.0, "y": 1.5, "w": 4.0, "h": 0.6, "fill": "f0fdf4", "text": "✅", "fontSize": 28, "color": "16a34a"},
|
||||
{"type": "rect", "x": 3.0, "y": 2.1, "w": 4.0, "h": 0.4, "fill": "FFFFFF", "text": "서명이 완료되었습니다", "fontSize": 14, "bold": true, "color": "166534"},
|
||||
{"type": "rect", "x": 3.0, "y": 2.7, "w": 4.0, "h": 0.25, "fill": "f1f5f9", "text": "📋 계약: 연간 유지보수 계약", "fontSize": 8, "color": "334155"},
|
||||
{"type": "rect", "x": 3.0, "y": 2.95, "w": 4.0, "h": 0.25, "fill": "FFFFFF", "text": "👤 서명자: 김영수", "fontSize": 8, "color": "334155"},
|
||||
{"type": "rect", "x": 3.0, "y": 3.2, "w": 4.0, "h": 0.25, "fill": "f1f5f9", "text": "🕐 서명 일시: 2026-02-13 15:30:25", "fontSize": 8, "color": "334155"},
|
||||
{"type": "rect", "x": 3.0, "y": 3.45, "w": 4.0, "h": 0.25, "fill": "FFFFFF", "text": "🌐 IP: 203.252.xxx.xxx", "fontSize": 8, "color": "334155"},
|
||||
{"type": "rect", "x": 3.0, "y": 3.9, "w": 4.0, "h": 0.5, "fill": "eff6ff", "text": "양측 서명이 모두 완료되면 완료 이메일이 발송됩니다.\n이 창을 닫으셔도 됩니다.", "fontSize": 8, "color": "1e40af"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
102
projects/e-sign/html_slides/slide_01_cover.html
Normal file
102
projects/e-sign/html_slides/slide_01_cover.html
Normal file
@@ -0,0 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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: 720pt;
|
||||
height: 405pt;
|
||||
font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
|
||||
background: #ffffff;
|
||||
}
|
||||
p, h1, h2, h3 { margin: 0; }
|
||||
|
||||
body {
|
||||
background: #1e293b;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 30pt;
|
||||
}
|
||||
.accent-line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 6pt;
|
||||
background: #0d9488;
|
||||
}
|
||||
.logo {
|
||||
width: 80pt;
|
||||
height: 32pt;
|
||||
background: #0d9488;
|
||||
border-radius: 4pt;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.logo p {
|
||||
font-size: 14pt;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
}
|
||||
.title-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
overflow: visible;
|
||||
}
|
||||
.main-title {
|
||||
font-size: 32pt;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
margin-bottom: 12pt;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.sub-title {
|
||||
font-size: 16pt;
|
||||
color: #0d9488;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.version {
|
||||
font-size: 10pt;
|
||||
color: #64748b;
|
||||
margin-top: 16pt;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
}
|
||||
.footer p {
|
||||
font-size: 9pt;
|
||||
color: #64748b;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="accent-line"></div>
|
||||
<div class="logo">
|
||||
<p>(주)코드브릿지엑스</p>
|
||||
</div>
|
||||
<div class="title-area">
|
||||
<p class="main-title">SAM E-Sign (전자계약 서명 솔루션)</p>
|
||||
<p class="sub-title">웹 기획서 및 스토리보드</p>
|
||||
<p class="version">Version D1.0</p>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<p>2026.02.13 | IT 혁신팀</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"projectName": "SAM E-Sign 전자계약 서명 솔루션",
|
||||
"company": "SAM (주일/경동)",
|
||||
"company": "SAM ((주)코드브릿지엑스)",
|
||||
"author": "DX 추진팀",
|
||||
"date": "2026.02.12",
|
||||
"version": "v1.0",
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
## 프로젝트 개요
|
||||
|
||||
### 시스템 정보
|
||||
- **프로젝트명**: 5130 (주일/경동 통합정보시스템)
|
||||
- **프로젝트명**: 5130 ((주)코드브릿지엑스 통합정보시스템)
|
||||
- **기술 스택**: PHP (레거시), MySQL, Bootstrap 3.x
|
||||
- **URL**: https://5130.co.kr
|
||||
- **DB명**: `chandj` (기본값, 세션으로 동적 변경 가능)
|
||||
|
||||
Reference in New Issue
Block a user