PPI-957 분석 및 수정 내용 정리

🔍 이슈 배경

발생 현상

게스트 입장 페이지의 아동 이름 입력 필드에서 iOS/iPad의 10키 한글 키보드로 입력 시, 글자가 누락되는 현상.

영향 범위

• 플랫폼: iOS/iPadOS (천지인·모아 방식 10키 한글 키보드)
• 영향 컴포넌트: components/pages/guest-entry.tsx — 아동 이름 입력 input
• PC·안드로이드·영문 입력에서는 재현되지 않음

⌨️ iOS 10키 한글 키보드 동작 원리

iOS 10키 한글 키보드(천지인·모아)는 복합 모음을 만들 때 중간점(·, U+00B7)을 내부 조합 문자로 사용합니다.

"해"(ㅎ + ㅐ) 를 입력할 때 브라우저가 받는 조합 중간 상태:

이 중간점이 적용되는 순간에 브라우저가 compositionend 이벤트를 발화합니다.

🐛 근본 원인 분석

문제 코드

onCompositionEnd: (e: CompositionEvent<HTMLInputElement>) => {
  isComposingRef.current = false;
  setValue(sanitize(e.currentTarget.value)); // ← 원인
},

버그 발생 시퀀스 ("전해온" 입력 시)

removeSpecialChars가 문제를 심화하는 이유

// apps/web/lib/utils.ts
export function removeSpecialChars(value: string): string {
  return value.replace(/[^a-zA-Z0-9ㄱ-ㅎㅏ-ㅣ가-힣]/g, "");
}

중간점(·)은 [^…가-힣] 범위에 포함되지 않으므로 제거됩니다. 조합 복구에 필요한 중간점이 사라지면서 IME가 이전 상태로 되돌아갈 수도 없게 됩니다.

🛠 수정 내용

변경 전 → 후

// 변경 전
onCompositionEnd: (e: CompositionEvent<HTMLInputElement>) => {
  isComposingRef.current = false;
  setValue(sanitize(e.currentTarget.value));
},

// 변경 후
onCompositionEnd: () => {
  isComposingRef.current = false;
  // compositionend 시점에 setValue를 호출하면 React가 DOM을 덮어써서
  // iOS 10키 한글 키보드의 모음 조합(예: ㅏ+· → ㅐ)을 깨뜨린다.
  // compositionend 직후 onChange가 발화하며 isComposing=false 상태로 sanitize를 적용한다.
},

수정 근거 — onChange 이벤트 의존

모든 주요 브라우저(iOS Safari 포함)에서 compositionend 직후 onChange(input 이벤트)가 발화됩니다. 이 시점에 isComposing이 false이므로 sanitize가 정상 적용됩니다.

✅ 수정 후 정상 흐름

"전해온" 입력 시 수정 후 이벤트 시퀀스:

📋 변경 사항 요약