hskwon
b7cf045a81
- api.sam.kr/develop/ 접속 시 문서 목록 표시 - 5개 문서 항목 추가: * 시스템 아키텍처 다이어그램 (HTML) * 서버 사양 및 비용 분석표 (HTML) * CI/CD 파이프라인 흐름도 (HTML) * 재해복구(DR) 계획서 (Markdown) * 네트워크 토폴로지 다이어그램 (HTML) - 모달 팝업으로 문서 뷰어 구현 - HTML 파일: iframe으로 원본 표시 - Markdown 파일: 자동 HTML 변환 후 표시 - 반응형 디자인 적용 (모바일/태블릿/데스크톱) - Purple-Blue 그라디언트 UI 테마
343 lines
10 KiB
PHP
343 lines
10 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SAM 개발 문서 - Development Documentation</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
background: white;
|
|
border-radius: 20px;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
max-width: 800px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 10px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.header p {
|
|
font-size: 1.1rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.docs-list {
|
|
padding: 40px;
|
|
}
|
|
|
|
.doc-item {
|
|
background: #f8f9fa;
|
|
border-radius: 12px;
|
|
padding: 20px 25px;
|
|
margin-bottom: 15px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
border: 2px solid transparent;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.doc-item:hover {
|
|
background: #e9ecef;
|
|
border-color: #667eea;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
|
|
}
|
|
|
|
.doc-icon {
|
|
font-size: 2rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.doc-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.doc-title {
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.doc-file {
|
|
font-size: 0.9rem;
|
|
color: #6c757d;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
z-index: 1000;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.modal.active {
|
|
display: flex;
|
|
}
|
|
|
|
.modal-content {
|
|
background: white;
|
|
border-radius: 12px;
|
|
width: 95%;
|
|
height: 90%;
|
|
max-width: 1400px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.modal-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 20px 30px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-radius: 12px 12px 0 0;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.close-btn {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border: none;
|
|
color: white;
|
|
font-size: 1.5rem;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.close-btn:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.modal-body {
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding: 0;
|
|
}
|
|
|
|
.modal-body iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
|
|
.footer {
|
|
text-align: center;
|
|
padding: 20px;
|
|
color: #6c757d;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.header h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.doc-item {
|
|
padding: 15px 20px;
|
|
}
|
|
|
|
.doc-icon {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.doc-title {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.modal-content {
|
|
width: 100%;
|
|
height: 95%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>📚 SAM 개발 문서</h1>
|
|
<p>Development Documentation Portal</p>
|
|
</div>
|
|
|
|
<div class="docs-list">
|
|
<div class="doc-item" onclick="openDoc('system-architecture-diagram.html', '시스템 아키텍처 다이어그램')">
|
|
<div class="doc-icon">🏗️</div>
|
|
<div class="doc-content">
|
|
<div class="doc-title">시스템 아키텍처 다이어그램</div>
|
|
<div class="doc-file">system-architecture-diagram.html</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="doc-item" onclick="openDoc('server-spec-cost-analysis.html', '서버 사양 및 비용 분석표')">
|
|
<div class="doc-icon">💰</div>
|
|
<div class="doc-content">
|
|
<div class="doc-title">서버 사양 및 비용 분석표</div>
|
|
<div class="doc-file">server-spec-cost-analysis.html</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="doc-item" onclick="openDoc('cicd-pipeline-flow.html', 'CI/CD 파이프라인 흐름도')">
|
|
<div class="doc-icon">🔄</div>
|
|
<div class="doc-content">
|
|
<div class="doc-title">CI/CD 파이프라인 흐름도</div>
|
|
<div class="doc-file">cicd-pipeline-flow.html</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="doc-item" onclick="openMarkdown('disaster-recovery-plan.md', '재해복구(DR) 계획서')">
|
|
<div class="doc-icon">🛡️</div>
|
|
<div class="doc-content">
|
|
<div class="doc-title">재해복구(DR) 계획서</div>
|
|
<div class="doc-file">disaster-recovery-plan.md</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="doc-item" onclick="openDoc('network-topology-diagram.html', '네트워크 토폴로지 다이어그램')">
|
|
<div class="doc-icon">🌐</div>
|
|
<div class="doc-content">
|
|
<div class="doc-title">네트워크 토폴로지 다이어그램</div>
|
|
<div class="doc-file">network-topology-diagram.html</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
© 2025 SAM Project - Smart Automation Management
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal" id="docModal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<div class="modal-title" id="modalTitle">문서 제목</div>
|
|
<button class="close-btn" onclick="closeModal()">×</button>
|
|
</div>
|
|
<div class="modal-body" id="modalBody">
|
|
<!-- Content will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function openDoc(filename, title) {
|
|
const modal = document.getElementById('docModal');
|
|
const modalTitle = document.getElementById('modalTitle');
|
|
const modalBody = document.getElementById('modalBody');
|
|
|
|
modalTitle.textContent = title;
|
|
modalBody.innerHTML = `<iframe src="${filename}"></iframe>`;
|
|
modal.classList.add('active');
|
|
}
|
|
|
|
function openMarkdown(filename, title) {
|
|
const modal = document.getElementById('docModal');
|
|
const modalTitle = document.getElementById('modalTitle');
|
|
const modalBody = document.getElementById('modalBody');
|
|
|
|
modalTitle.textContent = title;
|
|
|
|
// Fetch markdown and convert to HTML
|
|
fetch(filename)
|
|
.then(response => response.text())
|
|
.then(text => {
|
|
// Simple markdown to HTML conversion
|
|
let html = text
|
|
.replace(/^### (.*$)/gim, '<h3>$1</h3>')
|
|
.replace(/^## (.*$)/gim, '<h2>$1</h2>')
|
|
.replace(/^# (.*$)/gim, '<h1>$1</h1>')
|
|
.replace(/\*\*(.*)\*\*/gim, '<strong>$1</strong>')
|
|
.replace(/\*(.*)\*/gim, '<em>$1</em>')
|
|
.replace(/!\[(.*?)\]\((.*?)\)/gim, '<img alt="$1" src="$2" />')
|
|
.replace(/\[(.*?)\]\((.*?)\)/gim, '<a href="$2">$1</a>')
|
|
.replace(/\n$/gim, '<br />');
|
|
|
|
modalBody.innerHTML = `
|
|
<div style="padding: 40px; max-width: 900px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.8; color: #333;">
|
|
${html}
|
|
</div>
|
|
`;
|
|
})
|
|
.catch(error => {
|
|
modalBody.innerHTML = `
|
|
<div style="padding: 40px; text-align: center; color: #dc3545;">
|
|
<h3>⚠️ 문서를 불러올 수 없습니다</h3>
|
|
<p>${error.message}</p>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
modal.classList.add('active');
|
|
}
|
|
|
|
function closeModal() {
|
|
const modal = document.getElementById('docModal');
|
|
modal.classList.remove('active');
|
|
document.getElementById('modalBody').innerHTML = '';
|
|
}
|
|
|
|
// ESC 키로 모달 닫기
|
|
document.addEventListener('keydown', function(event) {
|
|
if (event.key === 'Escape') {
|
|
closeModal();
|
|
}
|
|
});
|
|
|
|
// 모달 배경 클릭시 닫기
|
|
document.getElementById('docModal').addEventListener('click', function(event) {
|
|
if (event.target === this) {
|
|
closeModal();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |