From 98185ab65838c35680a9256abd95758ef7d10ed1 Mon Sep 17 00:00:00 2001 From: happybell80 Date: Wed, 30 Jul 2025 23:32:29 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20=EC=98=A4=ED=9B=84=209=EC=8B=9C=20?= =?UTF-8?q?=EC=9D=B4=ED=9B=84=20UI=20=EC=9E=91=EC=97=85=20=EB=82=B4?= =?UTF-8?q?=EC=9A=A9=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 입력창 textarea 변환 및 자동 줄바꿈 구현 - 입력창 선택/복사/붙여넣기 문제 해결 - 모바일 활동 버튼 위치 조정 - 모바일 UI 선택 영역 디버깅 - UI 버튼 자동 숨김 시간 단축 (5초→3초) --- ...happybell80_프론트엔드로빙연결.md | 113 +++++++++++++++++- 1 file changed, 112 insertions(+), 1 deletion(-) diff --git a/troubleshooting/250730_happybell80_프론트엔드로빙연결.md b/troubleshooting/250730_happybell80_프론트엔드로빙연결.md index b09ccbd..9748cfa 100644 --- a/troubleshooting/250730_happybell80_프론트엔드로빙연결.md +++ b/troubleshooting/250730_happybell80_프론트엔드로빙연결.md @@ -632,5 +632,116 @@ self.cli_timeout = 60 # 변경 후 1. **데이터 분리**: UI 텍스트와 메타데이터는 분리하여 관리 2. **사용자 친화적 단위**: ms보다 초 단위가 직관적 +## 오후 9시 23분 + +### z-index 계층 구조 전면 재정리 + +**문제**: 여러 UI 요소들의 z-index가 꼬여서 클릭이 안 되는 문제 발생 + +**z-index 분석**: +``` +z-10: 입력창 터치 영역 (너무 낮음) +z-20: 스킬/활동 힌트 띠 +z-30: 메뉴 힌트 띠, 스킬/활동 버튼 영역 +z-40: 메뉴 터치 영역, 패널 배경 +z-50: 헤더, 푸터, 패널, 아바타, 팝업 +``` + +**해결**: +1. 메뉴 터치 영역: z-40 → z-30 +2. 메뉴 힌트 띠: z-30 → z-20 (통일) +3. 입력창 터치 영역: z-10 → z-35 + +## 오후 9시 26분 + +### 보내기 버튼 및 아바타 클릭 문제 해결 + +**문제**: +1. 보내기 버튼이 클릭되지 않음 +2. 아바타 클릭 시 활동창이 열림 + +**원인**: +1. 입력창 터치 영역이 전체를 덮어 버튼을 가림 +2. 활동 버튼 영역이 너무 넓어 아바타 위치와 겹침 + +**해결**: +1. 입력창 터치 영역: `inset-x-0` → `left-0 right-[60px]` +2. 활동 버튼 너비: `w-[10vw] min-w-[50px]` → `w-[35px]` + +## 오후 9시 35분 + +### 입력창 textarea 변환 및 자동 줄바꿈 구현 + +**요구사항**: +- 입력창에 긴 텍스트 입력 시 자동 줄바꿈 +- 최대 5줄까지 표시, 초과 시 스크롤 +- Enter: 전송, Shift+Enter: 줄바꿈 + +**구현**: +1. **input → textarea 변경** +2. **Canvas API로 텍스트 너비 측정**: + ```tsx + const canvas = document.createElement('canvas'); + const context = canvas.getContext('2d'); + context.font = `${fontSize}px ${computedStyle.fontFamily}`; + const width = context.measureText(line).width; + ``` +3. **입력창 너비의 100% 도달 시 자동 줄바꿈** +4. **rows state로 동적 높이 조정** (1~5줄) + +**문제 해결**: +- 선택/복사/붙여넣기 막힘 → 터치 영역 오버레이 제거 + +## 오후 9시 46분 + +### 입력창 선택/복사/붙여넣기 문제 해결 + +**문제**: 터치 영역 확장용 투명 오버레이가 textarea를 덮어 텍스트 선택 불가 + +**해결**: 오버레이 div 완전 제거 +- 터치 영역 확장 기능은 포기하고 직접 클릭 방식 채택 + +## 오후 9시 54분 + +### 모바일 활동 버튼 위치 조정 + +**목표**: 스킬 버튼과 시각적 대칭 구현 + +**과정**: +1. 활동 버튼 텍스트: "활동" → "최근활동" +2. 버튼 위치 계산: + - 스킬 버튼 상단: 위에서 28.75vh + - 활동 버튼 상단: 아래에서 28.75vh + 버튼높이 +3. 여러 시도 끝에 `bottom-[20vh]`로 설정 + +**선택 영역 정리**: +- 활동 영역: `top-[35vh] bottom-[60px]` (힌트 띠와 동일) +- 모든 선택 영역 너비/높이 35px로 통일 + +## 오후 10시 39분 + +### 모바일 UI 선택 영역 디버깅 + +**디버깅 방법**: 반투명 배경색으로 선택 영역 시각화 +- 메뉴: 녹색 (`bg-green-500/20`) +- 스킬: 파란색 (`bg-blue-500/20`) +- 활동: 빨간색 (`bg-red-500/20`) + +**발견된 문제**: +1. 활동 선택 영역이 힌트 띠보다 작음 +2. 메뉴 선택 영역 높이가 다른 버튼과 다름 + +**해결**: +- 활동 영역을 힌트 띠와 동일하게 조정 +- 메뉴 높이를 35px로 통일 + +## 오후 10시 47분 + +### UI 버튼 자동 숨김 시간 단축 + +**변경**: 5초 → 3초 +- 메뉴 힌트, 스킬 버튼, 활동 버튼 모두 3초로 통일 +- 더 빠른 UI 정리로 사용성 향상 + --- -**작성 완료**: 2025-07-30 21:04 +**작성 완료**: 2025-07-30 23:31