forked from AcaMate/AcaMate_Web
1. 주소 (카카오 주소 검색) 팝업 연동 및 데이터 받아오기 2. 생일 Date Picker 띄우고 데이터 받아오기 3. 전화번호 양식 만들기 4. TopNav 의 버튼들 색상 변경
129 lines
6.5 KiB
Plaintext
129 lines
6.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-text-title 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-text-title 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-text-title 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="@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-text-title text-base font-medium leading-normal pb-2">생일</p>
|
|
<input
|
|
type="date"
|
|
@ref="dateInputRef"
|
|
placeholder="YYYYMMDD"
|
|
class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-text-title 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"
|
|
@onclick="OpenDatePicker"
|
|
readonly
|
|
/>
|
|
</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-text-title text-base font-medium leading-normal pb-2">E-Mail
|
|
<span class="text-red-600">*</span>
|
|
</p>
|
|
<input
|
|
placeholder="Enter your email"
|
|
class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-text-title 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="email"/>
|
|
</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-text-title text-base font-medium leading-normal pb-2">전화번호</p>
|
|
@* <input *@
|
|
@* placeholder="(XXX) XXX-XXXX" *@
|
|
@* class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-text-title 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="phone" *@
|
|
@* /> *@
|
|
<div class="flex w-full items-center justify-center gap-2 px-4">
|
|
<input
|
|
maxlength="3"
|
|
pattern="\d{3}"
|
|
placeholder="010"
|
|
class="form-input w-20 h-12 text-center border border-[#dde0e3] rounded-md"
|
|
@bind-value="phonePart1"
|
|
inputmode="numeric"
|
|
autocomplete="off"
|
|
/>
|
|
<span class="self-center">-</span>
|
|
<input
|
|
maxlength="4"
|
|
pattern="\d{4}"
|
|
placeholder="1234"
|
|
class="form-input w-20 h-12 text-center border border-[#dde0e3] rounded-md"
|
|
@bind-value="phonePart2"
|
|
inputmode="numeric"
|
|
autocomplete="off"
|
|
/>
|
|
<span class="self-center">-</span>
|
|
<input
|
|
maxlength="4"
|
|
pattern="\d{4}"
|
|
placeholder="5678"
|
|
class="form-input w-20 h-12 text-center border border-[#dde0e3] rounded-md"
|
|
@bind-value="phonePart3"
|
|
inputmode="numeric"
|
|
autocomplete="off"
|
|
/>
|
|
|
|
<button class="ml-4 h-12 px-6 bg-blue-500 text-white rounded-md font-bold" @onclick="SubmitPhone"
|
|
style="min-width: 80px;">
|
|
확인
|
|
</button>
|
|
</div>
|
|
|
|
</label>
|
|
</div>
|
|
<div class="flex flex-col max-w-[480px] flex-wrap items-end gap-4 px-4 py-3">
|
|
<label class="flex text-left w-full text-text-title text-base font-medium leading-normal">주소
|
|
</label>
|
|
<input
|
|
placeholder="눌러서 주소를 선택하세요."
|
|
class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-text-title focus:outline-0 focus:ring-0 border border-[#dde0e3] bg-white focus:border-[#dde0e3] h-12 placeholder:text-[#6a7581] p-[12px] text-base font-normal leading-normal"
|
|
@onclick="OnClickAddress"
|
|
@bind-value="address"
|
|
readonly
|
|
/>
|
|
@if (address != "")
|
|
{
|
|
<input
|
|
placeholder="상세주소를 입력하세요."
|
|
class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-xl text-text-title focus:outline-0 focus:ring-0 border border-[#dde0e3] bg-white focus:border-[#dde0e3] h-12 placeholder:text-[#6a7581] p-[12px] text-base font-normal leading-normal"
|
|
@bind-value="detailAddress"
|
|
/>
|
|
}
|
|
|
|
</div>
|
|
<div class="flex px-4 py-3">
|
|
<button
|
|
@onclick="ConfirmData"
|
|
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-second-normal hover:bg-second-dark text-white text-sm font-bold leading-normal tracking-[0.015em]"
|
|
>
|
|
<span class="truncate">Register</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|