한국형 스타트업용 HR 관리 플랫폼 (MVP 데모)
에이티 스타트업을 위한 종합 HR 관리 플랫폼입니다. 직원 지출결의, 급여명세서, 증명서 발급을 효율적으로 관리할 수 있습니다.
- 📊 지출결의: 직원들의 카드 사용 내역을 관리하고 승인하세요
- 💰 급여명세서: 월별 급여 기간을 생성하고 4대 보험을 계산하며 급여명세서를 발급하세요
- 📄 증명서: 재직증명서와 경력증명서를 발급하고 관리하세요
- 👥 직원관리: 직원 정보를 추가, 수정, 삭제하세요
- ✅ 한국어 완벽 지원
- ✅ 반응형 디자인 (모바일 친화적)
- ✅ LocalStorage 데이터 저장 (설치 필요 없음)
- ✅ 데모 데이터 제공 (테스트 바로 시작 가능)
- ✅ 4대 보험 자동 계산
- ✅ CSV 엑셀 다운로드
- Node.js 18+ 버전
- npm, yarn, 또는 pnpm 패키지 매니저
- 최신 버전의 브라우저
-
저장소 복제
git clone https://github.com/your-repo/hr-platform.git cd hr-platform -
의존성 설치
npm install # 또는 yarn install # 또는 pnpm install
-
개발 서버 시작
npm run dev # 또는 yarn dev # 또는 pnpm dev
-
브라우저에서 열기 http://localhost:3000 에 접속하세요
hr-platform/
├── app/ # Next.js 앱 라우터
│ ├── layout.tsx # 루트 레이아웃 (Toaster, 폰트)
│ ├── page.tsx # 랜딩 페이지
│ └── dashboard/ # 대시보드 페이지
│ ├── layout.tsx # 사이드바 + 헤더 레이아웃
│ ├── page.tsx # 대시보드 개요
│ ├── expenses/ # 지출결의
│ ├── payroll/ # 급여명세서
│ ├── certificates/ # 증명서
│ └── employees/ # 직원관리
├── components/ # 리액트 컴포넌트
│ ├── ui/ # shadcn/ui 기본 컴포넌트
│ ├── layout/ # 레이아웃 컴포넌트
│ ├── shared/ # 공통 컴포넌트
│ └── dashboard/ # 대시보드 전용 컴포넌트
├── lib/ # 유틸리티 함수
│ ├── types.ts # 타입스크립트 정의
│ ├── storage.ts # LocalStorage 매니저
│ ├── seed-data.ts # 데모 데이터 생성기
│ └── utils.ts # 포맷팅, 계산 함수
└── public/ # 정적 에셋
├── logo.svg # HR 로고
└── company-seal.svg # 회사 인감
애플리케이션이 최초 실행될 때 자동으로 다음 데모 데이터가 로드됩니다:
- 회사 정보: 에이티 스타트업 주식회사
- 직원: 5명 (개발팀, 디자인팀, 마케팅팀, 인사팀)
- 지출결의: 10건 (승인됨/대기중/반려됨)
- 급여 기간: 2개 (완료된 이전 달)
- 증명서: 5건 (발급완료/대기중)
| 사번 | 이름 | 부서 | 직급 | 기본급 |
|---|---|---|---|---|
| E001 | 김민지 | 개발팀 | 시니어 개발자 | 5,500,000원 |
| E002 | 박지훈 | 개발팀 | 주니어 개발자 | 3,800,000원 |
| E003 | 이서연 | 디자인팀 | UI/UX 디자이너 | 4,200,000원 |
| E004 | 정우진 | 마케팅팀 | 마케팅 매니저 | 4,800,000원 |
| E005 | 최수진 | 인사팀 | HR 담당자 | 3,600,000원 |
애플리케이션을 처음 열면 대시보드 페이지가 나타납니다.
- 요약 카드: 전체 직원 수, 총 지출, 급여 기간, 증명서 현황
- 최근 지출결의: 최근 5건의 지출결의
- 최근 증명서: 최근 5건의 증명서 요청
- 빠른 액션: 각 메뉴로 바로 이동
- 지출결의 탭으로 이동
- "+ 새 지출결의" 버튼 클릭
- 필수 정보 입력:
- 직원 선택
- 카테고리 (교통/식비/용품/교육/기타)
- 금액 (1원 ~ 1,000,000원)
- 내용 (최소 10자)
- 사용일
- 카드 뒷 4자리 (예: 1234)
- 가맹점명 (선택사항)
- "생성" 버튼 클릭
- 상태 필터: "전체", "대기중", "승인됨", "반려됨" 중 선택
- 목록에서 승인할 지출결의 찾기
- 지출결의 행 클릭 → 상세정보 다이얼로그
- "승인" 버튼 클릭
- 상세정보 다이얼로그에서 "반려" 버튼 클릭
- 반려 사유 입력 (필수)
- "반려" 확인
- 상단의 "엑셀 다운로드" 버튼 클릭
- CSV 파일로 다운로드
- 급여명세서 탭으로 이동
- "+ 새 급여 기간" 버튼 클릭
- 기간 정보 입력:
- 기간 이름 (예: "2026년 1월 급여")
- 시작일
- 종료일
- "생성" 버튼 클릭
- 급여 기간이 "작성 중" 상태로 표시됨
- "내역 생성" 버튼 클릭
- 모든 직원의 급여 항목이 자동으로 생성됨
- 기본급
- 4대 보험 (국민연금 4.5%, 건강보험 3.495%, 고용보험 0.9%)
- 소득세
- 주민세
- 실지급액 계산
- 모든 급여 항목 확인 및 필요시 수정
- "완료" 버튼 클릭
- 급여 기간 상태가 "완료"로 변경됨
- 완료 탭에서 목록 보기
- 급여 기간 행 클릭 → 상세정보 다이얼로그
- 급여명세서 형식으로 표시
- 급여 기간 상세 페이지에서 "엑셀 다운로드" 버튼 클릭
- 전체 직원 급여 정보가 CSV로 다운로드
- 증명서 탭으로 이동
- "+ 새 증명서 요청" 버튼 클릭
- 필수 정보 입력:
- 직원 선택
- 증명서 종류 (재직증명서/경력증명서)
- 용도 (최소 2자)
- 급여 포함 여부 (동의 필요)
- "요청" 버튼 클릭
- "대기 중" 상태의 증명서 찾기
- 증명서 행 클릭 → 미리보기 다이얼로그
- "발급" 버튼 클릭
- 증명서 번호 자동 생성
- 상태가 "발급완료"로 변경됨
- "발급완료" 증명서의 "다운로드" 버튼 클릭
- PDF 파일로 다운로드
- 회사 인감이 포함된 문서
- 직원관리 탭으로 이동
- "+ 새 직원 추가" 버튼 클릭
- 필수 정보 입력:
- 이름 (최소 2자)
- 이메일
- 연락처
- 부서
- 직급
- 입사일
- 고용형태 (정규직/계약직/파트타임)
- 재직상태 (재직중/휴직중/비재직/퇴사)
- 기본급 (원)
- 은행
- 계좌번호
- "추가" 버튼 클릭
- 사번 자동 생성
- 직원 목록에서 원하는 직원 찾기
- 직원 행 클릭
- 수정 폼이 나타남
- 필요한 정보 수정
- "수정" 버튼 클릭
- 직원 목록에서 원하는 직원 찾기
- "삭제" 버튼 클릭
- 삭제 확인
- 상단 헤더에서 "데모 데이터 초기화" 버튼 클릭
- 모든 데이터가 삭제되고 데모 데이터가 다시 로드됨
- 페이지가 새로고침
- 브라우저 LocalStorage
- 데이터는 브라우저에 저장됩니다
- 캐시/브라우저 데이터를 지우면 모든 데이터가 사라짐
- 프레임워크: Next.js 15 (App Router)
- 언어: TypeScript
- 스타일링: Tailwind CSS
- UI 컴포넌트: shadcn/ui
- 상태 관리: React Hooks (useState, useEffect)
- 데이터 저장: LocalStorage
- 데이터 관리: Custom Storage Manager
- 폰트: Noto Sans KR (한국어 최적화)
- 알림: Sonner (Toast Notifications)
- 아이콘: Lucide React
- 데스크톱: 1920px 이상
- 태블릿: 768px ~ 1024px
- 모바일: 320px 이상
- 사이드바: 모바일에서 숨김 메뉴
- 테이블: 모바일에서 카드 레이아웃으로 변환
- 다이얼로그: 전체 화면의 80% 크기
- 버튼: 최소 44px 높이 (터치 친화적)
- 로그인 없음: 누구나 접근 가능
- 데이터 암호화 없음: 로컬 스토리지에 평문 저장
- 백업 없음: 브라우저 데이터 지우면 모든 데이터 사라짐
- 감사 로그 없음: 액션 추적 불가능
- PIPA 비준수: 개인정보 보호법 완전 준수 미충족
- LocalStorage 제한: 약 5-10MB 저장 공간
- 다중 사용자 불가: 동시에 한 사람만 사용 가능
- 단일 테넌트: 하나 회사만 관리 가능
- 데이터 수명 제한 없음: 테스트 목적으로 대량 데이터 생성 가능
- Supabase 연동 필요: 실제 운영 시 데이터베이스 연동 필요
- 인증 추가 필요: 로그인/인가 시스템 구축 필요
- 보안 강화 필요: 데이터 암호화, SSL/TLS, RLS 정책
- 알림/이메일 시스템: 실제 알림 발송 기능 필요
- 백업/복구: 자동 백업 시스템 필요
| 기능 | 순위 | 설명 |
|---|---|---|
| 지출결의 | ✅ | 직원 지출 관리, 승인 워크플로우 |
| 급여명세서 | ✅ | 급여 기간 관리, 4대 보험 자동 계산 |
| 증명서 | ✅ | 증명서 요청 및 발급, PDF 다운로드 |
| 직원관리 | ✅ | 직원 CRUD 연산 |
| 대시보드 | ✅ | 전체 현황 요약 및 빠른 액션 |
- OCR 영수증 인식
- 카드사 연동
- 세무사 협업 포털
- 실제 PDF 생성 (현재는 텍스트)
- 이메일 알림 시스템
- 감사 로그
- 백업/복구
- SSO/인증 통합
- 멀티테넌트 지원
- TypeScript 오류:
npm run build명령어로 확인 - ESLint 오류: 에디터의 linter 기능 사용
- 데이터 타입 오류: 브라우저 콘솔 확인
- 개발자 도구 콘솔에서 에러 메시지 확인
localStorage관련 오류가 있는 경우 캐시 지우고 다시 시작
이 프로젝트는 MIT 라이선스 하에서 사용할 수 있습니다.
- 개발자
- 디자이너
- Supabase 데이터베이스 연동
- 사용자 인증 시스템 구축
- 멀티테넌트 지원
- 실제 PDF 생성 (jsPDF 또는 react-pdf)
- OCR 영수증 인식
- 카드사 API 연동
- 이메일 알림 시스템
- 감사 로그 시스템
- 자동 백업
- 4보험 API 연동
- 연말정산 자동화
- SSO/인증 통합
- 모바일 앱 (React Native)
- PIPA 준수 완전 준수
- ISMS-P 인증 준비
질문이나 문제가 있으시면:
- GitHub 이슈: https://github.com/your-repo/hr-platform/issues
- 개발팀에게 문의
즐거운 코딩! 🚀