notion-clone.mp4
- VanillaJS만을 이용해 노션 페이지를 클로닝했습니다.
- 선언형 프로그래밍 방식과 historyAPI를 이용해 함수형 컴포넌트와 SPA를 직접 구현했습니다.
기본 기능 구현
- 왼쪽 SideBar에서 document list를 보여줍니다.
- 최상단 + 버튼을 누르면 root document를 추가합니다.
- document의 + 버튼을 누르면 하위 document를 추가합니다.
- document의 x 버튼을 누르면 해당 document가 삭제됩니다.
- document의 title을 클릭하면 해당 document의 title과 content가 오른쪽에 표시됩니다.
- document의 title과 content 수정 시, 자동으로 저장됩니다.
- history API를 이용해 SPA를 구현했습니다.
추가 기능 구현
- 페이지의 Notion 아이콘과 타이틀을 클릭하면, 메인 페이지로 이동합니다.
- 펼치기 버튼을 누르면, 문서를 펼치고 닫을 수 있고 이는 새로고침 시에도 유지됩니다.