#css
28개의 게시물
z-index 80인 오버레이에 버튼이 묻혀서 클릭 안 되던 버그 수정
🤖 1391 in / 1414 out / 2805 total tokens 대시보드 오버레이(z-index: 80)가 열리면 탑바의 Bell, ThemeSwitcher 버튼이 가려져 클릭이 안 되는 버그를 잡았다. 오버레이가 전체 화면을 덮는 구조인데, 탑바 액션 버튼 컨테이너에 z-index 값을 아예 지정하지 않아서 발생한 문제다. 원인 파악은 빨
모바일 검색 영역 크기 줄여서 공간 확보
🤖 1620 in / 1646 out / 3266 total tokens 모바일에서 검색바랑 카테고리 레일이 생각보다 공간을 많이 차지하고 있어서 전체적으로 타이트하게 조였다. 변경한 건 세 파일이다. MobileSearchEntry와 SearchOverlay의 검색바 높이를 h-14에서 h-12로 줄였고, gap과 padding도 살짝 쪼았다. M
모바일 카테고리 레일 버튼이 너무 커서 줄였다
🤖 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
모바일 결과 화면 가독성 개선 — 다크 바텀시트를 라이트로 전면 교체
🤖 1924 in / 1645 out / 3569 total tokens 아이폰 사파리에서 결과 화면이 안 읽힌다는 제보가 들어왔다. 진한 남색 바텀시트 위에 지도, 카드, 텍스트가 다 섞여 보이는 게 원인이었다. 장소명·주소·거리 같은 핵심 정보가 배경이랑 대비가 약해서 야외에서는 아예 먹통 수준. MobileHomeShell 컴포넌트에 하드코딩된
모바일 검색 오버레이가 반투명이어서 지도가 비치던 버그 수정
🤖 1734 in / 1746 out / 3480 total tokens iPhone Safari에서 검색 오버레이를 열면 뒤에 지도, 홈 shell, 카테고리 버튼, 하단 prompt가 다 비친다. 오버레이가 반투명 창문이 돼버린 셈이다. 원인은 두 가지였다. 첫째, --bg-primary CSS 변수가 현재 테마에 더 이상 존재하지 않는 lega
반투명 cyan 텍스트가 안 보여서 solid teal로 교체함
🤖 1590 in / 1146 out / 2736 total tokens 다리건너기 게임 UI에서 텍스트가 거의 안 보이는 문제를 고쳤다. 원인은 --bridge-accent를 rgba(66,237,255, 0.18)로 설정해둔 것. 18% 투명도 cyan은 배경 위에 올리면 글씨가 사실상 안 보인다. 인게임 캔버스에서 캐릭터 표시용으로는 반투명이 괜
모바일 맵 컨트롤 토큰 스타일이 안 보이던 버그 수정
🤖 1670 in / 1444 out / 3114 total tokens 모바일에서 맵 위에 떠 있는 설정 버튼이 배경이랑 싹 섞여서 안 보였다. 흰색 배경(bg-white)을 backdrop-blur 기반 반투명 스타일로 교체해서 맵 위에서도 시인성 확보. 문제 원인은 단순했다. 맵 타일 위에 버튼을 올렸는데, 배경이 하얀색이라 밝은 타일 위에서는
세션 헤더 토큰 툴팁이 위로 뜨던 걸 아래로 내렸다
🤖 1309 in / 1360 out / 2669 total tokens 세션 헤더에 마우스 올리면 토큰 수 툴팁이 위로 뜨더라. 근데 상단에 딱 붙어있는 위치라 툴팁이 화면 밖으로 삐져나가는 경우가 있었다. bottom-full을 top-full로 바꿔서 툴팁을 요소 아래로 띄우게 수정했다. CSS 포지션만 한 줄 바꾼 건데, 이런 디테일이 UX를
디자인 토큰 시스템 전면 교체 — 기존 JSX 한 줄도 안 건드림
🤖 1724 in / 1705 out / 3429 total tokens 기존 globals.css에 하드코딩돼 있던 색상, 간격, 타이포값들을 전부 theme.css로 빼서 토큰 시스템으로 재구축했다. 2개 파일, +516 / -157. JSX 코드는 단 한 줄도 안 바꿨다. 가장 큰 변화는 색상 팔레트 구조. 예전엔 --bg-app: f6f7f9
경마 미니맵 때문에 레이스 트랙이 화면 밖으로 튀어나가던 버그 고침
🤖 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으로 되돌리고,
모바일 UX 개선: 터치 타겟과 가독성 확보
🤖 1410 in / 1100 out / 2510 total tokens 모바일에서 터치하기 어려운 버튼과 입력 필드를 개선했다. 사용자 피드백으로 접수된 모바일 UI/UX 이슈를 해결했다. 버튼은 48x48px 최소 크기를 맞췄다. 스왑 버튼은 40x40에서 48x48로, CompactCard의 액션 버튼은 32x32에서 44x44로 확대했다. 최
헤더 레이아웃 정리와 뷰 전환 시 스크롤 초기화
🤖 1126 in / 1633 out / 2759 total tokens 달력 헤더의 물음표 버튼과 오늘 날짜 표시를 왼쪽 상단으로 재배치했다. 기존엔 가로로 나란히 있던 걸 flex-direction: column으로 세로 축으로 바꾸고, 내부에서 다시 row로 묶어서 정렬했다. UI가 한층 정돈된 느낌이다. 탭 전환할 때 스크롤 위치가 그대로 남
html 요소에 테마 클래스 적용으로 배경색 동적 변경 수정
🤖 598 in / 768 out / 1366 total tokens 테마 전환 시 body 배경색이 따라오지 않던 문제를 해결했다. 원인은 간단했다. CSS 변수가 정의된 테마 클래스가 body에만 적용되어 있었고, 실제로는 html 요소에 클래스를 줘야 변수가 하위로 제대로 전파된다. +layout.svelte에서 반응형으로 document.do
#app position:fixed로 스크롤 제어 구조 개선
🤖 436 in / 681 out / 1117 total tokens 모바일 웹앱의 스크롤 제어 방식을 정리했다. 기존엔 html과 body 각각에 overflow:hidden을 선언했는데, 이를 app으로 집중시켰다. app에 position:fixed를 적용하니 뷰포트 고정이 더 확실해진다. body 배경은 투명으로 수정했고, 실제 콘텐츠 영역에
z-index 스택 컨텍스트와 싸운 짧은 이야기
🤖 883 in / 616 out / 1499 total tokens 도움말 버튼이 캘린더 뒤에 숨어버리는 문제를 고쳤다. 사용자가 튜토리얼을 다시 보려고 ? 버튼을 누르려는데 아예 보이지 않는다. 원인을 찾아보니 app이 position: relative로 새로운 스택 컨텍스트를 형성했고, DOM 순서상 뒤에 있는 .cal-wrap이 topbar-
기록 입력 버튼 위치 조정 및 미래 날짜 차단
🤖 625 in / 671 out / 1296 total tokens DaySheet 컴포넌트에서 기록 입력 버튼을 목록 아래쪽으로 이동시켰다. 사용자 흐름상 기존 기록을 먼저 확인하고 새로운 기록을 추가하는 게 자연스럽다고 판단했다. 미래 날짜에 기록을 남기지 못하도록 차단 로직을 추가했다. customAlert 스토어를 새로 import해서 미래
모바일 확대 기능 완전 차단
🤖 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로 접근해야
퀵 액션을 바텀시트로 개편하고 식사 금액 입력 팝업 추가
🤖 1164 in / 643 out / 1807 total tokens 기존 인라인 퀵 액션 버튼들을 별도 바텀시트로 분리했다. 오늘 날짜 선택 시 자동으로 슬라이드업되며, 오버레이 클릭이나 닫기 버튼으로 닫을 수 있다. 식사 버튼은 이제 금액 입력 팝업을 띄운다. 기본값이 자동 입력되지만 수정 가능하도록 했다. CSS는 fixed 포지션 오버레이에
캘린더 셀에 탭/클릭 피드백 추가
🤖 442 in / 547 out / 989 total tokens 캘린더 셀을 눌렀을 때 즉각적인 시각 피드백이 들어간다. UX 디테일 챙기기. :active 상태에서 scale(.93)로 살짝 작아지면서 accent 배경색이 적용된다. 눌리는 느낌. 선택된 날짜의 숫자 링(.dnum-ring)에는 popIn 애니메이션이 0.2초간 재생된다. 툭
다크모드 색상 호환성 개선: 하드코딩 색상을 CSS 변수로 교체
🤖 909 in / 599 out / 1508 total tokens ResultCard와 CompactCard 컴포넌트에 하드코딩된 색상값들이 다크모드에서 가독성 문제를 일으키고 있었다. 배경색이나 텍스트 색상이 고정되어 있어 다크 테마에서도 밝은 색상이 그대로 노출되는 문제다. 방문 뱃지, 메모 영역, 액션 버튼 등에서 dcfce7, 15803d
v0.45.0: WCAG 2.1 AA 준수를 위한 접근성 개선
🤖 1238 in / 891 out / 2129 total tokens MidWayDer v0.45.0에서 접근성을 대폭 강화했다. WCAG 2.1 AA 기준에 맞춰 ARIA 속성과 스크린 리더 지원을 추가했다. 검색 컨테이너에 role="search"를 명시하고, GPS와 공유 버튼에 aria-label을 추가했다. 동적 콘텐츠 알림을 위한 ari
v0.44.0 - 다크모드 전환 애니메이션 추가 및 스타일 개선
🤖 1298 in / 1113 out / 2411 total tokens 다크모드 전환 시 부드러운 애니메이션을 추가했다. 0.2-0.3초 ease-out 타이밍으로 자연스러운 테마 전환을 구현했다. 성능을 고려해 모든 요소에 전환을 적용하지는 않았다. 지도, 캔버스, 이미지, 비디오 같은 무거운 요소는 전환에서 제외했다. card, panel, b
v0.13.0 배포를 위한 카카오맵 스타일 팔레트 CSS 변수 적용
🤖 1294 in / 1619 out / 2913 total tokens globals.css에 Primary, Secondary, Success 등의 색상 변수를 정의하고 theme.css에서 다크모드용 변수도 추가했습니다. WCAG AA 대비 기준을 충족하도록 텍스트와 배경색을 구성했고, 기존 변수는 유지하여 점진적 마이그레이션을 지원합니다. 테스
모바일 확대 방지 처리
🤖 711 in / 566 out / 1277 total tokens 테트리스 게임을 모바일에서 플레이할 때 화면이 확대되는 문제를 해결했다. 실수로 핀치 줌이나 더블탭을 하면 게임 몰입도가 깨지는데, 이걸 막아달라는 피드백이 있었다. 세 가지 레이어로 방어했다. 먼저 viewport 메타태그에서 확대 자체를 차단하고, CSS에서는 touch-act