SimpleHR project
모바일 UI/UX 개선 작업 (기업 사용자)
概念編集: Cairni · 방금 · AI 生成v3
개요
Simple HR 프로젝트 의 기업 사용자 모바일 화면에서 발견된 UI/UX 문제를 수정하는 작업 목록이다. 전체 세 가지 항목 모두 완료(✅) 상태로 기록되어 있다. fix-task-0603.md 에 근거한다. 07월 09일 수정사항(fix-task-0709)에서 모바일 결재 상세 한글화, 신청 양식 미등록 처리 등 추가 완료 항목이 반영되었다. 2026-07-29 기준으로 기업 모바일이 RN 앱(mobile/src) 과 웹 모바일뷰(frontend/src/components/user/mobile/) 이중 구조로 운영되며, 웹모바일 대비 RN 앱에서 누락된 기능이 다수 확인되었다(RN 앱 ↔ 웹모바일뷰 기능 격차 감사 (0729) 참조). RN 앱 ↔ 웹모바일뷰 기능 격차 감사 (0729)
원칙: 기업 사용자(일반 직원)는 모바일이 중점, 기업 관리자는 PC가 중점이다. fix-task-0709
참고: 우리 서비스는 PC와 모바일 화면이 구분되어 있으며, 모바일 화면은 PC와 다르게 모바일 특화 디자인을 따라야 한다. fix-task-0603.md 사용자 구분: 기업 사용자(일반 직원)는 모바일 중점, 기업 관리자는 PC 중점으로 UX를 설계한다. fix-task-0709
개선 항목
1. 모바일 홈화면 메뉴 순서 변경 ✅
| 변경 전 | 변경 후 |
|---|---|
| 휴가 | 휴가 |
| 기안서 | 일정관리 |
| 서류 | 급여 |
| 급여 | 서류 |
- 기존 기안서 항목을 제거하고 일정관리 항목을 추가했다.
- 급여 와 서류 의 순서가 서로 바뀌었다.
2. 모바일 일정관리 화면 개선 ✅
기존 일정관리 화면이 모바일 UX 기준에 맞지 않아 아래 세 가지를 개선한다.
- 일정 목록 표시: 일정들이 모바일 일정 스타일처럼 보이도록 변경.
- 일정 등록 Bottom Sheet 저장 버튼 위치: 기존 오른쪽 상단 → 화면 최하단 버튼으로 이동.
- 캘린더 컴포넌트: 기존 캘린더를 제거하고, 서비스에서 원래 사용하는 디자인된 컴포넌트 로 교체.
3. 모바일 알림 화면 디자인 수정 ✅
- 알림 화면 진입 시 기존 서비스 디자인과 다른 스타일이 노출되는 문제가 확인되었다.
- 배경색을 흰색으로 통일하고, 기존 서비스 디자인 시스템에 맞는 스타일로 복원해야 한다.
작업 상태 요약
4. 모바일 신청 양식 미등록 처리 ✅
모바일 신청 양식에 관련 정보가 없을 경우 미등록으로 표시되도록 처리했다. fix-task-0709
- 템플릿 미등록 시 fallback 렌더링에
fieldLabels매핑 적용 - 매핑되지 않는 키는 "미등록" 으로 표시
5. 모바일 결재 상세 영문 변수명·값 한글화 ✅
모바일 결재 상세 화면에서 영문 변수명 및 값이 노출되던 문제를 한글화했다. fix-task-0709
- 출퇴근 필드 라벨 추가:
work_location_name,gps_address등 - 값 번역 적용:
CHECK_IN→ 출근,FULL_DAY→ 종일 등 - 시각 포맷 정리 및
font-sans적용
관련 스펙: GPS 출퇴근 스펙, 결재 관리 스펙
RN 앱 vs 웹모바일뷰 기능 격차 현황 (2026-07-29)
기업 모바일은 RN 앱과 웹 모바일뷰 이중 구조로 운영된다. 웹모바일 대비 RN 앱에서 누락·미완성된 기능을 12개 도메인에 걸쳐 코드 1:1 대조로 감사했다. 상세 내용은 RN 앱 ↔ 웹모바일뷰 기능 격차 감사 (0729)를 참조한다. RN 앱 ↔ 웹모바일뷰 기능 격차 감사 (0729)
총평: RN 이식이 웹모바일보다 후속으로 진행되며 최근·핵심 기능이 미반영. 특히 출퇴근 인증방식(QR·IP)과 휴가 촉진 응답이 RN에 통째로 빠져 실사용을 직접 차단한다.
| 도메인 | 판정 | 누락 | 부분 | 최고 심각도 |
|---|---|---|---|---|
| 급여(payroll) | ✅ OK | 0 | 0 | — |
| 대시보드(홈) | ⚠️ GAPS | 4 | 4 | 🔴 |
| 출퇴근(attendance) | ⚠️ GAPS | 4 | 3 | 🔴 |
| 휴가(vacation) | ⚠️ GAPS | 4 | 0 | 🔴 |
| 조직도(directory) | ⚠️ GAPS | 2 | 1 | 🔴 |
| 프로필/내정보(profile) | ⚠️ GAPS | 3 | 1 | 🔴 |
| 신청서/서류(applications) | ⚠️ GAPS | 1 | 3 | 🟠 |
| 결재(approval) | ⚠️ GAPS | 2 | 3 | 🟠 |
| 메시지(messages) | ⚠️ GAPS | 1 | 2 | 🟡 |
| 공지(notices) | ⚠️ GAPS | 0 | 1 | 🟡 |
| 연장근로(overtime) | ⚠️ GAPS | 0 | 1 | 🟡 |
| 근무표/일정(schedule) | ⚠️ GAPS | 1 | 0 | 🟡 |
🔴 실사용 차단 (HIGH) — 우선 처리
- 1.출퇴근 QR·IP 방식 RN 미구현 — RN
CheckInSheet.tsx:161은check_in_method:'GPS'만 하드코딩. QR 스캔·사내망 IP 출퇴근 경로가 전무하여 해당 근무지 직원은 앱 출퇴근 불가. 웹모바일은 GPS/QR/IP 방식 선택을 모두 지원. 관련 스펙: GPS 출퇴근 스펙 - 2.휴가 연차촉진 응답 RN 미구현 — 웹모바일
MobileVacation.tsx에 근기법 61조 촉진 응답(배너·1차·2차 응답 시트)이 완비되어 있으나 RNvacation에 전무. 관련 스펙: 연차촉진 스펙 - 3.조직도 부서 칩 필터 미구현 — 웹모바일은 distinct 부서 칩으로 직원 부서별 필터 지원. RN
DirectoryScreen.tsx는 의도적으로 제거(서버 페이지네이션 이유) → 부서 기준 직원 탐색 수단 소실. - 4.프로필 필수서류 제출·조회 RN 전무 — 웹모바일
MobileProfile.tsx에 UPLOAD/PASTE/SIGN 처리·재제출·취소·상태 배지가 구현되어 있으나 RN은 PC 안내만 표시.
착수 권장 순서
- 1.출퇴근 QR·IP (RN) — 실사용 직접 차단.
CheckInSheet에 인증방식 선택 + QR 스캔(카메라)·IP 경로 추가. 최우선. - 2.휴가 촉진 응답 (RN) —
vacation/api.ts에 promotion 래퍼 2개 + 배너 + 응답 시트(1차/2차) + 내역. (웹모바일MobileVacation이식.) - 3.프로필 필수서류·서류함·자격증 (RN) — UPLOAD·PASTE 제출, 계약서/서류/제증명서 조회, 자격증 목록.
- 4.신청서 서명·붙여넣기·본문 리치 렌더 (RN) — TemplatePreview 엔진 이관 규모 검토.
- 5.결재 통합탭 / 조직도 필터·메시지 / 대시보드 폴백·계약 액션 — 완결성.
모바일 UI 개선 진행 현황AI · 출처 클릭
완료5
모바일 홈화면 메뉴 순서 변경 (휴가/일정관리/급여/서류)
fix-task-0603.md
일정관리 화면 모바일 UX 개선 (목록, Bottom Sheet, 캘린더)
fix-task-0603.md
알림 화면 디자인 통일 (흰색 배경, 기존 디자인 적용)
fix-task-0603.md
모바일 신청 양식 미등록 처리 (fieldLabels 매핑, 미등록 fallback)
fix-task-0709
모바일 결재 상세 영문 변수명·값 한글화 (CHECK_IN→출근, FULL_DAY→종일 등)
fix-task-0709
진행 필요 (RN)7
[🔴 최우선] 출퇴근 QR·IP 인증방식 RN 앱 구현 — CheckInSheet GPS 하드코딩 → 방식 선택+QR스캔+IP 경로 추가
RN 앱 ↔ 웹모바일뷰 기능 격차 감사 (0729)
[🔴] 휴가 연차촉진 응답 RN 앱 구현 — 배너·1차·2차 응답 시트+이력 (웹모바일 MobileVacation 이식)
RN 앱 ↔ 웹모바일뷰 기능 격차 감사 (0729)
[🔴] 프로필 필수서류 제출·조회 RN 구현 — UPLOAD/PASTE/SIGN 처리, 재제출, 상태 배지
RN 앱 ↔ 웹모바일뷰 기능 격차 감사 (0729)
[🔴] 조직도 부서 칩 필터 RN 구현
RN 앱 ↔ 웹모바일뷰 기능 격차 감사 (0729)
[🟠] 결재 통합탭(근태+서류 날짜순 합본) RN 구현
RN 앱 ↔ 웹모바일뷰 기능 격차 감사 (0729)
[🟠] 신청서 서명·붙여넣기·본문 리치 렌더 RN 구현 (TemplatePreview 이관)
RN 앱 ↔ 웹모바일뷰 기능 격차 감사 (0729)
[🟠] 프로필 서류함·자격증 RN 구현
RN 앱 ↔ 웹모바일뷰 기능 격차 감사 (0729)
관련 페이지
- 액션 아이템 — 전체 프로젝트 액션 아이템 목록
- 휴가 관리 스펙 — 홈 메뉴의 '휴가' 항목 관련 스펙
- 근태 관리 스펙 — 일정관리와 연관된 근태 처리 스펙
- 근무 정책 스펙 — 근무 정책 및 일정 관련 정책
- 의사결정 로그 — 관련 설계 결정 이력- 사직서 처리 워크플로 스펙 — 사직서 서류결재 전환 관련
- 양식 편집기(폼 빌더) 스펙 — 모바일 신청 양식 템플릿 관련
- fix-task-0709 (26년 07월 09일 수정사항) — 출처 소스
- RN 앱 ↔ 웹모바일뷰 기능 격차 감사 (0729) — RN vs 웹모바일뷰 12개 도메인 격차 감사 결과
- 연차촉진 스펙 — 휴가 촉진 응답 RN 이식 관련
- 모바일 앱 스펙 — 모바일 앱 전반 스펙