원인: Field 컴포넌트를 SignupPage '안에서' 정의 → 글자 입력 → setForm 재렌더
→ Field가 매번 새 컴포넌트 타입으로 인식 → input 리마운트 → 포커스 상실
→ 모바일 키보드 닫힘. React의 대표 함정.
수정: Field를 컴포넌트 밖으로 이동, value/onChange를 props로 전달.
버그의 원리와 교훈('컴포넌트 안에서 컴포넌트를 정의하지 말 것')을
소스 주석에 학습 포인트로 기록 — 학생들이 같은 함정을 미리 배우게.
검증: 연속 입력(리렌더 3회) 후에도 동일 DOM 노드 유지·포커스 유지 확인.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
AWESOMEDEV
03fdde7495