[✨] 회원가입 기능

1. sns 로그인 작업 후 회원 없는 경우 회원가입 로직으로 전환
2. 디자인 반영
3. 사용자에게 받을 정보 input box로 관리

Program/Layout/MainLayout.razor.cs

@@ -7,6 +7,7 @@ public partial class MainLayout: LayoutComponentBase
     [Inject]
     NavigationManager Navigation { get; set; } = default!;
 
-    protected bool isHideTop => Navigation.Uri.Contains("/auth");
+    // protected bool isHideTop => Navigation.Uri.Contains("/auth");
+    protected bool isHideTop => Navigation.ToBaseRelativePath(Navigation.Uri).Equals("auth", StringComparison.OrdinalIgnoreCase);
 
 }

Program/Views/Project/Auth.razor.cs

@@ -23,7 +23,7 @@ public partial class Auth : ComponentBase
         
         if (!string.IsNullOrEmpty(kakaoUrl))
         {
-            NavigationManager.NavigateTo(kakaoUrl, true); // 카카오 인증 페이지로 이동
+            NavigationManager.NavigateTo(kakaoUrl, true); 
         }
     }
 }

Program/Views/Project/Register.razor

@@ -0,0 +1,80 @@
+@page "/auth/register"
+
+<div class="relative flex size-full min-h-screen flex-col bg-white group/design-root overflow-x-hidden"
+     style='font-family: "Public Sans", "Noto Sans", sans-serif;'>
+  <div class="layout-container flex h-full grow flex-col">
+    <div class="flex flex-1 justify-center py-5 md:px-40 md:justify-center">
+      <div class="layout-content-container flex flex-col w-[512px] max-w-[480px] py-5 flex-1">
+        <h2 class="text-[#121416] tracking-light text-[28px] font-bold leading-tight px-4 text-center pb-3 pt-5">
+          회원가입</h2>
+        <p class="text-red-600 font-normal text-xs text-right px-4">* 는 필수 사항입니다.</p>
+        <div class="flex max-w-[480px] flex-wrap items-end gap-4 px-4 py-3">
+          <label class="flex flex-col min-w-40 flex-1">
+            <p class="text-[#121416] text-base font-medium leading-normal pb-2">이름
+              <span class="text-red-600">*</span>
+            </p>
+            <input
+              pattern="\d{16}"
+              maxlength="16"
+              placeholder="실명을 입력해주세요. 최대 16글자"
+              class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-[#121416] focus:outline-0 focus:ring-0 border border-[#dde0e3] bg-white focus:border-[#dde0e3] h-14 placeholder:text-[#6a7581] p-[15px] text-base font-normal leading-normal"
+              value="@name"
+            />
+          </label>
+        </div>
+        <div class="flex max-w-[480px] flex-wrap items-end gap-4 px-4 py-3">
+          <label class="flex flex-col min-w-40 flex-1">
+            <p class="text-[#121416] text-base font-medium leading-normal pb-2">생일</p>
+            <input
+              type="date"
+              placeholder="YYYYMMDD"
+              class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-[#121416] focus:outline-0 focus:ring-0 border border-[#dde0e3] bg-white focus:border-[#dde0e3] h-14 placeholder:text-[#6a7581] p-[15px] text-base font-normal leading-normal"
+              @bind-value="birth"
+              @bind-value:event="oninput"
+              readonly
+            />
+          </label>
+        </div>
+        <p class="px-4 py-2 text-sm text-gray-500">선택한 생일: @birth.ToString("yyyy-MM-dd")</p>
+        
+        <div class="flex max-w-[480px] flex-wrap items-end gap-4 px-4 py-3">
+          <label class="flex flex-col min-w-40 flex-1">
+            <p class="text-[#121416] text-base font-medium leading-normal pb-2">Email</p>
+            <input
+              placeholder="Enter your email"
+              class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-[#121416] focus:outline-0 focus:ring-0 border border-[#dde0e3] bg-white focus:border-[#dde0e3] h-14 placeholder:text-[#6a7581] p-[15px] text-base font-normal leading-normal"
+              value=""
+            />
+          </label>
+        </div>
+        <div class="flex max-w-[480px] flex-wrap items-end gap-4 px-4 py-3">
+          <label class="flex flex-col min-w-40 flex-1">
+            <p class="text-[#121416] text-base font-medium leading-normal pb-2">Phone Number</p>
+            <input
+              placeholder="(XXX) XXX-XXXX"
+              class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-[#121416] focus:outline-0 focus:ring-0 border border-[#dde0e3] bg-white focus:border-[#dde0e3] h-14 placeholder:text-[#6a7581] p-[15px] text-base font-normal leading-normal"
+              value=""
+            />
+          </label>
+        </div>
+        <div class="flex max-w-[480px] flex-wrap items-end gap-4 px-4 py-3">
+          <label class="flex flex-col min-w-40 flex-1">
+            <p class="text-[#121416] text-base font-medium leading-normal pb-2">Address</p>
+            <input
+              placeholder="Enter your address"
+              class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-[#121416] focus:outline-0 focus:ring-0 border border-[#dde0e3] bg-white focus:border-[#dde0e3] h-14 placeholder:text-[#6a7581] p-[15px] text-base font-normal leading-normal"
+              value=""
+            />
+          </label>
+        </div>
+        <div class="flex px-4 py-3">
+          <button
+            class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-xl h-10 px-4 flex-1 bg-[#3f7fbf] text-white text-sm font-bold leading-normal tracking-[0.015em]"
+          >
+            <span class="truncate">Register</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

Program/Views/Project/Register.razor.cs

@@ -0,0 +1,27 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace Front.Program.Views.Project;
+
+public partial class Register : ComponentBase
+{
+    [Inject] IJSRuntime JS { get; set; }
+    private string name;
+    private DateTime birth = DateTime.Now;
+    private string email;
+    private string phone;
+    private string address;
+    
+
+    // private async Task ClickedCalendar()
+    // {
+    //     // var input = e.Value?.ToString() ?? string.Empty;
+    //     // if (input.All(c => c >= '0' && c <= '9') && input.Length <= 8)
+    //     // {
+    //     //     birth = new string(input.Where(char.IsDigit).Take(8).ToArray());
+    //     // }
+    //     await JS.InvokeVoidAsync("openDatePickerOnFocus", dateInput);
+    //
+    //     Console.WriteLine($"Birth: {birth}");
+    // }
+}

wwwroot/index.html

@@ -36,6 +36,7 @@
 <script src="_framework/blazor.webassembly.js" autostart="false"></script>
 <script src="scripts/scroll.js"></script>
 <script src="scripts/apiSender.js"></script>
+<script src="scripts/jsCommonFunc.js"></script>
 <script>
   const MIN_LOADING_MS = 2700;
   const loadingStart = performance.now();

wwwroot/scripts/apiSender.js

@@ -10,3 +10,14 @@ window.postWithHeader = function(url, method, headerKey, headerValue) {
         }
     });
 };
+
+window.fetchWithHeaderAndReturnUrl = async function(url, method, headerKey, headerValue) {
+    const response = await fetch(url, {
+        method: method,
+        headers: {
+            [headerKey]: headerValue
+        }
+    });
+    const data = await response.json();
+    return data.url;
+};

wwwroot/scripts/jsCommonFunc.js

@@ -0,0 +1,6 @@
+window.openDatePickerOnNumber = function (element, event) {
+    // 숫자 키(0~9) 입력 시 date picker 강제 오픈
+    if (event.keyCode >= 48 && event.keyCode <= 57) {
+        element.showPicker && element.showPicker();
+    }
+};