From 3297103cdd53e0611c6cb49278a9be87a4655ed2 Mon Sep 17 00:00:00 2001 From: happybell80 Date: Wed, 30 Jul 2025 21:10:43 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20z-index=20=EB=AC=B8=EC=A0=9C=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0=20=EA=B3=BC=EC=A0=95=20=EB=B0=8F=20=EC=98=AC?= =?UTF-8?q?=EB=B0=94=EB=A5=B8=20=ED=95=B4=EA=B2=B0=20=EB=B0=A9=EB=B2=95=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 오후 7시 27분 잘못된 해결 시도 문서화 - 오후 9시 07분 올바른 해결 방법 추가 - z-index 관리 교훈 업데이트 --- ...happybell80_프론트엔드로빙연결.md | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) 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. **터치 영역**: 시각적 요소와 터치 영역을 분리하여 사용성 향상 ### 사용자 피드백 대응