[개인 프로젝트] Notion 클론

프로젝트 개요

• Notion을 클론코딩한다.

목표 구현 리스트

구현 리스트

• api.js 작성

  • Root Document 가져오기
  • Document id 로 해당 Document content, 하위 Document 목록 가져오기
  • Document 생성하기
  • 특정 Document 수정하기
  • 특정 Document 삭제하기

• route.js 작성

  • rootPage
  • documentPage

• Component 작성

  • App
    • ListPage
      • (Favorites)
      • Documents
    • ContentPage
      • Editor
        • Title
        • Content
      • 하위 Documents

• 기능 구현

  • Document List에서 Document 클릭시 Content 렌더링
  • 선택한 Document 하위 Document 있을경우 트리 형태로 아래 목록 렌더링
    • 모든 하위 Document 렌더링
    • 선택했을때만 Document 렌더링
  • Document 생성하고 편집화면으로 넘김
  • 기록할때마다 자동 저장
  • 제목 수정시 ListPage도 state변경, 반영
  • div , contentEditable을 통해 다양한 기능의 에디터 만들기
  • 편집기 내에서 하위 Document 링크 렌더링
  • 편집기 내에서 다른 Document name을 적을 시 자동으로 해당 Document의 편집 페이지로 이동하는 링크 기능 추가
  • document 삭제기능
  • XSS 공격 방지
  • 하위 Document 옮기기 기능

• 다음에 할일

  • Document를 클릭했을때, DocumentsList가 새로 렌더링되며 토글 된 Tree가 사라지는 현상. - 토글을 시켰을때, 토글된 id를 state에서 기억한다. - tree 렌더링을 실행하고, 토글된 id에 한해서 내부 Tree를 렌더링한다.
  • 상위 Document를 삭제했을때, 하위 Document가 삭제 되지 않고 root Document로 이동되는 문제
    • 삭제 진행시, 해당하위 document들을 순회하며 삭제요청
  • 새로고침시, 선택된 Document 표시 안되는 문제
  • 커서 올릴때, 하위 문서의 버튼도 보이게 되는 문제 (CSS)