Implement responsive dashboard with real-time crawler backend
This commit is contained in:
31
ADMIN_PLAN.md
Normal file
31
ADMIN_PLAN.md
Normal 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
165
crawler_api.py
Normal 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
365
dashboard.html
Normal 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
4
requirements.txt
Normal 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
BIN
sample.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 544 KiB |
412
style/style.css
Normal file
412
style/style.css
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user