diff --git a/troubleshooting/250807_happybell80_프론트엔드UX개선.md b/troubleshooting/250807_happybell80_프론트엔드UX개선.md new file mode 100644 index 0000000..d9dd1c8 --- /dev/null +++ b/troubleshooting/250807_happybell80_프론트엔드UX개선.md @@ -0,0 +1,132 @@ +# 프론트엔드 UX 개선 - 글로벌 키보드 포커스 + +**날짜**: 2025-08-07 +**작업자**: happybell80 & Claude +**관련 서비스**: frontend-customer + +## 오후 7시 25분 + +### 글로벌 키보드 포커스 관리 구현 + +**사용자 요구사항**: +- 채팅 입력창 클릭 없이 타이핑 가능 +- 어디서든 Ctrl+V로 붙여넣기 +- Discord/Slack 같은 UX 구현 + +**구현 내용**: +```javascript +// chat-interface.tsx:58-126 +useEffect(() => { + const handleGlobalKeyDown = (e: KeyboardEvent) => { + // 안전 조건 체크 + const target = e.target as HTMLElement; + + // 이미 입력 필드면 무시 + if (['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName)) return; + + // contentEditable, 버튼, 링크면 무시 + if (target.contentEditable === 'true') return; + if (['BUTTON', 'A'].includes(target.tagName)) return; + + // 모달/드롭다운 열려있으면 무시 + if (document.querySelector('[role="dialog"], [role="menu"]')) return; + + // 네비게이션 키는 무시 (Tab, Arrow 등) + if (['Tab', 'ArrowUp', ...].includes(e.key)) return; + + // Ctrl+V 붙여넣기 + if (e.ctrlKey && e.key === 'v') { + e.preventDefault(); + textareaRef.current?.focus(); + navigator.clipboard.readText().then(text => { + // 클립보드 내용 붙여넣기 + }); + return; + } + + // 일반 문자 입력 시 자동 포커스 + if (e.key.length === 1) { + textareaRef.current?.focus(); + } + }; + + document.addEventListener('keydown', handleGlobalKeyDown); + return () => document.removeEventListener('keydown', handleGlobalKeyDown); +}, [input, setInput]); +``` + +### 안전 장치 + +1. **다른 입력 필드 방해 안 함** + - INPUT, TEXTAREA, SELECT 태그 체크 + - contentEditable 요소 체크 + +2. **인터랙티브 요소 보호** + - 버튼, 링크 클릭 동작 보장 + - 모달, 드롭다운 메뉴 정상 동작 + +3. **네비게이션 키 보존** + - Tab, Arrow, Home, End 등 + - 페이지 스크롤 키 정상 동작 + +4. **브라우저 단축키 보호** + - Ctrl+F (검색) 등 보존 + - 기능키 (F1-F12) 정상 동작 + +### 브라우저 권한 이슈 + +**클립보드 API 권한**: +- `navigator.clipboard.readText()` 사용 +- Chrome이 클립보드 읽기 권한 요청 +- 사용자가 허용해야 Ctrl+V 동작 + +**대안 비교**: +| 방법 | 권한 | 작동성 | 상태 | +|------|------|--------|------| +| navigator.clipboard | 필요 | 100% | 권장 | +| document.execCommand | 불필요 | 10% | deprecated | +| 포커스만 이동 | 불필요 | 80% | 차선책 | + +### 배포 + +**커밋 정보**: +```bash +git commit -m "feat: 글로벌 키보드 포커스 관리 구현 + +- 페이지 어디서든 타이핑 시 자동으로 입력창 포커스 +- Ctrl+V 붙여넣기 지원 (클립보드 권한 필요) +- 안전 조건: 다른 입력필드, 버튼, 모달 열림 시 동작 안 함 +- 네비게이션 키는 정상 동작 유지" +``` + +**Gitea Actions 자동 배포**: +- frontend-customer → main 브랜치 +- 51123 서버 자동 배포 + +## 교훈 + +1. **글로벌 이벤트 리스너 설계** + - 예외 조건을 먼저 정의 + - 기존 UX 방해 최소화 + - 접근성 표준 준수 + +2. **클립보드 보안 정책** + - 브라우저별 권한 정책 차이 + - 사용자 명시적 동의 필요 + - deprecated API 사용 지양 + +3. **UX 개선 우선순위** + - 편의성 < 예측 가능성 + - 자동화 < 사용자 제어권 + - 단순함 > 복잡한 기능 + +4. **크로스 브라우저 호환성** + - Chrome: 클립보드 권한 팝업 + - Firefox: 다른 권한 정책 + - Safari: 더 엄격한 제한 + +## 다음 개선 사항 + +- [ ] 설정에서 on/off 토글 제공 +- [ ] 시각적 포커스 표시기 추가 +- [ ] 모바일 터치 키보드 대응 \ No newline at end of file