docs: 프론트엔드 트러블슈팅 추가 - 다크모드, OAuth, Playwright MCP

troubleshooting/250729_happybell80_프론트엔드게임UI구현.md

@@ -151,5 +151,92 @@ padding: env(safe-area-inset-top) env(safe-area-inset-right)
    - 체계적인 색상 정리로 산만함 해결
    - 단계별 구현으로 복잡도 관리
 
+## 2025-07-30 오전 12시 40분
+
+### 다크모드 및 Google OAuth 로그인 구현
+
+**구현 내용**:
+1. **Theme Context 생성**
+   - 전역 테마 상태 관리
+   - localStorage에 테마 설정 저장
+   - 라이트/다크 모드 전환
+
+2. **로그인 시스템**
+   - Google OAuth 통합 (기존 auth-server 활용)
+   - 로그인 다이얼로그 컴포넌트
+   - 이메일/비밀번호 로그인 UI (백엔드 미구현)
+
+3. **UI 개선**
+   - 헤더에 로그인/프로필 섹션 추가
+   - 기본 테마를 밝은 라이트 테마로 변경
+   - 다크모드는 기존 어두운 디자인 유지
+
+### 패널 재구성 및 채팅 UI 개선
+
+**패널 배치 변경**:
+- 왼쪽: 최근 활동 (ActivityPanel)
+- 가운데: 채팅창 (ChatInterface) 
+- 오른쪽: 스킬 & 아이템 (SkillsItemsPanel)
+
+**채팅 UI 개선사항**:
+1. 아바타 추가 (사용자/로빙 구분)
+2. 메시지 타입별 색상 구분
+   - 일반 메시지: 기본 색상
+   - 시스템 메시지: 파란색 배경
+   - 스킬 사용: 보라색 배경
+   - 액션: 황색 배경
+3. 컴팩트한 디자인으로 정보 밀도 향상
+4. 헤더에 메모리/CPU 사용률 표시
+
+**스킬 & 아이템 패널**:
+- 탭으로 스킬/아이템 전환
+- 스킬: 레벨, 진행도, 액티브/패시브 구분
+- 아이템: 희귀도별 색상 (일반/레어/에픽/전설)
+
+### Playwright MCP 설정 및 문제 해결
+
+**Playwright 설치**:
+```bash
+npm install -g playwright
+playwright install
+```
+
+**Chrome 경로 문제 해결**:
+MCP가 `/opt/google/chrome/chrome`를 찾는 문제 발생
+```bash
+sudo mkdir -p /opt/google/chrome
+sudo ln -s /home/happybell/.cache/ms-playwright/chromium-1181/chrome-linux/chrome /opt/google/chrome/chrome
+```
+
+**브라우저 창 크기 조정 한계**:
+- `browser_resize`는 viewport만 조정 (실제 창 크기 변경 안됨)
+- `window.resizeTo()` 보안상 작동 안함
+- 실제 창 크기 변경은 수동으로만 가능
+
+### 텍스트 선택 문제 해결
+
+**문제**: `user-select: none` CSS로 인해 텍스트 복사 불가
+
+**해결**: 
+```css
+/* user-select 제거하여 텍스트 선택 가능하게 함 */
+/* -webkit-user-select: none; 제거 */
+/* user-select: none; 제거 */
+```
+
+## 교훈 (추가)
+
+5. **OAuth 인증 통합**
+   - 기존 auth-server 활용으로 빠른 구현
+   - 프론트엔드는 리다이렉트만 처리
+
+6. **Playwright MCP 한계**
+   - viewport와 window 크기 구분 필요
+   - 브라우저 보안 정책 이해 중요
+
+7. **사용자 피드백 대응**
+   - 명확한 요구사항 파악 필수
+   - 기술적 한계 솔직히 공유
+
 ---
-**작성 완료**: 2025-07-29 23:23
+**작성 완료**: 2025-07-30 00:40