[✨] 로그인 페이지 추가 및 기타 UI 변경

Front.csproj

@@ -28,7 +28,6 @@
     <ItemGroup>
       <Folder Include="Program\Models\" />
       <Folder Include="Program\ViewModels\" />
-      <Folder Include="Program\Views\Academy\" />
     </ItemGroup>
 
 

Program/Layout/MainLayout.razor

@@ -1,20 +1,50 @@
-@inherits LayoutComponentBase
+@* @inherits LayoutComponentBase *@
+@* *@
+@* *@
+@* <div class="min-h-screen bg-gray-50 text-gray-900"> *@
+@*     <TopBanner /> *@
+@*     <TopNav /> *@
+@* *@
+@*     <div class="flex flex-1"> *@
+@*         <SideNav /> *@
+@* *@
+@*         <main class="flex-1 p-6"> *@
+@*             $1$ <!-- Body는 URL 뒤에 입력할 페이지에 따라서 그거에 맞는 @page를 찾아서 열어준다. --> #1# *@
+@*             @Body *@
+@*         </main> *@
+@*     </div> *@
+@*      *@
+@*     <FloatingButton /> *@
+@*     <BottomNav /> *@
+@*     <Footer/> *@
+@* </div> *@
 
+@inherits LayoutComponentBase
 
-<div class="min-h-screen bg-gray-50 text-gray-900">
+<div class="min-h-screen flex flex-col bg-gray-50 text-gray-900">
+    
+    <!-- Top 영역 -->
     <TopBanner />
     <TopNav />
 
-    <div class="flex flex-1">
+    <!-- 본문 영역 -->
-        <SideNav />
+    <div class="flex flex-1 flex-col md:flex-row">
         
-        <main class="flex-1 p-6">
+        @* <!-- 사이드 메뉴 --> *@
-            @* <!-- Body는 URL 뒤에 입력할 페이지에 따라서 그거에 맞는 @page를 찾아서 열어준다. --> *@
+        @* <div class="hidden md:block md:w-64 bg-white shadow"> *@
+        @*     <SideNav /> *@
+        @* </div> *@
+
+        <!-- 본문 컨텐츠 -->
+        <main class="flex-1 p-4 sm:p-6 md:p-8">
             @Body
         </main>
     </div>
 
+    <!-- 플로팅 버튼 -->
     <FloatingButton />
+
+    <!-- 하단 메뉴 -->
     <BottomNav />
-    <Footer/>
+    <Footer />
 </div>

Program/Views/Academy/Auth.razor

@@ -0,0 +1,10 @@
+@page "/auth"
+
+<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+    <h1 class="text-2xl font-bold mb-4">로그인</h1>
+    <div class="w-full max-w-xs">
+        <input type="text" placeholder="아이디" class="mb-4 p-2 border border-gray-300 rounded w-full" />
+        <input type="password" placeholder="비밀번호" class="mb-4 p-2 border border-gray-300 rounded w-full" />
+        <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 w-full">로그인</button>
+    </div>
+</div>

Program/Views/Academy/Auth.razor.cs

@@ -0,0 +1,8 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Front.Program.Views.Academy;
+
+public partial class Auth : ComponentBase
+{
+    
+}

Program/Views/Project/About.razor

@@ -1,2 +1,16 @@
 @page "/about"
-<h3>About</h3>
+
+<div class="bg-blue-500 text-white p-4">
+    <h2 class="text-2xl font-bold">About Us</h2>
+    <p class="mt-2">We are a team of passionate developers.</p>
+    <p>이건 그냥 일반 텍스트야</p>
+    
+    @* 클릭시 onClick 이벤트 발생 *@
+    
+    
+    <button class="bg-blue-700 text-white px-4 py-2 rounded hover:bg-blue-800" 
+            @onclick="OnClickEvent">
+        Click Me
+    </button>
+    
+</div>

Program/Views/Project/About.razor.cs

@@ -4,4 +4,12 @@ namespace Front.Program.Views.Project;
 
 public partial class About : ComponentBase
 {
+    [Inject]
+    NavigationManager NavigationManager { get; set; } = default!;
+    
+    private void OnClickEvent()
+    {
+        // NavigationManager.NavigateTo("/redirectpage");
+        Console.WriteLine("Redirecting to redirect page");
+    }
 }

Program/Views/Project/RedirectPage.razor.cs

@@ -9,7 +9,6 @@ public partial class RedirectPage : ComponentBase
 
     protected override void OnInitialized()
     {
-        // Redirect to the desired URL
         NavigationManager.NavigateTo("/about",true);
     }
 }

Program/Views/Project/TopNav.razor

@@ -2,5 +2,10 @@
     <a href="#about" class="mx-2 text-gray-700 hover:text-blue-600">About</a>
     <a href="#join" class="mx-2 text-gray-700 hover:text-blue-600">Join</a>
     <a href="#notice" class="mx-2 text-gray-700 hover:text-blue-600">What’s New</a>
-    <a href="#login" class="ml-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Login</a>
+
+    <button class="ml-4 px-4 py-2 bg-red-600 text-white rounded hover:bg-blue-700"
+            @onclick="OnClickLogin">
+        Login
+    </button>
+
 </div>

Program/Views/Project/TopNav.razor.cs

@@ -1,7 +1,17 @@
 using Microsoft.AspNetCore.Components;
 
-namespace Front.Program.Views.Company;
+namespace Front.Program.Views.Project;
 
 public partial class TopNav : ComponentBase
 {
+ //로그인버튼을 누르면 페이지를 이동할거야
+    [Inject]
+    NavigationManager NavigationManager { get; set; } = default!;
+
+    public void OnClickLogin()
+    {
+        NavigationManager.NavigateTo("/auth");
+        // Console.WriteLine("Redirecting to redirect page");
+    }
+ 
 }

_Imports.razor

@@ -10,6 +10,6 @@
 @using Front.Program.Layout
 
 @using Front.Program.Views.Project
-@* @using Front.Program.Views.Academy *@
+@using Front.Program.Views.Academy