forked from AcaMate/AcaMate_Web
[✨] 회원가입 페이지
1. 주소 (카카오 주소 검색) 팝업 연동 및 데이터 받아오기 2. 생일 Date Picker 띄우고 데이터 받아오기 3. 전화번호 양식 만들기 4. TopNav 의 버튼들 색상 변경
This commit is contained in:
parent
c178a17c04
commit
f3fee47c28
|
@ -5,71 +5,119 @@
|
||||||
<div class="layout-container flex h-full grow flex-col">
|
<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="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">
|
<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 class="text-text-title tracking-light text-[28px] font-bold leading-tight px-4 text-center pb-3 pt-5">
|
||||||
회원가입</h2>
|
회원가입</h2>
|
||||||
<p class="text-red-600 font-normal text-xs text-right px-4">* 는 필수 사항입니다.</p>
|
<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">
|
<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">
|
<label class="flex flex-col min-w-40 flex-1">
|
||||||
<p class="text-[#121416] text-base font-medium leading-normal pb-2">이름
|
<p class="text-text-title text-base font-medium leading-normal pb-2">이름
|
||||||
<span class="text-red-600">*</span>
|
<span class="text-red-600">*</span>
|
||||||
</p>
|
</p>
|
||||||
<input
|
<input
|
||||||
pattern="\d{16}"
|
pattern="\d{16}"
|
||||||
maxlength="16"
|
maxlength="16"
|
||||||
placeholder="실명을 입력해주세요. 최대 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"
|
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"
|
||||||
value="@name"
|
@bind-value="@name"
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex max-w-[480px] flex-wrap items-end gap-4 px-4 py-3">
|
<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">
|
<label class="flex flex-col min-w-40 flex-1">
|
||||||
<p class="text-[#121416] text-base font-medium leading-normal pb-2">생일</p>
|
<p class="text-text-title text-base font-medium leading-normal pb-2">생일</p>
|
||||||
<input
|
<input
|
||||||
type="date"
|
type="date"
|
||||||
|
@ref="dateInputRef"
|
||||||
placeholder="YYYYMMDD"
|
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"
|
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"
|
@bind-value="birth"
|
||||||
@bind-value:event="oninput"
|
@onclick="OpenDatePicker"
|
||||||
readonly
|
readonly
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</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">
|
<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">
|
<label class="flex flex-col min-w-40 flex-1">
|
||||||
<p class="text-[#121416] text-base font-medium leading-normal pb-2">Email</p>
|
<p class="text-text-title text-base font-medium leading-normal pb-2">E-Mail
|
||||||
|
<span class="text-red-600">*</span>
|
||||||
|
</p>
|
||||||
<input
|
<input
|
||||||
placeholder="Enter your email"
|
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"
|
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"
|
||||||
value=""
|
@bind-value="email"/>
|
||||||
/>
|
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex max-w-[480px] flex-wrap items-end gap-4 px-4 py-3">
|
<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">
|
<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>
|
<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
|
<input
|
||||||
placeholder="(XXX) XXX-XXXX"
|
maxlength="3"
|
||||||
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"
|
pattern="\d{3}"
|
||||||
value=""
|
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>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex max-w-[480px] flex-wrap items-end gap-4 px-4 py-3">
|
<div class="flex flex-col max-w-[480px] flex-wrap items-end gap-4 px-4 py-3">
|
||||||
<label class="flex flex-col min-w-40 flex-1">
|
<label class="flex text-left w-full text-text-title text-base font-medium leading-normal">주소
|
||||||
<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>
|
</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>
|
||||||
<div class="flex px-4 py-3">
|
<div class="flex px-4 py-3">
|
||||||
<button
|
<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]"
|
@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>
|
<span class="truncate">Register</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -1,27 +1,79 @@
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
using Microsoft.JSInterop;
|
using Microsoft.JSInterop;
|
||||||
|
using System.Text.Json;
|
||||||
|
|
||||||
namespace Front.Program.Views.Project;
|
namespace Front.Program.Views.Project;
|
||||||
|
|
||||||
public partial class Register : ComponentBase
|
public partial class Register : ComponentBase
|
||||||
{
|
{
|
||||||
[Inject] IJSRuntime JS { get; set; }
|
[Inject] IJSRuntime JS { get; set; }
|
||||||
private string name;
|
[Inject] private NavigationManager NavigationManager { get; set; } = default!;
|
||||||
private DateTime birth = DateTime.Now;
|
|
||||||
private string email;
|
private ElementReference dateInputRef;
|
||||||
private string phone;
|
|
||||||
private string address;
|
private string name = "";
|
||||||
|
private DateTime? birth;
|
||||||
|
private string email = "";
|
||||||
|
private string phone = "";
|
||||||
|
private string address = "";
|
||||||
|
private string detailAddress = "";
|
||||||
|
|
||||||
|
|
||||||
// private async Task ClickedCalendar()
|
private string phonePart1 = "";
|
||||||
// {
|
private string phonePart2 = "";
|
||||||
// // var input = e.Value?.ToString() ?? string.Empty;
|
private string phonePart3 = "";
|
||||||
// // if (input.All(c => c >= '0' && c <= '9') && input.Length <= 8)
|
|
||||||
// // {
|
private void SubmitPhone()
|
||||||
// // birth = new string(input.Where(char.IsDigit).Take(8).ToArray());
|
{
|
||||||
// // }
|
if (phonePart1.Length == 3 && phonePart2.Length == 4 && phonePart3.Length == 4)
|
||||||
// await JS.InvokeVoidAsync("openDatePickerOnFocus", dateInput);
|
{
|
||||||
//
|
var fullPhone = $"{phonePart1}-{phonePart2}-{phonePart3}";
|
||||||
// Console.WriteLine($"Birth: {birth}");
|
Console.WriteLine($"입력된 전화번호: {fullPhone}");
|
||||||
// }
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
Console.WriteLine("전화번호를 올바르게 입력해주세요.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private void ConfirmData()
|
||||||
|
{
|
||||||
|
if (name == "" || phone == "" || address == "" || detailAddress == "")
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
Console.WriteLine($"{name} - {birth.ToString()} - {email} - {phone} - {address}");
|
||||||
|
}
|
||||||
|
|
||||||
|
private async Task OpenDatePicker()
|
||||||
|
{
|
||||||
|
if (birth==null) birth = DateTime.Now;
|
||||||
|
await JS.InvokeVoidAsync("openDatePicker", dateInputRef);
|
||||||
|
}
|
||||||
|
private void OnBirthChanged(ChangeEventArgs e)
|
||||||
|
{
|
||||||
|
Console.WriteLine($"선택된 생일: {birth}");
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
private DotNetObjectReference<Register> objRef;
|
||||||
|
|
||||||
|
protected override void OnInitialized()
|
||||||
|
{
|
||||||
|
objRef = DotNetObjectReference.Create(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected async Task OnClickAddress()
|
||||||
|
{
|
||||||
|
await JS.InvokeVoidAsync("openKakaoPostcodePopup", objRef);
|
||||||
|
}
|
||||||
|
|
||||||
|
[JSInvokable]
|
||||||
|
public void SetAddress(string roadAddress, string jibunAddress, string zonecode)
|
||||||
|
{
|
||||||
|
address = roadAddress;
|
||||||
|
Console.WriteLine($"SetAddress 호출됨: {roadAddress}, {jibunAddress}, {zonecode}");
|
||||||
|
StateHasChanged();
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -7,18 +7,17 @@
|
||||||
<div class="hidden md:flex flex-1 justify-end gap-8">
|
<div class="hidden md:flex flex-1 justify-end gap-8">
|
||||||
<div class="flex flex-1 justify-end gap-8">
|
<div class="flex flex-1 justify-end gap-8">
|
||||||
<div class="flex items-center gap-9">
|
<div class="flex items-center gap-9">
|
||||||
<a class="text-text-title font-medium leading-normal hover:text-blue-800" href="/about" @onclick="() => isOpen = !isOpen">About</a>
|
<a class="text-text-title font-medium leading-normal hover:text-blue-600" href="/about" @onclick="() => isOpen = !isOpen">About</a>
|
||||||
<a class="text-text-title font-medium leading-normal hover:text-blue-800" href="/join" @onclick="() => isOpen = !isOpen">Join</a>
|
<a class="text-text-title font-medium leading-normal hover:text-blue-600" href="/join" @onclick="() => isOpen = !isOpen">Join</a>
|
||||||
<a class="text-text-title font-medium leading-normal hover:text-blue-800" href="/new" @onclick="() => isOpen = !isOpen">What's New</a>
|
<a class="text-text-title font-medium leading-normal hover:text-blue-600" href="/new" @onclick="() => isOpen = !isOpen">What's New</a>
|
||||||
</div>
|
</div>
|
||||||
<button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 bg-blue-500 hover:bg-blue-800 text-white text-sm font-bold leading-normal tracking-[0.015em] mr-4"
|
<button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 bg-second-normal hover:bg-second-dark text-white text-sm font-bold leading-normal tracking-[0.015em] mr-4"
|
||||||
@onclick="OnClickLogin">
|
@onclick="OnClickLogin">
|
||||||
<span class="truncate">Get Started</span>
|
<span class="truncate">시작하기</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<button class="md:hidden mr-4" @onclick="OnClickMenuDown">
|
<button class="md:hidden mr-4" @onclick="OnClickMenuDown">
|
||||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
@ -29,13 +28,13 @@
|
||||||
@if (isOpen)
|
@if (isOpen)
|
||||||
{
|
{
|
||||||
<div class="md:hidden absolute top-16 left-0 w-full bg-white shadow z-50 transition-all duration-300">
|
<div class="md:hidden absolute top-16 left-0 w-full bg-white shadow z-50 transition-all duration-300">
|
||||||
<div class="flex flex-col items-start gap-4 p-4">
|
<div class="flex flex-col items-start gap-4 p-4 text-center">
|
||||||
<a class="block w-full gap-y-2 text-text-title font-medium leading-normal hover:text-blue-800" href="/about" @onclick="() => isOpen = !isOpen">About</a>
|
<a class="block w-full gap-y-2 text-text-title font-medium leading-normal hover:text-blue-600" href="/about" @onclick="() => isOpen = !isOpen">About</a>
|
||||||
<a class="block w-full gap-y-2 text-text-title font-medium leading-normal hover:text-blue-800" href="/join" @onclick="() => isOpen = !isOpen">Join</a>
|
<a class="block w-full gap-y-2 text-text-title font-medium leading-normal hover:text-blue-600" href="/join" @onclick="() => isOpen = !isOpen">Join</a>
|
||||||
<a class="block w-full gap-y-2 text-text-title font-medium leading-normal hover:text-blue-800" href="/new" @onclick="() => isOpen = !isOpen">What's New</a>
|
<a class="block w-full gap-y-2 text-text-title font-medium leading-normal hover:text-blue-600" href="/new" @onclick="() => isOpen = !isOpen">What's New</a>
|
||||||
<button class="flex w-full cursor-pointer items-center justify-center rounded-lg h-10 px-4 bg-blue-500 hover:bg-blue-800 text-white text-sm font-bold leading-normal tracking-[0.015em]"
|
<button class="flex w-full cursor-pointer items-center justify-center rounded-lg h-10 px-4 bg-second-normal hover:bg-second-dark text-white text-sm font-bold leading-normal tracking-[0.015em]"
|
||||||
@onclick="OnClickLogin">
|
@onclick="OnClickLogin">
|
||||||
<span class="truncate">Get Started</span>
|
<span class="truncate">시작하기</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -32,11 +32,15 @@
|
||||||
<button class="ml-4 text-red-600 font-bold dismiss">✕</button>
|
<button class="ml-4 text-red-600 font-bold dismiss">✕</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Blazor WASM 로딩 스크립트 -->
|
|
||||||
<script src="_framework/blazor.webassembly.js" autostart="false"></script>
|
|
||||||
<script src="scripts/scroll.js"></script>
|
<script src="scripts/scroll.js"></script>
|
||||||
<script src="scripts/apiSender.js"></script>
|
<script src="scripts/apiSender.js"></script>
|
||||||
<script src="scripts/jsCommonFunc.js"></script>
|
<script src="scripts/jsCommonFunc.js"></script>
|
||||||
|
<script src="scripts/kakao-postcode.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Blazor WASM 로딩 스크립트 -->
|
||||||
|
<script src="_framework/blazor.webassembly.js" autostart="false"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const MIN_LOADING_MS = 2700;
|
const MIN_LOADING_MS = 2700;
|
||||||
const loadingStart = performance.now();
|
const loadingStart = performance.now();
|
||||||
|
@ -71,5 +75,9 @@
|
||||||
document.cookie = name + '=; Max-Age=-99999999;';
|
document.cookie = name + '=; Max-Age=-99999999;';
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
39
wwwroot/kakao-postcode.html
Normal file
39
wwwroot/kakao-postcode.html
Normal file
|
@ -0,0 +1,39 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>주소검색</title>
|
||||||
|
<script src="https://spi.maps.daum.net/imap/map_js_init/postcode.v2.js"></script>
|
||||||
|
<script>
|
||||||
|
window.onload = function() {
|
||||||
|
var layer = document.getElementById('layer');
|
||||||
|
new daum.Postcode({
|
||||||
|
oncomplete: function(data) {
|
||||||
|
var jibunAddress = data.jibunAddress || data.autoJibunAddress || "";
|
||||||
|
var postData = {
|
||||||
|
roadAddress: data.roadAddress,
|
||||||
|
jibunAddress: jibunAddress,
|
||||||
|
zonecode: data.zonecode,
|
||||||
|
};
|
||||||
|
window.opener.postMessage({
|
||||||
|
roadAddress: data.roadAddress,
|
||||||
|
jibunAddress: data.jibunAddress,
|
||||||
|
zonecode: data.zonecode
|
||||||
|
}, window.location.origin);
|
||||||
|
window.close();
|
||||||
|
},
|
||||||
|
width: "100%",
|
||||||
|
height: "100%"
|
||||||
|
}).embed(layer);
|
||||||
|
layer.style.display = "block";
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
html, body { margin:0; padding:0; width:100vw; height:100vh; background:#fff; }
|
||||||
|
#layer { width:100vw; height:100vh; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="layer"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -1,6 +1,8 @@
|
||||||
window.openDatePickerOnNumber = function (element, event) {
|
window.openDatePicker = function (element) {
|
||||||
// 숫자 키(0~9) 입력 시 date picker 강제 오픈
|
if (element) {
|
||||||
if (event.keyCode >= 48 && event.keyCode <= 57) {
|
const wasReadOnly = element.readOnly;
|
||||||
element.showPicker && element.showPicker();
|
if (wasReadOnly) element.readOnly = false;
|
||||||
|
element.showPicker();
|
||||||
|
if (wasReadOnly) setTimeout(() => element.readOnly = true, 0);
|
||||||
}
|
}
|
||||||
};
|
};
|
28
wwwroot/scripts/kakao-postcode.js
Normal file
28
wwwroot/scripts/kakao-postcode.js
Normal file
|
@ -0,0 +1,28 @@
|
||||||
|
|
||||||
|
window.addEventListener("message", function (event) {
|
||||||
|
if (event.origin !== window.location.origin) return;
|
||||||
|
if (event.data && event.data.roadAddress) {
|
||||||
|
if (window.kakaoPostcodeDotNetRef) {
|
||||||
|
window.kakaoPostcodeDotNetRef.invokeMethodAsync(
|
||||||
|
"SetAddress",
|
||||||
|
event.data.roadAddress,
|
||||||
|
event.data.jibunAddress,
|
||||||
|
event.data.zonecode
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
window.getKakaoPostcodeResult = function () {
|
||||||
|
return window.kakaoPostcodeResult;
|
||||||
|
};
|
||||||
|
|
||||||
|
window.openKakaoPostcodePopup = function (dotNetObjRef) {
|
||||||
|
window.kakaoPostcodeResult = null;
|
||||||
|
window.kakaoPostcodeDotNetRef = dotNetObjRef;
|
||||||
|
window.open(
|
||||||
|
"/kakao-postcode.html",
|
||||||
|
"kakaoPostcodePopup",
|
||||||
|
"width=500,height=600,scrollbars=no,resizable=no"
|
||||||
|
);
|
||||||
|
};
|
Loading…
Reference in New Issue
Block a user