- 프로젝트 목표
- 요구사항 진행 현황
- 프로젝트 구성 2-0. 기술스택 2-1. Commit Rule 2-2. 폴더구조
요구사항에 맞는 프로젝트를 만는다.
-
/auth 경로에 로그인 / 회원가입 기능을 개발합니다
- 로그인, 회원가입을 별도의 경로로 분리해도 무방합니다
- 최소한 이메일, 비밀번호 input, 제출 button을 갖도록 구성해주세요
-
이메일과 비밀번호의 유효성을 확인합니다
- 이메일 조건 : 최소
@
,.
포함 - 비밀번호 조건 : 8자 이상 입력
- 이메일과 비밀번호가 모두 입력되어 있고, 조건을 만족해야 제출 버튼이 활성화 되도록 해주세요
- 이메일 조건 : 최소
-
로그인 API를 호출하고, 올바른 응답을 받았을 때 루트 경로로 이동시켜주세요
- 응답으로 받은 토큰은 로컬 스토리지에 저장해주세요
- 다음 번에 로그인 시 토큰이 존재한다면 루트 경로로 리다이렉트 시켜주세요
- 어떤 경우든 토큰이 유효하지 않다면 사용자에게 알리고 로그인 페이지로 리다이렉트 시켜주세요
-
Todo List API를 호출하여 Todo List CRUD 기능을 구현해주세요
- 목록 / 상세 영역으로 나누어 구현해주세요
- Todo 목록을 볼 수 있습니다.
- Todo 추가 버튼을 클릭하면 할 일이 추가 됩니다.
- Todo 수정 버튼을 클릭하면 수정 모드를 활성화하고, 수정 내용을 제출하거나 취소할 수 있습니다.
- Todo 삭제 버튼을 클릭하면 해당 Todo를 삭제할 수 있습니다.
-
한 화면 내에서 Todo List와 개별 Todo의 상세를 확인할 수 있도록 해주세요.
- 새로고침을 했을 때 현재 상태가 유지되어야 합니다.
- 개별 Todo를 조회 순서에 따라 페이지 뒤로가기를 통하여 조회할 수 있도록 해주세요.
-
한 페이지 내에서 새로고침 없이 데이터가 정합성을 갖추도록 구현해주세요
- 수정되는 Todo의 내용이 목록에서도 실시간으로 반영되어야 합니다
- react
- react hooks
- typescript
- webpack
- styled-component
- msw
타입 | 설명 |
---|---|
style | 로직과 상관없는 컨벤션 |
feat | 새로운 기능 추가 |
fix | 버그 수정 |
refactor | 코드 리팩토링 |
design | CSS 등 사용자 UI 변경 |
test | 테스트 코드 |
docs | 문서 수정 |
chore | 빌드 업무 수정, 패키지 매니저 수정 |
브랜치명 | 설명 |
---|---|
main | 메인 브랜치 |
feature/이슈번호 | 기능 추가 및 리팩토링 브랜치 |
fix/이슈번호 | 버그 수정 브랜치 |
├── src
│ ├── api # api 요청 관련 폴더
│ ├── assets # svg, font, image 등 정적 파일 관련 폴더
│ ├── components # 여러 page에서 사용하는 공통 컴포넌트들
│ ├── constant # 프로젝트에서 사용하는 상수
│ ├── context # context API의 Provider
│ ├── hoc # 고차컴포넌트
│ ├── hooks # react hooks
│ ├── layouts # 프로젝트 전체적인 구조 스타일 담당
│ ├── mocks # msw를 활용한 api mocking
│ ├── pages # 라우터에서 사용하는 Page들
│ ├── service # 회원가입, 로그인 조건 등 비즈니스 로직
│ ├── styles # 다지안 관련 폴더
│ ├── types # 데이터 타입
│ └── utils #