TimeCheck

회사 근무 내규를 코드로 옮긴 풀스택 근무시간 관리 웹앱

출퇴근 기록부터 일반근무·시간외근무 분리, 반차·연차·공지 반영, 주간 보고서 및 시간외 근무 보고서 생성까지 한 곳에서 처리합니다.
모바일에서도 쓸 수 있도록 PWA로 구성했습니다.

---

주요 기능

• 출퇴근 기록 — 원클릭 출근/퇴근, 시각 수동 보정
• 근무시간 자동 계산 — 휴게시간, 연장근로, 야근(시간외 1형/2형) 반영
• 다양한 근무 유형 — 일반, 오전/오후 반차, 월차·연차, 공휴일
• 공지 출퇴근 — 회사 공지에 따른 출근 지연·조기 퇴근 시 목표 시간 자동 조정
• 주간 대시보드 — 주 40시간 기준 일별·주간 요약, 부족/초과 시간 표시
• 보고서 복사 — 주간 일반근무·야근 보고서를 클립보드 형식으로 생성
• PWA — 홈 화면 추가, 모바일 탭 UI
• 오프라인 — 앱 셸(Service Worker) + 오늘 기준 앞뒤 3주(총 6주) localStorage 캐시 + 쓰기 큐. 서버가 끊겨도 조회·출퇴근 수정 후 복구 시 동기화

오프라인 참고

• 한 번 정상 로드해 Service Worker가 설치된 뒤라면, 서버가 내려간 상태에서도 앱 셸과 캐시된 근무 데이터로 화면을 유지할 수 있습니다.
• Firefox는 Service Worker가 Stopped인 채 서버가 죽은 origin으로 콜드 재진입하면, 브라우저 한계로 셸이 안 뜨고 연결 거절만 보일 수 있습니다. (탭을 유지한 채 새로고침하거나 SW가 Running이면 정상)

기술 스택

구분	기술
Backend	Java 17, Spring Boot, Spring Security, Spring Session JDBC, MyBatis
Frontend	Vue 3, TypeScript, Vite, Pinia, Element Plus
Database	SQLite
기타	PWA (vite-plugin-pwa), REST API

아키텍처

환경	구성
개발	Vue (Vite) + Spring Boot 분리 실행, API는 Vite 프록시로 연동
운영	Vue 빌드 결과를 Spring 정적 리소스에 포함, 단일 JAR로 서비스

[개발]  Browser → Vite → Spring Boot → SQLite
[운영]  Browser → Spring Boot JAR → SQLite

구현 포인트

• 도메인 규칙 분리 — WorkPolicy에 근무 내규(기준 8시간, 휴게, 야근 22시 기준 분리 등)를 상수·정책으로 모아 계산 로직과 분리
• 세션 기반 인증 — Spring Security + JDBC 세션으로 로그인 상태 유지
• 프론트/백 계산 일관성 — 대시보드 미리보기와 서버 저장 시 동일 규칙 적용
• 반응형 UI — 데스크톱 테이블 뷰와 모바일 탭 레이아웃 분기

구축 및 실행

개발

# 백엔드 (포트 8082)
./mvnw spring-boot:run

# 프론트 (포트 5173, /api는 Spring으로 프록시)
cd frontend && npm install && npm run dev

운영 빌드

cd frontend && npm ci && npm run build:deploy && cd ..
./mvnw -DskipTests package

산출물: target/ROOT.jar

java -jar target/ROOT.jar

SQLite DB는 ./data/timecheck.db에 생성됩니다.

스크린샷