로그인 기능 개발

[LeeHueeng]

어떤 기능인가요?

로그인 기능 및 페이지를 생성합니다.

작업 상세 내용

로그인 컴포넌트 생성

• 로그인 폼 UI 제작
  • 이메일 입력 필드 추가
  • 비밀번호 입력 필드 추가
  • 로그인 버튼 추가
  • 소셜로그인 버튼 추가
  • 스타일링 및 레이아웃 구성
• 상태 관리 로직 추가
  • useState를 사용한 입력 값 상태 관리
  • 입력 값 유효성 검사 로직 추가

로그인 로직 제작

• 로그인 API 연동
  • 로그인 API 엔드포인트 설정
  • axios 또는 fetch를 사용한 API 호출 로직 구현
  • API 호출 결과에 따른 상태 업데이트
• 에러 처리 로직 추가
  • 로그인 실패 시 사용자에게 에러 메시지 표시
  • 네트워크 에러 처리
• 성공적인 로그인 시 리다이렉트
  • 로그인 성공 시 사용자를 대시보드 페이지로 이동시키는 로직 추가
  • 사용자의 인증 상태를 저장 (예: 쿠키, 로컬 스토리지 등)

로그인 테스트

• 단위 테스트
  • 각 컴포넌트와 함수의 단위 테스트 작성
  • 입력 값 유효성 검사 테스트
  • API 호출 성공 및 실패 시의 상태 변화 테스트
• 통합 테스트
  • 로그인 플로우 전체를 테스트하는 통합 테스트 작성
  • 모의 API 서버를 사용하여 실제 API 호출을 시뮬레이션

참고할만한 자료(선택)

이 내용을 Next.js와 TypeScript로 제작할 예정입니다.

토큰저장 방식에 대한 설명

// 쿠키에 저장
document.cookie = "token=yourTokenHere; Secure; HttpOnly; SameSite=Strict";

// 로컬 스토리지에 저장
localStorage.setItem('token', 'yourTokenHere');