익명 제출 안내 표시 위치 조정
This commit is contained in:
@@ -233,6 +233,14 @@ h1 {
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.guest-fields__anonymous {
|
||||
color: #a64635;
|
||||
font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.file-picker input[type="file"] {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
+16
-1
@@ -15,12 +15,13 @@
|
||||
|
||||
<form class="upload-panel" method="post" action="/r/{{slug}}" enctype="multipart/form-data">
|
||||
<p class="upload-panel__today">오늘의 순간</p>
|
||||
<p class="upload-panel__notice">※ 연락처는 상품 전달 목적 외에는 사용되지 않으며, 전달 후 삭제됩니다.<br>※ 익명 제출 시 경품 대상에서 제외됩니다.</p>
|
||||
<p class="upload-panel__notice">※ 연락처는 상품 전달 목적 외에는 사용되지 않으며, 전달 후 삭제됩니다.</p>
|
||||
|
||||
<div class="guest-fields" aria-label="업로드하시는 분 정보">
|
||||
<label>
|
||||
<span>연락처</span>
|
||||
<input type="tel" name="guestPhone" autocomplete="tel" inputmode="tel" value="010-">
|
||||
<span class="guest-fields__anonymous" hidden>※ 익명 제출 시 추첨 대상에서 제외됩니다.</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -54,6 +55,8 @@
|
||||
<script>
|
||||
document.querySelectorAll(".upload-panel").forEach((form) => {
|
||||
const input = form.querySelector('input[type="file"][name="files"]');
|
||||
const guestPhone = form.querySelector('input[name="guestPhone"]');
|
||||
const anonymousNotice = form.querySelector(".guest-fields__anonymous");
|
||||
const submit = form.querySelector('button[type="submit"][aria-label="업로드"]');
|
||||
const summary = form.querySelector(".file-summary");
|
||||
const empty = form.querySelector(".file-summary__empty");
|
||||
@@ -86,6 +89,14 @@
|
||||
scrollTopButton.hidden = list.scrollHeight <= list.clientHeight || list.scrollTop < 8;
|
||||
};
|
||||
|
||||
const hasValidPhone = () => /^010\d{8}$/.test((guestPhone?.value || "").replace(/\D/g, ""));
|
||||
|
||||
const updateAnonymousNotice = () => {
|
||||
if (!anonymousNotice) return;
|
||||
const hasFiles = Boolean(input?.files && input.files.length > 0);
|
||||
anonymousNotice.hidden = !hasFiles || hasValidPhone();
|
||||
};
|
||||
|
||||
input?.addEventListener("change", () => {
|
||||
const files = Array.from(input.files || []);
|
||||
clearPreviews();
|
||||
@@ -98,6 +109,7 @@
|
||||
submit.disabled = true;
|
||||
submit.hidden = true;
|
||||
updateScrollTopButton();
|
||||
updateAnonymousNotice();
|
||||
setStatus("");
|
||||
return;
|
||||
}
|
||||
@@ -135,9 +147,12 @@
|
||||
submit.hidden = false;
|
||||
list.scrollTop = 0;
|
||||
requestAnimationFrame(updateScrollTopButton);
|
||||
updateAnonymousNotice();
|
||||
setStatus(`${files.length}개 파일을 선택했어요.`);
|
||||
});
|
||||
|
||||
guestPhone?.addEventListener("input", updateAnonymousNotice);
|
||||
|
||||
list.addEventListener("scroll", updateScrollTopButton);
|
||||
scrollTopButton?.addEventListener("click", () => {
|
||||
list.scrollTo({ top: 0, behavior: "smooth" });
|
||||
|
||||
+1
-1
@@ -66,7 +66,7 @@ function cleanGuestField(value) {
|
||||
|
||||
function submissionFolderName(guestPhone) {
|
||||
const phone = cleanGuestField(guestPhone).replace(/[^\d]/g, "");
|
||||
return phone || "익명";
|
||||
return /^010\d{8}$/.test(phone) ? phone : "익명";
|
||||
}
|
||||
|
||||
function normalizeExts(value) {
|
||||
|
||||
Reference in New Issue
Block a user