📌 프로젝트 설명

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 아이콘과 타이틀을 클릭하면, 메인 페이지로 이동합니다.
• 펼치기 버튼을 누르면, 문서를 펼치고 닫을 수 있고 이는 새로고침 시에도 유지됩니다.

✅ 피드백 반영사항

✅ PR 포인트 & 궁금한 점