- 주어진 API를 이용하여 Auth 관련 기능을 구현합니다.
- ky를 이용하여 API를 fetch 해옵니다.
- CRUD를 구현합니다.
- 과제 진행 이전 pnpm install 명령어로 필요한 dependencies를 설치해주세요.
- 패키지 매니저는 pnpm을 사용합니다.
- pnpm start 명령어로 프로젝트를 dev환경에서 실행할 수 있습니다.
- 기본적으로 스타일은 styled-components를 이용하여 구현합니다.
- 라우팅은 react-router-dom(v6)을 이용하여 구현해주세요. 기본 환경 설정이 되어있습니다.
- 개인 repository에 fork해서 과제 수행 후 PR을 올려주세요.
- App.tsx, index.tsx, pages폴더 내부 파일은 변경하지 말아주세요.
// src/api/index.ts
import ky from 'ky';
export const API = ky.create({
timeout: 10 * 1000,
prefixUrl: 'https://api.escuelajs.co/api/v1',
});
export default API;
- 새로 생성된 Ky instance 사용법은 url을 통해 알 수 있습니다.
[POST] https://api.escuelajs.co/api/v1/auth/login
# Body
{
"email": "[email protected]",
"password": "changeme"
}
- API docs
- 로그인 폼을 만들고 상기 API를 이용하여 예시 email, password를 입력 후 제출했을 때 Main page로 redirect하도록 구현해주세요.
- access_token과 refresh_token은 localstorage에 저장해주세요.
- 로그인 폼 디자인은 자유롭게 구현해도 좋습니다.
[GET] https://api.escuelajs.co/api/v1/auth/profile
# Headers
{
"Authorization": "Bearer {your access token}"
}
- API docs
- 브라우저 새로고침시에도 로그인이 유지되어야 합니다.
- localstorage에 저장된 access_token을 이용하여 해당 API를 사용해주세요.
- 해당 API의 response code가 401이라면 로그아웃되고 login페이지로 redirect되어야 합니다.
- 로그인 상태에서 login페이지('/login')에 접근시 알림 문구와 함께 메인페이지로 redirect되어야 합니다.
- 마찬가지로 로그아웃 상태에서 main페이지('/')에 접근시 알림 문구와 함께 login페이지로 redirect되어야 합니다.
- Main page의 로그아웃 버튼을 클릭하면 로그아웃되며 login페이지로 redirect되어야 합니다.
- 로그아웃시 localstorage의 token정보를 삭제해주세요.
추가 요구사항 1.access token 만료시 refresh token을 받아와 로그인 상태를 유지해주세요
[POST] https://api.escuelajs.co/api/v1/auth/refresh-token
# Body
{
"refreshToken": "{your refresh token}"
}
요구사항 1.category API를 이용하여 category를 불러와주세요