diff --git a/troubleshooting/250730_happybell80_프론트엔드로빙연결.md b/troubleshooting/250730_happybell80_프론트엔드로빙연결.md index 434d8cc..b09ccbd 100644 --- a/troubleshooting/250730_happybell80_프론트엔드로빙연결.md +++ b/troubleshooting/250730_happybell80_프론트엔드로빙연결.md @@ -589,9 +589,20 @@ self.cli_timeout = 60 # 변경 후 **문제**: 모바일 UI 버튼들이 로빙 아바타를 가려서 터치 불가 -**해결**: +**잘못된 해결 시도**: - 모바일 채팅창에 `relative z-40` 추가 -- 아바타가 UI 버튼들보다 위에 위치하도록 조정 +- 부작용: 활동창/스킬창 선택 영역이 가려짐 + +## 오후 9시 07분 + +### z-index 문제 올바른 해결 + +**문제**: 채팅창 전체의 z-index를 높여서 다른 UI 요소들이 가려짐 + +**올바른 해결**: +- 채팅창의 z-40 제거 +- 로빙 아바타 이미지에만 `relative z-50` 적용 +- 결과: 아바타만 클릭 가능하고 다른 UI 요소도 정상 작동 ## 오후 7시 42분 @@ -608,7 +619,9 @@ self.cli_timeout = 60 # 변경 후 ### 모바일 UI 설계 1. **뷰포트 고려**: 패널 높이는 항상 뷰포트 내에서 계산 -2. **z-index 관리**: 레이어 간 상호작용 고려 필수 +2. **z-index 관리**: + - 레이어 간 상호작용 고려 필수 + - 전체 컨테이너보다 개별 요소에 z-index 적용이 더 정확함 3. **터치 영역**: 시각적 요소와 터치 영역을 분리하여 사용성 향상 ### 사용자 피드백 대응