docs: 프론트엔드 글로벌 키보드 포커스 관리 문서 추가

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 토글 제공
+- [ ] 시각적 포커스 표시기 추가
+- [ ] 모바일 터치 키보드 대응