Taehoon/test-mcp
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Implement responsive dashboard with real-time crawler backend

Browse Source
This commit is contained in:
이태훈
2026-02-24 18:02:31 +09:00
parent 8716dab7f9
commit 0cead18c80
6 changed files with 977 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
ADMIN_PLAN.md Normal file
View File

@@ -0,0 +1,31 @@
# 데이터 분석 관리자 페이지 기획안
## 1. 프로젝트 개요
본 프로젝트는 데이터 분석 프로세스 및 프로젝트 리소스를 통합 관리하기 위한 관리자 대시보드입니다. 사용자 인터랙션 관리부터 시스템 로그, 리소스 현황을 한눈에 파악하는 것을 목표로 합니다.
## 2. 주요 기능 상세
### ① 문의 및 요구사항 관리 (Inquiry Management)
- 사용자의 분석 요청 및 시스템 문의 사항 리스트업
- 상태값(대기, 처리중, 완료) 관리 및 답변 등록 기능
### ② 로그 관리 (Log Management)
- **최근 로그**: 실시간으로 발생하는 시스템 및 분석 작업 로그 출력
- **전체 로그**: 날짜별, 프로젝트별 필터링을 통한 로그 기록 조회 및 내보내기
### ③ 파일 관리 (File Management)
- 프로젝트별 데이터셋, 분석 결과물 파일 개수 및 용량 통계
- 파일 확장자별 구성 비율(CSV, JSON, Python 등) 시각화 지표 제공
### ④ 인원 관리 (Personnel Management)
- 프로젝트 참여 인원 현황 조회
- 사용자별 권한(관리자, 분석가, 뷰어) 부여 및 수정 기능
### ⑤ 공지사항 (Notice & Patch Notes)
- 분석 모델 업데이트, 시스템 점검, 패치 내역 공유
- 사용자 대상 공지사항 작성 및 게시판 관리
## 3. UI/UX 가이드라인
- **Layout**: 좌측 내비게이션 바(Sidebar) + 상단 헤더(Header) + 중앙 컨텐츠 영역
- **Theme**: 신뢰감을 주는 Dark Blue / White 톤의 깨끗한 디자인
- **Responsiveness**: 다양한 해상도에 대응하는 반응형 레이아웃 구성

165
crawler_api.py Normal file
View File

@@ -0,0 +1,165 @@
import os
import re
import asyncio
import json
import traceback
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from fastapi.responses import StreamingResponse
from playwright.async_api import async_playwright
from dotenv import load_dotenv
load_dotenv()
app = FastAPI()
app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_credentials=False,
allow_methods=["*"],
allow_headers=["*"],
)
@app.get("/sync")
async def sync_data():
async def event_generator():
user_id = os.getenv("PM_USER_ID")
password = os.getenv("PM_PASSWORD")
if not user_id or not password:
yield f"data: {json.dumps({'type': 'log', 'message': '오류: .env 파일에 계정 정보가 없습니다.'})}\n\n"
return
TIMEOUT_MS = 600000
results = []
async with async_playwright() as p:
yield f"data: {json.dumps({'type': 'log', 'message': '브라우저 실행 중...'})}\n\n"
browser = await p.chromium.launch(headless=True, args=["--no-sandbox", "--disable-dev-shm-usage"])
context = await browser.new_context(viewport={'width': 1920, 'height': 1080})
context.set_default_timeout(60000)
page = await context.new_page()
try:
yield f"data: {json.dumps({'type': 'log', 'message': '사이트 접속 및 로그인 중...'})}\n\n"
await page.goto("https://overseas.projectmastercloud.com/", wait_until="domcontentloaded")
await page.click("#login-by-id", timeout=10000)
await page.fill("#user_id", user_id)
await page.fill("#user_pw", password)
await page.click("#login-btn")
yield f"data: {json.dumps({'type': 'log', 'message': '대시보드 목록 대기 중...'})}\n\n"
await page.wait_for_selector("h4.list__contents_aria_group_body_list_item_label", timeout=60000)
locators = page.locator("h4.list__contents_aria_group_body_list_item_label")
count = await locators.count()
yield f"data: {json.dumps({'type': 'log', 'message': f'총 {count}개의 프로젝트 발견. 수집 시작.'})}\n\n"
for i in range(count):
try:
proj = page.locator("h4.list__contents_aria_group_body_list_item_label").nth(i)
project_name = (await proj.inner_text()).strip()
yield f"data: {json.dumps({'type': 'log', 'message': f'[{i+1}/{count}] {project_name} - 수집 시작...'})}\n\n"
await proj.scroll_into_view_if_needed()
await proj.click(force=True)
await page.wait_for_selector("div.footer", timeout=20000)
recent_log = "없음"
file_count = 0
# 1단계: 활동로그 수집
try:
log_btn = page.locator("div.wrap.log-wrap > div.title.text").first
if await log_btn.is_visible(timeout=5000):
await log_btn.click()
await page.wait_for_timeout(2000) # 로그 로딩 여유
log_content = page.locator("div.wrap.log-wrap .content-area").first
if await log_content.is_visible(timeout=5000):
content = await log_content.inner_text()
lines = [l.strip() for l in content.split("\n") if len(l.strip()) > 2]
if lines: recent_log = lines[0]
await page.locator("body > article.archive-modal div.close").first.click()
await page.wait_for_timeout(1000)
except: pass
# 2단계: 구성(파일 수) 수집 - 안정성 대폭 강화
try:
sitemap_btn = page.locator("div.wrap.site-map-wrap > div").first
if await sitemap_btn.is_visible(timeout=5000):
await sitemap_btn.click()
popup_page = None
for _ in range(20):
for p_item in context.pages:
if "composition-tab.html" in p_item.url:
popup_page = p_item
break
if popup_page: break
await asyncio.sleep(0.5)
if popup_page:
yield f"data: {json.dumps({'type': 'log', 'message': f'[{i+1}/{count}] 구성 데이터 로딩 대기 중 (여유있게)...'})}\n\n"
await popup_page.wait_for_load_state("domcontentloaded")
# 데이터가 로드될 때까지 점진적으로 대기 (최대 7초)
for _ in range(7):
h6_check = popup_page.locator("#composition-list li h6:nth-child(3)")
if await h6_check.count() > 0:
break
await asyncio.sleep(1)
# 최종 데이터를 가져오기 전 마지막 2초 추가 대기 (완전한 렌더링 확인)
await asyncio.sleep(2)
target_h6_locators = popup_page.locator("#composition-list li h6:nth-child(3)")
h6_count = await target_h6_locators.count()
yield f"data: {json.dumps({'type': 'log', 'message': f'[{i+1}/{count}] 총 {h6_count}개의 항목 로드됨. 합산 중...'})}\n\n"
current_total = 0
for j in range(h6_count):
text = (await target_h6_locators.nth(j).inner_text()).strip()
last_line = text.split('\n')[-1]
nums = re.findall(r'\d+', last_line)
if nums:
val = int(nums[0])
if val < 10000: # 1만개 미만만 합산 (연도 필터링)
current_total += val
file_count = current_total
await popup_page.close()
await page.bring_to_front()
except Exception as e:
yield f"data: {json.dumps({'type': 'log', 'message': f'!!! 구성 수집 지연: {str(e)[:30]}'})}\n\n"
summary_msg = f"[{i+1}/{count}] 수집 완료 - 파일: {file_count}개, 최근로그: {recent_log[:40]}..."
yield f"data: {json.dumps({'type': 'log', 'message': summary_msg})}\n\n"
results.append({"projectName": project_name, "recentLog": recent_log, "fileCount": file_count})
# 3단계: 복귀
home_btn = page.locator("div.header div.title div").first
try:
await home_btn.click(force=True, timeout=10000)
await page.wait_for_selector("h4.list__contents_aria_group_body_list_item_label", timeout=20000)
except:
await page.goto("https://overseas.projectmastercloud.com/dashboard", wait_until="domcontentloaded")
await page.wait_for_selector("h4.list__contents_aria_group_body_list_item_label", timeout=20000)
await page.wait_for_timeout(1500)
except Exception as e_proj:
yield f"data: {json.dumps({'type': 'log', 'message': f'!!! {i+1}번째 프로젝트 실패 (건너뜀)'})}\n\n"
await page.goto("https://overseas.projectmastercloud.com/", wait_until="domcontentloaded")
await page.wait_for_timeout(3000)
yield f"data: {json.dumps({'type': 'done', 'data': results})}\n\n"
except Exception as e:
yield f"data: {json.dumps({'type': 'log', 'message': f'치명적 오류: {str(e)}'})}\n\n"
finally:
await browser.close()
return StreamingResponse(event_generator(), media_type="text_event-stream")

365
dashboard.html Normal file
View File

@@ -0,0 +1,365 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Master Overseas 관리자</title>
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<nav class="topbar">
<div class="topbar-header">
<h2>Project Master Overseas</h2>
</div>
<ul class="nav-list">
<li class="nav-item active">대시보드</li>
<li class="nav-item">문의사항 <span class="badge" style="background:#FFFFFF;color:var(--primary-color); border-radius:10px; font-weight: bold; padding: 2px 5px;">12</span></li>
<li class="nav-item">로그관리</li>
<li class="nav-item">파일관리</li>
<li class="nav-item">인원관리</li>
<li class="nav-item">공지사항</li>
</ul>
</nav>
<main class="main-content">
<header>
<div style="display:flex; align-items:center;">
<h1>대시보드 현황</h1>
</div>
<div style="display:flex; align-items:center;">
<button id="syncBtn" class="sync-btn" onclick="syncData()">
<span class="spinner"></span>
데이터 동기화 (크롤링)
</button>
<div class="admin-info">접속자: <strong>이태훈[전체관리자]</strong></div>
</div>
</header>
<!-- 실시간 로그 콘솔 추가 -->
<div id="logConsole" style="display:none; background:#000; color:#0f0; font-family:monospace; padding:15px; margin-bottom:20px; border-radius:4px; max-height:200px; overflow-y:auto; font-size:12px; line-height:1.5;">
<div style="color:#fff; border-bottom:1px solid #333; margin-bottom:10px; padding-bottom:5px; font-weight:bold;">실시간 수집 로그 [PM Overseas]</div>
<div id="logBody"></div>
</div>
<div id="projectAccordion">
<!-- Multi-level Accordion items will be generated here -->
</div>
</main>
<script>
const rawData = [
["라오스 ITTC 관개 교육센터 PMC", "수자원1부", "방노성", "2026.01.29, 폴더 삭제", 16],
["라오스 비엔티안 메콩강 관리 2차 DD", "수자원1부", "방노성", "2025.12.07, 파일업로드", 260],
["미얀마 만달레이 철도 개량 감리 CS", "철도사업부", "김태헌", "2025.11.17, 폴더이름변경", 298],
["베트남 푸옥호아 양수 발전 FS", "수력부", "이철호", "2026.02.23, 폴더이름변경", 139],
["사우디아라비아 아시르 지잔 고속도로 FS", "도로부", "공태원", "2026.02.09, 파일다운로드", 73],
["우즈베키스탄 타슈켄트 철도 FS", "철도사업부", "김태헌", "2026.02.05, 파일업로드", 51],
["우즈베키스탄 지방 도로 복원 MP", "도로부", "장진영", "X", 0],
["이라크 Habbaniyah Shuaiba AirBase PD", "도로부", "강동구", "X", 0],
["캄보디아 반테 민체이 관개 홍수저감 MP", "수자원1부", "이대주", "2025.12.07, 파일업로드", 44],
["캄보디아 시엠립 하수처리 개선 DD", "물환경사업1부", "변역근", "2026.02.06, AI 요약", 221],
["메콩유역 수자원 관리 기후적응 MP", "수자원1부", "정귀한", "X", 0],
["키르기스스탄 잘랄아바드 상수도 계획 MP", "물환경사업1부", "변기상", "2026.02.12, 파일업로드", 60],
["파키스탄 CAREC 도로 감리 DD", "도로부", "황효섭", "X", 0],
["파키스탄 펀잡 홍수 방재 PMC", "수자원1부", "방노성", "2025.12.08, 폴더삭제", 0],
["파키스탄 KP 아보타바드 상수도 PMC", "물환경사업2부", "변기상", "2026.02.12, 파일업로드", 234],
["필리핀 홍수 관리 Package5B MP", "수자원1부", "이희철", "2025.12.02, 폴더이름변경", 14],
["필리핀 PGN 해상교량 BID2 IDC", "구조부", "이상희", "2026.02.11, 파일다운로드", 631],
["필리핀 홍수 복원 InFRA2 DD", "수자원1부", "이대주", "2025.12.01, 폴더삭제", 6],
["가나 테치만 상수도 확장 DS", "물환경사업2부", "-", "X", 0],
["기니 벼 재배단지 PMC", "수자원1부", "이대주", "2025.12.08, 파일업로드", 43],
["우간다 벼 재배단지 PMC", "수자원1부", "방노성", "2025.12.08, 파일업로드", 52],
["우간다 부수쿠마 분뇨 자원화 2단계 PMC", "물환경사업2부", "변기상", "2026.02.05, 파일업로드", 9],
["에티오피아 지하수 관개 환경설계 DD", "물환경사업2부", "변기상", "X", 0],
["에티오피아 도도타군 관개 PMC", "수자원1부", "방노성", "2025.12.01, 폴더이름변경", 144],
["에티오피아 Adeaa-Becho 지하수 관개 MP", "수자원1부", "방노성", "2025.11.21, 파일업로드", 146],
["탄자니아 Iringa 상하수도 개선 CS", "물환경사업1부", "백운영", "2026.02.03, 폴더 생성", 0],
["탄자니아 Dodoma 하수 설계감리 DD", "물환경사업2부", "변기상", "2026.02.04, 폴더삭제", 32],
["탄자니아 잔지바르 쌀 생산 PMC", "수자원1부", "방노성", "2025.12.08, 파일 업로드", 23],
["탄자니아 도도마 유수율 상수도개선 PMC", "물환경사업1부", "박순석", "2026.02.12, 부관리자권한추가", 35],
["아르헨티나 SALDEORO 수력발전 28MW DD", "플랜트1부", "양정모", "X", 0],
["온두라스 LaPaz Danli 상수도 CS", "물환경사업2부", "-", "2026.01.29, 파일 삭제", 60],
["볼리비아 에스꼬마 차라짜니 도로 CS", "도로부", "전홍찬", "2026.02.06, 파일업로드", 1],
["볼리비아 마모레 교량도로 FS", "도로부", "황효섭", "2026.02.06, 파일업로드", 120],
["볼리비아 Bombeo-Colomi 도로설계 DD", "도로부", "황효섭", "2025.12.05, 파일삭제", 48],
["콜롬비아 AI 폐기물 FS", "플랜트1부", "서재희", "X", 0],
["파라과이 도로 통행료 현대화 MP", "교통계획부", "오제훈", "X", 0],
["페루 Barranca 상하수도 확장 DD", "물환경사업2부", "변기상", "2025.11.14, 파일업로드", 44],
["엘살바도르 태평양 철도 FS", "철도사업부", "김태헌", "2026.02.04, 파일이름변경", 102],
["필리핀 사무소", "해외사업부", "한형남", "2026.02.23, 파일업로드", 813]
];
const continentMap = {
"라오스": "아시아", "미얀마": "아시아", "베트남": "아시아", "사우디아라비아": "아시아",
"우즈베키스탄": "아시아", "이라크": "아시아", "캄보디아": "아시아",
"키르기스스탄": "아시아", "파키스탄": "아시아", "필리핀": "아시아",
"아르헨티나": "아메리카", "온두라스": "아메리카", "볼리비아": "아메리카", "콜롬비아": "아메리카",
"파라과이": "아메리카", "페루": "아메리카", "엘살바도르": "아메리카",
"가나": "아프리카", "기니": "아프리카", "우간다": "아프리카", "에티오피아": "아프리카", "탄자니아": "아프리카"
};
const continentOrder = {
"아시아": 1,
"아프리카": 2,
"아메리카": 3,
"지사": 4
};
function init() {
const container = document.getElementById('projectAccordion');
const groupedData = {};
// 1. 데이터 파싱 및 그룹화
rawData.forEach((item, index) => {
const projectName = item[0];
let continent = "";
let country = "";
if (projectName.endsWith("사무소")) {
continent = "지사";
country = projectName.split(" ")[0];
} else if (projectName.startsWith("메콩유역")) {
country = "캄보디아";
continent = "아시아";
} else {
country = projectName.split(" ")[0];
continent = continentMap[country] || "기타";
}
if (!groupedData[continent]) groupedData[continent] = {};
if (!groupedData[continent][country]) groupedData[continent][country] = [];
groupedData[continent][country].push({ item, index });
});
// 2. 대륙 정렬 (아시아 - 아프리카 - 아메리카 - 지사)
const sortedContinents = Object.keys(groupedData).sort((a, b) => (continentOrder[a] || 99) - (continentOrder[b] || 99));
// 3. HTML 생성
sortedContinents.forEach(continent => {
const continentGroup = document.createElement('div');
continentGroup.className = 'continent-group';
let continentHtml = `
<div class="continent-header" onclick="toggleGroup(this)">
<span>${continent}</span>
<span class="toggle-icon">▼</span>
</div>
<div class="continent-body">
`;
const sortedCountries = Object.keys(groupedData[continent]).sort((a, b) => a.localeCompare(b));
sortedCountries.forEach(country => {
continentHtml += `
<div class="country-group">
<div class="country-header" onclick="toggleGroup(this)">
<span>${country}</span>
<span class="toggle-icon">▼</span>
</div>
<div class="country-body">
<div class="accordion-container">
`;
const sortedProjects = groupedData[continent][country].sort((a, b) => a.item[0].localeCompare(b.item[0]));
sortedProjects.forEach(({item, index}) => {
const projectName = item[0];
const dept = item[1];
const admin = item[2];
const recentLogRaw = item[3];
const fileCount = item[4];
const personnelCount = Math.floor(Math.random()*15)+3; // 인원은 시트에 없으므로 임의 할당 유지
const recentLog = recentLogRaw === "X" ? "기록 없음" : recentLogRaw;
const logTime = recentLog !== "기록 없음" ? recentLog.split(',')[0] : "기록 없음";
continentHtml += `
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<div>
<span class="header-label">프로젝트 명</span>
<span class="header-value" title="${projectName}">${projectName}</span>
</div>
<div>
<span class="header-label">담당부서</span>
<span class="header-value">${dept}</span>
</div>
<div>
<span class="header-label">관리자</span>
<span class="header-value">${admin}</span>
</div>
<div>
<span class="header-label">파일 수</span>
<span class="header-value">${fileCount}</span>
</div>
<div>
<span class="header-label">인원</span>
<span class="header-value">${personnelCount}명</span>
</div>
<div>
<span class="header-label">최근 로그</span>
<span class="header-value" style="color:var(--text-sub); font-size:11px;" title="${recentLog}">${recentLog}</span>
</div>
</div>
<div class="accordion-body">
<div class="detail-grid">
<div class="detail-section">
<h4>참여 인원 상세</h4>
<table class="data-table">
<thead><tr><th>이름</th><th>소속</th><th>사용자권한</th></tr></thead>
<tbody>
<tr><td>${admin}</td><td>${dept}</td><td>관리자</td></tr>
<tr><td>김철수</td><td>${dept}</td><td>부관리자</td></tr>
<tr><td>박지민</td><td>${dept}</td><td>일반참여자</td></tr>
<tr><td>최유리</td><td>${dept}</td><td>참관자</td></tr>
</tbody>
</table>
</div>
<div class="detail-section">
<h4>최근 문의사항 및 파일 변경 로그</h4>
<table class="data-table">
<thead><tr><th>유형</th><th>내용</th><th>일시</th></tr></thead>
<tbody>
<tr><td><span class="badge">로그</span></td><td>데이터 동기화 완료</td><td>${logTime}</td></tr>
<tr><td><span class="badge" style="background:var(--hover-bg); border: 1px solid var(--border-color); color:var(--primary-color);">문의</span></td><td>프로젝트 접근 권한 요청</td><td>2026-02-23</td></tr>
<tr><td><span class="badge" style="background:var(--primary-color); color:white;">파일</span></td><td>설계도면 v2.pdf 업로드</td><td>2026-02-22</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
`;
});
continentHtml += `
</div>
</div>
</div>
`;
});
continentHtml += `
</div>
`;
continentGroup.innerHTML = continentHtml;
container.appendChild(continentGroup);
});
const allContinents = container.querySelectorAll('.continent-group');
allContinents.forEach(continent => {
continent.classList.add('active');
continent.querySelector('.continent-header .toggle-icon').textContent = '▲';
});
const allCountries = container.querySelectorAll('.country-group');
allCountries.forEach(country => {
country.classList.add('active');
country.querySelector('.country-header .toggle-icon').textContent = '▲';
});
}
function toggleGroup(header) {
const group = header.parentElement;
const icon = header.querySelector('.toggle-icon');
group.classList.toggle('active');
if (group.classList.contains('active')) {
icon.textContent = '▲';
} else {
icon.textContent = '▼';
}
}
function toggleAccordion(header) {
const item = header.parentElement;
const container = item.parentElement;
const allItems = container.querySelectorAll('.accordion-item');
allItems.forEach(el => {
if(el !== item) el.classList.remove('active');
});
item.classList.toggle('active');
}
async function syncData() {
const btn = document.getElementById('syncBtn');
const logConsole = document.getElementById('logConsole');
const logBody = document.getElementById('logBody');
btn.classList.add('loading');
btn.innerHTML = `<span class="spinner"></span> 동기화 중 (진행 상황 확인 중...)`;
btn.disabled = true;
logConsole.style.display = 'block';
logBody.innerHTML = ''; // 이전 로그 삭제
function addLog(msg) {
const logItem = document.createElement('div');
logItem.innerText = `[${new Date().toLocaleTimeString()}] ${msg}`;
logBody.appendChild(logItem);
logConsole.scrollTop = logConsole.scrollHeight; // 자동 스크롤
}
try {
const apiHost = window.location.hostname;
const response = await fetch(`http://${apiHost}:8001/sync`);
const reader = response.body.getReader();
const decoder = new TextDecoder();
while (true) {
const { done, value } = await reader.read();
if (done) break;
const chunk = decoder.decode(value);
const lines = chunk.split('\n');
for (const line of lines) {
if (line.startsWith('data: ')) {
const payload = JSON.parse(line.substring(6));
if (payload.type === 'log') {
addLog(payload.message);
} else if (payload.type === 'done') {
const newData = payload.data;
newData.forEach(scrapedItem => {
const target = rawData.find(item =>
item[0].replace(/\s/g,'').includes(scrapedItem.projectName.replace(/\s/g,'')) ||
scrapedItem.projectName.replace(/\s/g,'').includes(item[0].replace(/\s/g,''))
);
if (target) {
target[3] = scrapedItem.recentLog;
target[4] = scrapedItem.fileCount;
}
});
document.getElementById('projectAccordion').innerHTML = '';
init();
addLog(">>> 모든 동기화 작업이 완료되었습니다!");
alert(`총 ${newData.length}개 프로젝트 동기화 완료!`);
logConsole.style.display = 'none'; // 성공 시 콘솔 숨김
}
}
}
}
} catch (e) {
addLog(`오류 발생: ${e.message}`);
alert("서버 연결 실패. 백엔드 서버가 실행 중인지 확인하세요.");
console.error(e);
} finally {
btn.classList.remove('loading');
btn.innerHTML = `<span class="spinner"></span> 데이터 동기화 (크롤링)`;
btn.disabled = false;
}
}
init();
</script>
</body>
</html>

4
requirements.txt Normal file
View File

@@ -0,0 +1,4 @@
fastapi==0.110.0
uvicorn==0.29.0
playwright==1.42.0
python-dotenv==1.0.1

BIN
sample.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 544 KiB

412
style/style.css Normal file
View File

@@ -0,0 +1,412 @@
:root {
--primary-color: #1E5149;
--bg-color: #FFFFFF;
--text-main: #222222;
--text-sub: #666666;
--border-color: #E5E7EB;
/* 매우 연한 회색 라인 */
--hover-bg: #F9FAFB;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Pretendard', sans-serif;
font-size: 13px;
color: var(--text-main);
background-color: var(--bg-color);
display: flex;
min-height: 100vh;
}
/* Topbar */
.topbar {
width: 100%;
background-color: #1E5149;
/* sample.png 탑바 다크 슬레이트 배경색 */
color: #FFFFFF;
padding: 0 1.5rem;
position: fixed;
top: 0;
left: 0;
height: 36px;
display: flex;
align-items: center;
z-index: 100;
}
.topbar-header {
margin-right: 2.5rem;
}
.topbar-header h2 {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.3px;
}
.nav-list {
list-style: none;
display: flex;
align-items: center;
height: 100%;
}
.nav-item {
padding: 0 1rem;
height: 28px;
border-radius: 4px;
margin: 0 2px;
cursor: pointer;
transition: all 0.2s;
color: rgba(255, 255, 255, 0.7);
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
font-size: 13px;
}
.nav-item:hover,
.nav-item.active {
background-color: #E9EEED;
color: #1E5149;
font-weight: 500;
}
/* Main Content */
.main-content {
margin-top: 36px;
flex: 1;
padding: 2rem 2.5rem;
width: 100%;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
header {
margin-bottom: 2rem;
display: flex;
justify-content: space-between;
align-items: flex-end;
padding-bottom: 0.8rem;
border-bottom: 1px solid var(--border-color);
/* 선 굵기와 색상 얇게 */
}
header h1 {
font-size: 18px;
font-weight: 700;
color: var(--primary-color);
}
.admin-info {
color: var(--text-sub);
font-size: 12px;
}
/* Multi-level Accordion (Minimalist/No Box Design) */
.continent-group {
margin-bottom: 3rem;
}
.continent-header {
color: var(--text-main);
padding: 0.5rem 0;
font-size: 16px;
font-weight: 700;
cursor: pointer;
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 2px solid var(--text-main);
margin-bottom: 1rem;
}
.continent-body {
display: none;
}
.continent-group.active > .continent-body {
display: block;
}
.country-group {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px dashed var(--border-color); /* 국가 사이 구분선 */
}
.country-group:last-child {
margin-bottom: 1rem;
padding-bottom: 0;
border-bottom: none;
}
.country-header {
color: var(--primary-color);
padding: 0.5rem 0;
font-size: 14px;
font-weight: 700;
cursor: pointer;
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 0.5rem;
}
.country-body {
display: none;
padding-left: 0.5rem; /* Slight indent instead of borders */
}
.country-group.active > .country-body {
display: block;
}
.toggle-icon {
font-size: 10px;
margin-left: 8px;
color: #999;
}
/* Accordion Styles (Projects - Row Based) */
.accordion-container {
display: flex;
flex-direction: column;
width: 100%;
}
.accordion-item {
border-bottom: 1px solid var(--border-color);
}
.accordion-item:last-child {
border-bottom: none;
}
.accordion-header {
display: grid;
grid-template-columns: 2.5fr 1fr 1fr 1fr 1fr 2fr;
gap: 1rem;
padding: 1rem 0;
cursor: pointer;
align-items: center;
background-color: transparent;
transition: opacity 0.2s;
}
.accordion-item:hover .accordion-header {
opacity: 0.7;
}
.accordion-item.active .accordion-header {
/* No border-bottom or background change for active */
}
.accordion-header > div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.header-label {
font-size: 11px;
color: var(--text-sub);
margin-bottom: 3px;
display: block;
font-weight: 400;
}
.header-value {
font-weight: 500;
font-size: 13px;
color: var(--text-main);
}
.accordion-body {
display: none;
padding: 1.5rem 0;
background-color: transparent;
}
.accordion-item.active .accordion-body {
display: block;
}
.detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
}
.detail-section h4 {
margin-bottom: 1rem;
color: var(--text-main);
font-size: 13px;
font-weight: 600;
border-bottom: 1px solid var(--border-color);
padding-bottom: 0.5rem;
}
/* Table Styles - Super Minimal Line Style */
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table th,
.data-table td {
padding: 8px 4px;
border-bottom: 1px solid var(--border-color);
text-align: left;
}
.data-table th {
color: var(--text-sub);
font-weight: 400;
font-size: 12px;
}
.data-table td {
font-size: 12px;
color: var(--text-main);
}
.data-table tr:last-child td {
border-bottom: none;
}
/* General Utilities */
.badge {
background: #EEEEEE;
color: #555555;
padding: 2px 6px;
border-radius: 2px;
/* 라운드 거의 없앰 */
font-size: 11px;
font-weight: 500;
}
.status-up {
color: #D32F2F;
font-weight: 500;
}
.status-down {
color: #1976D2;
font-weight: 500;
}
/* Sync Button */
.sync-btn {
background-color: var(--primary-color);
color: #FFFFFF;
border: 1px solid var(--primary-color);
padding: 6px 14px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s, opacity 0.2s;
margin-right: 1rem;
display: flex;
align-items: center;
gap: 6px;
}
.sync-btn:hover {
background-color: #153A34;
}
.sync-btn:disabled {
background-color: #A0B2AF;
border-color: #A0B2AF;
cursor: not-allowed;
}
/* Spinner */
.spinner {
display: none;
width: 12px;
height: 12px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50%;
border-top-color: #fff;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.sync-btn.loading .spinner {
display: inline-block;
}
/* --- Responsive Design --- */
@media screen and (max-width: 1024px) {
.accordion-header {
grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1.5fr;
}
}
@media screen and (max-width: 768px) {
.topbar {
overflow-x: auto;
white-space: nowrap;
padding: 0 1rem;
}
/* 스크롤바 숨김 */
.topbar::-webkit-scrollbar {
display: none;
}
.main-content {
padding: 1.5rem 1rem;
}
header {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.detail-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
/* 모바일에서 아코디언 헤더를 다단으로 배치 */
.accordion-header {
grid-template-columns: 1fr 1fr;
row-gap: 1rem;
}
/* 프로젝트 명과 최근 로그는 공간을 넓게 쓰도록 설정 */
.accordion-header > div:nth-child(1),
.accordion-header > div:nth-child(6) {
grid-column: span 2;
}
.continent-header {
font-size: 15px;
}
}
@media screen and (max-width: 480px) {
/* 아주 작은 화면에서는 1열로 배치 */
.accordion-header {
grid-template-columns: 1fr;
}
.accordion-header > div {
grid-column: span 1 !important;
}
.topbar-header h2 {
font-size: 13px;
margin-right: 1rem;
}
.nav-item {
padding: 0 0.5rem;
font-size: 12px;
}
}