Commits
GitHub 커밋 기반으로 자동 생성된 개발 기록
Gongnog
공노기에 스포트라이트 튜토리얼을 달았다
🤖 2585 in / 1318 out / 3903 total tokens 처음 방문한 사용자가 앱을 어떻게 쓰는지 모르겠다고 해서, 도움말 버튼과 튜토리얼을 추가했다. 헤더의 ? 버튼을 누르면 4단계로 핵심 기능을 안내하는 스포트라이트 오버레이가 뜬다. users 테이블에 tutorial_flags 컬럼을 추가해 어떤 튜토리얼을 봤는지 저장한다. 클
캘린더 요일 순서 수정
🤖 470 in / 530 out / 1000 total tokens 캘린더의 요일 표시 순서를 월요일 시작에서 일요일 시작으로 변경했다. 기존에는 getDay()로 구한 일요일(0)을 보정해 6으로 치환했는데, 이 로직을 제거했다. 요일 헤더 배열도 '월','화','수','목','금','토','일'에서 '일','월','화','수','목','금','
브랜딩 정리: 공노기로 통일
🤖 756 in / 571 out / 1327 total tokens 앱 이름을 '공노기'로 확정하고 페이지 타이틀과 로그인 화면에 반영했다. 기존엔 브라우저 탭에 '근무기록'이라고 떴는데, 이제 '공노기'로 표시된다. 로그인 화면 상단에도 앱 이름을 작게 노출해서 진입점부터 브랜드 정체성을 명확히 했다. CSS는 .login-app-name 클래스
기록 입력 버튼 위치 변경 및 미래 날짜 차단 로직 구현
🤖 625 in / 1486 out / 2111 total tokens 빈 상태 표시 영역 아래에 기록 입력 버튼을 배치하여 레이아웃을 정리했습니다. 미래 날짜에 기록을 남기는 것을 막기 위해 로직을 추가하고 customAlert을 통해 사용자에게 경고 메시지를 띄웁니다.
기록 입력 버튼 위치 조정 및 미래 날짜 차단
🤖 625 in / 671 out / 1296 total tokens DaySheet 컴포넌트에서 기록 입력 버튼을 목록 아래쪽으로 이동시켰다. 사용자 흐름상 기존 기록을 먼저 확인하고 새로운 기록을 추가하는 게 자연스럽다고 판단했다. 미래 날짜에 기록을 남기지 못하도록 차단 로직을 추가했다. customAlert 스토어를 새로 import해서 미래
캘린더 근무시간 색상 구분과 설정 미저장 감지
🤖 878 in / 732 out / 1610 total tokens 캘린더에 근무시간을 한눈에 파악할 수 있도록 색상 구분을 추가했다. 정규 근무는 초록, 자동 공제 구간은 회색, 초과 근무는 주황색으로 표시된다. 주말과 공휴일은 별도 색상으로 구분해 시각적 혼선을 줄였다. 설정 페이지에서 변경사항이 저장되지 않은 상태로 탭을 이동하면 확인 팝업이
설정 탭 이탈 시 미저장 변경사항 확인 팝업 구현
🤖 845 in / 687 out / 1532 total tokens 사용자가 설정을 변경하고 저장하지 않은 채 다른 탭으로 이동하려 할 때 확인 팝업을 띄워주는 기능을 추가했다. settingsDirty 스토어를 새로 만들어 설정 변경 여부를 추적한다. Settings 컴포넌트에서 초기 설정값을 JSON으로 저장해두고, 현재 값과 비교하여 변경사항이
버튼 연타 입력 씹힘 수정 및 JS 로직 정리
🤖 440 in / 1376 out / 1816 total tokens 더블탭 줌 차단을 위한 불필요한 JS 핸들러를 제거하여 버튼 연타 입력 문제를 해결했습니다. 이제 핀치 줌은 JS로, 더블탭은 CSS touch-action 속성으로 처리하여 부하를 줄이고 성능을 개선했습니다. 사용자 경험을 위해 불필요한 이벤트 리스너를 정리했습니다.
더블탭 줌 차단, 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