브랜딩 정리: 공노기로 통일
commitsGongnog · 9ef80fe

브랜딩 정리: 공노기로 통일

🤖 756 in / 571 out / 1327 total tokens 앱 이름을 '공노기'로 확정하고 페이지 타이틀과 로그인 화면에 반영했다. 기존엔 브라우저 탭에 '근무기록'이라고 떴는데, 이제 '공노기'로 표시된다. 로그인 화면 상단에도 앱 이름을 작게 노출해서 진입점부터 브랜드 정체성을 명확히 했다. CSS는 .login-app-name 클래스

이더2026.03.111 min read
브랜딩UI공노기
기록 입력 버튼 위치 변경 및 미래 날짜 차단 로직 구현
commitsGongnog · 07d25e0

기록 입력 버튼 위치 변경 및 미래 날짜 차단 로직 구현

🤖 625 in / 1486 out / 2111 total tokens 빈 상태 표시 영역 아래에 기록 입력 버튼을 배치하여 레이아웃을 정리했습니다. 미래 날짜에 기록을 남기는 것을 막기 위해 로직을 추가하고 customAlert을 통해 사용자에게 경고 메시지를 띄웁니다.

이더2026.03.111 min read
featureuivalidation
기록 입력 버튼 위치 조정 및 미래 날짜 차단
commitsGongnog · 07d25e0

기록 입력 버튼 위치 조정 및 미래 날짜 차단

🤖 625 in / 671 out / 1296 total tokens DaySheet 컴포넌트에서 기록 입력 버튼을 목록 아래쪽으로 이동시켰다. 사용자 흐름상 기존 기록을 먼저 확인하고 새로운 기록을 추가하는 게 자연스럽다고 판단했다. 미래 날짜에 기록을 남기지 못하도록 차단 로직을 추가했다. customAlert 스토어를 새로 import해서 미래

이더2026.03.111 min read
svelteux기록앱
캘린더 근무시간 색상 구분과 설정 미저장 감지
commitsGongnog · 45858f0

캘린더 근무시간 색상 구분과 설정 미저장 감지

🤖 878 in / 732 out / 1610 total tokens 캘린더에 근무시간을 한눈에 파악할 수 있도록 색상 구분을 추가했다. 정규 근무는 초록, 자동 공제 구간은 회색, 초과 근무는 주황색으로 표시된다. 주말과 공휴일은 별도 색상으로 구분해 시각적 혼선을 줄였다. 설정 페이지에서 변경사항이 저장되지 않은 상태로 탭을 이동하면 확인 팝업이

이더2026.03.111 min read
svelteuxcalendar
설정 탭 이탈 시 미저장 변경사항 확인 팝업 구현
commitsGongnog · 9dbc620

설정 탭 이탈 시 미저장 변경사항 확인 팝업 구현

🤖 845 in / 687 out / 1532 total tokens 사용자가 설정을 변경하고 저장하지 않은 채 다른 탭으로 이동하려 할 때 확인 팝업을 띄워주는 기능을 추가했다. settingsDirty 스토어를 새로 만들어 설정 변경 여부를 추적한다. Settings 컴포넌트에서 초기 설정값을 JSON으로 저장해두고, 현재 값과 비교하여 변경사항이

이더2026.03.112 min read
sveltestoresux
버튼 연타 입력 씹힘 수정 및 JS 로직 정리
commitsGongnog · 69b7e94

버튼 연타 입력 씹힘 수정 및 JS 로직 정리

🤖 440 in / 1376 out / 1816 total tokens 더블탭 줌 차단을 위한 불필요한 JS 핸들러를 제거하여 버튼 연타 입력 문제를 해결했습니다. 이제 핀치 줌은 JS로, 더블탭은 CSS touch-action 속성으로 처리하여 부하를 줄이고 성능을 개선했습니다. 사용자 경험을 위해 불필요한 이벤트 리스너를 정리했습니다.

이더2026.03.111 min read
더블탭 줌 차단, JS에서 CSS로 넘기다
commitsGongnog · 69b7e94

더블탭 줌 차단, JS에서 CSS로 넘기다

🤖 440 in / 823 out / 1263 total tokens 모바일에서 더블탭 줌을 막으려고 JS로 touchend 이벤트를 감지하고 있었다. 300ms 안에 연속 탭이 들어오면 preventDefault로 차단하는 방식이었는데, 문제는 이게 버튼 연타 입력도 같이 씹어버린다는 것이다. 사용자가 빠르게 버튼을 누르면 정상적인 입력까지 막혀서

이더2026.03.111 min read
JavaScriptCSS터치이벤트
모바일 확대 완전 차단하기
commitsGongnog · f170eee

모바일 확대 완전 차단하기

🤖 609 in / 756 out / 1365 total tokens 공무원 근무기록 앱에서 모바일 확대를 완전히 차단했다. 사용자가 실수로 화면을 확대해서 UI가 깨지는 걸 방지하기 위해서다. CSS만으로는 한계가 있었다. touch-action: manipulation은 더블탭 줌은 막지만, 핀치 줌까지는 막지 못한다. 그래서 touch-acti

이더2026.03.112 min read
모바일CSSJavaScript
모바일 확대 기능 완전 차단
commitsGongnog · f170eee

모바일 확대 기능 완전 차단

🤖 609 in / 1404 out / 2013 total tokens 모바일 기기의 확대 기능을 CSS와 JS 이벤트 차단으로 완전히 제거합니다. CSS touch-action 속성을 조정하여 제스처 줌을 막고, JS에서는 핀치 줌과 더블탭 줌 이벤트를 감지하여 브라우저 기본 동작을 방해합니다. 이로 인해 사용자가 앱 내에서 확대/축소를 시도하더라도

이더2026.03.111 min read
mobilecssjavascript
모바일 버튼 연타 시 화면 확대 방지
commitsGongnog · f455a50

모바일 버튼 연타 시 화면 확대 방지

🤖 726 in / 1263 out / 1989 total tokens touch-action: manipulation 전역 스타일 적용으로 iOS Safari 등에서 더블탭 줌을 비활성화한다. 스크롤 기능은 유지하면서 버튼 클릭 반응 속도만 개선하여 UX를 개선했다. 웹뷰 환경에서 발생하는 확대 현상을 CSS로 깔끔하게 해결했다.

이더2026.03.111 min read
CSSMobileUX