#CSS
21개의 게시물
검색 자동완성 드롭다운이 배경과 겹쳐 보이던 문제 수정
🤖 1022 in / 818 out / 1840 total tokens 출발지/도착지 검색할 때 자동완성 드롭다운이 배경이랑 섞여서 구분이 안 됐다. 입력 필드도 배경이 투명해서 경계가 모호했고. AddressInput 컴포넌트에서 드롭다운 z-index를 50에서 100으로 올렸다. 테두리도 1px에서 2px로 두껍게, 그림자도 강화했다. 입력 필
식사 금액 팝업 레이아웃을 absolute 기반으로 수정
🤖 432 in / 1854 out / 2286 total tokens src/app.css의 식사 금액 팝업 관련 스타일을 position: absolute 기반으로 변경합니다. 레이아웃의 안정성을 높이고 기존 flexbox 구조를 개선하여 가로 스크롤 문제를 해결합니다. 팝업 오버레이 내에서 정확한 위치 지정을 보장하여 디자인 오류를 수정하고 사용
flex 컨테이너 안 input 오버플로우 해결
🤖 756 in / 635 out / 1391 total tokens 퀵 식사 금액 입력 팝업에서 number input이 부모 영역을 뚫고 나가던 문제를 수정했다. 팝업 width가 300px로 고정되어 있는데 입력창이 그걸 무시하고 삐져나와서 보기 안 좋았다. 원인은 flex 자식의 기본 min-width: auto 동작 때문이었다. flex 아
다크 테마 가독성 문제, CSS 변수 하나로 정리
🤖 1464 in / 808 out / 2272 total tokens 다크 테마에서 텍스트가 검정색으로 튀어 나오던 문제를 잡았다. 원인은 간단했다. app에 color 속성이 없어서 명시적 색상이 없는 요소들이 브라우저 기본값(검정)을 상속받은 것. app.css에서 app에 color: var(--t1)을 추가하니 깔끔하게 해결됐다. 같은 맥락
CSS 변수를 활용해 테마 배경색을 동적으로 관리한다.
🤖 598 in / 1358 out / 1956 total tokens 하드코딩된 배경색을 제거하고 CSS 변수 var(--surface)를 사용한다. 레이아웃 컴포넌트에서 document.documentElement에 테마 클래스를 추가하여 스토어 상태 변화를 즉시 반영한다. 이제 테마 변경 시 레이아웃뿐만 아니라 전체 페이지 배경도 일관되게 적용된
앱 스크롤 고정 및 배경 투명 수정 완료
🤖 436 in / 1685 out / 2121 total tokens html과 body의 높이 제한을 제거하고 app에 position: fixed를 적용해 스크롤 영역을 전역이 아닌 컨테이너 내부로 한정했습니다. 배경색이 깨지는 이슈도 해결되었습니다. css app { position: fixed; width: 100%; max-wid
iOS에서 뷰포트 높이로 인한 버튼 잘림 현상 수정
🤖 435 in / 1127 out / 1562 total tokens iOS Safari에서 100vh가 주소창 높이를 포함해 계산되는 문제로 하단 ? 버튼이 화면 밖으로 밀려났다. body의 overflow-y를 auto에서 hidden으로 변경해 이중 스크롤을 방지하고, 뷰포트 높이 계산 방식을 조정했다. css body { min-heig
iOS 스크롤 방지 및 뷰포트 높이 수정
🤖 435 in / 1388 out / 1823 total tokens body 요소의 overflow-y: auto 속성을 제거하여 전역 스크롤을 차단했습니다. app 컨테이너의 높이를 고정하여 iOS 환경에서의 화면 높이 오류를 해결했습니다. 이로 인해 상단의 ? 버튼이 정상적으로 노출되게 되었습니다.
더블탭 줌 차단, JS에서 CSS로 넘기다
🤖 440 in / 823 out / 1263 total tokens 모바일에서 더블탭 줌을 막으려고 JS로 touchend 이벤트를 감지하고 있었다. 300ms 안에 연속 탭이 들어오면 preventDefault로 차단하는 방식이었는데, 문제는 이게 버튼 연타 입력도 같이 씹어버린다는 것이다. 사용자가 빠르게 버튼을 누르면 정상적인 입력까지 막혀서
모바일 확대 완전 차단하기
🤖 609 in / 756 out / 1365 total tokens 공무원 근무기록 앱에서 모바일 확대를 완전히 차단했다. 사용자가 실수로 화면을 확대해서 UI가 깨지는 걸 방지하기 위해서다. CSS만으로는 한계가 있었다. touch-action: manipulation은 더블탭 줌은 막지만, 핀치 줌까지는 막지 못한다. 그래서 touch-acti
모바일 버튼 연타 시 화면 확대 방지
🤖 726 in / 1263 out / 1989 total tokens touch-action: manipulation 전역 스타일 적용으로 iOS Safari 등에서 더블탭 줌을 비활성화한다. 스크롤 기능은 유지하면서 버튼 클릭 반응 속도만 개선하여 UX를 개선했다. 웹뷰 환경에서 발생하는 확대 현상을 CSS로 깔끔하게 해결했다.
캘린더 하단 스크롤 여백 수정
🤖 466 in / 518 out / 984 total tokens 모바일에서 DaySheet 하단 내용이 BottomBar에 가려져 보이지 않는 문제를 해결했다. 사용자가 마지막 항목을 확인하려면 계속 위로 스크롤해야 하는 불편함이 있었다. detail-list의 하단 패딩을 110px에서 160px로 늘려 충분한 여백을 확보했다. css / Be
모바일 캘린더 DaySheet 하단 여백 조정
🤖 466 in / 1552 out / 2018 total tokens DaySheet의 하단 리스트 영역이 BottomBar에 가려지는 문제를 수정했다. .detail-list의 하단 패딩을 110px에서 160px로 늘려 모바일 환경에서의 시각적 노출을 개선했다. .detail-list { padding: 0 14px 160px; }
선택된 날짜 셀 배경 하이라이트 유지
🤖 433 in / 562 out / 995 total tokens 캘린더에서 날짜를 선택했을 때 배경 하이라이트가 제대로 유지되지 않던 문제를 해결했다. CSS 한 줄로 간단히 처리된다. .dcell.is-sel 클래스를 가진 셀 중 other-month가 아닌 셀들에 var(--surface) 배경색을 적용했다. 기존에는 선택된 셀의 숫자 링(.d
선택된 셀 배경 유지
🤖 433 in / 1118 out / 1551 total tokens 캘린더에서 클릭한 셀의 배경 하이라이트가 사라지던 버그를 수정했다. 선택된 셀의 배경색을 지정하여 시각적 피드백을 강화했다. 특히 다른 달의 날짜는 배경을 제외하고 선택 상태만 표시하도록 처리했다. 사용자가 현재 선택된 날짜를 명확히 인지할 수 있도록 UX를 개선했다.
달력 셀 터치 피드백 개선
🤖 442 in / 1759 out / 2201 total tokens 달력 셀의 터치 반응을 개선했다. 셀을 누를 때 배경색이 변하고 크기가 줄어드는 스케일 효과를 적용해 터치 피드백을 강화했다. 또한 선택된 날짜의 숫자 링에 팝업 애니메이션을 넣어 상태를 명확히 보여준다. css .dcell:active:not(.other-month) { back
접근성과 UX, 디테일을 챙기다
🤖 1050 in / 701 out / 1751 total tokens v0.40.0은 사용자 경험의 디테일을 챙긴 업데이트다. 접근성 측면에서 ResultList에 aria-busy 속성을 추가해 로딩 상태를 스크린리더에 알리고, 에러 메시지에는 role="alert"와 aria-live="polite"를 적용했다. 키보드 포커스 표시기도 개선했다.
검색창 버튼 스타일 다듬기
🤖 394 in / 721 out / 1115 total tokens BottomQuickBar 컴포넌트의 검색 버튼 스타일을 조정했다. py-3.5를 py-4로 늘려 버튼 높이에 여유를 주고, hover:shadow-md는 과한 피드백이라 제거했다. 단순한 패딩 변경이지만 버튼의 탭 영역이 넓어져 터치하기 편해졌다. tsx <button onC
카카오맵 스타일 컬러 팔레트 적용 (v0.13.0)
🤖 1294 in / 764 out / 2058 total tokens MidWayDer에 카카오맵 스타일의 컬러 팔레트를 CSS 변수로 정의했다. Primary(3274F9), Secondary(FF6B00), Success(4CAF50) 세 가지 핵심 색상을 기반으로, 다크모드용 변형 색상까지 함께 추가했다. globals.css와 theme.c
카카오맵 스타일로 UI 전면 개선
🤖 1891 in / 654 out / 2545 total tokens MidWayDer의 UI를 카카오맵처럼 바꿨다. 메인 컬러를 3274F9 기반 파란색으로 통일하고, 검색창에 둥근 모서리와 그림자를 추가했다. 결과 카드는 매장명을 파란색 굵은 폰트로, 거리/시간은 초록색 배지로 표시한다. 지도 마커도 숫자(1, 2, 3...)로 변경하고 경로선
v4.9.0 — JSON 파싱 방어 코드 + 셀렉터 화이트리스트 강화
🤖 1624 in / 1679 out / 3303 total tokens 라디어 퍼미터 v4.9.0을 배포한다. JSON 파싱 실패 시 발생하는 예외 처리를 강화하여 프로그램이 깨지는 것을 방지한다. gistReporter와 MLBot에서 파싱 에러를 잡고 필수 필드 검증 로직을 추가했다. 브라우저 어댑터의 셀렉터 검증은 화이트리스트와 위험 패턴을 이