-
Notifications
You must be signed in to change notification settings - Fork 0
Auth and Demo Account
mini edited this page Jul 23, 2026
·
2 revisions
백엔드가 아직 없기 때문에, 프론트에서 자체적으로 로그인 상태를 관리하는 데모 인증을 구현했습니다.
(src/store/authStore.ts, #41 / #42)
| 이메일 | 비밀번호 |
|---|---|
mini@naver.com |
1234 |
로그인 화면 하단 "데모 계정으로 시작합니다" 안내 박스에도 동일하게 표시됩니다.
-
useAuthStore(Zustand)가 로그인 상태(user)를 메모리에 보관합니다. 새로고침하면 로그아웃됩니다 (백엔드 세션/토큰이 없어 영속화하지 않음 — 의도적인 단순화). - 로그인 성공 시
/dashboard로 이동, 실패 시 "이메일 또는 비밀번호가 올바르지 않습니다." 에러 메시지를 표시합니다. -
RequireAuth(src/components/auth/RequireAuth.tsx)가AppLayout하위 전체 라우트(/dashboard,/workers,/tasks,/documents,/agent,/tickets,/settings)를 보호합니다. 비로그인 상태로 접근하면 로그인 화면(/)으로 리다이렉트됩니다. - 로그인 후에는 사이드바 하단 "로그아웃" 버튼으로 로그아웃할 수 있습니다. 그 옆 "? 도움말" 버튼을 누르면
자주 쓰는 흐름·FAQ·데모 계정 안내를 보여주는 모달이 열립니다 (Component-Library의
Modal참고). - 상단바에는 로그인한 사용자 정보(
한빛정밀 · 김경민 HR)가 표시됩니다. 모든 화면의 "담당자" 데모 데이터도 김경민으로 통일되어 있습니다.
-
/signup— AUTH-001과 동일한 톤(다크 티얼 프로모 패널 + 화이트 폼)으로 신규 제작. - 필드: 사업장명, 이름, 이메일, 비밀번호, 비밀번호 확인. 클라이언트 측 검증만 수행합니다(형식·8자 이상·일치 여부).
- 제출 성공 시 실제 계정을 생성하지 않고 로그인 화면(
/?signup=success)으로 이동해 성공 배너를 보여줍니다. - 로그인 화면 하단에 "계정이 없으신가요? 회원가입" 링크, 회원가입 화면 하단에 "이미 계정이 있으신가요? 로그인" 링크로 상호 연결되어 있습니다.
-
authStore.login/logout의TODO(backend)주석 위치에 실제POST /api/auth/login,/api/auth/logout연동 - 세션/토큰 저장 방식 결정 후 새로고침 시에도 로그인 유지되도록 영속화 추가
-
SignupPage의TODO(backend)위치에POST /api/auth/signup연동 -
AppLayout의GET /api/me연동 지점 확인 (현재는 로그인 시 store에 저장한 값을 그대로 표시)