harang-ai
5e6c7085d3
- DESIGN-SYSTEM.md: 색상/타이포/컴포넌트/반응형 규칙 - 6개 페이지 디자인 문서 재작성 (대시/프로젝트/자매/설정/활동로그/조직도) - 관리자 페이지 디자인 가이드 - 원본 HTML 참조 파일 6개 - glassmorphism → 미니멀 터미널 UI - 모바일 breakpoint: 768px/767px
466 lines
15 KiB
HTML
466 lines
15 KiB
HTML
The code below contains a design. This design should be used to create a new app or be added to an existing one.
|
|
|
|
Look at the current open project to determine if a project exists. If no project is open, create a new Vite project then create this view in React after componentizing it.
|
|
|
|
If a project does exist, determine the framework being used and implement the design within that framework. Identify whether reusable components already exist that can be used to implement the design faithfully and if so use them, otherwise create new components. If other views already exist in the project, make sure to place the view in a sensible route and connect it to the other views.
|
|
|
|
Ensure the visual characteristics, layout, and interactions in the design are preserved with perfect fidelity.
|
|
|
|
Run the dev command so the user can see the app once finished.
|
|
|
|
```
|
|
<html lang="ko" vid="0"><head vid="1">
|
|
<meta charset="UTF-8" vid="2">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" vid="3">
|
|
<title vid="4">하나랑 - 프로젝트 상세</title>
|
|
<style vid="5">
|
|
:root {
|
|
--bg-main: #151515;
|
|
--bg-surface: #151515;
|
|
--text-primary: #F5F5F5;
|
|
--text-secondary: #8A8A8A;
|
|
--border-color: #333333;
|
|
--accent-hover: #FFFFFF;
|
|
|
|
--font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
|
|
--space-xs: 4px;
|
|
--space-sm: 8px;
|
|
--space-md: 16px;
|
|
--space-lg: 24px;
|
|
--space-xl: 40px;
|
|
--space-xxl: 64px;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
background-color: var(--bg-main);
|
|
color: var(--text-primary);
|
|
line-height: 1.5;
|
|
font-size: 14px;
|
|
-webkit-font-smoothing: antialiased;
|
|
display: flex;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.label-meta {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.label-meta span {
|
|
color: var(--text-secondary);
|
|
margin-right: var(--space-sm);
|
|
}
|
|
|
|
.app-container {
|
|
display: flex;
|
|
width: 100%;
|
|
max-width: 1600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 240px;
|
|
flex-shrink: 0;
|
|
border-right: 1px solid var(--border-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: var(--space-xl) var(--space-lg);
|
|
position: sticky;
|
|
top: 0;
|
|
height: 100vh;
|
|
}
|
|
|
|
.logo-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin-bottom: var(--space-xxl);
|
|
}
|
|
|
|
.logo-circle-full {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: var(--text-primary);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.logo-circle-half {
|
|
width: 10px;
|
|
height: 20px;
|
|
background-color: var(--text-primary);
|
|
border-radius: 0 20px 20px 0;
|
|
}
|
|
|
|
.nav-menu {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.nav-link {
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
padding: var(--space-sm) 0;
|
|
transition: color 0.2s ease;
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.nav-link:hover, .nav-link.active {
|
|
color: var(--accent-hover);
|
|
}
|
|
|
|
.nav-link.active::before { content: "["; margin-right: 4px; color: var(--text-secondary); }
|
|
.nav-link.active::after { content: "]"; margin-left: 4px; color: var(--text-secondary); }
|
|
|
|
.main-content {
|
|
flex-grow: 1;
|
|
padding: var(--space-xl) var(--space-xxl);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xl);
|
|
min-width: 0;
|
|
}
|
|
|
|
.breadcrumb {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--space-sm);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.page-header {
|
|
margin-bottom: var(--space-md);
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: var(--space-lg);
|
|
}
|
|
|
|
.page-title-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.project-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 320px;
|
|
gap: var(--space-xxl);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: var(--space-sm);
|
|
margin-bottom: var(--space-lg);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
|
|
.phase-timeline {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-lg);
|
|
margin-bottom: var(--space-xl);
|
|
}
|
|
|
|
.phase-item {
|
|
display: grid;
|
|
grid-template-columns: 120px 1fr;
|
|
gap: var(--space-lg);
|
|
}
|
|
|
|
.phase-meta {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.phase-box {
|
|
border-left: 2px solid var(--border-color);
|
|
padding-left: var(--space-lg);
|
|
position: relative;
|
|
}
|
|
|
|
.phase-box.active {
|
|
border-left-color: var(--text-primary);
|
|
}
|
|
|
|
.phase-box.active::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -5px;
|
|
top: 0;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--text-primary);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.phase-name {
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.phase-desc {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
|
|
.checklist {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.check-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-md);
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.check-box {
|
|
width: 14px;
|
|
height: 14px;
|
|
border: 1px solid var(--border-color);
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.check-box.checked::after {
|
|
content: '■';
|
|
font-size: 10px;
|
|
}
|
|
|
|
.check-item.done {
|
|
color: var(--text-secondary);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
|
|
.node-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.node-mini-card {
|
|
border: 1px solid var(--border-color);
|
|
padding: var(--space-sm) var(--space-md);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.node-status-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: #00FF00;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
|
|
.audit-log {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
background: var(--border-color);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.audit-row {
|
|
background: var(--bg-main);
|
|
padding: var(--space-sm) var(--space-md);
|
|
display: grid;
|
|
grid-template-columns: 100px 1fr 80px;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.audit-header {
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.status-tag {
|
|
padding: 2px 6px;
|
|
font-size: 10px;
|
|
border: 1px solid var(--border-color);
|
|
text-align: center;
|
|
}
|
|
|
|
.status-tag.pass { border-color: #00FF00; color: #00FF00; }
|
|
</style>
|
|
</head>
|
|
<body vid="6">
|
|
|
|
<div class="app-container" vid="7">
|
|
<aside class="sidebar" vid="8">
|
|
<div class="logo-container" vid="9">
|
|
<div class="logo-circle-full" vid="10"></div>
|
|
<div class="logo-circle-half" vid="11"></div>
|
|
</div>
|
|
<nav vid="12">
|
|
<ul class="nav-menu" vid="13">
|
|
<li class="nav-item" vid="14"><a href="#" class="nav-link" vid="15">대시</a></li>
|
|
<li class="nav-item" vid="16"><a href="#" class="nav-link active" vid="17">프로</a></li>
|
|
<li class="nav-item" vid="18"><a href="#" class="nav-link" vid="19">자매</a></li>
|
|
<li class="nav-item" vid="20"><a href="#" class="nav-link" vid="21">조직</a></li>
|
|
<li class="nav-item" vid="22"><a href="#" class="nav-link" vid="23">설정</a></li>
|
|
<li class="nav-item" vid="24"><a href="#" class="nav-link" vid="25">관리</a></li>
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
|
|
<main class="main-content" vid="26">
|
|
<div class="breadcrumb" vid="27">PROJECTS / P-402 / SUMMARY</div>
|
|
<header class="page-header" vid="28">
|
|
<div class="page-title-row" vid="29">
|
|
<h1 class="page-title" vid="30">데이터 파이프라인 최적화</h1>
|
|
<div class="label-meta" vid="31"><span vid="32">STATUS:</span>ACTIVE / PHASE 02</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="project-grid" vid="33">
|
|
<div class="content-left" vid="34">
|
|
<section vid="35">
|
|
<div class="section-title" vid="36">
|
|
<span vid="37">PHASE TIMELINE</span>
|
|
<span class="label-meta" vid="38">CURRENT: P2</span>
|
|
</div>
|
|
<div class="phase-timeline" vid="39">
|
|
<div class="phase-item" vid="40">
|
|
<div class="phase-meta" vid="41">COMPLETED<br vid="42">2023.10.12</div>
|
|
<div class="phase-box" vid="43">
|
|
<div class="phase-name" vid="44">PHASE 01: 아키텍처 분석</div>
|
|
<div class="phase-desc" vid="45">기존 하랑-나랑 노드 간의 데이터 흐름 병목 현상 진단 및 병렬 처리 로직 설계 완료.</div>
|
|
</div>
|
|
</div>
|
|
<div class="phase-item" vid="46">
|
|
<div class="phase-meta" vid="47">IN PROGRESS<br vid="48">EST: 11.05</div>
|
|
<div class="phase-box active" vid="49">
|
|
<div class="phase-name" vid="50">PHASE 02: 실시간 동기화 구현</div>
|
|
<div class="phase-desc" vid="51">Redis 스트림을 활용한 비동기 메시지 큐 시스템 구축 및 데이터 무결성 검증 레이어 통합.</div>
|
|
</div>
|
|
</div>
|
|
<div class="phase-item" vid="52">
|
|
<div class="phase-meta" vid="53">PENDING<br vid="54">TBD</div>
|
|
<div class="phase-box" vid="55">
|
|
<div class="phase-name" vid="56">PHASE 03: 스트레스 테스트 및 배포</div>
|
|
<div class="phase-desc" vid="57">최대 트래픽 상황에서의 안정성 확보 및 프로덕션 환경 순차 배포 예정.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section vid="58">
|
|
<div class="section-title" vid="59">
|
|
<span vid="60">SECURITY AUDIT LOG</span>
|
|
<span class="label-meta" vid="61">LAST CHECK: 4H AGO</span>
|
|
</div>
|
|
<div class="audit-log" vid="62">
|
|
<div class="audit-row audit-header" vid="63">
|
|
<div vid="64">TIMESTAMP</div>
|
|
<div vid="65">ACTION / RESOURCE</div>
|
|
<div vid="66">RESULT</div>
|
|
</div>
|
|
<div class="audit-row" vid="67">
|
|
<div vid="68">14:02:45</div>
|
|
<div vid="69">CRYPTO_KEY_ROTATION / NODE_HARANG</div>
|
|
<div class="status-tag pass" vid="70">PASS</div>
|
|
</div>
|
|
<div class="audit-row" vid="71">
|
|
<div vid="72">11:30:12</div>
|
|
<div vid="73">CODE_SCAN_STATIC / PIPELINE_V2</div>
|
|
<div class="status-tag pass" vid="74">PASS</div>
|
|
</div>
|
|
<div class="audit-row" vid="75">
|
|
<div vid="76">09:15:00</div>
|
|
<div vid="77">ACCESS_LOG_REVIEW / ADMIN_ROOT</div>
|
|
<div class="status-tag" vid="78">WARN</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="content-right" vid="79">
|
|
<section style="margin-bottom: var(--space-xl);" vid="80">
|
|
<div class="section-title" vid="81">ASSIGNED NODES</div>
|
|
<div class="node-stack" vid="82">
|
|
<div class="node-mini-card" vid="83">
|
|
<span class="label-meta" vid="84">하랑 [PRIMARY]</span>
|
|
<div class="node-status-dot" vid="85"></div>
|
|
</div>
|
|
<div class="node-mini-card" vid="86">
|
|
<span class="label-meta" vid="87">나랑 [SECONDARY]</span>
|
|
<div class="node-status-dot" vid="88"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section vid="89">
|
|
<div class="section-title" vid="90">TASK CHECKLIST</div>
|
|
<ul class="checklist" vid="91">
|
|
<li class="check-item done" vid="92">
|
|
<div class="check-box checked" vid="93"></div>
|
|
<span vid="94">인프라 요구사항 명세 작성</span>
|
|
</li>
|
|
<li class="check-item done" vid="95">
|
|
<div class="check-box checked" vid="96"></div>
|
|
<span vid="97">보안 프로토콜 V3 적용</span>
|
|
</li>
|
|
<li class="check-item" vid="98">
|
|
<div class="check-box" vid="99"></div>
|
|
<span vid="100">캐시 무효화 로직 테스트</span>
|
|
</li>
|
|
<li class="check-item" vid="101">
|
|
<div class="check-box" vid="102"></div>
|
|
<span vid="103">부하 분산 알고리즘 튜닝</span>
|
|
</li>
|
|
<li class="check-item" vid="104">
|
|
<div class="check-box" vid="105"></div>
|
|
<span vid="106">최종 문서화 및 코드 리뷰</span>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
</body></html>
|
|
```
|