원티드 프리온보딩 프론트엔드

지원자

송슬기

이메일: song.frontend@gmail.com

---

🛠 tools

---

폴더구조

📦 src
┣ 📂 components
┃ ┣ 📂 Footer
┃ ┃ ┗ 📜 Footer.js
┃ ┣ 📂 Home
┃ ┃ ┣ 📜 data.js
┃ ┃ ┗ 📜 Home.js
┃ ┃ ┣ 📜 LoginBtn.js
┃ ┃ ┣ 📜 RegisterBtn.js
┃ ┣ 📂 Nav
┃ ┃ ┗ 📜 Heading.js
┃ ┣ 📂 Todo
┃ ┃ ┣ 📜 Template.js
┃ ┃ ┗ 📜 TodoInsert.js
┃ ┃ ┣ 📜 TodoItem.js
┃ ┃ ┣ 📜 TodoList.js
┃ ┗ 📂 User
┃ ┣ 📜 SignIn.js
┃ ┗ 📜 SignUp.js
┣ 📂 Pages
┃ ┣ 📜 HomePage.js
┃ ┗ 📜 TodoListPage.js
┣ 📜 App.js
┗ 📜 index.js

---

프로젝트의 실행 방법

개발 모드

- npm i
- npm start

---

배포 사이트

👩🏼‍💻👩🏼‍💻👩🏼‍💻 ⬅️ 이모티콘을 클릭해 주세요

---

데모 영상

회원가입

이메일과 패스워드 양식을 받으며 이메일은 @가 포함된 이메일 형식으로 작성 해야 합니다.

패스워드는 숫자와 문자 상관 없이 8글자 이상으로 작성 해야 합니다.

---

Todo List

회원가입후에 로그인에 성공시 Todo List 페이지로 이동 합니다.

Todo List / 업로드

리스트를 추가는 하단의 플러스 아이콘을 클릭하여 추가합니다. 추가는 모달의 플러스 버튼 혹은 엔터키를 누르면 추가 됩니다.

할일 리스트 좌측에 체크 박스를 클릭시 끝낸 할일로 표시할 수 있습니다.

Todo List / 수정과 삭제

연필 아이콘을 클릭시 수정 모달창이 오픈되고 수정 후 수정 버튼을 클릭하거나 취소를 원하면 취소버튼 혹은 모달 밖을 클릭하면 수정이 취소 됩니다.

리스트에서 우측 삭제 버튼을 클릭하면 삭제 할것인지 확인 창이 뜨고 확인을 누르면 삭제가되고 취소를 하면 삭제가 취소 됩니다.

---

리다이렉트 / (로그인 유저)

로그인 유저는 '/todo' 경로에 접근이 가능합니다. 홈, 로그인, 회원가입 경로 접근시 '/todo'로 리다이렉트 됩니다.

리다이렉트 / (비 로그인 유저)

로그인 하지 않은 유저의 경우 '/todo' 주소로 접근시 '/'으로 리다이렉트 됩니다.

비로그인 유저는 홈, 로그인, 회원가입에 접근 가능하며 '/todo'로 접근 불가능 합니다.