fix: 휴대전화 앞자리 초기값을 010으로 — 셀렉트를 건드리지 않아도 되게
앞자리 셀렉트를 비워 두면 placeholder "010"이 이미 고른 것처럼 보이는데 값은 빈 문자열이라, 사용자가 앞자리를 건드리지 않고 뒷자리만 채우면 8자리가 제출돼 "휴대전화 번호를 정확히 입력해 주세요."로 막혔다. 목록을 넘겨 고를 수 있게 한 것(a0316e6)만으로는 여전히 한 번 골라야 했다. 값을 화면이 소유하므로 초기값을 DEFAULT_MOBILE_PHONE_PREFIX('010')로 둔다 — 이제 placeholder가 아니라 실제 값이라 그대로 제출된다. 수정 팝업도 저장된 번호가 없으면 같은 기본값으로 시작한다. 검증 — 화면 실측: 팝업을 열자마자 제출값이 "010"(placeholder 아님)이고, 앞자리 셀렉트를 한 번도 건드리지 않고 1234·5678만 입력했을 때 제출값 "01012345678" → 서버 포맷 "010-1234-5678" 통과. Co-Authored-By: Claude Opus 5
@85350a132ae632b08a902cd0eccc76b6b9ea85d2
--- app/(protected)/(basic)/admins/_components/admin-member-create-modal.tsx
+++ app/(protected)/(basic)/admins/_components/admin-member-create-modal.tsx
... | ... | @@ -21,6 +21,7 @@ |
| 21 | 21 |
import { FoxChatCenteredDotsIcon } from '@fox/core/icons';
|
| 22 | 22 |
import { useFeedback } from '@/app/_hooks/use-feedback';
|
| 23 | 23 |
import { DEFAULT_ADMIN_ROLE_CODE } from '@/lib/domain/admin-member';
|
| 24 |
+import { DEFAULT_MOBILE_PHONE_PREFIX } from '@/lib/domain/phone-number';
|
|
| 24 | 25 |
import {
|
| 25 | 26 |
ADMIN_EMAIL_MESSAGES, |
| 26 | 27 |
ADMIN_LOGIN_ID_HELP_TEXT, |
... | ... | @@ -91,7 +92,8 @@ |
| 91 | 92 |
}); |
| 92 | 93 |
const [isChecking, startChecking] = useTransition(); |
| 93 | 94 |
|
| 94 |
- const [phoneNumber, setPhoneNumber] = useState('');
|
|
| 95 |
+ // 앞자리는 고르지 않아도 되도록 기본값으로 시작한다(상수 주석 참조). |
|
| 96 |
+ const [phoneNumber, setPhoneNumber] = useState(DEFAULT_MOBILE_PHONE_PREFIX); |
|
| 95 | 97 |
const [emailLocal, setEmailLocal] = useState('');
|
| 96 | 98 |
const [emailDomain, setEmailDomain] = useState(EMAIL_DOMAIN_OPTIONS[0]); |
| 97 | 99 |
const [isCustomDomain, setIsCustomDomain] = useState(false); |
--- app/(protected)/(basic)/admins/_components/admin-member-edit-modal.tsx
+++ app/(protected)/(basic)/admins/_components/admin-member-edit-modal.tsx
... | ... | @@ -24,6 +24,7 @@ |
| 24 | 24 |
import { AdminMemberFormFields } from './admin-member-form-fields';
|
| 25 | 25 |
import styles from './admin-member-modal.module.scss'; |
| 26 | 26 |
import { submitFormAction } from '@/app/_hooks/submit-form-action';
|
| 27 |
+import { DEFAULT_MOBILE_PHONE_PREFIX } from '@/lib/domain/phone-number';
|
|
| 27 | 28 |
|
| 28 | 29 |
interface AdminMemberEditModalProps {
|
| 29 | 30 |
member: AdminMember; |
... | ... | @@ -63,8 +64,9 @@ |
| 63 | 64 |
const formRef = useRef<HTMLFormElement>(null); |
| 64 | 65 |
|
| 65 | 66 |
const [isPasswordEditable, setIsPasswordEditable] = useState(false); |
| 67 |
+ // 저장된 번호가 없으면 등록 팝업과 같이 기본 앞자리로 시작한다. |
|
| 66 | 68 |
const [phoneNumber, setPhoneNumber] = useState( |
| 67 |
- toPhoneDigits(member.phoneNumber) |
|
| 69 |
+ () => toPhoneDigits(member.phoneNumber) || DEFAULT_MOBILE_PHONE_PREFIX |
|
| 68 | 70 |
); |
| 69 | 71 |
const [email, setEmail] = useState(member.email ?? ''); |
| 70 | 72 |
const [roleCode, setRoleCode] = useState( |
--- lib/domain/phone-number.ts
+++ lib/domain/phone-number.ts
... | ... | @@ -73,3 +73,10 @@ |
| 73 | 73 |
'018', |
| 74 | 74 |
'019', |
| 75 | 75 |
]; |
| 76 |
+ |
|
| 77 |
+/** |
|
| 78 |
+ * 앞자리 기본값. **화면이 이 값으로 시작해야 한다** — 셀렉트를 비워 두면 placeholder "010"이 |
|
| 79 |
+ * 고른 것처럼 보이는데 값은 비어 있어, 사용자가 앞자리를 건드리지 않고 뒷자리만 채우면 8자리가 |
|
| 80 |
+ * 제출된다(실제로 그래서 등록이 막혔다). |
|
| 81 |
+ */ |
|
| 82 |
+export const DEFAULT_MOBILE_PHONE_PREFIX = MOBILE_PHONE_PREFIXES[0]; |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?