feat: 개발 문서 포털 페이지 생성
- api.sam.kr/develop/ 접속 시 문서 목록 표시 - 5개 문서 항목 추가: * 시스템 아키텍처 다이어그램 (HTML) * 서버 사양 및 비용 분석표 (HTML) * CI/CD 파이프라인 흐름도 (HTML) * 재해복구(DR) 계획서 (Markdown) * 네트워크 토폴로지 다이어그램 (HTML) - 모달 팝업으로 문서 뷰어 구현 - HTML 파일: iframe으로 원본 표시 - Markdown 파일: 자동 HTML 변환 후 표시 - 반응형 디자인 적용 (모바일/태블릿/데스크톱) - Purple-Blue 그라디언트 UI 테마
This commit is contained in:
343
public/develop/index.php
Normal file
343
public/develop/index.php
Normal file
@@ -0,0 +1,343 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user