로그인 · 업체 연결
현장 앱은 업체 코드로 서버에 연결한 뒤 로그인합니다. 두 단계는 분리되어 있고, 연결은 한 번, 로그인은 세션이 끝날 때만 다시 합니다.
흐름
| 단계 | 화면 ID | 입력 | 성공 | 실패 |
|---|---|---|---|---|
| 1. 업체 연결 | AUTH-CONNECT | 업체 코드 (예: HK-0412) 또는 연결 링크(QR) | 업체명·사업장 표시 → 로그인 화면 | "업체 코드를 찾을 수 없습니다. 관제 담당자에게 확인하세요" |
| 2. 로그인 | AUTH-LOGIN | 아이디 · 비밀번호 (자동 완성) | 홈 (역할별: 작업자 → CCP, 관리자 → 현황) | "아이디 또는 비밀번호가 다릅니다" (어느 쪽인지 말하지 않는다) |
| 2'. 다른 업체 연결 | AUTH-CONNECT | 로그인 화면 하단 텍스트 버튼 | 1 로 이동, 기존 연결 유지 여부 확인 |
화면
FNA 스마트해썹
업체 연결 후 로그인할 수 있습니다
관제에서 발급한 코드입니다
(주)한결식품
평택공장 · 연결됨
규칙
- 연결·로그인 화면은 앱바 없이 로고가 제목을 대신한다. 뒤로가기 없음.
- 업체 코드 입력은 대문자 자동, 고정폭, 하이픈 자동 삽입(HK0412 → HK-0412).
- 비밀번호 표시/숨김 토글은 아이콘 버튼(44px) + aria-label "비밀번호 표시".
- 로그인 실패는 어느 쪽이 틀렸는지 말하지 않는다. 잠금 정책(5회 / 10분)은 미리 알린다.
- 세션 만료 후 재로그인 시 작성 중이던 화면으로 되돌아간다(세션 만료).
- 시니어 모드: 필드 하나씩(1/2 아이디 → 2/2 비밀번호), 버튼 64px.
- 데스크톱 웹(관제·관리자): 좌 네이비 패널(로고 + 슬로건) · 우 폼 카드 420px. 업체 연결 단계 없음(도메인·계정으로 구분).
Do · Don't
(주)한결식품
평택공장 · 연결됨
Do 연결 상태를 항상 보여준다
업체 코드 · 아이디 · 비밀번호 · 로그인
Don't 연결과 로그인을 한 화면에현장 폰은 한 번 연결하면 바뀌지 않는다
autocomplete="username" / "current-password"Do 자동 완성 속성
onpaste="return false" autocomplete="off"Don't 비밀번호 붙여넣기 금지 · 자동 완성 차단
문구
| 위치 | 문구 |
|---|---|
| 연결 안내 | 업체 연결 후 로그인할 수 있습니다 |
| 코드 라벨 · placeholder | 업체 코드 · 예: HK-0412 |
| 연결 실패 | 업체 코드를 찾을 수 없습니다. 관제 담당자에게 확인하세요 |
| 로그인 실패 | 아이디 또는 비밀번호가 다릅니다. 5회 틀리면 10분 동안 잠깁니다 (n/5) |
| 잠김 | 10분 동안 로그인할 수 없습니다. 09:52 이후 다시 시도하세요 |
| 네트워크 | 서버에 연결할 수 없습니다. 공장 Wi-Fi 연결을 확인하세요 |
안정마지막 갱신 담당 디자인시스템 TF · jjo831@farmzone.kr소스 screens/Auth/ConnectScreen.tsx · LoginScreen.tsxPatterns · FNA 디자인 시스템 v1.0