fix: 모바일 z-index 문제 수정 - 아바타만 z-50 적용

- 채팅창 전체가 아닌 로빙 아바타 이미지에만 z-index 적용
- 활동창/스킬창 선택 영역 정상 작동하도록 수정

troubleshooting/250730_happybell80_프론트엔드로빙연결.md

@@ -499,5 +499,125 @@ self.cli_timeout = 60  # 변경 후
 - update-alternatives로 기본 버전 변경
 - pip 25.1.1 설치
 
+## 오후 6시 27분
+
+### 모바일 UI 문제 해결 및 레이아웃 개선
+
+**문제점들**:
+1. 모바일 스킬/활동 패널이 뷰포트를 벗어나 아래가 잘림
+2. 모바일 최근활동 제목이 중복 표시
+3. 데스크톱 3등분 레이아웃이 UI 밸런스를 해침
+
+**해결**:
+1. **패널 높이 제한**:
+   ```tsx
+   // 기존: h-full
+   // 변경: h-[calc(100%-60px)]  // 헤더 높이 제외
+   ```
+
+2. **헤더 레이아웃 조정**:
+   - 모바일 활동 패널: X버튼(왼쪽), "최근 활동"(오른쪽)
+   - activity-panel 내부 제목 제거로 중복 해결
+
+3. **데스크톱 비율 변경**:
+   - 기존: 408px / 408px / 408px
+   - 변경: 350px / 524px / 350px
+   - 중앙 대화창을 크게, 양옆은 작게
+
+## 오후 6시 38분
+
+### 모바일 헤더 인터랙션 개선
+
+**구현**:
+- 채팅창(본문) 터치 시 헤더 즉시 숨김
+- 기존 3초 자동 숨김 기능과 병행
+
+## 오후 6시 40분
+
+### 메시지 입력창 가독성 개선
+
+**변경**:
+- 폰트 크기: text-xs(12px) → text-[14px]
+- 사용자 입력 편의성 향상
+
+## 오후 6시 48분
+
+### 로빙 응답 시간 표시 방식 개선
+
+**문제**: 응답 시간이 메시지 텍스트에 포함되어 표시
+
+**해결**:
+1. **응답 시간 분리**:
+   - Message 인터페이스에 responseTime 필드 추가
+   - 정규식으로 "(XXXXms)" 패턴 파싱
+   - ms를 초 단위로 변환 (6207.3ms → 6.2s)
+
+2. **표시 위치 변경**:
+   - 기존: "안녕하세요! (6207.3ms)"
+   - 변경: 날짜/시간 아래 "7/30 오후 6:52 (6.2s)"
+
+3. **deprecated 이슈 해결**:
+   - onKeyPress → onKeyDown 변경
+
+## 오후 7시 01분
+
+### 로빙 아바타 이미지 구현
+
+**구현 내용**:
+1. **아바타 이미지 추가**:
+   - 귀여운 애니메이션 캐릭터 사용
+   - 24x24px 크기로 대화창에 맞게 조정
+
+2. **클릭 팝업 기능**:
+   - 아바타 클릭 시 큰 이미지 팝업
+   - 화면의 70% 이하 크기로 비율 유지
+   - 배경 클릭으로 닫기
+
+## 오후 7시 12분
+
+### 데스크톱 헤더 디자인 개선
+
+**문제**: 헤더 내용이 양쪽으로 너무 벌어짐
+
+**해결**:
+- 데스크톱 헤더 여백: px-2 → md:px-8
+- 적절한 좌우 여백으로 시각적 균형
+
+## 오후 7시 27분
+
+### 모바일 z-index 충돌 해결
+
+**문제**: 모바일 UI 버튼들이 로빙 아바타를 가려서 터치 불가
+
+**해결**:
+- 모바일 채팅창에 `relative z-40` 추가
+- 아바타가 UI 버튼들보다 위에 위치하도록 조정
+
+## 오후 7시 42분
+
+### 메시지 입력창 터치 영역 확장
+
+**요구사항**: 입력창의 시각적 크기는 유지하되 터치 영역만 위로 확장
+
+**구현**:
+- 투명한 오버레이 div 추가
+- 입력창 위 16px까지 터치 가능
+- 클릭 시 입력창에 포커스
+
+## 교훈
+
+### 모바일 UI 설계
+1. **뷰포트 고려**: 패널 높이는 항상 뷰포트 내에서 계산
+2. **z-index 관리**: 레이어 간 상호작용 고려 필수
+3. **터치 영역**: 시각적 요소와 터치 영역을 분리하여 사용성 향상
+
+### 사용자 피드백 대응
+1. **정확한 이해**: 사용자 요구사항을 정확히 파악 (예: 터치 영역 vs 시각적 크기)
+2. **점진적 개선**: 작은 수정사항도 즉시 반영하여 사용성 향상
+
+### 응답 시간 표시
+1. **데이터 분리**: UI 텍스트와 메타데이터는 분리하여 관리
+2. **사용자 친화적 단위**: ms보다 초 단위가 직관적
+
 ---
-**작성 완료**: 2025-07-30 18:06
+**작성 완료**: 2025-07-30 21:04