diff --git a/.playwright-mcp/design/uiux/prototype/screenshots/full-test/01-회원가입.png b/.playwright-mcp/design/uiux/prototype/screenshots/full-test/01-회원가입.png new file mode 100644 index 0000000..56f7e3c Binary files /dev/null and b/.playwright-mcp/design/uiux/prototype/screenshots/full-test/01-회원가입.png differ diff --git a/.playwright-mcp/design/uiux/prototype/screenshots/full-test/02-매장정보등록.png b/.playwright-mcp/design/uiux/prototype/screenshots/full-test/02-매장정보등록.png new file mode 100644 index 0000000..1baaaa3 Binary files /dev/null and b/.playwright-mcp/design/uiux/prototype/screenshots/full-test/02-매장정보등록.png differ diff --git a/design/uiux/prototype/02-매장정보등록.html b/design/uiux/prototype/02-매장정보등록.html index 195dc28..1bce92c 100644 --- a/design/uiux/prototype/02-매장정보등록.html +++ b/design/uiux/prototype/02-매장정보등록.html @@ -144,9 +144,10 @@ id="businessNumber" name="businessNumber" class="form-input" - placeholder="123-45-67890" + placeholder="숫자만 입력하세요 (예: 1234567890)" required maxlength="12" + inputmode="numeric" style="flex: 1;" autocomplete="off" > @@ -160,6 +161,9 @@ 검증하기 +
+ 숫자만 입력하시면 자동으로 형식이 맞춰집니다 +
diff --git a/design/uiux/prototype/js/common.js b/design/uiux/prototype/js/common.js index 63a68e8..a3921ef 100644 --- a/design/uiux/prototype/js/common.js +++ b/design/uiux/prototype/js/common.js @@ -509,8 +509,8 @@ } } - // 사업자번호 필드 - if (input.name === 'business_number' && input.value) { + // 사업자번호 필드 (name이 businessNumber인 경우도 처리) + if ((input.name === 'business_number' || input.name === 'businessNumber') && input.value) { // 자동 하이픈 추가 let value = input.value.replace(/[^0-9]/g, ''); if (value.length > 3 && value.length <= 5) { @@ -520,13 +520,16 @@ } input.value = value; - // 검증 + // 검증 (완전한 형식일 때만) if (value.length === 12) { if (!window.FormValidator.isValidBusinessNumber(value)) { window.FormValidator.showError(input, '올바른 사업자번호 형식을 입력하세요.'); } else { window.FormValidator.clearError(input); } + } else { + // 입력 중일 때는 에러 제거 + window.FormValidator.clearError(input); } } });