AcaMate_Web/Program/Views/Project/Register.razor
Seonkyu.kim c178a17c04 [] 회원가입 기능
1. sns 로그인 작업 후 회원 없는 경우 회원가입 로직으로 전환
2. 디자인 반영
3. 사용자에게 받을 정보 input box로 관리
2025-05-30 17:53:24 +09:00

81 lines
4.5 KiB
Plaintext

@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>