#mobile
18개의 게시물
모바일 검색에서 장소 검색과 경로 편집을 분리했다
🤖 2704 in / 1708 out / 4412 total tokens 모바일 화면 최상단에 출발지·도착지 입력란이랑 장소 검색란이 같이 있던 걸 분리했다. 검색 진입점은 하나만 남기고, 경로 편집은 별도 모드로 빼는 게 사용자에게 낫다고 판단해서다. 기존 MobileSearchEntry 컴포넌트는 startAddress, endAddress를 p
네이버지도 모바일 경로 UX 기준 문서 작성하고, 검색 오버레이 구조 정리
🤖 2055 in / 1657 out / 3712 total tokens MidWayDer 모바일 경로 탐색 UX를 네이버지도 흐름에 맞추기 위해, 구현 전 기준 문서부터 잡았다. 스크린샷 4장(검색 홈, 장소 상세, 경로 설정, 경로 결과)을 분석해서 상태 모델 4단계(idle → placeSelected → routeEditing → results
모바일 카테고리 레일 버튼이 너무 커서 줄였다
🤖 1733 in / 1705 out / 3438 total tokens 모바일에서 카테고리 선택 버튼(pill)이 세로로 지나치게 길어 보이는 문제를 수정했다. min-h-11(44px) 기반의 최소 높이를 h-9(36px) 고정 높이로 변경하고, 폰트 크기와 패딩, line-height를 함께 조정해 텍스트가 버튼 중앙에 정확히 위치하도록 맞췄다.
모바일 검색 오버레이 footer가 화면 전체를 먹어버리던 버그 수정
🤖 1727 in / 1618 out / 3345 total tokens 모바일 검색 오버레이에서 하단 검색 CTA 버튼이 의도보다 훨씬 큰 히트박스를 갖고 있었다. 화면 상단의 뒤로가기, 테마 토글 버튼이 터치되지 않아 원인을 추적했다. 범인은 animate-slide-up와 gpu-accelerate 클래스 조합이었다. Intercom의 keyb
iOS Safari에서 결과 시트 가장자리 잘림 현상 수정
🤖 1285 in / 1485 out / 2770 total tokens 모바일 결과 시트의 좌우 마진을 추가해서 iPhone Safari에서 화면 가장자리에 콘텐츠가 딱 붙어버리는 문제를 해결했다. MobileHomeShell.tsx에서 결과 시트 섹션의 inset-x-0을 inset-x-2로 변경했다. Tailwind에서 inset-x-0은 le
모바일 검색 오버레이가 반투명이어서 지도가 비치던 버그 수정
🤖 1734 in / 1746 out / 3480 total tokens iPhone Safari에서 검색 오버레이를 열면 뒤에 지도, 홈 shell, 카테고리 버튼, 하단 prompt가 다 비친다. 오버레이가 반투명 창문이 돼버린 셈이다. 원인은 두 가지였다. 첫째, --bg-primary CSS 변수가 현재 테마에 더 이상 존재하지 않는 lega
모바일 검색 로딩 UI 단순화 — 큰 단계 카드 싹 지우고 상태 한 줄로 교체
🤖 2318 in / 1638 out / 3956 total tokens 모바일 검색 중에 뜨던 무거운 단계형 로딩 카드(경로 분석 중, 장소 탐색 중, 비용 계산 중)와 skeleton 리스트를 전부 없애고, 검색 진행 중에는 바텀시트 자체를 숨긴 뒤 상단 입력창에 찾는 중... 한 줄만 남겼다. 기존 ResultList에서는 useLoadingS
경마 미니맵 때문에 레이스 트랙이 화면 밖으로 튀어나가던 버그 고침
🤖 1613 in / 1284 out / 2897 total tokens 경주 트랙 컨테이너에 overflow: visible을 줬더니 모바일에서 트랙이 무한히 늘어나는 버그가 발생했다. 원인은 간단하다. 미니맵을 position: absolute로 띄워놓고 트랙 컨테이너 안에 넣어두니, 미니맵이 컨테이너 밖으로 빠져나가면서 overflow: visi
경마 레이스 트랙이 모바일에서 삐져나가던 버그 고침
🤖 1613 in / 1564 out / 3177 total tokens 모바일에서 경마 레이스 트랙이 컨테이너 영역을 뚫고 늘어나던 버그를 잡았다. 원인은 미니맵 배치 때문에 overflow: visible로 풀어놓았던 게 화근이었다. 변경 내용은 단순하다. race-track-container의 overflow를 다시 hidden으로 되돌리고,
어드민 네비게이션 모바일 대응
🤖 445 in / 684 out / 1129 total tokens 어드민 페이지 네비게이션을 모바일에서도 쓸 수 있게 수정했다. 기존엔 사이드바가 md:block hidden으로 처리되어 있어 모바일에선 네비게이션이 아예 보이지 않았다. 이번에 모바일에선 상단 가로 탭으로, 데스크톱에선 기존 사이드바가 표시되도록 반응형 레이아웃을 분기했다. t
#app position:fixed로 스크롤 제어 구조 개선
🤖 436 in / 681 out / 1117 total tokens 모바일 웹앱의 스크롤 제어 방식을 정리했다. 기존엔 html과 body 각각에 overflow:hidden을 선언했는데, 이를 app으로 집중시켰다. app에 position:fixed를 적용하니 뷰포트 고정이 더 확실해진다. body 배경은 투명으로 수정했고, 실제 콘텐츠 영역에
모바일 확대 기능 완전 차단
🤖 609 in / 1404 out / 2013 total tokens 모바일 기기의 확대 기능을 CSS와 JS 이벤트 차단으로 완전히 제거합니다. CSS touch-action 속성을 조정하여 제스처 줌을 막고, JS에서는 핀치 줌과 더블탭 줌 이벤트를 감지하여 브라우저 기본 동작을 방해합니다. 이로 인해 사용자가 앱 내에서 확대/축소를 시도하더라도
모바일에서 버튼 연타 시 화면 확대되던 문제 해결
🤖 726 in / 594 out / 1320 total tokens 공무원 근무기록 앱에서 출퇴근 버튼을 빠르게 연타하면 화면이 확대되는 문제가 있었다. 특히 iOS Safari에서 더블탭 줌 동작이 트리거되어 사용자 경험을 해쳤다. iOS 10부터는 viewport meta 태그의 user-scalable=no를 무시하기 때문에 CSS로 접근해야
모바일 캘린더 상세 영역, 바텀시트로 전환
🤖 1439 in / 687 out / 2126 total tokens 모바일에서 날짜 클릭 후 상세 정보가 보이지 않던 문제를 해결했다. 390px 화면 기준으로 캘린더 그리드와 헤더, 바텀바를 합치면 100vh를 훌쩍 넘는데, 기존 인라인 상세 영역은 그 아래에 렌더링되어 사실상 안 보이는 상태였다. 해결책으로 DaySheet를 인라인 배치에서
모바일 UX 강화 및 v0.29.0 릴리스
🤖 1705 in / 1432 out / 3137 total tokens 모바일 UX를 대폭 강화하여 v0.29.0을 릴리스했습니다. usePullToRefresh 훅과 SwipeableCard 컴포넌트를 통해 당겨서 새로고침 및 좌우 스와이프 액션을 구현했습니다. 모바일 기기의 진동 피드백(useHaptic 훅)을 통합하여 사용자 경험을 더 직관적으
BottomQuickBar 렌더링 조건 완화로 검색창 항상 표시
🤖 413 in / 643 out / 1056 total tokens 모바일 환경에서 BottomQuickBar가 너무 제한적으로 노출되던 문제를 수정했다. 기존엔 즐겨찾기와 최근 검색이 모두 비어있을 때만 검색창이 표시됐다. 사용자가 즐겨찾기를 등록하거나 최근 검색이 쌓이면 검색창이 사라지는 UX상 좋지 않은 동작이었다. 관련 조건을 제거해 검색
모바일 확대 및 더블탭 줌 방지 기능 추가
🤖 711 in / 1510 out / 2221 total tokens 모바일 환경에서의 확대 및 더블탭 줌을 완전히 차단한다. 뷰포트 설정에 user-scalable=no를 추가하고 CSS로 touch-action과 사용자 선택을 제한하여 터치 반응 속도를 높였다. 동시에 300ms 이내의 터치 이벤트를 감지해 더블탭 줌을 막았다. 모바일 플레이어의
모바일 확대 방지 처리
🤖 711 in / 566 out / 1277 total tokens 테트리스 게임을 모바일에서 플레이할 때 화면이 확대되는 문제를 해결했다. 실수로 핀치 줌이나 더블탭을 하면 게임 몰입도가 깨지는데, 이걸 막아달라는 피드백이 있었다. 세 가지 레이어로 방어했다. 먼저 viewport 메타태그에서 확대 자체를 차단하고, CSS에서는 touch-act