feat(mudblazor): 완전한 UI 리뉴얼 with MudBlazor 컴포넌트
MudBlazor 6.10.0 적용으로 완성도 높은 모던 UI 구현: **의존성 추가**: - QuantEngine.Web.csproj: MudBlazor 6.10.0 패키지 추가 **핵심 변경사항**: - App.razor: MudThemeProvider, MudDialogProvider, MudSnackbarProvider 통합 - MudBlazor CDN 스타일 및 JavaScript 로드 - Google Fonts(Roboto) 적용 - _Imports.razor: MudBlazor namespace 추가 (전역 사용 가능) - MainLayout.razor: 완전 리뉴얼 - MudLayout + MudAppBar 상단 네비게이션 - MudDrawer 사이드바 (토글 가능) - MudContainer로 반응형 컨텐츠 영역 - NavMenu.razor: MudNavMenu + MudNavLink로 현대화 - Material Icons 적용 - Dashboard, Portfolio, Analytics, Reports, Settings 메뉴 구조 - Dashboard.razor: 완전 리뉴얼 (MudBlazor 고도화) - MudCard 기반 상태 요약 (Locks, Approvals, Config Items, System Status) - MudGrid 반응형 레이아웃 (xs/sm/md 브레이크포인트) - MudDataGrid 테이블 (커스텀 필터/정렬 준비) - MudButton/MudIconButton 액션 버튼 - MudChip으로 상태 표시 - MudSnackbar 알림 - MudDialogService 모달 (Add/Edit/Delete) **개선점**: - 데스크톱 우선 → 모바일 반응형 설계 - 기본 HTML/CSS → Material Design System - 일관된 색상/타이포그래피/아이콘 체계 - 접근성(a11y) 및 사용성 향상 - Dark Mode 지원 가능 (MudTheme 확장) 배포 준비: MSBUILD : error MSB1003: 프로젝트 또는 솔루션 파일을 지정하세요. 현재 작업 디렉터리에 프로젝트 또는 솔루션 파일이 없습니다. 후 nginx/IIS에 배포 Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,23 +1,40 @@
|
||||
@inherits LayoutComponentBase
|
||||
|
||||
<div class="page">
|
||||
<div class="sidebar">
|
||||
<MudLayout>
|
||||
<MudAppBar Elevation="1">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
|
||||
<MudSpacer />
|
||||
<MudText Typo="Typo.H5" Class="ml-3">Quant Engine</MudText>
|
||||
<MudSpacer />
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Settings" Color="Color.Inherit" />
|
||||
</MudAppBar>
|
||||
|
||||
<MudDrawer @bind-Open="@drawerOpen" Elevation="1">
|
||||
<MudDrawerHeader>
|
||||
<MudText Typo="Typo.H6">Menu</MudText>
|
||||
</MudDrawerHeader>
|
||||
<NavMenu />
|
||||
</div>
|
||||
</MudDrawer>
|
||||
|
||||
<main>
|
||||
<div class="top-row px-4">
|
||||
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
|
||||
</div>
|
||||
|
||||
<article class="content px-4">
|
||||
<MudMainContent>
|
||||
<MudContainer MaxWidth="MaxWidth.Large" Class="my-4">
|
||||
@Body
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
</MudContainer>
|
||||
</MudMainContent>
|
||||
</MudLayout>
|
||||
|
||||
<div id="blazor-error-ui" data-nosnippet>
|
||||
An unhandled error has occurred.
|
||||
<a href="." class="reload">Reload</a>
|
||||
<span class="dismiss">🗙</span>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<p>An unhandled error has occurred.</p>
|
||||
<a href="." class="btn btn-primary">Reload</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private bool drawerOpen = true;
|
||||
|
||||
private void DrawerToggle()
|
||||
{
|
||||
drawerOpen = !drawerOpen;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user