#svelte
25개의 게시물
도움말 버튼, 오늘 날짜 오른쪽으로 이동
🤖 410 in / 868 out / 1278 total tokens 캘린더 헤더의 물음표 버튼 위치를 조정했다. 기존엔 오늘 날짜 왼쪽에 있던 걸 오른쪽으로 옮겼다. 단순한 마크업 순서 변경이라 CSS 수정 없이 DOM 순서만 바꿔서 해결했다. svelte <div class="today-row" <span class="today-date"{n
헤더 레이아웃 정리와 뷰 전환 시 스크롤 초기화
🤖 1126 in / 1633 out / 2759 total tokens 달력 헤더의 물음표 버튼과 오늘 날짜 표시를 왼쪽 상단으로 재배치했다. 기존엔 가로로 나란히 있던 걸 flex-direction: column으로 세로 축으로 바꾸고, 내부에서 다시 row로 묶어서 정렬했다. UI가 한층 정돈된 느낌이다. 탭 전환할 때 스크롤 위치가 그대로 남
통계·설정 탭 첫 진입 시 튜토리얼 자동 시작 기능 추가
🤖 785 in / 695 out / 1480 total tokens 사용자가 통계와 설정 탭에 처음 진입할 때 튜토리얼이 자동으로 실행되도록 구현했다. 기존 대시보드 튜토리얼과 동일한 패턴을 따라가며, 각 탭별로 적절한 가이드를 제공한다. FLAG_BITS에 stats(4)와 settings(8) 플래그를 추가했다. createHasSeenStor
튜토리얼 3단계에 가짜 데이터 표시
🤖 422 in / 722 out / 1144 total tokens 온보딩 튜토리얼 3단계에서 빈 캘린더 대신 가짜 데이터를 보여주도록 했다. 사용자가 처음 앱을 켰을 때 빈 화면보다는 "이렇게 쓰는 거야"를 보여주는 게 낫다. tutorialFakeKeys 배열을 만들고 svelte/store의 get 함수를 추가했다. 이걸로 캘린더에 미리 채워
튜토리얼 캘린더 가짜 데이터 구현
🤖 422 in / 2000 out / 2422 total tokens 튜토리얼 3단계 캘린더 뷰에 임의의 일정 데이터를 주입하여 사용자 시연 효과를 냅니다. 루트 페이지의 스크립트 영역에 가짜 데이터를 담을 배열 변수를 새로 추가합니다. svelte/store의 get 함수를 임포트하여 추후 스토어 상태 접근을 용이하게 합니다. 이 데이터는 튜토리얼
html 요소에 테마 클래스 적용으로 배경색 동적 변경 수정
🤖 598 in / 768 out / 1366 total tokens 테마 전환 시 body 배경색이 따라오지 않던 문제를 해결했다. 원인은 간단했다. CSS 변수가 정의된 테마 클래스가 body에만 적용되어 있었고, 실제로는 html 요소에 클래스를 줘야 변수가 하위로 제대로 전파된다. +layout.svelte에서 반응형으로 document.do
공노기에 스포트라이트 튜토리얼을 달았다
🤖 2585 in / 1318 out / 3903 total tokens 처음 방문한 사용자가 앱을 어떻게 쓰는지 모르겠다고 해서, 도움말 버튼과 튜토리얼을 추가했다. 헤더의 ? 버튼을 누르면 4단계로 핵심 기능을 안내하는 스포트라이트 오버레이가 뜬다. users 테이블에 tutorial_flags 컬럼을 추가해 어떤 튜토리얼을 봤는지 저장한다. 클
캘린더 요일 순서 수정
🤖 470 in / 530 out / 1000 total tokens 캘린더의 요일 표시 순서를 월요일 시작에서 일요일 시작으로 변경했다. 기존에는 getDay()로 구한 일요일(0)을 보정해 6으로 치환했는데, 이 로직을 제거했다. 요일 헤더 배열도 '월','화','수','목','금','토','일'에서 '일','월','화','수','목','금','
기록 입력 버튼 위치 조정 및 미래 날짜 차단
🤖 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으로 저장해두고, 현재 값과 비교하여 변경사항이
출퇴근 시간 팝업에 빠른 조절 버튼 추가
🤖 1180 in / 699 out / 1879 total tokens 출퇴근 시간 등록할 때 매번 타이핑하거나 시계를 조작하는 게 귀찮았다. 그래서 확인 팝업에 -1분, -5분, -10분, -60분 버튼을 달았다. 실수로 늦게 찍었거나 식사 시간을 빼고 싶을 때 한 번에 조절 가능하다. adjustTime 함수를 새로 만들었다. HH:MM 문자열을
출퇴근 시간 확인 팝업 추가
🤖 980 in / 654 out / 1634 total tokens 출퇴근 등록 전 시간을 확인하고 수정할 수 있는 팝업을 추가했다. 기존에는 출근/퇴근 버튼을 누르면 현재 시간으로 즉시 등록됐다. 실수를 방지하고 시간을 조정할 수 있도록 중간에 확인 단계를 넣었다. 팝업이 뜨면 현재 시간이 자동으로 입력되어 있고, 필요하면 time input으로
회원가입 화면 분리하고 비밀번호 확인 붙였다
🤖 807 in / 520 out / 1327 total tokens 로그인 페이지 하나에 몰아넣었던 회원가입 UI를 분리했다. 모드 전환 시 헤더 텍스트와 설명이 바뀌도록 처리했다. 비밀번호 확인 입력 필드를 추가했다. passwordConfirm 변수를 만들고 회원가입 모드에서만 노출되도록 했다. submit() 함수에서 password !==
공노기로 이름 변경하고 토스트도 깔끔하게
🤖 994 in / 590 out / 1584 total tokens 앱 이름을 '공녹'에서 '공노기'로 변경했다. 스플래시 화면의 alt 텍스트와 표시 이름 모두 수정했다. 토스트 메시지도 간소화했다. '출근 기록됨', '퇴근 기록됨'에서 '출근', '퇴근'으로 줄였다. 메시지가 길어지면 줄바꿈이 생기고 토스트 크기가 커지는데, 핵심만 전달하면 된
캘린더 셀 UX 개선: 출근시간 제거하고 초과근무 복원
🤖 835 in / 738 out / 1573 total tokens 캘린더 셀에서 출근시간 표시를 제거하고 초과근무 시간 표시를 복원했다. 기존에는 출근시간이 "8시 00분" 형식으로 표시됐는데, 좁은 셀 안에서 "8시간"처럼 보이는 문제가 있었다. 실제 근무시간이 아니라 출근 시각인데도 말이다. 사용자 입장에서는 헷갈릴 수밖에 없다. 그래서 출근
캘린더 셀 UI 정리: 초과근무 표시 제거하고 출근시간 포맷 복원
🤖 837 in / 687 out / 1524 total tokens 캘린더 셀에서 불필요한 정보를 정리했다. 초과근무 시간 표시를 제거하고, 출근시간은 '8시 00분' 같은 한글 포맷에서 '08:00' 형식으로 되돌렸다. 초과근무 시간은 빨간색 텍스트로 표시되었는데, 셀 공간을 많이 차지해서 가독성을 해쳤다. DaySheet 같은 상세 화면에서 확
모바일 캘린더 상세 영역, 바텀시트로 전환
🤖 1439 in / 687 out / 2126 total tokens 모바일에서 날짜 클릭 후 상세 정보가 보이지 않던 문제를 해결했다. 390px 화면 기준으로 캘린더 그리드와 헤더, 바텀바를 합치면 100vh를 훌쩍 넘는데, 기존 인라인 상세 영역은 그 아래에 렌더링되어 사실상 안 보이는 상태였다. 해결책으로 DaySheet를 인라인 배치에서
퀵 액션을 바텀시트로 개편하고 식사 금액 입력 팝업 추가
🤖 1164 in / 643 out / 1807 total tokens 기존 인라인 퀵 액션 버튼들을 별도 바텀시트로 분리했다. 오늘 날짜 선택 시 자동으로 슬라이드업되며, 오버레이 클릭이나 닫기 버튼으로 닫을 수 있다. 식사 버튼은 이제 금액 입력 팝업을 띄운다. 기본값이 자동 입력되지만 수정 가능하도록 했다. CSS는 fixed 포지션 오버레이에
원터치 출퇴근, 퀵 식사 기록, 설정 UX까지 한 번에 개선했다
🤖 841 in / 842 out / 1683 total tokens 출퇴근 기록을 매번 모달 열어서 하던 방식에서 벗어났다. 하단바에 스마트 버튼을 두고 현재 상태에 따라 '지금 출근' 또는 '지금 퇴근'으로 자동 전환되게 만들었다. 기록 완료 후에는 토스트로 확인시켜주고, 수정 링크도 함께 제공한다. 식사 기록도 비슷한 맥락이다. 오늘 날짜를 선
DaySheet 퀵 액션 버튼으로 출퇴근·식사 한 번에
🤖 991 in / 641 out / 1632 total tokens 오늘 날짜를 선택하면 출근, 퇴근, 식사 버튼이 바로 노출된다. 버튼 하나로 시간 기록이나 식비를 바로 등록할 수 있어 매일 반복하는 입력이 훨씬 가벼워졌다. 출근과 퇴근은 누르면 현재 시간이 기록되고, 식사는 설정에서 지정한 기본값으로 식비가 누적된다. 식사 버튼 위에는 뱃지로 횟
출근/퇴근 스마트 버튼 및 헤더 날짜 표시 구현
🤖 1052 in / 1697 out / 2749 total tokens 하단바에 오늘 날짜가 아닌 경우 버튼을 숨기고 기록 상태에 따라 출근, 퇴근, 기록수정 버튼이 자동으로 전환되도록 로직을 수정합니다. 캘린더 뷰가 아닐 때는 기존 ＋ 기록입력 버튼을 유지하여 기존 사용성을 유지하며, 버튼 클릭 시 수정 링크가 포함된 토스트 알림을 띄워 사용자의
스마트 출퇴근 버튼으로 기록 입력 UX 개선
🤖 1052 in / 805 out / 1857 total tokens 출퇴근 기록 앱의 핵심 기능인 하단바 버튼을 상태에 따라 스마트하게 전환되도록 만들었다. 오늘 날짜를 기준으로 출근 기록이 없으면 '출근', 있으면 '퇴근', 둘 다 있으면 '기록수정' 버튼이 노출된다. 오늘이 아닌 날짜를 선택하면 버튼을 아예 감춰서 잘못된 날짜에 기록하는 실수를
Svelte 반응형 블록이 입력값을 계속 초기화하던 문제 해결
🤖 488 in / 615 out / 1103 total tokens RecordModal에서 시간 입력값이 수정되지 않던 버그를 고쳤다. 원인은 reactive 블록의 과도한 반응이었다. $records가 변경될 때마다 입력 필드들이 초기화되어, 사용자가 타이핑하는 값을 덮어써버렸다. Svelte의 $: 반응문은 의존하는 모든 값이 바뀔 때 실행되
테트리스 게임과 랭킹 시스템 초기 구현
🤖 3611 in / 908 out / 4519 total tokens Svelte 5 + Vite 7 프론트엔드와 Express + PostgreSQL 백엔드로 테트리스 게임을 완성했다. 클래식 10x20 그리드에 7가지 테트로미노를 구현했고, 30초 혹은 10줄 클리어마다 레벨이 올라 블록 낙하 속도가 빨라진다. 점수는 1줄 100점부터 테트리스