design dashboard 1

HelloBlazorServer/HelloBlazorServer/Components/Layout/NavMenu.razor

@@ -14,7 +14,7 @@
     <nav class="flex-column">
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
+                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Dashboard
             </NavLink>
         </div>
 

HelloBlazorServer/HelloBlazorServer/Components/Pages/Home.razor

@@ -1,7 +1,105 @@
 @page "/"
+@inject IDatabase<GangnamguPopulation> DatabaseService
 
-<PageTitle>Home</PageTitle>
+@rendermode RenderMode.InteractiveServer
 
-<h1>Hello, world!</h1>
+<PageTitle>G.P.L | Dashboard</PageTitle>
 
-Welcome to your new app.
+<RadzenText TextStyle="TextStyle.DisplayH4">대시보드</RadzenText>
+
+<div class="row my-1">
+    <div class="col-sm-12 col-lg-12">
+        <RadzenCard>
+            <RadzenLabel Text="😊 GPL에 방문해 주셔서 감사합니다 !" />
+        </RadzenCard>
+    </div>
+</div>
+<div class="row my-5">
+    <RadzenText TextStyle="TextStyle.DisplayH6">💡 자세히 찾아보기</RadzenText>
+    <RadzenStack Orientation="Orientation.Horizontal">
+        <RadzenDropDown Data="@_administrativeAgency" @bind-Value="@_value"/>
+        <RadzenButton Click="SearchDetail">조회</RadzenButton>
+    </RadzenStack>
+</div>
+
+<div class="row my-5">
+    <div class="col-sm-12 col-lg-2">
+        <RadzenCard>
+            <RadzenStack>
+                <RadzenText TextStyle="TextStyle.DisplayH6">총 인구</RadzenText>
+                <RadzenText TextStyle="TextStyle.DisplayH4" Style="color:darkred" TextAlign="TextAlign.Center">@_selectTotalPopulation</RadzenText>
+            </RadzenStack>
+        </RadzenCard>
+    </div>
+    <div class="col-sm-12 col-lg-2">
+        <RadzenCard>
+            <RadzenStack>
+                <RadzenText TextStyle="TextStyle.DisplayH6">남성 인구</RadzenText>
+                <RadzenText TextStyle="TextStyle.DisplayH4" Style="color:darkred" TextAlign="TextAlign.Center">@_selectMalePopulation</RadzenText>
+            </RadzenStack>
+        </RadzenCard>
+    </div>
+    <div class="col-sm-12 col-lg-2">
+        <RadzenCard>
+            <RadzenStack>
+                <RadzenText TextStyle="TextStyle.DisplayH6">여성 인구</RadzenText>
+                <RadzenText TextStyle="TextStyle.DisplayH4" Style="color:darkred" TextAlign="TextAlign.Center">@_selectFemalePopulation</RadzenText>
+            </RadzenStack>
+        </RadzenCard>
+    </div>
+    <div class="col-sm-12 col-lg-2">
+        <RadzenCard>
+            <RadzenStack>
+                <RadzenText TextStyle="TextStyle.DisplayH6">성비</RadzenText>
+                <RadzenText TextStyle="TextStyle.DisplayH4" Style="color:darkred" TextAlign="TextAlign.Center">@_selectSexRatio</RadzenText>
+            </RadzenStack>
+        </RadzenCard>
+    </div>
+    <div class="col-sm-12 col-lg-2">
+        <RadzenCard>
+            <RadzenStack>
+                <RadzenText TextStyle="TextStyle.DisplayH6">세대수</RadzenText>
+                <RadzenText TextStyle="TextStyle.DisplayH4" Style="color:darkred" TextAlign="TextAlign.Center">@_selectNumberOfHouseholds</RadzenText>
+            </RadzenStack>
+        </RadzenCard>
+    </div>
+    <div class="col-sm-12 col-lg-2">
+        <RadzenCard>
+            <RadzenStack>
+                <RadzenText TextStyle="TextStyle.DisplayH6">세대당 인구</RadzenText>
+                <RadzenText TextStyle="TextStyle.DisplayH4" Style="color:darkred" TextAlign="TextAlign.Center">@_selectPerHousehold</RadzenText>
+            </RadzenStack>
+        </RadzenCard>
+    </div>
+</div>
+
+@code {
+    private IEnumerable<GangnamguPopulation> _populations;
+    private IEnumerable<string>? _administrativeAgency;
+
+    private string _value = string.Empty;
+    private string _selectTotalPopulation = string.Empty;
+    private string _selectMalePopulation = string.Empty;
+    private string _selectFemalePopulation = string.Empty;
+    private string _selectSexRatio = string.Empty;
+    private string _selectNumberOfHouseholds = string.Empty;
+    private string _selectPerHousehold = string.Empty;
+
+    protected override async Task OnInitializedAsync()
+    {
+        _populations = await DatabaseService.GetAsync();
+        _administrativeAgency = _populations.Select(c => c.AdministrativeAgency).ToList();
+    }
+
+    private void SearchDetail()
+    {
+        var data = _populations.Where(c => c.AdministrativeAgency == _value).FirstOrDefault();
+
+        _selectTotalPopulation = data.TotalPopulation.ToString();
+        _selectMalePopulation = data.MalePopulation.ToString();
+        _selectFemalePopulation = data.FemalePopulation.ToString();
+        _selectSexRatio = data.SexRatio.ToString();
+        _selectNumberOfHouseholds = data.NumberOfHouseholds.ToString();
+        _selectPerHousehold = data.NumberOfPeoplePerHousehold.ToString();
+    }
+}

HelloBlazorServer/HelloBlazorServer/Components/Pages/Home.razor.css

@@ -0,0 +1,2 @@
+body {
+}