[✨] 카카오 로그인 구현 중

Program/Layout/MainLayout.razor

@@ -1,4 +1,4 @@
-@* @inherits LayoutComponentBase *@
+@inherits LayoutComponentBase
 @* *@
 @* *@
 @* <div class="min-h-screen bg-gray-50 text-gray-900"> *@
@@ -19,13 +19,14 @@
 @*     <Footer/> *@
 @* </div> *@
 
-@inherits LayoutComponentBase
-
 <div class="min-h-screen flex flex-col bg-gray-50 text-gray-900">
     
     <!-- Top 영역 -->
     @* <TopBanner /> *@
+    @if (!isHideTop)
+    {
         <TopNav />
+    }
 
     <!-- 본문 영역 -->
     <div class="flex flex-1 flex-col md:flex-row">

Program/Layout/MainLayout.razor.cs

@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Front.Program.Layout;
+
+public partial class MainLayout: LayoutComponentBase
+{
+    [Inject]
+    NavigationManager Navigation { get; set; } = default!;
+
+    protected bool isHideTop => Navigation.Uri.Contains("/auth");
+
+}

Program/Views/Project/Auth.razor

@@ -3,8 +3,10 @@
 <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 @onclick = "KakaoLogin" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 w-full">로그인</button>
+        <button type="button" class="w-full mb-4 p-2 rounded focus:outline-none" @onclick="KakaoLogin">
+            <img src="//k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg"
+                 alt="카카오 로그인"
+                 class="rounded w-full transition duration-150 hover:brightness-90" />
+        </button>
     </div>
 </div>

Program/Views/Project/Auth.razor.cs

@@ -1,3 +1,4 @@
+using Front.Program.Services;
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
 
@@ -7,10 +8,22 @@ public partial class Auth : ComponentBase
 {
     [Inject] NavigationManager NavigationManager { get; set; } = default!;
     [Inject] IJSRuntime JS { get; set; } = default!;
-    void KakaoLogin()
+    [Inject] CookieService Cookie {get; set;} = default!;
+    
+    public async Task KakaoLogin()
     {
-        // await JS
-        // Redirect to Kakao login page
-        NavigationManager.NavigateTo("/api/v1/in/user/kakao/auth", true);
+        var headerKey = "Web_AM_Connect_Key";
+        // var headerValue = await JS.InvokeAsync<string>("eval", "document.cookie.match(/Web_AM_Connect_Key=([^;]+)/)?.[1] || ''");
+        
+        // NavigationManager.NavigateTo("/api/v1/in/user/kakao/auth", true);
+        Cookie.GetCookieAsync(headerKey).ContinueWith(async task =>
+        {
+            var cookie = task.Result;
+            if (!string.IsNullOrEmpty(cookie))
+            {
+                await JS.InvokeVoidAsync("postWithHeader", "/api/v1/in/user/kakao/auth", "GET", headerKey, cookie);
+                
+            }
+        });
     }
 }

wwwroot/index.html

@@ -34,7 +34,8 @@
 
 <!-- Blazor WASM 로딩 스크립트 -->
 <script src="_framework/blazor.webassembly.js" autostart="false"></script>
-
+<script src="scripts/scroll.js"></script>
+<script src="scripts/apiSender.js"></script>
 <script>
   const MIN_LOADING_MS = 2700;
   const loadingStart = performance.now();

wwwroot/scripts/apiSender.js

@@ -0,0 +1,12 @@
+window.postWithHeader = function(url, method, headerKey, headerValue) {
+    fetch(url, {
+        method: method,
+        headers: {
+            [headerKey] : headerValue
+        }
+    }).then(res => {
+        if (res.redirected) {
+            window.location.href = res.url;
+        }
+    });
+};

wwwroot/scripts/scroll.js

@@ -0,0 +1,3 @@
+window.scrollToDown = function (y = 0, behavior = "smooth") {
+    window.scrollTo({ top: y, behavior: behavior });
+};