chore(요구): 제안 371 대시보드 시안 — 요약 보드(숫자 · 그림 · 그래프) · 표/칸반 전환 · 프로젝트 상세 · 역할 넷

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-26 17:39:52 +09:00
co-authored by Claude Opus 5.5
parent 57e6573070
commit 3deacf48ff
@@ -0,0 +1,353 @@
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Aislo 대시보드 시안 — 요약 보드 · 표/칸반 · 상세</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
:root { --ac: #1f7a4d; --acs: #eaf5ee; --bg: #f6f7f9; --card: #fff; --bd: #e6e8ec; --fg: #1f2328; --mut: #6b7280; --road: #1f7a4d; --plan: #2f5fbf; --stab: #c26a0f; --red: #e5484d; --amb: #f5a524; }
* { box-sizing: border-box; }
body { margin: 0; font-family: Pretendard, "Malgun Gothic", sans-serif; color: var(--fg); font-size: 13.5px; line-height: 1.5; background: var(--background, #fff); }
.intro { max-width: 1120px; margin: 0 auto; padding: 16px 18px 4px; color: var(--foreground, #1f2328); }
.intro h1 { font-size: 20px; margin: 0 0 2px; }
.intro p { margin: 0 0 8px; color: var(--muted-foreground, #6b7280); }
.flow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.flow b { background: var(--acs); color: var(--ac); border-radius: 6px; padding: 2px 8px; font-weight: 600; }
.ctl { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--bd); border-radius: 8px; overflow: hidden; background: #fff; }
.seg button { border: 0; background: #fff; padding: 5px 11px; font: inherit; cursor: pointer; color: #3b434b; }
.seg button.on { background: var(--ac); color: #fff; }
.app { max-width: 1120px; margin: 8px auto 30px; border: 1px solid var(--bd); border-radius: 14px; overflow: hidden; background: var(--bg); }
.hd { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--bd); }
.logo { font-weight: 800; letter-spacing: .6px; }
.org { border: 1px solid var(--bd); border-radius: 6px; padding: 2px 8px; color: #57606a; }
.search { margin-left: 6px; width: 240px; border: 1px solid var(--bd); border-radius: 7px; padding: 4px 10px; color: #8b949e; background: #fafbfc; }
.sp { flex: 1; }
.ib { width: 28px; height: 28px; border: 1px solid var(--bd); border-radius: 7px; display: grid; place-items: center; color: #57606a; position: relative; background: #fff; }
.ib i { position: absolute; top: -5px; right: -5px; background: var(--red); color: #fff; font-style: normal; font-size: 9.5px; border-radius: 8px; padding: 0 4px; }
.av { width: 28px; height: 28px; border-radius: 50%; background: #cfe8da; color: var(--ac); display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.bodyx { display: grid; grid-template-columns: 208px 1fr; min-height: 640px; }
.nav { background: #fff; border-right: 1px solid var(--bd); padding: 10px 8px; }
.grp { font-size: 11px; color: #8b949e; margin: 12px 8px 4px; }
.it { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; color: #3b434b; cursor: pointer; }
.it:hover { background: #f3f4f6; }
.it.on { background: var(--acs); color: var(--ac); font-weight: 600; }
.it svg { width: 15px; height: 15px; flex: 0 0 15px; }
.it .n { margin-left: auto; font-size: 11px; color: #8b949e; }
.it .n.r { color: #fff; background: var(--red); border-radius: 8px; padding: 0 5px; }
.main { padding: 18px 20px 24px; }
.ttl { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ttl h2 { font-size: 19px; margin: 0; }
.crumb { color: #8b949e; font-size: 12px; margin-bottom: 4px; cursor: pointer; }
.btnp { background: var(--ac); color: #fff; border-radius: 7px; padding: 6px 12px; font-weight: 600; cursor: pointer; }
.btn { border: 1px solid var(--bd); background: #fff; border-radius: 7px; padding: 5px 10px; cursor: pointer; }
.screen { display: none; } .screen.on { display: block; }
/* board */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tile { background: var(--card); border: 1px solid var(--bd); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.tile:hover { border-color: #cfd6dd; box-shadow: 0 2px 10px rgba(16,24,40,.06); }
.tile.w2 { grid-column: span 2; }
.th { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.th .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; }
.th b { font-size: 14px; }
.th .more { margin-left: auto; color: #8b949e; font-size: 12px; }
.kpis { display: flex; gap: 18px; flex-wrap: wrap; }
.kpi .v { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi .l { color: var(--mut); font-size: 12px; }
.kpi .d { font-size: 11px; margin-left: 4px; }
.up { color: #16a34a; } .dn { color: var(--red); }
.row { display: flex; gap: 14px; align-items: center; }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.pthumb { border: 1px solid var(--bd); border-radius: 9px; overflow: hidden; background: #fff; }
.pthumb svg { display: block; width: 100%; height: 56px; }
.pthumb .c { padding: 5px 8px; font-size: 12px; }
.badge { display: inline-block; font-size: 10.5px; border-radius: 5px; padding: 0 6px; margin-right: 4px; font-weight: 600; }
.b-road { background: #e7f3ec; color: var(--road); } .b-plan { background: #e8effc; color: var(--plan); } .b-stab { background: #fdf0e3; color: var(--stab); } .b-sabang { background: #f1f1f4; color: #6b7280; border: 1px dashed #c9ccd3; }
.bar { height: 6px; border-radius: 4px; background: #edf0f2; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--ac); }
.legend { display: grid; gap: 4px; font-size: 12px; }
.legend span { display: flex; align-items: center; gap: 6px; }
.sw { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.mini { font-size: 12px; color: var(--mut); }
.todo { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #f0f1f3; font-size: 12.5px; }
.todo:first-child { border-top: 0; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.avs { display: flex; } .avs span { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; margin-left: -6px; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; }
.avs span:first-child { margin-left: 0; }
[data-roles] { }
.hide { display: none !important; }
/* list */
.tool { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.chip { border: 1px solid var(--bd); border-radius: 14px; padding: 2px 10px; background: #fff; cursor: pointer; font-size: 12.5px; }
.chip.on { border-color: var(--ac); color: var(--ac); background: var(--acs); }
.kan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: start; }
.col { background: #eef0f3; border-radius: 12px; padding: 10px; }
.col h4 { margin: 0 0 8px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.col h4 .n { color: #8b949e; font-weight: 400; }
.kc { background: #fff; border: 1px solid var(--bd); border-radius: 10px; margin-bottom: 8px; overflow: hidden; cursor: pointer; }
.kc:hover { border-color: #cfd6dd; box-shadow: 0 2px 8px rgba(16,24,40,.06); }
.kc svg { display: block; width: 100%; height: 50px; }
.kc .c { padding: 7px 9px; }
.kc .meta { display: flex; justify-content: space-between; color: #8b949e; font-size: 11.5px; margin-top: 5px; }
.col.done .kc { opacity: .75; }
.tbl { background: #fff; border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid #f0f1f3; font-size: 13px; }
th { color: #8b949e; font-weight: 600; font-size: 12px; background: #fafbfc; }
tr.click { cursor: pointer; } tr.click:hover td { background: #f8faf9; }
/* detail */
.dgrid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; }
.pane { background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.pane h3 { margin: 0 0 10px; font-size: 14px; }
.steps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.st { border: 1px solid var(--bd); border-radius: 9px; padding: 7px 6px; text-align: center; font-size: 11.5px; cursor: pointer; background: #fff; }
.st .s { width: 20px; height: 20px; border-radius: 50%; margin: 0 auto 4px; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.st.ok .s { background: var(--ac); color: #fff; } .st.cur { border-color: var(--ac); background: var(--acs); } .st.cur .s { background: #fff; color: var(--ac); border: 2px solid var(--ac); } .st.no .s { background: #edf0f2; color: #8b949e; }
.kv { display: grid; grid-template-columns: 96px 1fr; gap: 6px 10px; font-size: 13px; } .kv span { color: var(--mut); }
.link { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid #f0f1f3; } .link:first-child { border-top: 0; }
.tl { border-left: 2px solid #e6e8ec; margin-left: 4px; padding-left: 12px; }
.tl div { position: relative; padding: 4px 0; font-size: 12.5px; } .tl div::before { content: ""; position: absolute; left: -17px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--ac); }
.note { max-width: 1120px; margin: 0 auto; padding: 0 18px 20px; color: var(--muted-foreground, #6b7280); font-size: 12.5px; }
@media (max-width: 900px) { .board { grid-template-columns: 1fr 1fr; } .tile.w2 { grid-column: span 2; } .kan { grid-template-columns: 1fr 1fr; } .dgrid { grid-template-columns: 1fr; } .bodyx { grid-template-columns: 1fr; } .nav { display: none; } }
</style>
</head>
<body>
<div class="intro">
<h1>Aislo 대시보드 시안 — 요약 보드 → 표/칸반 → 상세</h1>
<p>요구 369 · 370 · 371 · 눌러 보며 흐름 확인(가짜 숫자 · 보기용) · 2026-10-26</p>
<div class="flow"><b>① 요약 보드</b> 항목마다 숫자 · 그림 · 그래프 → <b>② 항목 페이지</b> 표 / 칸반 고름 → <b>③ 상세 페이지</b> 자세한 내용 → [작업 열기]</div>
<div class="ctl"><span style="color:var(--muted-foreground,#6b7280)">보는 사람 :</span>
<span class="seg" id="roleSeg"><button data-r="user">설계 엔지니어</button><button data-r="admin" class="on">회사 관리자</button><button data-r="forest">산림청</button><button data-r="sys">시스템 관리자</button></span>
</div>
</div>
<div class="app">
<div class="hd"><span class="logo">AISLO</span><span class="org" id="orgName">예시건설 ▾</span><span class="search">찾기 · Ctrl+K</span><span class="sp"></span><span class="ib">?</span><span class="ib">🔔<i>3</i></span><span class="av">홍</span></div>
<div class="bodyx">
<div class="nav">
<div class="grp">작업</div>
<div class="it on" data-go="home"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>요약 보드</div>
<div class="it" data-go="list"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18"/></svg>프로젝트<span class="n">12</span></div>
<div class="it" data-roles="user admin sys"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v12H5l-1 4z"/></svg>받은 예정노선<span class="n r">2</span></div>
<div class="it" data-roles="forest sys"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 18l6-12 4 8 3-5 5 9z"/></svg>예정노선 지정<span class="n">6</span></div>
<div class="it"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16v13H4zM8 7V4h8v3"/></svg>임시 보관함<span class="n">5</span></div>
<div class="grp" data-roles="admin forest sys">회사 관리</div>
<div class="it" data-roles="admin forest sys"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="8" r="3"/><path d="M3 20a6 6 0 0 1 12 0M16 11a3 3 0 1 0 0-6M21 20a6 6 0 0 0-4-5.6"/></svg>사람<span class="n r">1</span></div>
<div class="it" data-roles="admin forest sys"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 21V5l8-2 8 2v16M9 21v-4h6v4"/></svg>회사 정보</div>
<div class="it" data-roles="admin sys"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h10M4 18h7"/></svg>회사 설계 기본값</div>
<div class="grp" data-roles="sys">시스템 관리</div>
<div class="it" data-roles="sys"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12h4l3-8 4 16 3-8h4"/></svg>개요</div>
<div class="it" data-roles="sys"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18M5 21V8l7-4 7 4v13"/></svg>회사 · 사용자</div>
<div class="it" data-roles="sys"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2"/></svg>설계 기본값</div>
<div class="it" data-roles="sys"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 4h14v16H5zM8 8h8M8 12h8M8 16h5"/></svg>시스템 로그</div>
<div class="grp">도움</div>
<div class="it"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.7.3-1 .9-1 1.7M12 17h.01"/></svg>사용자 가이드</div>
<div class="it"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 5h16v11H8l-4 4z"/></svg>지식 챗봇</div>
</div>
<div class="main">
<!-- ① 요약 보드 -->
<section class="screen on" id="s-home">
<div class="ttl"><h2>요약 보드</h2><span class="mini">항목을 누르면 그 페이지로</span><span class="sp"></span><span class="btnp" data-roles="user admin forest sys">+ 새 프로젝트</span></div>
<div class="board">
<div class="tile w2" data-go="list">
<div class="th"><span class="ic" style="background:#e7f3ec;color:var(--road)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18"/></svg></span><b>프로젝트</b><span class="more">전체 보기 ›</span></div>
<div class="row" style="align-items:flex-start">
<div style="flex:1">
<div class="kpis">
<div class="kpi"><div class="v">12</div><div class="l">전체</div></div>
<div class="kpi"><div class="v">7<span class="d up">+2</span></div><div class="l">설계 중</div></div>
<div class="kpi"><div class="v">2</div><div class="l">검토 · 확정 대기</div></div>
<div class="kpi"><div class="v">3</div><div class="l">완료</div></div>
</div>
<div class="mini" style="margin:12px 0 4px">단계별 프로젝트 수</div>
<svg viewBox="0 0 300 70" width="100%" height="70">
<g font-size="9" fill="#8b949e" text-anchor="middle">
<rect x="8" y="40" width="28" height="22" rx="3" fill="#cfe5d7"/><text x="22" y="69">파일</text>
<rect x="50" y="30" width="28" height="32" rx="3" fill="#a9d3b8"/><text x="64" y="69">전처리</text>
<rect x="92" y="10" width="28" height="52" rx="3" fill="#1f7a4d"/><text x="106" y="69">노선</text>
<rect x="134" y="20" width="28" height="42" rx="3" fill="#4f9b72"/><text x="148" y="69">횡단</text>
<rect x="176" y="44" width="28" height="18" rx="3" fill="#a9d3b8"/><text x="190" y="69">도면</text>
<rect x="218" y="48" width="28" height="14" rx="3" fill="#cfe5d7"/><text x="232" y="69">수량</text>
<rect x="260" y="52" width="28" height="10" rx="3" fill="#cfe5d7"/><text x="274" y="69">원가</text>
</g>
</svg>
</div>
<div style="width:150px;text-align:center">
<svg viewBox="0 0 42 42" width="110" height="110"><circle cx="21" cy="21" r="15.9" fill="none" stroke="#edf0f2" stroke-width="6"/>
<circle cx="21" cy="21" r="15.9" fill="none" stroke="#1f7a4d" stroke-width="6" stroke-dasharray="58 42" stroke-dashoffset="25"/>
<circle cx="21" cy="21" r="15.9" fill="none" stroke="#2f5fbf" stroke-width="6" stroke-dasharray="25 75" stroke-dashoffset="-33"/>
<circle cx="21" cy="21" r="15.9" fill="none" stroke="#c26a0f" stroke-width="6" stroke-dasharray="17 83" stroke-dashoffset="-58"/>
<text x="21" y="23.5" text-anchor="middle" font-size="7" font-weight="700" fill="#1f2328">12</text></svg>
<div class="legend" style="text-align:left;margin-top:4px"><span><i class="sw" style="background:#1f7a4d"></i>임도설계 7</span><span><i class="sw" style="background:#2f5fbf"></i>예정노선 3</span><span><i class="sw" style="background:#c26a0f"></i>안정성평가 2</span></div>
</div>
</div>
<div class="thumbs">
<div class="pthumb" data-go="detail"><svg viewBox="0 0 200 56" preserveAspectRatio="none"><rect width="200" height="56" fill="#e3efe6"/><path d="M0 40 Q40 20 70 30 T140 22 T200 34" fill="none" stroke="#bcd7c3" stroke-width="8"/><path d="M8 48 C 50 44, 70 12, 110 24 S 170 46, 194 8" fill="none" stroke="#c0392b" stroke-width="2.5"/></svg><div class="c"><b>용화 임도</b><div><span class="badge b-road">임도</span><span class="mini">횡단 4/7</span></div><div class="bar" style="margin-top:4px"><i style="width:57%"></i></div></div></div>
<div class="pthumb" data-go="detail"><svg viewBox="0 0 200 56" preserveAspectRatio="none"><rect width="200" height="56" fill="#e5ecf8"/><path d="M5 36 C 60 8, 90 56, 195 18" fill="none" stroke="#2f5fbf" stroke-width="2.5"/><circle cx="5" cy="36" r="3" fill="#2f5fbf"/><circle cx="105" cy="34" r="3" fill="#2f5fbf"/><circle cx="195" cy="18" r="3" fill="#2f5fbf"/></svg><div class="c"><b>용화 예정노선</b><div><span class="badge b-plan">예정노선</span><span class="mini">분석 2/3</span></div><div class="bar" style="margin-top:4px"><i style="width:66%;background:#2f5fbf"></i></div></div></div>
<div class="pthumb" data-go="detail"><svg viewBox="0 0 200 56" preserveAspectRatio="none"><rect width="200" height="56" fill="#f6eee4"/><path d="M0 50 L60 22 L120 30 L200 12" fill="none" stroke="#c26a0f" stroke-width="2.5"/><path d="M40 50 Q 70 10 110 40" fill="none" stroke="#e5484d" stroke-dasharray="3 3" stroke-width="1.5"/></svg><div class="c"><b>용화 안정성평가</b><div><span class="badge b-stab">안정성</span><span class="mini">2D 해석 2/6</span></div><div class="bar" style="margin-top:4px"><i style="width:33%;background:#c26a0f"></i></div></div></div>
</div>
</div>
<div class="tile">
<div class="th"><span class="ic" style="background:#fdecec;color:var(--red)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3 8-8M20 12v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9"/></svg></span><b>처리할 일</b><span class="more">4</span></div>
<div class="todo" data-roles="user admin sys"><span class="dot" style="background:#2f5fbf"></span>새로 받은 예정노선 2 건<span class="sp"></span><span class="btn">보기</span></div>
<div class="todo" data-roles="admin forest sys"><span class="dot" style="background:var(--red)"></span>가입 요청 1 건<span class="sp"></span><span class="btn">처리</span></div>
<div class="todo"><span class="dot" style="background:var(--amb)"></span>보관 파일 2 개 · 7 일 안 만료<span class="sp"></span><span class="btn">열기</span></div>
<div class="todo" data-roles="forest sys"><span class="dot" style="background:var(--ac)"></span>업체 지정 대기 2 연도<span class="sp"></span><span class="btn">지정</span></div>
</div>
<div class="tile" data-roles="user admin sys">
<div class="th"><span class="ic" style="background:#e8effc;color:var(--plan)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v12H5l-1 4z"/></svg></span><b>받은 예정노선</b><span class="more">›</span></div>
<div class="kpis"><div class="kpi"><div class="v" style="color:var(--plan)">2</div><div class="l">새로 받음</div></div><div class="kpi"><div class="v">1</div><div class="l">업데이트 있음</div></div><div class="kpi"><div class="v">4</div><div class="l">연결됨</div></div></div>
<div class="mini" style="margin:10px 0 4px">연도별</div>
<svg viewBox="0 0 220 44" width="100%" height="44"><g font-size="9" fill="#8b949e"><rect x="0" y="6" width="120" height="9" rx="3" fill="#2f5fbf"/><text x="126" y="14">2027 · 3</text><rect x="0" y="20" width="80" height="9" rx="3" fill="#7d9ee0"/><text x="86" y="28">2028 · 2</text><rect x="0" y="34" width="40" height="9" rx="3" fill="#bccdf2"/><text x="46" y="42">2029 · 1</text></g></svg>
</div>
<div class="tile" data-roles="forest sys">
<div class="th"><span class="ic" style="background:#e8effc;color:var(--plan)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 18l6-12 4 8 3-5 5 9z"/></svg></span><b>예정노선 지정</b><span class="more">›</span></div>
<div class="mini" style="margin-bottom:6px">상태별 연도 수</div>
<svg viewBox="0 0 220 60" width="100%" height="60"><g font-size="9.5" fill="#3b434b"><rect x="0" y="0" width="60" height="12" rx="3" fill="#bccdf2"/><text x="66" y="10">지점 지정 2</text><rect x="0" y="16" width="90" height="12" rx="3" fill="#7d9ee0"/><text x="96" y="26">분석 중 3</text><rect x="0" y="32" width="120" height="12" rx="3" fill="#2f5fbf"/><text x="126" y="42">확정 4</text><rect x="0" y="48" width="60" height="12" rx="3" fill="#1f7a4d"/><text x="66" y="58">업체 지정 2</text></g></svg>
</div>
<div class="tile">
<div class="th"><span class="ic" style="background:#fef3e2;color:var(--stab)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16v13H4zM8 7V4h8v3"/></svg></span><b>임시 보관함</b><span class="more">›</span></div>
<div class="kpis"><div class="kpi"><div class="v">5</div><div class="l">파일</div></div><div class="kpi"><div class="v">1.2<span style="font-size:13px"> GB</span></div><div class="l">용량</div></div><div class="kpi"><div class="v" style="color:var(--amb)">2</div><div class="l">7 일 안 만료</div></div></div>
<div class="mini" style="margin:10px 0 4px">남은 날</div>
<div style="display:grid;gap:5px">
<div class="row"><span class="mini" style="width:92px">용화_LAS.zip</span><div class="bar" style="flex:1"><i style="width:15%;background:var(--amb)"></i></div><span class="mini">4 일</span></div>
<div class="row"><span class="mini" style="width:92px">노선_v2.dxf</span><div class="bar" style="flex:1"><i style="width:70%"></i></div><span class="mini">21 일</span></div>
</div>
</div>
<div class="tile" data-roles="user admin forest sys">
<div class="th"><span class="ic" style="background:#fef3e2;color:var(--stab)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 20h18M5 20l5-9 4 5 5-9"/></svg></span><b>안정성평가 요약</b><span class="more">›</span></div>
<div class="row"><svg viewBox="0 0 42 42" width="76" height="76"><circle cx="21" cy="21" r="15.9" fill="none" stroke="#e7f3ec" stroke-width="7"/><circle cx="21" cy="21" r="15.9" fill="none" stroke="var(--red)" stroke-width="7" stroke-dasharray="21 79" stroke-dashoffset="25"/><text x="21" y="24" text-anchor="middle" font-size="8" font-weight="700" fill="#1f2328">21%</text></svg>
<div class="legend"><span><i class="sw" style="background:var(--red)"></i>N.G 측점 12</span><span><i class="sw" style="background:#cfe5d7"></i>O.K 측점 45</span><span class="mini">최소 안전율 0.87(우기)</span></div></div>
</div>
<div class="tile" data-roles="admin forest sys">
<div class="th"><span class="ic" style="background:#f1f1f4;color:#57606a"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="8" r="3"/><path d="M3 20a6 6 0 0 1 12 0"/></svg></span><b>사람</b><span class="more">›</span></div>
<div class="kpis"><div class="kpi"><div class="v">8</div><div class="l">팀원</div></div><div class="kpi"><div class="v" style="color:var(--red)">1</div><div class="l">가입 요청</div></div></div>
<div class="avs" style="margin-top:10px"><span style="background:#1f7a4d">홍</span><span style="background:#2f5fbf">김</span><span style="background:#c26a0f">박</span><span style="background:#6b7280">이</span><span style="background:#8b5cf6">최</span><span style="background:#cbd5e1;color:#3b434b">+3</span></div>
</div>
<div class="tile" data-roles="sys">
<div class="th"><span class="ic" style="background:#eef2ff;color:#4f46e5"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12h4l3-8 4 16 3-8h4"/></svg></span><b>서버 상태</b><span class="more">›</span></div>
<div class="row" style="justify-content:space-between">
<div style="text-align:center"><svg viewBox="0 0 42 24" width="64" height="38"><path d="M5 21 A16 16 0 0 1 37 21" fill="none" stroke="#edf0f2" stroke-width="5"/><path d="M5 21 A16 16 0 0 1 14 7" fill="none" stroke="#16a34a" stroke-width="5"/></svg><div class="mini">CPU 30%</div></div>
<div style="text-align:center"><svg viewBox="0 0 42 24" width="64" height="38"><path d="M5 21 A16 16 0 0 1 37 21" fill="none" stroke="#edf0f2" stroke-width="5"/><path d="M5 21 A16 16 0 0 1 21 5" fill="none" stroke="#16a34a" stroke-width="5"/></svg><div class="mini">메모리 48%</div></div>
<div style="text-align:center"><svg viewBox="0 0 42 24" width="64" height="38"><path d="M5 21 A16 16 0 0 1 37 21" fill="none" stroke="#edf0f2" stroke-width="5"/><path d="M5 21 A16 16 0 0 1 34 13" fill="none" stroke="var(--amb)" stroke-width="5"/></svg><div class="mini">디스크 85%</div></div>
</div>
</div>
<div class="tile" data-roles="sys">
<div class="th"><span class="ic" style="background:#f1f1f4;color:#57606a"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18M5 21V8l7-4 7 4v13"/></svg></span><b>회사 · 사용자</b><span class="more">›</span></div>
<div class="kpis"><div class="kpi"><div class="v">9</div><div class="l">회사</div></div><div class="kpi"><div class="v">41</div><div class="l">사용자</div></div><div class="kpi"><div class="v">20</div><div class="l">활성 프로젝트</div></div></div>
<div class="mini" style="margin:8px 0 2px">7 일 접속</div>
<svg viewBox="0 0 200 30" width="100%" height="30"><path d="M0 24 L28 18 L57 20 L85 12 L114 15 L142 8 L171 10 L200 4" fill="none" stroke="#4f46e5" stroke-width="2"/></svg>
</div>
</div>
</section>
<!-- ② 항목 페이지 -->
<section class="screen" id="s-list">
<div class="crumb" data-go="home">요약 보드 ›</div>
<div class="ttl"><h2>프로젝트</h2><span class="sp"></span><span class="seg" id="viewSeg"><button data-v="kan" class="on">칸반</button><button data-v="tbl">표</button></span><span class="btnp">+ 새 프로젝트</span></div>
<div class="tool"><span class="search" style="width:220px">이름 · 지역 찾기</span><span class="chip on">전체 12</span><span class="chip">임도설계 7</span><span class="chip">예정노선 3</span><span class="chip">안정성평가 2</span><span class="chip">사방설계 · 준비 중</span><span class="sp"></span><span class="chip">담당 : 전체 ▾</span><span class="chip">보기 : 내 것 · 회사 전체 · 보관</span></div>
<div id="kanView" class="kan">
<div class="col"><h4>시작 전 <span class="n">2</span></h4>
<div class="kc" data-go="detail"><svg viewBox="0 0 200 50" preserveAspectRatio="none"><rect width="200" height="50" fill="#eef1f4"/></svg><div class="c"><b>상평 임도</b><div><span class="badge b-road">임도</span><span class="mini">파일 입력 0/7</span></div><div class="meta"><span>김영희</span><span>10-24</span></div></div></div>
<div class="kc" data-go="detail"><svg viewBox="0 0 200 50" preserveAspectRatio="none"><rect width="200" height="50" fill="#eef1f4"/></svg><div class="c"><b>운수 안정성평가</b><div><span class="badge b-stab">안정성</span><span class="mini">지반 조건 0/6</span></div><div class="meta"><span>박철수</span><span>10-23</span></div></div></div>
</div>
<div class="col"><h4>설계 중 <span class="n">7</span></h4>
<div class="kc" data-go="detail"><svg viewBox="0 0 200 50" preserveAspectRatio="none"><rect width="200" height="50" fill="#e3efe6"/><path d="M8 42 C 50 38, 70 10, 110 22 S 170 40, 194 8" fill="none" stroke="#c0392b" stroke-width="2.5"/></svg><div class="c"><b>용화 임도</b><div><span class="badge b-road">임도</span><span class="mini">횡단설계 4/7</span></div><div class="bar" style="margin-top:5px"><i style="width:57%"></i></div><div class="meta"><span>홍길동</span><span>오늘</span></div></div></div>
<div class="kc" data-go="detail"><svg viewBox="0 0 200 50" preserveAspectRatio="none"><rect width="200" height="50" fill="#e5ecf8"/><path d="M5 32 C 60 6, 90 50, 195 16" fill="none" stroke="#2f5fbf" stroke-width="2.5"/></svg><div class="c"><b>용화 예정노선</b><div><span class="badge b-plan">예정노선</span><span class="mini">노선 분석 2/3</span></div><div class="bar" style="margin-top:5px"><i style="width:66%;background:#2f5fbf"></i></div><div class="meta"><span>산림청</span><span>어제</span></div></div></div>
<div class="kc" data-go="detail"><svg viewBox="0 0 200 50" preserveAspectRatio="none"><rect width="200" height="50" fill="#f6eee4"/><path d="M0 44 L60 20 L120 28 L200 10" fill="none" stroke="#c26a0f" stroke-width="2.5"/></svg><div class="c"><b>용화 안정성평가</b><div><span class="badge b-stab">안정성</span><span class="mini">2D 해석 2/6</span></div><div class="bar" style="margin-top:5px"><i style="width:33%;background:#c26a0f"></i></div><div class="meta"><span>홍길동</span><span>10-25</span></div></div></div>
<div class="mini" style="text-align:center">+ 4 개 더</div>
</div>
<div class="col"><h4>검토 · 확정 대기 <span class="n">2</span></h4>
<div class="kc" data-go="detail"><svg viewBox="0 0 200 50" preserveAspectRatio="none"><rect width="200" height="50" fill="#e3efe6"/><path d="M5 30 C 50 50, 120 4, 195 26" fill="none" stroke="#c0392b" stroke-width="2.5"/></svg><div class="c"><b>미원 임도</b><div><span class="badge b-road">임도</span><span class="mini">원가 7/7 · 확정 전</span></div><div class="meta"><span>김영희</span><span>10-22</span></div></div></div>
</div>
<div class="col done"><h4>완료 <span class="n">3</span><span class="sp" style="flex:1"></span><span class="mini">접기</span></h4>
<div class="kc" data-go="detail"><div class="c"><b>운수 임도</b><div><span class="badge b-road">임도</span><span class="mini">완료 · 10-12</span></div></div></div>
<div class="kc" data-go="detail"><div class="c"><b>2026 예정노선</b><div><span class="badge b-plan">예정노선</span><span class="mini">확정 · 09-30</span></div></div></div>
</div>
</div>
<div id="tblView" class="tbl hide">
<table>
<tr><th>이름</th><th>종류</th><th>지역</th><th>진행</th><th>상태</th><th>담당</th><th>수정일</th><th></th></tr>
<tr class="click" data-go="detail"><td><b>용화 임도</b></td><td><span class="badge b-road">임도설계</span></td><td>용화</td><td><div class="bar" style="width:90px;display:inline-block;vertical-align:middle"><i style="width:57%"></i></div> 횡단 4/7</td><td>설계 중</td><td>홍길동</td><td>오늘</td><td>⋯</td></tr>
<tr class="click" data-go="detail"><td><b>용화 예정노선</b></td><td><span class="badge b-plan">예정노선</span></td><td>용화</td><td><div class="bar" style="width:90px;display:inline-block;vertical-align:middle"><i style="width:66%;background:#2f5fbf"></i></div> 분석 2/3</td><td>설계 중</td><td>산림청</td><td>어제</td><td>⋯</td></tr>
<tr class="click" data-go="detail"><td><b>미원 임도</b></td><td><span class="badge b-road">임도설계</span></td><td>미원</td><td><div class="bar" style="width:90px;display:inline-block;vertical-align:middle"><i style="width:100%"></i></div> 원가 7/7</td><td>확정 대기</td><td>김영희</td><td>10-22</td><td>⋯</td></tr>
<tr class="click" data-go="detail"><td><b>용화 안정성평가</b></td><td><span class="badge b-stab">안정성평가</span></td><td>용화</td><td><div class="bar" style="width:90px;display:inline-block;vertical-align:middle"><i style="width:33%;background:#c26a0f"></i></div> 2D 2/6</td><td>설계 중</td><td>홍길동</td><td>10-25</td><td>⋯</td></tr>
<tr class="click" data-go="detail"><td><b>상평 임도</b></td><td><span class="badge b-road">임도설계</span></td><td>상평</td><td><div class="bar" style="width:90px;display:inline-block;vertical-align:middle"><i style="width:0%"></i></div> 0/7</td><td>시작 전</td><td>김영희</td><td>10-24</td><td>⋯</td></tr>
</table>
</div>
</section>
<!-- ③ 상세 페이지 -->
<section class="screen" id="s-detail">
<div class="crumb" data-go="list">요약 보드 › 프로젝트 ›</div>
<div class="ttl"><h2>용화 임도</h2><span class="badge b-road">임도설계</span><span class="mini">용화 · 간선임도 · 설계속도 20 km/h</span><span class="sp"></span><span class="btn">⋯</span><span class="btnp">작업 열기 — 횡단설계 ›</span></div>
<div class="pane">
<h3>단계 진행 <span class="mini" style="font-weight:400">· 누르면 그 단계로</span></h3>
<div class="steps">
<div class="st ok"><div class="s">✓</div>파일 입력</div><div class="st ok"><div class="s">✓</div>전처리</div><div class="st ok"><div class="s">✓</div>노선 · 종단</div><div class="st cur"><div class="s">4</div>횡단설계</div><div class="st no"><div class="s">5</div>상세 도면</div><div class="st no"><div class="s">6</div>수량</div><div class="st no"><div class="s">7</div>원가</div>
</div>
</div>
<div class="dgrid">
<div>
<div class="pane"><h3>노선 미리보기</h3>
<svg viewBox="0 0 600 220" width="100%" height="220" style="border-radius:8px;background:#e3efe6">
<path d="M0 170 Q120 120 200 140 T420 110 T600 150" fill="none" stroke="#cfe3d4" stroke-width="22"/>
<path d="M0 60 Q140 30 260 70 T600 40" fill="none" stroke="#d6e8da" stroke-width="16"/>
<path d="M20 190 C 150 170, 210 50, 330 90 S 500 170, 580 30" fill="none" stroke="#c0392b" stroke-width="3.5"/>
<g fill="#fff" stroke="#c0392b" stroke-width="2"><circle cx="20" cy="190" r="5"/><circle cx="330" cy="90" r="5"/><circle cx="580" cy="30" r="5"/></g>
<text x="26" y="208" font-size="11" fill="#3b434b">시점 0+0</text><text x="520" y="24" font-size="11" fill="#3b434b">종점 57+1.1</text>
</svg>
<div class="kpis" style="margin-top:10px"><div class="kpi"><div class="v">1,141<span style="font-size:13px"> m</span></div><div class="l">연장</div></div><div class="kpi"><div class="v">8.2<span style="font-size:13px"> %</span></div><div class="l">최대 종단 기울기</div></div><div class="kpi"><div class="v">12</div><div class="l">구조물</div></div><div class="kpi"><div class="v">57</div><div class="l">측점</div></div></div>
</div>
<div class="pane"><h3>토공 · 원가 요약</h3>
<div class="row" style="align-items:flex-end;gap:24px">
<div><div class="mini">절토 / 성토(m³)</div><svg viewBox="0 0 120 70" width="140" height="80"><rect x="15" y="10" width="34" height="55" rx="4" fill="#c26a0f"/><rect x="70" y="26" width="34" height="39" rx="4" fill="#1f7a4d"/><g font-size="9" fill="#3b434b" text-anchor="middle"><text x="32" y="8">8,420</text><text x="87" y="24">6,010</text></g></svg></div>
<div class="kpis"><div class="kpi"><div class="v">96.5<span style="font-size:13px"> 백만 원</span></div><div class="l">도급공사비(원가 단계 뒤 확정)</div></div></div>
</div>
</div>
</div>
<div>
<div class="pane"><h3>기본 정보</h3><div class="kv"><span>사업 연도</span><b>2026</b><span>지역</span><b>충북 보은 용화</b><span>임도 종류</span><b>간선임도</b><span>시행청</span><b>보은군</b><span>담당</span><b>홍길동 · 김영희</b><span>만든 날</span><b>10-17</b></div></div>
<div class="pane"><h3>연결된 것</h3>
<div class="link"><span class="badge b-plan">예정노선</span>2027 용화 예정노선 · 「업데이트 있음」<span class="sp" style="flex:1"></span><span class="btn">보기</span></div>
<div class="link"><span class="badge b-stab">안정성</span>용화 안정성평가 · N.G 12<span class="sp" style="flex:1"></span><span class="btn">열기</span></div>
<div class="link"><span class="badge b-sabang">파일</span>용화_LAS.zip · 노선_v2.dxf<span class="sp" style="flex:1"></span><span class="btn">2</span></div>
</div>
<div class="pane"><h3>산출물 내려받기</h3>
<div class="link">📄 도면 PDF(11 장)<span class="sp" style="flex:1"></span><span class="btn">받기</span></div>
<div class="link">📊 수량 · 내역서 xlsx<span class="sp" style="flex:1"></span><span class="mini">수량 단계 뒤</span></div>
</div>
<div class="pane"><h3>최근 변경</h3><div class="tl"><div>오늘 14:20 · 홍길동 · 횡단 [저장]</div><div>10-25 · 홍길동 · 노선 꺾임점 3 곳 고침</div><div>10-24 · 김영희 · 구조물 2 개 더함</div></div></div>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="note">보기용 시안 — 숫자 · 이름은 가짜 · 색 · 크기는 정할 거리. 칸반 칸은 진행 상태가 저절로 나눔(끌어 옮기지 않음). 표/칸반 고른 것은 사람마다 기억. 작은 항목(가입 요청 · 파일 · 사용자)은 페이지 대신 오른쪽 서랍으로 열기 권함.</div>
<script>
const show = id => { document.querySelectorAll('.screen').forEach(s => s.classList.toggle('on', s.id === 's-' + id));
document.querySelectorAll('.nav .it').forEach(n => n.classList.toggle('on', n.dataset.go === id || (id === 'detail' && n.dataset.go === 'list'))); };
document.addEventListener('click', e => { const g = e.target.closest('[data-go]'); if (g) { e.stopPropagation(); show(g.dataset.go); } });
document.querySelectorAll('#viewSeg button').forEach(b => b.onclick = ev => { ev.stopPropagation();
document.querySelectorAll('#viewSeg button').forEach(x => x.classList.toggle('on', x === b));
document.getElementById('kanView').classList.toggle('hide', b.dataset.v !== 'kan');
document.getElementById('tblView').classList.toggle('hide', b.dataset.v !== 'tbl'); });
const setRole = r => { document.querySelectorAll('#roleSeg button').forEach(x => x.classList.toggle('on', x.dataset.r === r));
document.querySelectorAll('[data-roles]').forEach(el => el.classList.toggle('hide', !el.dataset.roles.split(' ').includes(r)));
document.getElementById('orgName').textContent = r === 'forest' ? '산림청 ▾' : r === 'sys' ? '전체 회사 ▾' : '예시건설 ▾'; };
document.querySelectorAll('#roleSeg button').forEach(b => b.onclick = () => setRole(b.dataset.r));
setRole('admin');
</script>
</body>
</html>