forked from AcaMate/AcaMate_Web
[✨] 회원가입 기능
1. sns 로그인 작업 후 회원 없는 경우 회원가입 로직으로 전환 2. 디자인 반영 3. 사용자에게 받을 정보 input box로 관리
This commit is contained in:
parent
a76e5fd574
commit
c178a17c04
|
|
@ -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);
|
||||
|
||||
}
|
||||
|
|
@ -23,7 +23,7 @@ public partial class Auth : ComponentBase
|
|||
|
||||
if (!string.IsNullOrEmpty(kakaoUrl))
|
||||
{
|
||||
NavigationManager.NavigateTo(kakaoUrl, true); // 카카오 인증 페이지로 이동
|
||||
NavigationManager.NavigateTo(kakaoUrl, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
80
Program/Views/Project/Register.razor
Normal file
80
Program/Views/Project/Register.razor
Normal file
|
|
@ -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>
|
||||
27
Program/Views/Project/Register.razor.cs
Normal file
27
Program/Views/Project/Register.razor.cs
Normal file
|
|
@ -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}");
|
||||
// }
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
6
wwwroot/scripts/jsCommonFunc.js
Normal file
6
wwwroot/scripts/jsCommonFunc.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
window.openDatePickerOnNumber = function (element, event) {
|
||||
// 숫자 키(0~9) 입력 시 date picker 강제 오픈
|
||||
if (event.keyCode >= 48 && event.keyCode <= 57) {
|
||||
element.showPicker && element.showPicker();
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user