king/dbx-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: 기업용 UI 리디자인 및 로컬 실행 스크립트 추가

Browse Source 
- 로그인/접근거부 페이지: 좌우 분할 레이아웃(다크 네이비 브랜드 패널 + 흰색 폼),
  실제 Google G 컬러 버튼, 자물쇠·안내 아이콘 적용
- 메인 페이지: 다크 네이비 헤더, 웰컴 히어로 배너(오늘 날짜 JS 자동 표시),
  SVG 아이콘이 있는 업무 카드 그리드, 호버 시 상단 블루 액센트 라인
- styles.css: 코퍼레이트 네이비/블루 색상 토큰 체계로 전면 재작성,
  Pretendard 폰트 유지, 모바일 반응형 포함
- run-local.bat / run-local.ps1: 더블클릭 또는 인수(stop/logs/ps/restart)로
  로컬 Docker 컨테이너를 간편하게 관리하는 스크립트 추가

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
king
2026-05-21 23:38:32 +09:00
parent c93e2be0a7
commit 60a1426a23
6 changed files with 918 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/main.html
+124 -21
View File
@@ -3,34 +3,137 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>DBX 메인 페이지</title>
<title>업무 포털 — DBX Corp</title>
<link rel="stylesheet" href="/static/styles.css" />
</head>
<body>
<header class="topbar">
<div>
<p class="eyebrow">DBX Workspace</p>
<h1>업무 메뉴</h1>
</div>
<div class="account">
{% if user.picture %}
<img src="{{ user.picture }}" alt="" />
{% endif %}
<div>
<strong>{{ user.name }}</strong>
<span>{{ user.email }}</span>
<!-- ── 헤더 ── -->
<header class="header">
<div class="header-brand">
<div class="header-logo-mark">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="7" height="7" rx="1"/>
<rect x="14" y="3" width="7" height="7" rx="1"/>
<rect x="3" y="14" width="7" height="7" rx="1"/>
<rect x="14" y="14" width="7" height="7" rx="1"/>
</svg>
</div>
<a class="ghost-button" href="/logout">로그아웃</a>
<div class="header-brand-text">
<span class="header-company">DBX Corp</span>
<span class="header-portal">업무 포털</span>
</div>
</div>
<div class="header-user">
<div class="header-user-info">
<span class="header-user-name">{{ user.name }}</span>
<span class="header-user-email">{{ user.email }}</span>
</div>
{% if user.picture %}
<img class="header-avatar" src="{{ user.picture }}" alt="{{ user.name }}" />
{% else %}
<div class="header-avatar-placeholder">
{{ user.name[0] | upper }}
</div>
{% endif %}
<a class="btn-logout" href="/logout">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
<polyline points="16 17 21 12 16 7"/>
<line x1="21" y1="12" x2="9" y2="12"/>
</svg>
<span>로그아웃</span>
</a>
</div>
</header>
<main class="menu-grid">
{% for item in menu_items %}
<a class="menu-card" href="{{ item.url }}">
<span>{{ item.title }}</span>
<small>{{ item.description }}</small>
</a>
{% endfor %}
<!-- ── 히어로 배너 ── -->
<section class="hero">
<p class="hero-greeting">안녕하세요, {{ user.name }}님 👋</p>
<p class="hero-sub">오늘도 좋은 하루 되세요.</p>
<p class="hero-date" id="today-date"></p>
</section>
<!-- ── 메뉴 콘텐츠 ── -->
<main class="content">
<div class="section-header">
<h2 class="section-title">업무 바로가기</h2>
<span class="section-count">{{ menu_items | length }}</span>
</div>
<div class="card-grid">
{% for item in menu_items %}
<a class="menu-card" href="{{ item.url }}">
<div class="card-icon">
{% if loop.index == 1 %}
<!-- 클립보드 / 발주 아이콘 -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"/>
<line x1="8" y1="13" x2="16" y2="13"/>
<line x1="8" y1="17" x2="14" y2="17"/>
</svg>
{% elif loop.index == 2 %}
<!-- 리스트 / 주문 아이콘 -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="8" y1="6" x2="21" y2="6"/>
<line x1="8" y1="12" x2="21" y2="12"/>
<line x1="8" y1="18" x2="21" y2="18"/>
<line x1="3" y1="6" x2="3.01" y2="6"/>
<line x1="3" y1="12" x2="3.01" y2="12"/>
<line x1="3" y1="18" x2="3.01" y2="18"/>
</svg>
{% elif loop.index == 3 %}
<!-- 차트 아이콘 -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="20" x2="18" y2="10"/>
<line x1="12" y1="20" x2="12" y2="4"/>
<line x1="6" y1="20" x2="6" y2="14"/>
<line x1="2" y1="20" x2="22" y2="20"/>
</svg>
{% else %}
<!-- 기본 링크 아이콘 -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<line x1="12" y1="8" x2="12" y2="16"/>
<line x1="8" y1="12" x2="16" y2="12"/>
</svg>
{% endif %}
</div>
<div class="card-body">
<p class="card-title">{{ item.title }}</p>
<p class="card-desc">{{ item.description }}</p>
</div>
<div class="card-footer">
<span class="card-link">
바로가기
<svg width="14" height="14" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<line x1="5" y1="12" x2="19" y2="12"/>
<polyline points="12 5 19 12 12 19"/>
</svg>
</span>
</div>
</a>
{% endfor %}
</div>
</main>
<script>
// 오늘 날짜 표시
const d = new Date();
const days = ["일요일","월요일","화요일","수요일","목요일","금요일","토요일"];
document.getElementById("today-date").textContent =
d.getFullYear() + "년 " + (d.getMonth()+1) + "월 " + d.getDate() + "일 " + days[d.getDay()];
</script>
</body>
</html>