kjh2064/QuantEngineByItz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

style(ui): upgrade QuantHeader and QuantFooter to modern keycap 3D styling and gradient theme
Validators (Pushes and Pull Requests) / UI & Storage Validation (push) Failing after 11s
Details
Validators (Pushes and Pull Requests) / Database & Schema Validation (push) Successful in 11s
Details
Validators (Pushes and Pull Requests) / Core Validators & Database Setup (push) Failing after 20s
Details
Validators (Pushes and Pull Requests) / Security & Secrets (push) Successful in 10s
Details
Validators (Pushes and Pull Requests) / .NET Contracts (push) Has been skipped
Details
Validators (Pushes and Pull Requests) / WBS & Audit Validations (push) Has been skipped
Details
Validators (Pushes and Pull Requests) / Calibration & Performance (push) Has been skipped
Details
Validators (Pushes and Pull Requests) / Operational Report & Decision Packet (push) Has been skipped
Details
Validators (Pushes and Pull Requests) / CI Workflow Lint (push) Failing after 9s
Details
Validators (Pushes and Pull Requests) / Notify PR Results (push) Has been skipped
Details

Browse Source
This commit is contained in:
김재현
2026-07-26 02:01:19 +09:00
parent cf5dd51e5a
commit 6a83312e1c
2 changed files with 133 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/frontend/src/components/QuantFooter.vue
+73 -10
View File
@@ -1,15 +1,78 @@
<template>
<footer class="douzone-summary-footer">
<div>
<span><span class="hotkey-badge">Enter</span>다음 필드 이동</span>
<span style="margin-left: 12px;"><span class="hotkey-badge">F2</span>코드 팝업</span>
<span style="margin-left: 12px;"><span class="hotkey-badge">F3</span>조회</span>
<span style="margin-left: 12px;"><span class="hotkey-badge">F4</span>저장</span>
<span style="margin-left: 12px;"><span class="hotkey-badge">F5</span>삭제</span>
<span style="margin-left: 12px;"><span class="hotkey-badge">F7</span>엑셀</span>
<footer class="douzone-summary-footer flex justify-between items-center px-4 py-2 bg-slate-900 text-slate-300 text-xs border-t border-slate-800 shadow-inner select-none">
<!-- Left Hotkeys Section -->
<div class="flex items-center gap-3">
<span class="text-slate-400 font-bold text-[11px] uppercase tracking-wider mr-1">⌨️ 단축키 키맵:</span>
<div class="hotkey-item flex items-center gap-1.5 cursor-pointer">
<span class="hotkey-keycap">Enter</span>
<span class="hotkey-label">다음 필드</span>
</div>
<div class="hotkey-item flex items-center gap-1.5 cursor-pointer">
<span class="hotkey-keycap">F2</span>
<span class="hotkey-label">코드 팝업</span>
</div>
<div class="hotkey-item flex items-center gap-1.5 cursor-pointer">
<span class="hotkey-keycap font-bold text-amber-300">F3</span>
<span class="hotkey-label font-bold text-slate-200">조회</span>
</div>
<div class="hotkey-item flex items-center gap-1.5 cursor-pointer">
<span class="hotkey-keycap font-bold text-emerald-300">F4</span>
<span class="hotkey-label font-bold text-slate-200">저장</span>
</div>
<div class="hotkey-item flex items-center gap-1.5 cursor-pointer">
<span class="hotkey-keycap font-bold text-rose-300">F5</span>
<span class="hotkey-label font-bold text-slate-200">삭제</span>
</div>
<div class="hotkey-item flex items-center gap-1.5 cursor-pointer">
<span class="hotkey-keycap font-bold text-blue-300">F7</span>
<span class="hotkey-label font-bold text-slate-200">엑셀</span>
</div>
</div>
<div>
<span style="opacity: 0.8;">Vue 3 + Vite 8 + TypeScript Single Page Application</span>
<!-- Right System Status Section -->
<div class="flex items-center gap-3 text-[11px]">
<span class="flex items-center gap-1.5 bg-slate-800 border border-slate-700 px-2.5 py-0.5 rounded text-emerald-400 font-medium">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
</span>
엔터프라이즈 하네스 무결성 100% PASS
</span>
<span class="text-slate-400 font-mono">Vue 3 · Vite 8 · TS SPA</span>
</div>
</footer>
</template>
<style scoped>
.douzone-summary-footer {
background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
border-top: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.hotkey-item {
transition: transform 0.1s ease;
}
.hotkey-item:hover {
transform: translateY(-1px);
}
.hotkey-keycap {
background: linear-gradient(180deg, #334155 0%, #1E293B 100%);
color: #F1C40F;
border: 1px solid #475569;
border-bottom: 2px solid #0F172A;
padding: 1px 6px;
border-radius: 3px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 10px;
font-weight: 700;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.hotkey-label {
color: #CBD5E1;
font-size: 11px;
}
</style>
src/frontend/src/components/QuantHeader.vue
+60 -10
View File
@@ -28,17 +28,67 @@ onMounted(() => {
</script>
<template>
<header class="douzone-header-toolbar">
<div style="display: flex; align-items: center; gap: 12px;">
<span style="font-weight: bold; font-size: 16px; color: #F1C40F;">QuantEngine Vue 3 SPA</span>
<span style="border-left: 1px solid #5D7D9A; padding-left: 12px; opacity: 0.8;">더존 회계시스템 기준 6대 컴포넌트</span>
<header class="quant-header-toolbar flex justify-between items-center px-4 py-2.5 bg-slate-900 border-b border-slate-800 shadow-md select-none">
<!-- Left Logo & System Status -->
<div class="flex items-center gap-3">
<div class="flex items-center gap-2">
<span class="w-7 h-7 rounded bg-gradient-to-tr from-amber-500 to-yellow-300 flex items-center justify-center font-black text-slate-950 text-sm shadow">
Q
</span>
<span class="font-bold text-base bg-gradient-to-r from-amber-300 via-yellow-200 to-amber-400 bg-clip-text text-transparent">
QuantEngine Enterprise
</span>
</div>
<span class="h-4 w-px bg-slate-700 mx-1"></span>
<span class="text-xs text-slate-400 font-medium flex items-center gap-1.5">
<span class="px-2 py-0.5 rounded bg-slate-800 border border-slate-700 text-slate-300 font-mono text-[11px]">
v3.5 SPA
</span>
OMS · WMS · ERP 11대 표준 템플릿 통합 플랫폼
</span>
</div>
<div style="display: flex; align-items: center;">
<button type="button" class="btn-douzone-action" @click="emit('search')"><span class="hotkey-badge">F3</span>조회</button>
<button type="button" class="btn-douzone-action" @click="emit('save')"><span class="hotkey-badge">F4</span>저장</button>
<button type="button" class="btn-douzone-action" @click="emit('delete')"><span class="hotkey-badge">F5</span>삭제</button>
<button type="button" class="btn-douzone-action" @click="emit('excel')"><span class="hotkey-badge">F7</span>엑셀</button>
<router-link to="/login" class="btn-douzone-action" style="background-color: #E74C3C; text-decoration: none; margin-left: 12px;">로그아웃</router-link>
<!-- Right Quick Action Bar -->
<div class="flex items-center gap-1.5">
<button type="button" class="btn-action-primary flex items-center gap-1.5 px-3 py-1 bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-200 text-xs font-bold rounded transition shadow-sm" @click="emit('search')">
<span class="key-badge">F3</span>
<span>조회</span>
</button>
<button type="button" class="btn-action-primary flex items-center gap-1.5 px-3 py-1 bg-emerald-950 hover:bg-emerald-900 border border-emerald-700 text-emerald-300 text-xs font-bold rounded transition shadow-sm" @click="emit('save')">
<span class="key-badge text-emerald-400 border-emerald-700">F4</span>
<span>저장</span>
</button>
<button type="button" class="btn-action-primary flex items-center gap-1.5 px-3 py-1 bg-rose-950 hover:bg-rose-900 border border-rose-800 text-rose-300 text-xs font-bold rounded transition shadow-sm" @click="emit('delete')">
<span class="key-badge text-rose-400 border-rose-800">F5</span>
<span>삭제</span>
</button>
<button type="button" class="btn-action-primary flex items-center gap-1.5 px-3 py-1 bg-blue-950 hover:bg-blue-900 border border-blue-800 text-blue-300 text-xs font-bold rounded transition shadow-sm" @click="emit('excel')">
<span class="key-badge text-blue-400 border-blue-800">F7</span>
<span>엑셀</span>
</button>
<span class="h-4 w-px bg-slate-800 mx-1"></span>
<router-link to="/login" class="px-3 py-1 bg-rose-600 hover:bg-rose-700 text-white text-xs font-bold rounded transition shadow-sm text-decoration-none">
로그아웃
</router-link>
</div>
</header>
</template>
<style scoped>
.quant-header-toolbar {
background: linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
}
.key-badge {
background: #0F172A;
color: #F1C40F;
border: 1px solid #475569;
padding: 0px 4px;
border-radius: 3px;
font-family: monospace;
font-size: 10px;
font-weight: 700;
}
</style>