#Svelte
8개의 게시물
전자담배 가격비교 앱을 Svelte 5로 하루 만에 만든 방법 2/2
네이버 쇼핑 API는 연동이 쉽다. 호출하면 JSON으로 상품 리스트가 온다. 근데 그걸 "가격비교 서비스"로 만들려면 얘기가 달라진다. API가 주는 데이터를 그대로 보여주면 쓸 수 없는 앱이 된다. VapeCompare를 만들면서 문제가 하나씩 드러난 순서대로 기록한다. API를 붙이기 전에는 몰랐다 네이버 쇼핑 API 연동 자체는 간단했다.
전자담배 가격비교 앱을 Svelte 5로 하루 만에 만든 방법
전자담배 액상을 살 때마다 네이버 쇼핑에서 같은 검색을 반복하고 있었다. "폐호흡 액상" 검색하고, 기기가 섞여 나오면 다시 "액상"만 골라보고, 가격 비교하려고 탭을 5개씩 열고. 매번 이 짓을 하는 게 귀찮아서 그냥 만들었다. 전자담배 액상, 기기, 코일을 한 화면에서 검색하고 최저가를 바로 비교할 수 있는 앱. 이름은 VapeCompare.
다크 테마 대응 및 로그인/레코드 모달 키보드 이슈 해결
🤖 581 in / 1868 out / 2449 total tokens 로그인 페이지 회원가입 모드에서 스크롤이 가능하도록 overflow-y:auto 속성을 추가했습니다. 다크 테마 시 텍스트 가독성을 높이기 위해 app의 배경색을 정의하고 Chart.js에서도 CSS 변수를 동적으로 적용했습니다. 식사 금액 팝업 레이아웃을 position abso
iOS 키보드가 입력 필드 가리는 문제, visualViewport API로 해결
🤖 778 in / 781 out / 1559 total tokens 입력 모달에서 키보드가 입력 필드를 가리는 문제를 visualViewport API로 해결했다. 기존엔 scrollIntoView만 썼는데, iOS에선 position:fixed 모달이 키보드 열림에 반응하지 않아 입력창이 화면 밖으로 밀려났다. visualViewport.resi
CSS 변수를 활용해 테마 배경색을 동적으로 관리한다.
🤖 598 in / 1358 out / 1956 total tokens 하드코딩된 배경색을 제거하고 CSS 변수 var(--surface)를 사용한다. 레이아웃 컴포넌트에서 document.documentElement에 테마 클래스를 추가하여 스토어 상태 변화를 즉시 반영한다. 이제 테마 변경 시 레이아웃뿐만 아니라 전체 페이지 배경도 일관되게 적용된
UX 다듬기: 커스텀 다이얼로그, 스플래시, 시간 한글화
🤖 3668 in / 918 out / 4586 total tokens 이번 커밋은 사용자 경험을 다듬는 데 집중했다. 시스템 alert/confirm을 앱 톤앤매너에 맞는 커스텀 다이얼로그로 교체했고, 미래 퇴근시간 저장을 차단하는 유효성 검사도 추가했다. 스플래시 화면을 새로 만들었다. 앱 진입과 로그인 성공 시 로고가 표시되는 로딩 화면이 나타
[UX 개선] 모바일 캘린더 상세 뷰 바텀시트 전환
🤖 1439 in / 1403 out / 2842 total tokens 모바일 화면에서 캘린더 그리드가 높아 상세 영역이 가려지던 문제를 해결했다. 인라인 상세 뷰를 바텀시트 오버레이 방식으로 변경하여 스크롤 문제를 잡고 사용자 경험을 개선했다. DaySheet 컴포넌트를 리라이트하고 CSS 스타일을 재구성했다.
설정 UX 개선: 테마 실시간 프리뷰와 뒤로가기 처리
🤖 1044 in / 863 out / 1907 total tokens 설정 화면에서 테마를 변경할 때 바로 미리볼 수 있게 했다. 기존엔 저장해야 적용돼서 어떤 색상인지 확인하기 번거로웠는데, 이제 클릭 즉시 화면에 반영되고 실제 저장은 저장 버튼으로 한다. themePreview 스토어를 새로 만들고 레이아웃에서 기존 설정과 프리뷰 값을 병합해서