AcaMate_Web/Program/Views/Project/Register.razor

@page "/auth/register"
@inject IJSRuntime JSRuntime

<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">
      <div class="layout-content-container flex flex-col w-full 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 w-full flex-wrap items-end gap-4 px-4 py-3">
          <label class="flex flex-col w-full">
            <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 w-full flex-wrap items-end gap-4 px-4 py-3">
          <label class="flex flex-col w-full">
            <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 w-full flex-wrap items-end gap-4 px-4 py-3">
          <label class="flex flex-col w-full">
            <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 w-full flex-wrap items-end gap-4 px-4 py-3">
          <label class="flex flex-col w-full">
            <p class="text-text-title text-base font-medium leading-normal pb-2">전화번호</p>
            <div class="flex w-full max-w-[480px] items-center gap-2">
              <input
                maxlength="3"
                pattern="\d{3}"
                placeholder="010"
                class="form-input flex-1 min-w-0 h-12 text-center rounded-xl border border-[#dde0e3] bg-white focus:border-[#dde0e3] placeholder:text-[#6a7581] p-[15px] text-base font-normal leading-normal"
                @bind-value="phonePart1"
                inputmode="numeric"
                autocomplete="off"
                oninput="this.value = this.value.replace(/[^0-9]/g, '')"
              />
              <span class="self-center">-</span>
              <input
                maxlength="4"
                pattern="\d{4}"
                placeholder="1234"
                class="form-input flex-1 min-w-0 h-12 text-center rounded-xl border border-[#dde0e3] bg-white focus:border-[#dde0e3] placeholder:text-[#6a7581] p-[15px] text-base font-normal leading-normal"
                @bind-value="phonePart2"
                inputmode="numeric"
                autocomplete="off"
                oninput="this.value = this.value.replace(/[^0-9]/g, '')"
              />
              <span class="self-center">-</span>
              <input
                maxlength="4"
                pattern="\d{4}"
                placeholder="5678"
                class="form-input flex-1 min-w-0 h-12 text-center rounded-xl border border-[#dde0e3] bg-white focus:border-[#dde0e3] placeholder:text-[#6a7581] p-[15px] text-base font-normal leading-normal"
                @bind-value="phonePart3"
                inputmode="numeric"
                autocomplete="off"
                oninput="this.value = this.value.replace(/[^0-9]/g, '')"
              />
            </div>
          </label>
        </div>

        <div class="flex flex-col w-full gap-4 px-4 py-3">
          <label class="flex flex-col 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">회원가입</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>