💰 시급이요

내 시급, 내 근무 기록, 내 수입을 한눈에!

시급이요는 여러 아르바이트의 급여를 가장 편리하게 계산하고 관리할 수 있도록 돕는 웹 애플리케이션입니다. 복잡한 엑셀 시트나 수기 계산 없이, 직관적인 UI로 당신의 소중한 시간을 아껴보세요.

🚀 바로가기

https://hrwage.run.place/

✨ 주요 특징

• 🏢 여러 개의 아르바이트를 한 번에!

  • 여러 직업을 손쉽게 추가하고, 각기 다른 시급과 근무 기록을 체계적으로 관리할 수 있습니다.

• 🧠 과거 시급까지 똑똑하게 계산

  • 시급이 변경되어도 걱정 마세요. ‘적용 시작일’ 기준의 정확한 시급을 찾아 급여를 자동으로 계산해주는 스마트함을 갖췄습니다.

• 📅 달력으로 한눈에 보는 근무 기록

  • 달력 기반의 직관적인 인터페이스로 언제, 얼마나 일했는지 쉽게 파악하고, 클릭 한 번으로 근무를 기록할 수 있습니다.

• 📊 월별 리포트로 자동 정산

  • 매월 총 근무 시간, 예상 수입 등을 포함한 상세 리포트를 제공하여 재정 관리를 돕습니다.

• 📱 앱처럼 설치해서 사용

  • PWA(Progressive Web App)를 지원하여, 앱처럼 홈 화면에 추가하고 오프라인에서도 사용할 수 있습니다.

👨‍💻 개발 이야기

이 프로젝트는 시즈를 위해 만들었습니다. 손 메모로 매번 다른 시급과 근무 시간을 엑셀로 정리하고 계산하는 과정은 번거로웠다고 합니다. ‘좀 더 쉽고 편하게 급여를 관리하도록 도와줄 수 수 없을까?’라는 생각으로 시작되었습니다.

시급이요는 사용자가 최소한의 노력으로 최대의 편의를 누릴 수 있도록 직관적인 사용자 경험(UX)에 초점을 맞춰 개발되었습니다. 복잡한 기능 대신, 아르바이트생에게 꼭 필요한 핵심 기능(직업 관리, 시급 이력, 근무 기록, 월별 정산)을 담아냈습니다.

React와 Supabase를 기반으로 빠르게 프로토타입을 구현했으며, 사용자의 피드백을 반영하여 지속적으로 개선하고 있습니다. 이 작은 도구가 당신의 소중한 땀의 결실을 관리하는 데 유용한 비서가 되기를 바랍니다.

🚀 사용법

1. Google 계정으로 로그인: 별도의 회원가입 없이 Google 계정으로 간편하게 시작하세요.
2. 직업 추가: ‘직업 관리’ 메뉴에서 첫 아르바이트 정보를 등록합니다. (예: 카페 알바)
3. 시급 설정: 추가한 직업을 선택하고, ‘언제부터 적용되는지’와 함께 시급을 입력합니다. 시급이 변경되면 새로 추가하면 됩니다.
4. 근무 기록: 달력에서 근무한 날짜를 선택하고, 출근 및 퇴근 시간, 식대, 간단한 메모를 남기고 저장하세요.
5. 리포트 확인: ‘월별 리포트’ 메뉴에서 해당 월의 총 수입과 근무 내역을 한눈에 확인하세요.

📱 휴대폰에서 홈 화면에 추가하는 방법

시급이요는 PWA(Progressive Web App)를 지원하여 앱처럼 사용할 수 있습니다. 아래 안내에 따라 휴대폰 홈 화면에 추가해보세요.

Android (Chrome 기준)

1. https://hrwage.run.place/에 접속합니다.
2. 브라우저 우측 상단의 메뉴(︙)를 누릅니다.
3. “홈 화면에 추가” 또는 “앱 설치”를 선택합니다.
4. 안내에 따라 추가하면 홈 화면에 아이콘이 생성됩니다.

iPhone (Safari 기준)

1. https://hrwage.run.place/에 접속합니다.
2. 하단의 공유 버튼( )을 누릅니다.
3. “홈 화면에 추가”를 선택합니다.
4. 이름을 확인한 뒤 “추가”를 누르면 홈 화면에 아이콘이 생성됩니다.

이제 앱처럼 빠르게 실행할 수 있습니다!

🛠️ 기술 스택

• 프론트엔드: React, Tailwind CSS
• 백엔드: Supabase
• 배포: GitHub Pages

👨‍🔧 개발자 가이드

이 프로젝트는 React 기반의 웹 애플리케이션입니다. 개발 환경 설정 및 배포에 대한 가이드는 다음과 같습니다.

1. 프로젝트 설정

프로젝트를 로컬 환경에서 실행하기 위해 다음 단계를 따르세요.

1. 저장소 클론:

   git clone https://github.com/your-username/szwagecalc.git
   cd szwagecalc
   

2. 의존성 설치:

   npm install
   

3. 환경 변수 설정: 프로젝트 루트에 .env.local 파일을 생성하고 Supabase 관련 환경 변수를 설정합니다. 이 변수들은 Supabase 프로젝트 설정에서 확인할 수 있습니다.

   REACT_APP_SUPABASE_URL=YOUR_SUPABASE_URL
   REACT_APP_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
   

2. 개발 서버 실행

개발 모드로 애플리케이션을 실행합니다. 변경 사항이 있을 때마다 자동으로 새로고침됩니다.

npm start

애플리케이션은 일반적으로 http://localhost:3000에서 실행됩니다.

3. 프로덕션 빌드

배포를 위한 프로덕션 빌드를 생성합니다. 빌드된 파일들은 build/ 디렉토리에 생성됩니다.

npm run build

4. 배포

npm run deploy 스크립트를 실행하여 GitHub Pages에 배포할 수 있습니다.

npm run deploy

5. 데이터베이스 스키마 (Supabase)

애플리케이션에서 사용하는 주요 데이터베이스 테이블 스키마는 다음과 같습니다.

jobs

• id: uuid (PK)
• user_id: uuid (FK, auth.users.id)
• job_name: text
• description: text (nullable)
• created_at: timestamptz
• is_deleted: boolean (default: FALSE)

hourly_rate_history

• id: bigint (PK)
• user_id: uuid (FK, auth.users.id)
• job_id: uuid (FK, jobs.id)
• hourly_rate: numeric
• effective_date: date
• end_date: date (nullable)

work_records

• id: bigint (PK)
• user_id: uuid (FK, auth.users.id)
• job_id: uuid (FK, jobs.id)
• date: date
• start_time: time
• end_time: time
• meal_allowance: numeric
• notes: text (nullable)
• daily_wage: numeric

profiles

• user_id: uuid (PK, FK, auth.users.id)
• username: text

6. 주요 해결 과제

개발 과정에서 해결한 주요 기술적 과제 및 버그 수정 목록입니다.

• 직업 관리 (JobManagementModal)

  • 직업 삭제 시 근무 기록 유지 (소프트 삭제): 직업을 삭제하더라도 해당 직업과 관련된 근무 기록은 보존되도록 소프트 삭제 방식을 도입했습니다. jobs 테이블에 is_deleted 컬럼을 추가하고, 직업 삭제 시 이 값을 TRUE로 업데이트하며, UI에서는 is_deleted가 FALSE인 직업만 표시하도록 변경했습니다.
  • 직업 설명 저장 오류 해결: description 필드가 정상적으로 저장 및 로드되도록 수정했습니다.
  • 모달 유지 기능 추가: 직업 추가/변경/삭제 후 모달이 닫히지 않고 변경 사항이 반영된 상태로 유지되도록 개선했습니다.

• 근무 추가 (DailyRecordModal)

  • 적용 시급 미표시 문제 해결: 날짜와 직업에 맞는 시급이 UI에 정확히 표시되도록 조회 로직을 개선했습니다.
  • 시간 미입력 시 UX 개선: 시간 미입력 상태로 저장 시도 시 사용자에게 명확한 알림을 제공하도록 수정했습니다.

• 데이터 동기화

  • 근무 목록 데이터 비동기화 문제 해결: 시급 변경 시 DailyRecordListModal의 일급 정보가 즉시 재계산 및 반영되도록 상태 관리 로직을 수정했습니다.

• 서비스 워커 및 PWA

  • 서비스 워커 등록 오류 해결: precache 관련 t is not iterable 오류 및 404 오류를 해결하여 PWA가 안정적으로 작동하도록 서비스 워커 설정을 수정했습니다.

• UI/UX 개선

  • 모달 메시지 간소화: 토스(Toss) 스타일을 참고하여 모든 사용자 안내 메시지를 간결하고 직관적으로 개선했습니다.
  • 컨텍스트 API 오류 해결: useToast must be used within a ToastProvider 런타임 오류를 해결하기 위해 App.js의 컴포넌트 구조를 리팩토링했습니다.
  • 근무 기록 목록 UI 개선: 근무 기록 편집/삭제 버튼을 우측으로 정렬하여 가독성 및 사용성을 향상했습니다.
  • 월급 확인 모달 일별 상세 내역 UI 개선: 토스 스타일을 적용하여 일별 상세 내역을 카드 형태로 표시하고, 일급을 강조하며, 날짜 및 기타 정보의 가독성을 높였습니다.
  • 월급 확인 모달 요약 정보 카드화: 총 근무 시간, 총 식대, 총 수입 요약 정보를 카드 형태로 변경하여 시각적 구분을 명확히 했습니다.
  • 근무 시간 표시 형식 통일: 총 근무 시간 및 일별 근무 시간 표시를 “시간 분” 형식으로 통일하여 가독성을 높였습니다.
  • 직업 관리 모달 버튼 아이콘화: 직업 관리 모달의 수정/삭제 버튼을 아이콘으로 변경하고 상하 배치하여 공간 효율성을 높였습니다.

📧 피드백

시급이요 앱에 대한 소중한 의견을 보내주세요. 여러분의 피드백은 앱 개선에 큰 도움이 됩니다.

devtestudinidae@gmail.com

기여

이 프로젝트에 기여하고 싶으시다면, 언제든지 Pull Request를 보내주세요. 버그 리포트나 기능 제안도 환영합니다.

라이선스

이 프로젝트는 MIT 라이선스에 따라 배포됩니다.