[Mission4/조예지] - Project_Notion_VanillaJS

[yezyvibe]

📌 과제 설명

API를 활용하여 문서 자동 저장 편집기를 구현하는 프로젝트입니다. 아래 필수 기능을 구현 후 추가 기능을 자유롭게 구현했습니다.

🎉배포 URL

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

[컴포넌트 구조]

[구현된 기능]

기본 기능

• 메인 페이지 왼쪽에 전체 문서 트리를 출력합니다.

  • 루트 문서를 클릭하면 오른쪽 편집기 영역에 문서 내용을 렌더링합니다.
  • 문서 이름이 특정 길이를 넘으면 특정 길이까지 자르고 ... 생략으로 표시한다.

• 새로운 문서를 생성할 수 있습니다.

  • 각 문서의 우측에 + 버튼이 있고, 해당 버튼을 클릭하면 하위에 새로운 문서 생성되고 편집 화면으로 넘어갑니다.
  • 루트 문서 또는 특정 문서 하위에 새로운 문서를 추가할 수 있습니다.

• 문서를 수정하고 저장할 수 있습니다.

  • 문서 저장 버튼을 따로 만들지 않습니다.
  • document save api를 이용, 서버에 지속적인 요청을 통해 저장되도록 설정합니다.

• 문서를 삭제할 수 있습니다.

• History API를 활용하여 SPA로 제작합니다.

  • 루트 URL: 문서 선택이 아직 안 된 상태를 보여줍니다.
    • 편집기에는 기본 페이지 출력합니다.
  • /documents/{documentId}: 해당 문서의 내용을 불러와 편집기에 출력합니다.

추가 기능

• div와 contentEditable을 조합하여 마크다운 문법을 사용하는 에디터를 만들었습니다.

  • 오른편 문서 미리보기에서 실제 페이지의 내용을 확인할 수 있습니다.

• 편집기 최하단에는 현재 편집 중인 문서의 하위 문서들의 링크를 추가합니다.

  • 하위 문서를 클릭하면 해당 문서로 페이지를 이동합니다.

[zerosial]

안녕하세요!! 예지님 코드리뷰하러 왔습니다 😏

이번 코드 정말 고생 많으셧어요.. 마크다운 에디터 만든거 너무 써보고 싶엇는데

어디서 에러가 나는지 실행이 안되서 테스트는 못해봣내요 😥

수고하셧습니다!!

[yezyvibe]

@zerosial
승훈님 pn룰 보니까 재밌네요!
오늘도 좋은 코멘트 많이 달아주셔서 감사해요
덕분에 더 나은 코드가 되어 가고 있어요..ㅎㅎ
나중에 팀이 바껴도 한번씩 구경와주세요~😊

[off-programmers]

깔끔하게 잘 구현해주셨네요! 고생하셨습니다~

[yezyvibe]

코드 리뷰 반영 완료⭐