개발환경 실행을 위해 클론을 받습니다.
git clone https://github.com/eun0leee/clone-upnote.git
프로젝트 디렉토리로 이동합니다.
cd clone-upnote
프로젝트가 의존하는 패키지들을 설치합니다.
npm install
개발 서버를 실행합니다.
npm start
- UI는 ‘Upnote’를 기반으로 합니다.
- 최소 가로 길이는 '1400px' 이고, 최대 가로 길이는 '1920px' 입니다.
- 최초의 화면에서 NOTEBOOKS는 하나도 없는 상태이어야 합니다.
- 백엔드를 구현하지 않습니다. 모두 프론트 단에서만 처리될수 있어야 합니다. (그러므로 데이터는 LocalStorage에 저장하여 구현합니다.)
- NOTEBOOKS의 목록을 확인 할 수 있어야합니다.
- NOTEBOOKS를 추가하거나 삭제 할 수 있어야 합니다.
- NOTEBOOKS에 메모를 추가하거나 삭제 할 수 있어야 합니다.
- NOTEBOOKS 안에 NOTEBOOKS를 추가 할 수 없습니다.
- NOTEBOOKS를 선택하여 해당 NOTEBOOKS에 있는 메모 목록을 확인 할 수 있어야 합니다.
- 메모 목록에서 메모를 선택하여 메모 내용을 확인하고 수정 할 수 있어야 합니다.
- 텍스트 편집기는 ‘lexical text editor’를 이용하여 구현되어야 합니다.
- 텍스트 편집 영역의 위, 아래 버튼은 구현하지 않습니다.(Checklist, Insert Image, Heading, Bold 등)
- 텍스트 입력 후 즉시 혹은 일정 시간 후에 입력 사항이 저장 되어야 합니다.
- 메모 목록에서 메모 내용의 첫번째 줄이 메모의 제목으로 표시 되어야 합니다.
- 메모의 제목이 메모 목록의 가로 길이를 넘어가는 경우, 말줄임표(...) 처리되어야 합니다.
┣ 📂.husky
┣ 📂src
┃ ┣ 📂assets
┃ ┣ 📂components
┃ ┣ 📂constants
┃ ┣ 📂hooks
┃ ┣ 📂pages
┃ ┣ 📂recoil
┃ ┣ 📂storage
┃ ┣ 📂types
┃ ┣ 📂utils
┗ 📜etc (setting files)