Skip to content

Auth and Demo Account

bckmini edited this page Jul 20, 2026 · 2 revisions

로그인/회원가입 흐름과 데모 계정

백엔드가 아직 없기 때문에, 프론트에서 자체적으로 로그인 상태를 관리하는 데모 인증을 구현했습니다. (src/store/authStore.ts, #41 / #42)

데모 계정

이메일 비밀번호
mini@naver.com 1234

로그인 화면 하단 "데모 계정으로 시작합니다" 안내 박스에도 동일하게 표시됩니다.

동작 방식

  • useAuthStore(Zustand)가 로그인 상태(user)를 메모리에 보관합니다. 새로고침하면 로그아웃됩니다 (백엔드 세션/토큰이 없어 영속화하지 않음 — 의도적인 단순화).
  • 로그인 성공 시 /dashboard로 이동, 실패 시 "이메일 또는 비밀번호가 올바르지 않습니다." 에러 메시지를 표시합니다.
  • RequireAuth(src/components/auth/RequireAuth.tsx)가 /dashboard, /workers, /tasks, /settingsAppLayout 하위 라우트를 보호합니다. 비로그인 상태로 접근하면 로그인 화면(/)으로 리다이렉트됩니다.
  • 로그인 후에는 사이드바 하단 "로그아웃" 버튼으로 로그아웃할 수 있습니다.
  • 상단바에는 로그인한 사용자 정보(한빛정밀 · 김경민 HR)가 표시됩니다. 모든 화면의 "담당자" 데모 데이터도 김경민으로 통일되어 있습니다.

회원가입

  • /signup — AUTH-001과 동일한 톤(다크 티얼 프로모 패널 + 화이트 폼)으로 신규 제작.
  • 필드: 사업장명, 이름, 이메일, 비밀번호, 비밀번호 확인. 클라이언트 측 검증만 수행합니다(형식·8자 이상·일치 여부).
  • 제출 성공 시 실제 계정을 생성하지 않고 로그인 화면(/?signup=success)으로 이동해 성공 배너를 보여줍니다.
  • 로그인 화면 하단에 "계정이 없으신가요? 회원가입" 링크, 회원가입 화면 하단에 "이미 계정이 있으신가요? 로그인" 링크로 상호 연결되어 있습니다.

백엔드 연동 시 해야 할 일

  • authStore.login/logoutTODO(backend) 주석 위치에 실제 POST /api/auth/login, /api/auth/logout 연동
  • 세션/토큰 저장 방식 결정 후 새로고침 시에도 로그인 유지되도록 영속화 추가
  • SignupPageTODO(backend) 위치에 POST /api/auth/signup 연동
  • AppLayoutGET /api/me 연동 지점 확인 (현재는 로그인 시 store에 저장한 값을 그대로 표시)

Clone this wiki locally