회원가입 폼에서 베타 사용자 6 명이 막힌 곳들 — 비밀번호 보기 토글, 휴대전화 자동 정리, 한글 입력 차단 — POP-SPOT v1.6 (+v1.6.1~v1.6.6)

// v1.5.2 까지 — 아이콘이 "현재 상태" 를 직접 보여줌
const [show, setShow] = useState(false);
//     ^^^^  ^^^^^^^                ^^^^^   이메일/회원 입력 타입: 기본 가린 상태
//     |     +-- 토글 함수 — 상태 반전에만 쓰임
//     +-- 현재 보이는지 안 보이는지 부울값
<input type={show ? 'text' : 'password'} />
//          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^   show=true면 읽을 수 있는 텍스트, 아니면 마스킹
<button>{show ? <EyeOff/> : <Eye/>}</button>
//                ^^^^^^^^   ^^^^^^^   문제: show=true(보이는 중) → 임시 감춘 아이콘 표시
//                ^^^^^^^^             사용자: "이 모양을 눌러야 보이는 건가?" 와·괌핇
//                ^^^^^^^^             토스·네이버와 반대되는 UX 이용자의 직관

// v1.6 — 아이콘 의미를 "현재 상태" 에서 "눌러야 할 다음 동작" 으로 이동
<button aria-label={show ? '비밀번호 감추기' : '비밀번호 보기'}>
//      ^^^^^^^^^^^^                                                                  스크린리더 사용자용 텍스트
//                                                                                  — 아이콘만의 의미 전달을 보완하는 접근성 속성
  {show ? <Eye/> : <EyeOff/>}
//        ^^^^^^   ^^^^^^^^^^   이제 처음: show=true 이면 "이미 보이고 있으니 눌러야 감추면 됨→ 눌아 튬구·지며 감추" 의미로 눌·이·콘
//        ^^^^^^^             show=false 이면 "감추점 있으니 눌러야 보기" → 감축 아이콘
//                              토스·네이버·구글 로그인 아래·대항공사 등 대부분의 풌덼조 웩의 표준
</button>

// v1.6 — 휴대전화 입력 자동 정리
function normalizePhone(input: string) {
//                      ^^^^^^^^^^^^^   사용자가 입력/붙여넣기한 원시 문자열
//                                       예: "010-1234-5678", "010 1234 5678", "(010)1234-5678"
  return input.replace(/[^0-9]/g, '');
//              ^^^^^^^ ^^^^^^^^ ^^^
//              |        |       |
//              |        |       +-- 빈 문자열로 교체 (단순 제거)
//              |        +-- /[^0-9]/g — 숫자가 아닌 모든 문자 (^ = 부정, g = 전역)
//              +-- 변경 불가능 원본 유지 — 레퍼런스 이 결과로 교체되며 교체된 새 문자열 리턴
//
// 결과 예시:
//   "010-1234-5678"    → "01012345678"
//   "  010 1234 5678 " → "01012345678"
//   "(010)1234-5678"   → "01012345678"
//   "010-abcd-5678"    → "0105678"  … 이 경우는 길이 11자 검증 단계에서 걸러냄
}

// onChange 에서마다 정리해서 state 에 저장 — 이후 모든 검증·서버 전송은 이 값으로
// onChange={(e) => setPhone(normalizePhone(e.target.value))}
//                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^   입력 시점에 정규화 1회만
//                                                                  state 에는 항상 숫자만 남은 형태로 저장됨

// 한글 입력 모드 (IME) 로 입력 시작되면 거부
<input
  onCompositionStart={(e) => e.preventDefault()}
  onChange={(e) => setEmail(e.target.value.replace(/[ㄱ-힝]/g, ''))}
/>