Files
QuantEngineByItz/docs/UI_GUIDELINES.md
T
kjh2064 70824c2afb fix: security, data-integrity, and doc-drift findings from repo audit
Consolidates duplicate KIS API client implementations (governance tests
were exercising an unused class instead of the one actually running in
production), closes a SQL injection path in the DB admin page, fixes a
migration that used MySQL-only syntax and had never actually applied
(confirmed against production), resyncs docs/db/quantengine.dbml with
all migrations, and removes a duplicate OMS·WMS·ERP frontend tree in
favor of src/frontend/. Also corrects several unverifiable/inflated
claims in the OMS planning docs and realigns CI/CD and architecture
documentation with what's actually in the repo.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-30 11:20:02 +09:00

3.3 KiB

QuantEngine UI Design Guidelines

Full UI design principles, extracted from CLAUDE.md (2026-07-30) to keep the main file within the character budget. CLAUDE.md keeps a condensed summary; this file has the complete rules and the component mapping table.

Framework & Design System (2026-07-11)

  • Primary Framework: ASP.NET Core Razor Pages + Bootstrap 5 + Tabler UI
  • Design System: Tabler (Bootstrap 5 기반), 밀집 레이아웃 + 전통 서버 렌더링
  • Render Mode: Server-side Razor Pages — 모든 Admin UI는 서버에서 렌더링, Cookie 기반 인증 (API-First WASM 폐기)
  • Authentication: Cookie Authentication (HttpOnly) + BCrypt password hashing + IP lockout (3 strikes, 15-min)
  • Deprecation: Blazor Interactive WebAssembly 폐기, MudBlazor 컴포넌트 폐기 (2026-07-11), SmartAdmin 폐기. QuantEngine.Web.Client 폴더는 저장소에 실재하지 않는다 — .sln에서 제외된 것이 아니라 완전히 삭제됨 (2026-07-30 확인)

Component Development Rules

  1. All Admin UI Development (New + Refactored):

    • Use Razor Pages (.cshtml + .cshtml.cs PageModel) exclusively for admin
    • UI는 Repository/Service를 생성자 DI로 직접 호출 (API 홉 없음)
    • Bootstrap 5 + Tabler UI CSS classes for styling
    • Form Validation: DataAnnotations DTO + FluentValidation IValidator 이중 검증
    • HTML <form> + tag helpers (asp-for, asp-action, asp-page)
  2. Authentication & Authorization:

    • Cookie name: QuantEngine.Admin.Auth (HttpOnly, SameSite=Lax)
    • Session duration: 12 hours (sliding expiration)
    • Folder-level [Authorize] via AuthorizeFolder("/Admin") convention (per-page 반복 금지)
    • Login: /Account/Login (Razor Page, NO WASM)
    • Password: BCrypt-hashed (auto-migrates existing SHA-256 hashes on first login)
    • IP Lockout: 3 failed attempts → 15-minute lockout
  3. Data & Form Patterns:

    • PageModel constructor: public IndexModel(IWorkspaceRepository repo, ILogger<IndexModel> logger)
    • Form submission: OnPostAsync() / OnPostDeleteAsync() (multi-handler pattern)
    • Validation failures: return Page() (re-render with ModelState errors)
    • Pagination: PaginationModel record (Page, TotalPages, Func<int,string> BuildPageUrl)
    • Empty states: <PartialView name="_EmptyState" model="message" />
  4. Component Mapping (Bootstrap 5 + Tabler):

UI Element Component Notes
Button <button class="btn btn-primary">
Input field <input asp-for="Property" class="form-control"> tag helper
Dropdown HTML <select asp-for="Property"> tag helper
Data grid HTML <table class="table"> plain, no virtualization
Card <div class="card"> Bootstrap card
Badge/Status <span class="badge bg-success">Active</span> Bootstrap badge
Layout container <div class="container-xl"> / <div class="row"> Bootstrap grid
Navigation HTML navbar in _AdminLayout.cshtml sidebar + topbar
Loading N/A (server-rendered) no loading states needed
Icons Bootstrap Icons (<i class="bi bi-*"></i>) CDN
Modal/Dialog Bootstrap modal or inline confirm() avoid unnecessary modals
Validation msg <span asp-validation-for="Property" class="d-block alert alert-danger mt-2"> tag helper