#React
28개의 게시물
테스트 환경에서 navigator undefined 에러 해결
🤖 598 in / 1793 out / 2391 total tokens useOnlineStatus 훅 테스트 돌리는데 navigator is not defined 에러가 터졌다. Node.js 환경인 Jest에서 브라우저 전역 객체인 navigator에 접근하려 해서 발생한 문제다. getSnapshot 함수 초입에 typeof 체크를 추가했다.
useOnlineStatus 훅, useSyncExternalStore로 리팩토링
🤖 741 in / 1474 out / 2215 total tokens useOnlineStatus 훅에서 useEffect 내 동기 setState 호출로 인한 ESLint 에러를 해결했다. 기존엔 useState로 초기값 true를 설정하고, useEffect에서 navigator.onLine으로 동기 업데이트 후 이벤트 리스너를 등록하는 방식이
로그인 페이지 UI 개선과 레이아웃 분리
🤖 779 in / 678 out / 1457 total tokens 로그인 페이지를 깔끔하게 다듬었다. 큰 입력창과 카드 레이아웃을 적용해서 시인성을 높였고, 전체적으로 더 모던한 느낌으로 변경했다. AppShell 컴포넌트를 새로 만들어서 레이아웃 로직을 분리했다. usePathname으로 현재 경로를 확인해서 로그인 페이지일 때는 Navbar를
ESLint 0 errors, 0 warnings 달성
🤖 1908 in / 603 out / 2511 total tokens v0.66.0에서 코드 품질 개선 작업을 완료했다. ESLint 에러와 워닝을 모두 제거해서 깨끗한 린트 상태를 달성했다. NotificationSettings.tsx에서 구독 관련 함수들을 useCallback으로 래핑해서 불필요한 리렌더링을 방지했다. RouteNameDial
v0.51.0: 캐시 UI 통합 완료
🤖 1283 in / 678 out / 1961 total tokens 지난 버전에서 구현해둔 캐시 시스템을 이제야 사용자에게 보여주기 시작했다. 기능만 있고 표시가 없으면 무용지물이니까. CacheStatus 컴포넌트를 ResultList에 추가했다. 오프라인일 땐 "캐시 데이터 사용"을 표시하고, 온라인일 땐 현재 캐시 크기를 보여준다. 사용자가
LocaleContext ESLint 에러 해결과 useState lazy initialization
🤖 794 in / 722 out / 1516 total tokens v0.49.0에서 LocaleContext의 ESLint set-state-in-effect 경고를 해결했다. 기존에는 useEffect 내부에서 localStorage 값을 읽어 setState를 호출하는 패턴이었다. 이는 React 팀에서 권장하지 않는 방식이라 ESLint가
v0.48.0: Context API로 가벼운 다국어 지원 구현하기
🤖 2306 in / 875 out / 3181 total tokens Context API 기반으로 경량 i18n 시스템을 직접 구현했다. react-i18next 같은 라이브러리 없이 번들 크기를 아끼면서도 충분한 기능을 갖췄다. LocaleContext와 useLocale 훅으로 현재 언어 상태를 관리하고, localStorage에 사용자 선택을
v0.47.0 릴리즈 및 ESLint 경고 해결
🤖 1011 in / 1643 out / 2654 total tokens SearchOverlay 컴포넌트에서 React Hook 규칙을 준수하기 위해 useCallback의 조건부 호출 문제를 수정하고 불필요한 import를 제거했습니다. RecommendedCategories에서 useMemo 내부 로직 의존성을 최적화하여 불필요한 렌더링을 방지했
MidWayDer v0.42.0: PWA 설치 배너 추가
🤖 1224 in / 742 out / 1966 total tokens PWA 설치 기능을 지원하는 InstallBanner 컴포넌트를 새로 만들었다. beforeinstallprompt 이벤트를 감지해서 사용자에게 앱 설치를 유도하는 배너를 띄운다. 배너는 3초 지연 후 표시되며, 설치하거나 거부하면 자동으로 사라진다. 거부 선택은 localStor
v0.40.0 릴리스, 접근성(A11y)과 UX를 동시에 개선했다.
🤖 1050 in / 1700 out / 2750 total tokens 접근성 부분에서는 ResultList의 로딩 상태를 aria-busy으로 표현하고, 에러 메시지는 role='alert'과 aria-live로 사용자에게 즉시 전달한다. 키보드 포커스 표시기도 3px의 굵은 선과 오프셋을 적용해 눈에 잘 띄도록 개선했다. UX 측면에서는 모바일의
CategorySelect에 React.memo 적용하고 JSDoc까지 정리했다
🤖 703 in / 754 out / 1457 total tokens v0.39.0에서 CategorySelect 컴포넌트 성능 최적화를 진행했다. 검색 기능에서 자주 쓰이는 컴포넌트라 불필요한 리렌더링이 체감될 수 있어 React.memo로 감쌌다. Props 비교는 기본 얕은 비교로 충분해서 별도 comparator 없이 깔끔하게 적용했다. 작업
TypeScript 타입 에러 9개 해결하고 v0.38.0 릴리스
🤖 913 in / 649 out / 1562 total tokens 카카오맵 연동 컴포넌트에서 발생하던 TypeScript 타입 에러 9개를 해결했다. removeListener의 핸들러 인자를 선택적으로 변경하고, MarkerImage를 interface에서 class로 변환했다. Marker.setImage() 메서드 타입도 추가했다. Wayp
v0.27.2: AddressInput & MultiStopSelector 버그 수정
🤖 1056 in / 729 out / 1785 total tokens AddressInput 컴포넌트에서 hintId가 정의되지 않아 발생하던 ReferenceError를 해결했다. 스크린 리더용 힌트 ID를 동적으로 생성하도록 수정했고, 이제 testId가 있을 때만 hintId를 생성한다. MultiStopSelector에서는 문법 에러와 누락
Vitest에서 document is not defined 에러 해결하기
🤖 515 in / 650 out / 1165 total tokens MapContainer 컴포넌트 테스트 파일에서 환경 설정 이슈를 수정했다. 테스트 실행 시 document is not defined 에러가 발생했는데, 파일 최상단에 @vitest-environment jsdom 지시자를 추가해서 해결했다. Vitest는 기본적으로 node 환
MultiStopSelector 단일 선택 UX 개선으로 사용자 혼란 줄이기
🤖 1721 in / 923 out / 2644 total tokens v0.19.0에서 MultiStopSelector의 UX를 대폭 개선했다. 대부분의 사용자가 하나의 경유지만 선택한다는 피드백을 반영해, 기본적으로 단일 선택 모드로 동작하도록 변경했다. 첫 번째 경유지 선택 시 나머지 체크박스는 자동으로 비활성화되며, 여러 곳을 들러야 한다면 '
AddressInput clear 버튼 접근성 개선으로 테스트 실패 해결
🤖 500 in / 555 out / 1055 total tokens 검색 버튼과 clear 버튼이 같은 역할(role)을 가지면서 테스트가 실패하던 문제를 해결했다. AddressInput 컴포넌트의 clear 버튼에 title과 aria-label 속성을 추가했다. 이제 스크린 리더 사용자도 버튼의 용도를 명확히 알 수 있고, 테스트 코드에서도
MidWayDer v0.16.0: 자유 경유지 검색과 단일 선택 UX
🤖 2170 in / 811 out / 2981 total tokens 자유 경유지 검색 기능이 완성됐다. MVP 단계가 끝났다. 검색창이 바뀌었다. "어디를 들를까?"라는 친근한 placeholder와 함께 홍대입구역, 다이소, 스타벅스 같은 예시를 보여준다. 이제 카테고리뿐 아니라 자유롭게 검색어를 입력할 수 있다. 백엔드는 이미 v0.15.0에
검색창 표시 조건 완화로 BottomQuickBar 유연성 확보
🤖 413 in / 1498 out / 1911 total tokens 즐겨찾기나 최근 검색 기록이 있어도 BottomQuickBar가 사라지지 않도록 렌더링 조건을 완화했습니다. 검색창을 언제든지 바로 접근할 수 있게 UX를 개선했습니다. 불필요한 조건문을 제거하여 코드도 더 간결해졌습니다.
검색창을 button으로 변경하여 UX 개선
🤖 389 in / 612 out / 1001 total tokens 검색창을 input에서 button으로 교체했다. 기존엔 input을 클릭하면 검색 오버레이가 열리는 구조였다. 문제는 실제로 텍스트를 입력할 수 없는데 input처럼 보인다는 점. 사용자가 커서가 깜빡이는 걸 보고 입력을 시도하다 혼란을 겪을 수 있다. 그래서 아예 button으
검색창 readOnly 제거 및 입력 기능 보완
🤖 381 in / 1366 out / 1747 total tokens 검색창의 읽기 전용 속성을 제거하여 사용자가 직접 텍스트를 입력할 수 있도록 수정했습니다. 클릭 시 키보드가 정상적으로 뜨도록 처리하고, 우측 여백을 조정하여 아이콘과 텍스트 간 간격을 개선했습니다. 이제 원하는 장소를 직접 검색할 수 있는 UX를 구현했습니다.
BottomQuickBar에 검색창 추가
🤖 411 in / 811 out / 1222 total tokens 바텀 시트에서 바로 검색할 수 있게 됐다. 기존엔 즐겨찾기 목록만 보이던 BottomQuickBar에 검색창을 새로 추가했다. 사용자가 별도 화면 전환 없이 하단 영역에서 곧바로 검색어를 입력할 수 있어, 경유지 탐색 플로우가 한결 매끄러워졌다. 검색창은 px-5, pb-3 패딩으
자유 경유지 검색과 단일 선택 UX 기반 다졌다
🤖 1079 in / 651 out / 1730 total tokens 자유 경유지 검색 기능의 토대를 마련했다. Phase 1, 2를 완료하고 Phase 3의 상태 관리까지 추가했다. API 레이어에서 searchType을 calculateDetourCosts 함수로 전달하도록 수정했다. 카테고리 검색과 키워드 검색의 자동 전환을 지원하기 위함이다
검색 기능 UI 구현 및 돋보기 아이콘 적용
🤖 384 in / 1388 out / 1772 total tokens AddressInput 컴포넌트에 검색 버튼을 추가하여 사용자 경험을 개선했습니다. lucide-react 라이브러리의 Search 아이콘을 import 하고, 버튼 클릭 시 검색 로직을 수행하도록 구현했습니다. 버튼의 스타일과 상호작용을 정밀하게 조정하여 깔끔한 디자인을 완성했습
카카오맵 스타일로 UI 전면 개선
🤖 1891 in / 654 out / 2545 total tokens MidWayDer의 UI를 카카오맵처럼 바꿨다. 메인 컬러를 3274F9 기반 파란색으로 통일하고, 검색창에 둥근 모서리와 그림자를 추가했다. 결과 카드는 매장명을 파란색 굵은 폰트로, 거리/시간은 초록색 배지로 표시한다. 지도 마커도 숫자(1, 2, 3...)로 변경하고 경로선
v0.10.0: 모바일 UX 개선과 테스트 커버리지 99.85% 달성
🤖 2424 in / 882 out / 3306 total tokens 모바일 터치 경험을 대폭 개선했다. BottomSheet 드래그 핸들에 시각적 피드백을 추가했고, 터치 영역을 iOS 권장값인 44px로 확대했다. 지도 줌/팬 시 검색 오버레이가 자동으로 숨겨지고 1초 뒤 복원되도록 해서 제스처 중 화면이 깔끔해졌다. useMapState 훅에
사용자 경경험 개선: 로딩 상태와 접근성 그리고 에러 메시지
🤖 1185 in / 722 out / 1907 total tokens 이번 커밋은 사용자가 겪을 수 있는 불편함을 줄이는 데 집중했다. 검색 중 취소 버튼을 추가하고, 진행 상태를 보여주도록 개선했다. 접근성 측면에서 ResultCard와 AddressInput에 ARIA 라벨을 추가했다. 스크린 리더 사용자도 장소 정보와 이탈 거리, 이탈 시간을
v0.8.0: UI/UX 대폭 개선, 이제 에러도 친절하게
🤖 1539 in / 1118 out / 2657 total tokens MidWayDer v0.8.0을 릴리스했다. 사용자 경험 전반을 손봤고, 특히 에러 처리와 로딩 상태에서 체감 품질이 크게 올랐다. 검색 결과 카드에서 button 중첩으로 인한 hydration 에러를 해결했다. div에 role='button'과 tabIndex를 줘서 접근
접근성 라벨 보완과 죽은 코드 정리
🤖 1043 in / 1761 out / 2804 total tokens 검색 관련 컴포넌트의 접근성을 개선했다. 스크린 리더 사용자가 버튼의 목적을 명확히 인식할 수 있도록 aria-label을 체계적으로 추가했다. SearchOverlay 닫기 버튼은 '뒤로 가기'로, 저장된 장소 카드는 '{장소명} 카테고리로 검색'으로, ResultCard 전