1. 프로젝트 소개

첫번째 프로젝트는 “노션 클로닝” 팀 프로젝트입니다. 프롱이 여러분은 4일 동안 주어진 요구 사항에 맞추어 프로젝트를 수행하게 됩니다.

이번 프로젝트를 통해 JavaScript만을 사용해 개발을 진행해보며 다양한 프레임워크를 효과적으로 활용하기 위한 튼튼한 기초 지식을 학습해보세요.

2. 일정 및 팀 구성 안내

📅 전체 일정

• 팀 구성 안내: 1~5팀 / 4~5인 1팀
• 프로젝트 기간: 12/16 17:00 ~ 12/19 18:00
• 프로젝트 종료 후 당일 팀 발표 진행(2H)
  • 12/19 16:00-18:00
• 프로젝트 산출물 제출 마감 : 12/20 18:00

🤼 팀 구성

• 현재 활동 중인 팀 구성 그대로 진행됩니다.[링크]

3. 중요 필독 사항

[안내] 프로젝트 제출&진행 방법

[안내] 프로젝트 기간 주의사항

4. 요구 사항

기본 요구 사항

Vanilla JS만을 사용해 노션을 클로닝 합니다. 기본적인 레이아웃은 노션과 같으며, 스타일링, 컬러 값 등은 원하는 대로 커스텀 할 수 있습니다.

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

  • 루트 URL 접속 시엔 별다른 편집기 선택이 안 된 상태입니다.
  • /documents/{documentId} 로 접속 시, 해당 Document 의 content를 불러와 편집기에 로딩합니다.

• 전체 구조

  

  • 글 단위를 Document라고 합니다. Document는 Document 여러 개를 포함할 수 있습니다.
  • 화면 좌측에 Root Documents를 불러오는 API를 통해 루트 Documents를 렌더링 합니다.
    • Root Document를 클릭하면 오른쪽 편집기 영역에 해당 Document의 Content를 렌더링 합니다.
    • 해당 Root Document에 하위 Document가 있는 경우, 해당 Document 아래에 트리 형태로 렌더링 합니다.
    • Document Tree에서 각 Document 우측에는 + 버튼이 있습니다. 해당 버튼을 클릭하면, 클릭한 Document의 하위 Document로 새 Document를 생성하고 편집 화면으로 넘깁니다.

• 편집기

  • 편집기는 기본적으로 textarea 기본으로 단순한 텍스트 편집기로 시작합니다. 편집기에는 저장 버튼이 없습니다. Document Save API를 이용해 지속적으로 서버에 저장되도록 합니다.

추가 요구 사항(선택)

• 편집기 추가 구현
  • 기본적으로 편집기는 textarea 기반으로 단순한 텍스트 편집기로 시작하되, 여력이 되면 div와 contentEditable을 조합해서 좀 더 Rich한 에디터를 만들어봅니다.
  • 편집기 최하단에는 현재 편집 중인 Document의 하위 Document 링크를 렌더링 하도록 추가합니다.
  • 편집기 내에서 다른 Document name을 적은 경우, 자동으로 해당 Document의 편집 페이지로 이동하는 링크를 거는 기능을 추가합니다.
• 그외 개선하거나 구현했으면 좋겠다는 부분이 있으면 적극적으로 구현해봅니다!

API 제공 안내

이번 프로젝트에서는 원활한 프로젝트 수행을 위해 기본적인 API를 제공합니다. API 사용법을 확인해보세요.

API 사용법

결과물 예시