From 11019c7e0b987b3e109d0e817043efca5a49bfd6 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sat, 4 Jul 2026 02:40:55 +0900
Subject: [PATCH] improvement: add client-side phone number masking and
 validation

- Add real-time phone number formatting (XXX-XXXX-XXXX pattern)
- Validate phone length (10-11 digits) before form submission
- Show validation error message to user
- Only numeric input allowed with auto-formatting
- Improves UX: users see formatted result immediately

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 src/TaxBaik.Web/Pages/Contact.cshtml | 63 +++++++++++++++++++++++++++-
 1 file changed, 61 insertions(+), 2 deletions(-)

diff --git a/src/TaxBaik.Web/Pages/Contact.cshtml b/src/TaxBaik.Web/Pages/Contact.cshtml
index f942d2b..393e63c 100644
--- a/src/TaxBaik.Web/Pages/Contact.cshtml
+++ b/src/TaxBaik.Web/Pages/Contact.cshtml
@@ -47,8 +47,11 @@
 
         <div class="mb-3">
             <label for="phone" class="form-label">전화번호 <span class="text-danger">*</span></label>
-            <input type="tel" class="form-control" id="phone" name="Phone" placeholder="010-0000-0000" required />
-            <small class="form-text text-muted">형식: 010-0000-0000</small>
+            <input type="tel" class="form-control" id="phone" name="Phone" placeholder="010-1234-5678" required maxlength="13" />
+            <small class="form-text text-muted">숫자만 입력하면 자동 포맷팅됩니다 (예: 01012345678 또는 010-1234-5678)</small>
+            <div id="phoneError" class="text-danger mt-2" style="display: none;">
+                10~11자리 숫자를 입력해주세요.
+            </div>
         </div>
 
         <div class="mb-3">
@@ -82,6 +85,62 @@
         <button type="submit" class="btn btn-primary btn-lg w-100">상담신청</button>
     </form>
 
+    <script>
+        const phoneInput = document.getElementById('phone');
+        const phoneError = document.getElementById('phoneError');
+        const contactForm = document.getElementById('contactForm');
+
+        // 실시간 전화번호 마스킹
+        phoneInput.addEventListener('input', (e) => {
+            let value = e.target.value.replace(/\D/g, ''); // 숫자만 추출
+
+            if (value.length > 11) {
+                value = value.substring(0, 11); // 최대 11자리
+            }
+
+            // 포맷팅: XXX-XXXX-XXXX 또는 XXX-XXX-XXXX
+            if (value.length >= 10) {
+                if (value.length === 10) {
+                    value = `${value.substring(0, 3)}-${value.substring(3, 6)}-${value.substring(6)}`;
+                } else if (value.length === 11) {
+                    value = `${value.substring(0, 3)}-${value.substring(3, 7)}-${value.substring(7)}`;
+                }
+            } else if (value.length > 3) {
+                value = `${value.substring(0, 3)}-${value.substring(3)}`;
+            }
+
+            e.target.value = value;
+            validatePhone();
+        });
+
+        // 전화번호 검증
+        function validatePhone() {
+            const value = phoneInput.value.replace(/\D/g, '');
+            const isValid = value.length >= 10 && value.length <= 11;
+
+            if (!isValid && phoneInput.value.length > 0) {
+                phoneError.style.display = 'block';
+                phoneInput.classList.add('is-invalid');
+            } else {
+                phoneError.style.display = 'none';
+                phoneInput.classList.remove('is-invalid');
+            }
+
+            return isValid;
+        }
+
+        // 폼 제출 전 검증
+        contactForm.addEventListener('submit', (e) => {
+            if (!validatePhone()) {
+                e.preventDefault();
+                phoneInput.focus();
+            }
+        });
+
+        // 포커스 아웃 시 최종 검증
+        phoneInput.addEventListener('blur', validatePhone);
+    </script>
+
     <hr class="my-5" />
 
     <h5 class="fw-bold mb-3">빠른 상담을 원하시나요?</h5>