Skip to content

[Feat] 관리자 로그인 기능을 구현 #8

@Debuging-JunSeoPark

Description

@Debuging-JunSeoPark

기능 개요

관리자 로그인 기능을 구현합니다.

  • 로그인 페이지에 입력 폼(adminName, password) 추가
  • POST /api/admin/login API 연동
  • 응답 토큰(Access/Refresh) 저장 및 라우팅 처리

상세 설명

필요성: 관리자 전용 화면 보호 및 작업 이력 추적, 권한 기반 접근 제어를 위해 서버 인증 연동이 필수.

예상 흐름/UI 동작:

  • 관리자가 adminName, password 입력 → 로그인 버튼 클릭
  • POST 로 API 호출
  • 성공 시 accessToken, refreshToken 및 만료시각을 저장(LocalStorage)
  • 홈(/) 또는 직전 접근 시도 페이지로 이동
  • 실패 시 서버 메시지 노출(폼 상단 에러), 버튼 로딩 상태 초기화
  • 보호 라우트에서 토큰 미보유 사용자는 /login으로 리다이렉트

작업 항목 (Checklist)

  • Axios 클라이언트 생성(baseURL, withCredentials, 요청 인터셉터로 Authorization 주입)
  • 로그인 API 래퍼 작성: loginAdmin({ adminName, password })
  • Login.tsx에 로딩/에러 상태 및 실제 API 연동 로직 추가
  • 로그인 성공 시 토큰/만료시각 저장 로직 구현(useAuth 훅)
  • 보호 라우트 컴포넌트 추가 및 필요 페이지에 적용
  • .env에 VITE_API_BASE_URL=https://mateatall.com/api 설정
  • 실패 케이스 처리(네트워크 오류/서버 메시지 표출) 및 UI 피드백(로딩 버튼)

참고 사항

  • 없음

Metadata

Metadata

Labels

No labels
No labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions