[Mission5/방지현] Project_Notion_VanillaJs 과제

[jiinyy]

📌 과제 설명

일단 api 를 이용하여 노션데이터를 읽고 쓰고 삭제하는 작업을 완료했습니다.

👩‍💻 요구 사항과 구현 내용

바닐라 JS만을 이용해 노션을 클로닝합니다.

기본적인 레이아웃은 노션과 같으며, 스타일링, 컬러값 등은 원하는대로 커스텀합니다.

• 글 단위를 Document라고 합니다. Document는 Document 여러개를 포함할 수 있습니다.

• 화면 좌측에 Root Documents를 불러오는 API를 통해 루트 Documents를 렌더링합니다.

  • Root Document를 클릭하면 오른쪽 편집기 영역에 해당 Document의 Content를 렌더링합니다.

  • 해당 Root Document에 하위 Document가 있는 경우, 해당 Document 아래에 트리 형태로 렌더링 합니다.

  • Document Tree에서 각 Document 우측에는 + 버튼이 있습니다. 해당 버튼을 클릭하면, 클릭한 Document의 하위 Document로 새 Document를 생성하고 편집화면으로 넘깁니다.

• 편집기에는 기본적으로 저장 버튼이 없습니다. Document Save API를 이용해 지속적으로 서버에 저장되도록 합니다.

• History API를 이용해 SPA 형태로 만듭니다.

  • 루트 URL 접속 시엔 별다른 편집기 선택이 안 된 상태입니다.

  • /documents/{documentId} 로 접속시, 해당 Document 의 content를 불러와 편집기에 로딩합니다.

• 문서 삭제기능 추가

✅ PR 포인트 & 궁금한 점

아직 데이터를 쓰고 삭제하는 법이 익숙치 않아서 삽질을 많이 했습니다.. 빠른 시일내에 남은 기능도 구현해서 올려보겠습니다!

[JunilHwang]

@jiinyy
배포 URL도 본문에 넣어주세요!