- 어차피 공개되도 만들 시간이 없지만 계속 신경쓰입니다!
기획서 & 디자인 링크
- 별도 기획서는 없습니다.
- UI는 slack을 참고해주세요.
미션의 목적
에디터는 웹 애플리케이션 개발 중에서 특히나 복잡도가 높은 것으로 유명한 애플리케이션입니다.또한 Google Docs나 Notion 도 에디터라 부를 수 있습니다.
이번 미션에서는 특히 미션을 수행함에 있어서 본인 스스로 '필수로 구현할 것'과 '선택하여 구현할 것'을 분리하여,본인이 가진 모든 역량을 다 쏟아부어서 에디터를 구현해봅시다.
프로젝트를 진행하는 데 있어 '본인의 학습에 도움이 될 것'을, 구현하고 싶은 걸 우선적으로 구현하시면 됩니다.
요구사항
- 기술적인 제한사항은 특별히 없습니다.
- React를 써도 좋고 Vue를 써도 좋고 Vanilla를 써도 좋습니다.
- ES Modules를 기반으로 구성되어야 합니다.
- Mono Repo로 구성되어야 합니다.
- 예시)
- pacakges/
- app/
- client
- server
- editor
- 따라서, 다른 서비스 (웹 애플리케이션)에서 Editor를 가져와 사용할 수 있어야 합니다.
- 텍스트 편집 및 수정이 가능해야합니다.
- 스타일로 굵기 (Bold), 기울임꼴 (Italic), 밑줄 (Underline) 적용할 수 있습니다.
- 글자 크기를 변경할 수 있습니다.
- 특정한 글 영역을 선택하여 링크를 추가할 수 있어야합니다.
- 순서 있는 목록, 순서 없는 목록을 넣을 수 있습니다.
- 인용구를 추가할 수 있습니다.
- 코드를 삽입할 수 있습니다.
- 코드의 Syntax Hightlight는 선택입니다.
- 텍스트의 색상을 변경할 수 있습니다.
- 텍스트의 배경색을 변경할 수 있습니다.
- 임베디드 콘텐츠 삽입을 지원해야합니다.
- 링크를 삽입한 경우 미리보기 링크를 보여줄 수 있어야 합니다.
- 이미지를 삽입하고, 보여줄 수 있어야합니다.
- 동영상을 삽입하고, 보여줄 수 있어야합니다.
- 파일을 삽입하고, 보여줄 수 있어야 합니다.
- 편집 히스토리를 관리할 수 있어야 합니다.
- 특정한 예약어 (보통 CMD + Z, 윈도우는 CTRL + Z)를 이용하여 Undo가 가능해야합니다.
- 특정한 예약어 (보통 CMD + SHIFT + Z)를 이용하여 Redo가 가능해야합니다.
- 게시글의 임시 저장이 가능해야합니다.
- 미리보기를 지원합니다.
- 뷰어를 만들어야 합니다.
- 편집 기능이 포함되어있지 않은, 작성된 콘텐츠를 보여줄 뷰어를 제작해야합니다.
- 뷰어를 다른 애플리케이션에서 사용할 수 있어야 합니다.
- 불러오기 / 내보내기 기능을 구현합니다.
- 마크다운 문법으로 불러오기 / 내보내기
- HTML로 불러오기 / 내보내기
- PDF로 내보내기
- GitHub 연동하기
- GitHub로 로그인
- GitHub 마크다운 불러오기 / 내보내기
- MD 파일의 링크를 바탕으로, 해당 MD파일을 에디터로 불러옵니다.
- MD 파일의 링크를 바탕으로, 에디터의 내용을 MD로 변환한 후 GItHub에 반영합니다.
- 즉, Commit/Push가 이루어져야합니다
- MD 파일 링크 예시