Safari에서 테이블 셀에서 중국어 IME 입력 시 Pinyin 노출

현상

Safari에서 테이블 셀(<td>) 안에 중국어 IME로 텍스트를 입력할 때, 컴포지션 확정 시 원본 Pinyin 버퍼가 노출되는 버그입니다.

재현 예시

1. 테이블 셀(<td> 요소)에 포커스합니다.
2. macOS 중국어 IME를 활성화합니다.
3. Pinyin “nihao”를 입력합니다 (한자 “你好”의 후보).
4. 스페이스바를 눌러 컴포지션을 확정합니다.

관찰된 동작

• 중복 텍스트: Pinyin “nihao”와 한자 “你好”가 함께 표시됨 → “nihao 你好”
• 테이블 셀에서만 발생: <p>, <div> 요소에서는 정상 작동
• Safari 특유: Chrome, Firefox에서는 발생하지 않음
• 캐럿 위치: 확정 후 캐럿이 Pinyin 뒤에 위치하는 경우도 있음

예상 동작

• Pinyin 버퍼(“nihao”)는 보이지 않아야 함
• 확정된 한자(“你好”)만 표시되어야 함

참고사항 및 가능한 해결 방향

• div 대신 td 사용: <td> 대신 <div>를 사용하여 셀 내용을 표현
• compositionend 이벤트로 DOM 정리: 컴포지션 완료 후 불필요한 Pinyin 텍스트 제거
• 모달/오버레이 사용: 테이블 셀 편집 시 모달 창을 띄워서 직접 셀에서 IME 사용을 피함
• 테이블 구조 개선: CSS Grid나 Flexbox를 사용하여 HTML 테이블 대체

코드 예시

const cell = document.querySelector('td[contenteditable]');
let isComposing = false;

cell.addEventListener('compositionstart', () => {
  isComposing = true;
});

cell.addEventListener('compositionend', () => {
  isComposing = false;
  // DOM 정리: Pinyin 제거
  setTimeout(() => {
    const text = cell.textContent;
    const cleaned = text.replace(/[a-z]+/g, '');
    cell.textContent = cleaned;
  }, 0);
});

cell.addEventListener('keydown', (e) => {
  if (isComposing && e.key === ' ') {
    e.preventDefault();
    // IME가 자연스럽게 완료되도록 대기
  }
});