[성현모] Search UI 추가

Projects/Config/WebClient.Tra.Config.json

@@ -1,5 +1,5 @@
 {
-  "ApplicationName": "KIP Web Tools",
+  "ApplicationName": "CPXV2 Web Tools",
   "Server": {
     "Address": "https://*",
     "Port": 11000,

Projects/WebClient/Web.Tra/Components/App.razor

@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="app.css" />
     <link rel="stylesheet" href="Web.Tra.styles.css" />
     <link rel="icon" type="image/png" href="favicon.png" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=search" />
     <HeadOutlet />
     <RadzenTheme Theme="material-dark" @rendermode="InteractiveServer" />
 </head>

Projects/WebClient/Web.Tra/Components/Layout/MainLayout.razor

@@ -3,34 +3,40 @@
 
 @inherits LayoutComponentBase
 @inject ConfigService<WebClientConfig> configService
+@inject NavigationManager NavigationManager
 
 <RadzenComponents @rendermode="InteractiveServer" />
 <RadzenLayout>
-    <RadzenHeader>
+    <RadzenHeader Style="height: 5rem; font-size: 2rem;" class="rz-px-5">
-        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
+        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.SpaceBetween" Gap="0">
-            <RadzenSidebarToggle Click="@(() => sidebarExpanded = !sidebarExpanded)" />
+            <RadzenStack Style="height: 5rem;" Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Center">
-            <RadzenLabel Text="@configService?.GetConfig()?.ApplicationName" />
+                <RadzenLabel Text="@($"{ApplicationName}")" />
+            </RadzenStack>
+            <div class="rz-mr-2">
+                <RadzenAppearanceToggle />
+            </div>            
         </RadzenStack>
     </RadzenHeader>
-    <RadzenSidebar @bind-Expanded="@sidebarExpanded">
+    <RadzenBody Style="margin:0; padding:0;">
-        <RadzenPanelMenu>
-            <RadzenPanelMenuItem Text="Home" Icon="home" Path="/" />
-            <RadzenPanelMenuItem Text="TRA" Icon="assessment" Path="/tra" />
-        </RadzenPanelMenu>
-       
-    </RadzenSidebar>
-    <RadzenBody>
-        <div class="rz-p-4">
         @Body
-        </div>
     </RadzenBody>       
-    <RadzenFooter>
-        Footer
-    </RadzenFooter>
 </RadzenLayout>
 
 @code {
     bool sidebarExpanded = true;
+    string ApplicationName = string.Empty;
+    string Page = string.Empty;
+
+    protected override async Task OnInitializedAsync()
+    {
+        ApplicationName = configService?.GetConfig()?.ApplicationName;
+        Page = NavigationManager.ToBaseRelativePath(NavigationManager.Uri);
+    }
+
+    private void OnClickMenu(MenuItemEventArgs args)
+    {
+        Page = args.Text;
+    }
 }
 
 

Projects/WebClient/Web.Tra/Components/Pages/TRA.razor

@@ -2,11 +2,36 @@
 @using Web.Tra.Services
 @inject CPXV2LogService CPXV2LogService
 
-<h3>TRA</h3>
+<RadzenStack Style="width:100%; background-color:var(--rz-primary-lighter);" class="rz-border-bottom rz-p-3" Orientation="Orientation.Horizontal" AlignItems="AlignItems.Start" JustifyContent="JustifyContent.Start">
+    <!--Search Block-->
+    <RadzenStack Style="height:12rem; width:fit-content;" class="rz-border-right rz-pr-5" Orientation="Orientation.Horizontal" AlignItems="AlignItems.Start" JustifyContent="JustifyContent.Start">
+        <!--Date Picker Block-->
+        <RadzenStack Style="font-size:1.3rem;" Orientation="Orientation.Vertical" AlignItems="AlignItems.Start" JustifyContent="JustifyContent.Center">
+            <RadzenStack Style="width: 20rem;" Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween">
+                <RadzenLabel Text="Begin"></RadzenLabel>
+                <RadzenDatePicker TValue="DateTime"></RadzenDatePicker>
+            </RadzenStack>
+            <RadzenStack Style="width:20rem;" Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween">
+                <RadzenLabel Text="End"></RadzenLabel>
+                <RadzenDatePicker TValue="DateTime"></RadzenDatePicker>
+            </RadzenStack>
+        </RadzenStack>
+             
+        <RadzenStack Style="cursor: pointer;" class="" Orientation="Orientation.Vertical" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Start" @onclick="@OnSearch">
+            <RadzenIcon IconStyle="IconStyle.Warning" Style="font-size: 3.5rem; font-weight:400;" Icon="search"></RadzenIcon>
+            <RadzenLabel Style="font-size: 1.2rem; cursor:pointer;" Text="Search"></RadzenLabel>
+        </RadzenStack>
+    </RadzenStack>
+  
+</RadzenStack>
 
 @code {
     protected override async Task OnInitializedAsync()
     {        
-        CPXV2LogService.Test();   
+    }
+
+    private async Task OnSearch()
+    {
+        await CPXV2LogService.Test();
     }
 }

Projects/WebClient/Web.Tra/wwwroot/app.css

@@ -1,5 +1,6 @@
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 62.5% !important;
 }
 
 a, .btn-link {