모듈 설치 명령어: npm i ; 실행 명령어: npm start ;

기본적으로 CRA(Create-React-App)의 typescript 템플릿을 사용해 개발 환경을 설정했습니다.

• tailwind : CSS를 tailwind로 작성했습니다.

간단한 아이콘 사용을 위해 CDN으로 Google Fonts의 Material Icons를 받아와 사용했습니다.

1. 가장 왼쪽 영역의 NOTEBOOK을 클릭하면 현재 저장돼 있는 NOTEBOOK 목록을 펼쳐볼 수 있습니다.
2. 해당 요소의 '+' 버튼을 누르면 새로운 NOTEBOOK을 추가할 수 있습니다.
3. 열린 NOTEBOOK 목록에서 NOTEBOOK을 선택하면 그 NOTEBOOK에 속한 NOTE들의 목록이 우측 영역에 나타납니다.
4. NOTEBOOK목록에서 NOTEBOOK 이름 위에 마우스를 올리면 휴지통모양의 버튼이 나타나고, 해당 버튼을 누르면대상 NOTEBOOK을 삭제할 수 있습니다.
5. 앱 우측 상단에 'New Note'버튼을 눌러 현재 보고 있는 NOTEBOOK에 새로운 메모(NOTE)를 추가할 수 있습니다.
6. 가운데 영역의 메모 목록에서 메모를 선택해 해당 메모의 내용을 살펴볼 수 있고, 가장 우측 영역의 에디터를 클릭하거나 포커싱하면대상 메모를 수정할 수 있습니다.
7. 메모를 수정하면 입력을 마친 뒤 3초가 지나거나, 해당 영역을 벗어나면 저장이 됩니다.
8. 메모 목록에서 메모는 가장 첫 줄이 제목으로 표시되고, 줄바꿈 문자 이후부터 내용으로 표시됩니다.
9. 메모 목록에서 메모를 우클릭 하면 메뉴가 나오고, 메뉴의 '이 노트 삭제하기' 버튼을 누르면 대상 메모를 삭제할 수 있습니다.
10. 또는 선택된 메모를 수정하는 영역의 상단 '이 노트 삭제하기' 버튼을 누르면 대상 메모를 삭제할 수 있습니다.