# 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<T> 이중 검증
   - 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 |