원티드 프리온보딩 사전 과제

Tech Stack

Best Practice를 위한 회의

폴더 트리 구조

src
 ┣ api
 ┃ ┣ authApi.js
 ┃ ┣ index.js
 ┃ ┗ todoApi.js
 ┣ components
 ┃ ┣ AuthForm
 ┃ ┣ Header
 ┃ ┣ Modal
 ┃ ┣ TodoForm
 ┃ ┣ TodoItem
 ┃ ┣ TodoList
 ┃ ┗ UI
 ┣ hooks
 ┃ ┗ useInput.js
 ┣ layout
 ┃ ┗ index.jsx
 ┣ pages
 ┃ ┣ Auth
 ┃ ┗ Home
 ┣ store
 ┃ ┣ authStore.js
 ┃ ┣ modalStore.js
 ┃ ┗ todoStore.js
 ┣ styles
 ┃ ┗ globalStyle.js
 ┗ utils
   ┗ validation.js

📁 api: 프로젝트에서 사용할 api 관련 폴더.

📁 components: 컴포넌트 관리 폴더.

📁 hooks: 커스텀 훅을 관리하는 폴더.

📁 layout: 컴포넌트 공통 레이아웃 형식을 관리하는 폴더.

📁 pages: 페이지 단위의 컴포넌트 폴더로 구성하는 폴더.

📁 store: Context API 전역 상태 관리 폴더.

📁 utils: 상수나 공통 함수, 유틸리티를 담는 폴더.

📁 styles: GlobalStyle을 관리하는 폴더.

실행

1. 실행 방법

npm install

npm run start

2. 데모 링크

wanted 프론트엔드 과제 링크

실행화면

1. 로그인/회원가입

Assignment1

이메일과 비밀번호의 유효성 검사기능을 구현해주세요
- ✅ 이메일 조건: @ 포함
- ✅ 비밀번호 조건: 8자 이상
- ✅ 입력된 이메일과 비밀번호가 위 조건을 만족할 때만 버튼이 활성화 되도록 해주세요

Assignment2

로그인 API를 호출하고, 올바른 응답을 받았을 때 /todo 경로로 이동해주세요
- ✅ 로그인 API는 로그인이 성공했을 시 Response Body에 JWT를 포함해서 응답합니다.
- ✅ 응답받은 JWT는 로컬 스토리지에 저장해주세요

2. Url 전환

Assignment3

로그인 여부에 따른 리다이렉트 처리를 구현해주세요
- ✅ 로컬 스토리지에 토큰이 있는 상태로 / 페이지에 접속한다면 /todo 경로로 리다이렉트 시켜주세요
- ✅ 로컬 스토리지에 토큰이 없는 상태로 /todo페이지에 접속한다면 / 경로로 리다이렉트 시켜주세요

3. TodoList

Assignment4

✅ /todo경로에 접속하면 투두 리스트의 목록을 볼 수 있도록 해주세요
✅ 리스트 페이지에는 투두 리스트의 내용과 완료 여부가 표시되어야 합니다.
✅ 리스트 페이지에는 입력창과 추가 버튼이 있고, 추가 버튼을 누르면 입력창의 내용이 새로운 투두 리스트로 추가되도록 해주세요

Assignment5

✅ 투두 리스트의 수정, 삭제 기능을 구현해주세요
✅ 투두 리스트의 개별 아이템 우측에 수정버튼이 존재하고 해당 버튼을 누르면 수정모드가 활성화되고 투두 리스트의 내용을 수정할 수 있도록 해주세요
✅ 수정모드에서는 개별 아이템의 우측에 제출버튼과 취소버튼이 표시되며 해당 버튼을 통해서 수정 내용을 제출하거나 수정을 취소할 수 있도록 해주세요
✅ 투두 리스트의 개별 아이템 우측에 삭제버튼이 존재하고 해당 버튼을 누르면 투두 리스트가 삭제되도록 해주세요

ghbaekdev/week1-1-best-practice