-
Notifications
You must be signed in to change notification settings - Fork 0
Employer Flow
l2juhan edited this page Apr 18, 2026
·
3 revisions
고용주가 사용하는 주요 기능의 플로우를 설명합니다.
| 항목 | 내용 |
|---|---|
| 대상 사용자 | userType: "EMPLOYER" |
| 진입점 | EmployerHomeScreen (홈 화면) |
| 주요 기능 | 일간 근무 관리, 직원 계약 관리, 근무지 관리, 받은 요청 처리 |
| API 모듈 | src/api/employer/ |
EmployerStack (하단 탭 네비게이션)
├─ 홈 → EmployerHomeScreen
│ └─ Drawer →
│ ├─ 프로필 수정 → EmployerProfileEditScreen
│ ├─ 근무지 관리 → EmployerWorkplaceManageScreen
│ ├─ 받은 근무요청 → EmployerReceivedRequestsScreen
│ ├─ 알림 설정 → NotificationSettingsScreen
│ └─ 계정 이용/동의 (BottomSheet)
├─ 근무자 → EmployerWorkerManageScreen
└─ 송금 → EmployerRemittanceManageScreen
┌─────────────────────────────────────────────────────────────────┐
│ 홈 화면 구조 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────┐ │
│ │ Header (☰ 햄버거 → Drawer) │ │
│ ├───────────────────────────────────────────┤ │
│ │ WorkerManageHeader │ │
│ │ [근무지 선택 드롭다운 ▼] │ │
│ ├───────────────────────────────────────────┤ │
│ │ NoticeBoard (공지사항 카드 목록) │ │
│ │ [+ 공지 작성] │ │
│ ├───────────────────────────────────────────┤ │
│ │ 날짜 선택 영역 │ │
│ │ "2026년 3월 5일 (수)" [📅 캘린더 버튼] │ │
│ ├───────────────────────────────────────────┤ │
│ │ EmployerTimeline (24시간 타임라인) │ │
│ │ ┌──────────────────────────────────────┐ │ │
│ │ │ 08 09 10 11 12 13 14 15 16 │ │ │
│ │ │ ████ 이주한 ████ │ │ │
│ │ │ ███████ 김철수 ████████ │ │ │
│ │ │ 🔴 현재 시간 표시 │ │ │
│ │ └──────────────────────────────────────┘ │ │
│ ├───────────────────────────────────────────┤ │
│ │ EmployerWorkerListSection │ │
│ │ "근무 리스트" [+ 근무 추가] │ │
│ │ ┌─────────────────────────────────────┐ │ │
│ │ │ WorkerCard (접기/펼치기) │ │ │
│ │ │ 이주한 09:00~15:00 SCHEDULED │ │ │
│ │ │ (펼침 시: 수정/삭제 버튼) │ │ │
│ │ └─────────────────────────────────────┘ │ │
│ └───────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ 일간 근무 조회 플로우 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ [화면 진입] │
│ │ │
│ ▼ │
│ useWorkplaceManagement() → 근무지 목록 로드 │
│ useEmployerDailyWorkRecords(workplaceId, dateStr) │
│ │ │
│ ▼ │
│ GET /api/employer/work-records │
│ ?workplaceId={id}&startDate={date}&endDate={date} │
│ │ │
│ ├─→ 성공 → WorkRecord[] 저장 │
│ │ │ │
│ │ ├─→ EmployerTimeline에 타임라인 바 렌더링 │
│ │ │ (상태별 색상: SCHEDULED/COMPLETED/PENDING 등) │
│ │ │ │
│ │ └─→ EmployerWorkerListSection에 카드 렌더링 │
│ │ │
│ └─→ 실패 → 빈 배열 표시 │
│ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ 근무 추가 플로우 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ [+ 근무 추가] 버튼 클릭 │
│ │ │
│ ▼ │
│ EmployerAddWorkModal 표시 (BottomSheetModal) │
│ │ │
│ ▼ │
│ 근무지의 활성 근무자 목록 로드 (칩 형태로 표시) │
│ │ │
│ ▼ │
│ 사용자 입력: │
│ │ • 근무자 선택 (칩 클릭) │
│ │ • 근무일 (WheelPicker) │
│ │ • 시작/종료 시간 (WheelPicker) │
│ │ • 휴게 시간 (0~60분, 10분 단위) │
│ │ • "익일" 뱃지 (종료 < 시작 시 자동 표시) │
│ │ │
│ ▼ │
│ [추가하기] 버튼 클릭 │
│ │ │
│ ▼ │
│ POST /api/employer/work-records │
│ { contractId, workDate, startTime, endTime, breakMinutes } │
│ │ │
│ ├─→ 성공 → 모달 닫기 + 목록 새로고침 │
│ └─→ 실패 → 에러 Alert │
│ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ 근무 수정/삭제 플로우 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ WorkerCard 펼침 │
│ │ │
│ ├─→ [수정] 버튼 클릭 │
│ │ │ │
│ │ ▼ │
│ │ EmployerEditWorkModal 표시 │
│ │ (기존 데이터로 폼 초기화) │
│ │ │ │
│ │ ▼ │
│ │ 시간/휴게시간 수정 → [수정하기] 클릭 │
│ │ │ │
│ │ ▼ │
│ │ PUT /api/employer/work-records/{id} │
│ │ │ │
│ │ ├─→ 성공 → 모달 닫기 + 목록 새로고침 │
│ │ └─→ 실패 → 에러 Alert │
│ │ │
│ └─→ [삭제] 버튼 클릭 │
│ │ │
│ ▼ │
│ 확인 Alert 표시 │
│ │ │
│ ├─→ 확인 → DELETE /api/employer/work-records/{id} │
│ │ │ │
│ │ ├─→ 성공 → Optimistic UI 제거 │
│ │ └─→ 실패 → 에러 Alert │
│ │ │
│ └─→ 취소 → 닫기 │
│ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ 직원관리 화면 구조 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────┐ │
│ │ Header │ │
│ ├───────────────────────────────────────────┤ │
│ │ WorkerManageHeader │ │
│ │ [근무지 선택 ▼] [+ 근무자 추가] │ │
│ ├───────────────────────────────────────────┤ │
│ │ WorkerFilterTabs │ │
│ │ [전체] [이주한] [김철수] [박영희] │ │
│ ├───────────────────────────────────────────┤ │
│ │ WorkerCard (Accordion) │ │
│ │ ┌─────────────────────────────────────┐ │ │
│ │ │ [👤] 이주한 월/수/금 │ │ │
│ │ │ (펼침 시) │ │ │
│ │ │ 시급: ₩10,030 │ │ │
│ │ │ 급여지급일: 매월 25일 │ │ │
│ │ │ 4대보험: ✅ 소득세: ✅ │ │ │
│ │ │ ┌──────────────────────────────┐ │ │ │
│ │ │ │ 월 09:00~15:00 휴게 30분 │ │ │ │
│ │ │ │ 수 09:00~15:00 휴게 30분 │ │ │ │
│ │ │ │ 금 09:00~15:00 휴게 30분 │ │ │ │
│ │ │ │ [+ 근무 시간 추가] (수정 중)│ │ │ │
│ │ │ └──────────────────────────────┘ │ │ │
│ │ │ [캘린더뷰] [수정/저장] [퇴사처리] │ │ │
│ │ └─────────────────────────────────────┘ │ │
│ └───────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ 근무자 추가 플로우 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ [+ 근무자 추가] 버튼 클릭 │
│ │ │
│ ▼ │
│ AddWorkerModal 표시 (BottomSheetModal) │
│ │
│ ═══════════════════════════════════════════ │
│ STEP 1: 근무자 검색 + 기본 설정 │
│ ═══════════════════════════════════════════ │
│ │ │
│ ▼ │
│ 근무자 코드 입력 → [검색] 클릭 │
│ │ │
│ ▼ │
│ GET /api/employer/workers?code={workerCode} │
│ │ │
│ ├─→ 발견 → 근무자 정보 표시 (이름, 전화번호) │
│ │ │ │
│ │ ▼ │
│ │ 추가 정보 입력: │
│ │ • 시급 (₩ 숫자 포맷) │
│ │ • 급여지급일 (1~31) │
│ │ • 4대보험 토글 │
│ │ • 소득세 토글 │
│ │ │ │
│ │ ▼ │
│ │ [다음 단계] → │
│ │ │
│ └─→ 미발견 → "해당 코드의 근무자를 찾을 수 없습니다" Alert │
│ │
│ ═══════════════════════════════════════════ │
│ STEP 2: 근무 스케줄 설정 │
│ ═══════════════════════════════════════════ │
│ │ │
│ ▼ │
│ WorkTimeRow × N개 (요일별 근무시간 설정) │
│ • 요일 선택 (월~일) │
│ • 시작/종료 시간 (WheelPicker) │
│ • 휴게 시간 │
│ [+ 근무 시간 추가] → 새 행 추가 │
│ │ │
│ ▼ │
│ 스케줄 시각화 차트 (7일 × 24시간 타임라인) │
│ │ │
│ ▼ │
│ [추가하기] 버튼 클릭 │
│ │ │
│ ▼ │
│ POST /api/employer/workplaces/{workplaceId}/workers │
│ { workerCode, hourlyWage, workSchedules[], paymentDay, ... } │
│ │ │
│ ├─→ 성공 → 모달 닫기 + 목록 새로고침 │
│ └─→ 실패 → 에러 Alert │
│ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ 계약 수정/퇴사처리 플로우 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ WorkerCard 펼침 │
│ │ │
│ ├─→ [수정] 버튼 클릭 │
│ │ │ │
│ │ ▼ │
│ │ 편집 모드 진입 (인라인 수정) │
│ │ • 시급 수정 (숫자 입력) │
│ │ • 급여지급일 수정 │
│ │ • 근무시간 수정/추가/삭제 │
│ │ │ │
│ │ ▼ │
│ │ [저장] 클릭 │
│ │ │ │
│ │ ▼ │
│ │ PUT /api/employer/contracts/{id} │
│ │ { hourlyWage, workSchedules[], paymentDay, ... } │
│ │ │ │
│ │ ├─→ 성공 → 편집 모드 종료 + UI 업데이트 │
│ │ └─→ 실패 → 에러 Alert │
│ │ │
│ └─→ [퇴사처리] 버튼 클릭 (빨간색) │
│ │ │
│ ▼ │
│ 확인 Alert 표시 │
│ │ │
│ ├─→ 확인 → DELETE /api/employer/contracts/{id} │
│ │ │ │
│ │ ├─→ 성공 → 목록에서 제거 │
│ │ └─→ 실패 → 에러 Alert │
│ │ │
│ └─→ 취소 → 닫기 │
│ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ 근무지 추가 플로우 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Drawer → [근무지 관리] → EmployerWorkplaceManageScreen │
│ │ │
│ ▼ │
│ 기존 근무지 카드 목록 표시 (이름, 주소, 사업자번호, 근무자 수) │
│ │ │
│ ▼ │
│ [+ 새로운 근무지 추가하기] 클릭 │
│ │ │
│ ▼ │
│ AddWorkplaceModal 표시 (BottomSheetModal) │
│ │ │
│ ▼ │
│ 입력 항목: │
│ │ • 사업자 등록번호 (TextInput) │
│ │ • 근무지명 (TextInput) │
│ │ • 주소 검색 (카카오 주소 API 연동) │
│ │ • 색상 선택 (컬러 피커) │
│ │ • 5인 미만 사업장 토글 │
│ │ │
│ ▼ │
│ [추가하기] 버튼 클릭 │
│ │ │
│ ▼ │
│ POST /api/employer/workplaces │
│ { businessNumber, name, address, colorCode, ... } │
│ │ │
│ ├─→ 성공 → 모달 닫기 + 목록 새로고침 │
│ └─→ 실패 → 에러 Alert │
│ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ 근무지 삭제 플로우 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ EmployerWorkplaceCard 우측 상단 [🗑 휴지통 아이콘] 클릭 │
│ │ │
│ ▼ │
│ 확인 Alert "정말 삭제하시겠습니까?" │
│ │ │
│ ├─→ 확인 → DELETE /api/employer/workplaces/{id} │
│ │ │ │
│ │ ├─→ 성공 → 목록에서 제거 (자체 state 갱신) │
│ │ └─→ 실패 → 에러 Toast │
│ │ │
│ └─→ 취소 → 닫기 │
│ │
└─────────────────────────────────────────────────────────────────┘
구현 메모:
-
EmployerWorkplaceCard가onDeleteprop을 받아 삭제 버튼을 노출 -
EmployerWorkplaceManageScreen은useWorkplaceManagement훅을 쓰지 않고 자체 state로 구현되어 있음 (PR #48에서 미사용 핸들러 제거)
┌─────────────────────────────────────────────────────────────────┐
│ 받은 근무요청 화면 구조 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────┐ │
│ │ Header │ │
│ ├───────────────────────────────────────────┤ │
│ │ WorkplaceTabSelector │ │
│ │ [밥은화] [카페 모카] [편의점] │ │
│ │ ─────── (밑줄 = 선택) │ │
│ ├───────────────────────────────────────────┤ │
│ │ StatusFilter │ │
│ │ [전체] [대기] [승인] [거절] │ │
│ ├───────────────────────────────────────────┤ │
│ │ ReceivedRequestCard (접기/펼치기) │ │
│ │ ┌─────────────────────────────────────┐ │ │
│ │ │ [추가] 2026-02-18 이주한 대기 │ │ │
│ │ │ (펼침 시 - 상세 lazy 로딩) │ │ │
│ │ │ 요청 시간: 09:00 → 10:00 │ │ │
│ │ │ 요청 휴게: 0분 → 30분 │ │ │
│ │ │ [승인] [거절] │ │ │
│ │ └─────────────────────────────────────┘ │ │
│ ├───────────────────────────────────────────┤ │
│ │ Pagination │ │
│ │ [1] [2] [3] ... [10] │ │
│ └───────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ 요청 처리 플로우 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ReceivedRequestCard 클릭 → 펼침 │
│ │ │
│ ▼ │
│ 상세 정보 lazy 로딩 │
│ GET /api/employer/correction-requests/{id} │
│ │ │
│ ├─→ 성공 → 서버 응답 사용 │
│ └─→ 실패(500, CREATE 타입) → 폴백 │
│ → allRequests에서 해당 ID 찾아 │
│ CorrectionRequestDetail 형태로 변환 │
│ │ │
│ ▼ │
│ 요청 상세 표시 (기존값 vs 요청값 비교) │
│ │ │
│ ├─→ [승인] 버튼 클릭 │
│ │ │ │
│ │ ▼ │
│ │ PUT /api/employer/correction-requests/{id}/approve │
│ │ │ │
│ │ ├─→ 성공 → 상태를 "승인"으로 변경 + 목록 새로고침 │
│ │ └─→ 실패 → 에러 Alert │
│ │ │
│ └─→ [거절] 버튼 클릭 │
│ │ │
│ ▼ │
│ PUT /api/employer/correction-requests/{id}/reject │
│ │ │
│ ├─→ 성공 → 상태를 "거절"로 변경 + 목록 새로고침 │
│ └─→ 실패 → 에러 Alert │
│ │
└─────────────────────────────────────────────────────────────────┘
⚠️ 알려진 백엔드 이슈 (2026-03-09, PR #41)GET /api/employer/correction-requests/{id}가 CREATE 타입 요청 ID에 대해서만 500 에러를 반환하는 버그가 있다. 프론트엔드에서는 상세 조회 실패 시 이미 로드된 목록 데이터(allRequests)에서 해당 ID를 찾아 표시하는 폴백을 적용했다. 승인/거절(PUT .../approve|reject)의 500 에러는 백엔드 수정이 필요하다.
┌─────────────────────────────────────────────────────────────────┐
│ 고용주 훅 재사용 구조 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ [공통 훅] │
│ │ │
│ ├─→ useWorkplaceManagement() │
│ │ → 근무지 목록 + 선택 + CRUD (홈, 직원관리에서 공용) │
│ │ │
│ └─→ useEmployerDrawer(navigation) │
│ → Drawer 열기/닫기 + 네비게이션 중복 방지 │
│ │
│ [홈 화면 전용] │
│ │ │
│ ├─→ useEmployerDailyWorkRecords(workplaceId, date) │
│ │ → 일간 근무기록 조회 + Optimistic 삭제 │
│ │ │
│ └─→ useWorkTimePicker() │
│ → 시간 피커 상태 + 익일 감지 + display 포맷 │
│ │
│ [직원관리 전용] │
│ │ │
│ ├─→ useWorkplaceContracts(workplaceId) │
│ │ → 계약 목록 + 상세 병렬 조회 + 수정/퇴사 │
│ │ │
│ └─→ useAddWorker() │
│ → 2단계 근무자 추가 폼 (코드 검색 → 스케줄 설정) │
│ │
│ [받은 요청 전용] │
│ │ │
│ └─→ useReceivedRequests() │
│ → 요청 목록(페이징) + 상세 lazy 로딩 + 승인/거절 │
│ │
└─────────────────────────────────────────────────────────────────┘
| 메서드 | 엔드포인트 | 설명 |
|---|---|---|
| GET | /api/employer/workplaces |
근무지 목록 조회 |
| GET | /api/employer/workplaces/{id} |
근무지 상세 조회 |
| POST | /api/employer/workplaces |
근무지 생성 |
| PUT | /api/employer/workplaces/{id} |
근무지 수정 |
| DELETE | /api/employer/workplaces/{id} |
근무지 삭제 |
| 메서드 | 엔드포인트 | 설명 |
|---|---|---|
| GET | /api/employer/workplaces/{workplaceId}/workers |
근무지별 계약 목록 |
| GET | /api/employer/contracts/{id} |
계약 상세 조회 |
| POST | /api/employer/workplaces/{workplaceId}/workers |
계약 생성 (근무자 추가) |
| PUT | /api/employer/contracts/{id} |
계약 수정 |
| DELETE | /api/employer/contracts/{id} |
계약 삭제 (퇴사처리) |
| 메서드 | 엔드포인트 | 설명 |
|---|---|---|
| GET | /api/employer/work-records |
근무 기록 조회 (workplaceId, startDate, endDate) |
| POST | /api/employer/work-records |
근무 기록 추가 |
| PUT | /api/employer/work-records/{id} |
근무 기록 수정 |
| DELETE | /api/employer/work-records/{id} |
근무 기록 삭제 |
| 메서드 | 엔드포인트 | 설명 |
|---|---|---|
| GET | /api/employer/workplaces/{workplaceId}/correction-requests |
받은 정정요청 목록 |
| GET | /api/employer/correction-requests/{id} |
정정요청 상세 |
| PUT | /api/employer/correction-requests/{id}/approve |
정정요청 승인 |
| PUT | /api/employer/correction-requests/{id}/reject |
정정요청 거절 |
| 화면 | 설명 | 관련 Issue |
|---|---|---|
| EmployerHomeScreen | 홈 - 일간 캘린더, 타임라인, 근무 추가/수정 | #17 |
| EmployerWorkerManageScreen | 직원관리 - 계약 CRUD, 근무자 추가/퇴사 | #12 |
| EmployerRemittanceManageScreen | 송금관리 | #30 |
| EmployerWorkplaceManageScreen | 근무지 관리 - CRUD | #14 |
| EmployerProfileEditScreen | 프로필 수정 | #16 |
| EmployerReceivedRequestsScreen | 받은 근무요청 - 승인/거절 | #16 |
| EmployerWithdrawScreen | 회원탈퇴 | #16 |