테크 스펙: 노트 작성 기능

[shon5544]

요약(Summary)

유저가 뭔가를 적을 때마다 html 코드를 state에 저장시킵니다. 저장 버튼을 누르게 되면 string화 된 html 코드를 데이터베이스로 보냅니다. 다시 불러 올 땐 ReactQuill의 value prop에 string화 된 html 코드를 넣어주면 스타일도 적용된 상태로 렌더됩니다.

배경(Background)

원래 계획했던대로 markdown을 변환시키는 작업을 이용하여 개발을 하려 했으나, 생각보다 번거롭고 까다로운 작업이었습니다. react-quill을 사용한다면 글자 굵기는 물론이고 기울임, 색깔, 하이라이트, 이미지 삽입 등등의 기능을 어렵지않게 구현할 수 있습니다. 그렇기에 react-quill을 텍스트 편집기능에 사용하게 되었습니다.

목표(Goals)

• figma의 디자인에 따라서 노트 크기, 폰트, edit-bar를 만든다.
• 폴더, 과목 기능 추가 +(태그까지도)
• 노트 전체 화면, 닫기 기능 추가
• 모든 노트 펼치고 파노라마 식으로 보여주는 기능 추가

목표가 아닌 것(Non-Goals)

• 당장은 없는듯합니다.

계획(Plan)

• 노트 작성 기능에 대해

ReactQuill 컴포넌트의 onChange prop에 직접 만든 handling 함수를 넣어줍니다. 이 handling 함수의 내용은 입력 창의 값이 바뀔 때마다 ReactQuill.UnprivilegedEditor (이하 editor)의 내장된 getHTML() 메서드를 이용해 string화 된 HTML 코드를 state에 저장시키는 것입니다. 이후 저장을 시켜주면, state에 저장된 코드를 서버로 보냅니다.

스타일이 edit-bar에 의해 변경되면 html 코드도 바뀌는데,

이런 식으로 태그안에 또 태그가 생기는 식으로 적용됩니다. 이를 ReactQuill 컴포넌트의 value prop에 넣어주면 그대로 스타일까지 불러올 수 있습니다.

• 폴더, 과목 기능에 대해

처음에 페이지에 들어가면 들어가자마자 폴더 리스트를 요청할 예정입니다.

저는 받은 데이터를 중심으로 mapping하여 화면 왼쪽에 띄우도록 합니다.

이런 느낌으로..

• 파노라마 기능

아직 어떻게 할지 확실히 결정하지는 못했습니다.

작동 순서를 간단하게 3단계로 표현하면

note-list-screen이 닫힘 ⇒ 모든 노트 데이터를 요청 ⇒ 화면에 mapping
or
아무 과목도 선택하지 않은 초기 화면 ⇒ 모든 노트 데이터를 요청 ⇒ 화면에 mapping

이 될 것 같네요.

배치는

position, transform, filter 이 세가지 프로퍼티를 잘 사용하면 가능할 것 같습니다.

우선 기한 내에 완성이 어려울 것 같은 경우, figma에 제시된 대로 나란히 배치하는 식으로 개발하도록 하겠습니다..!

이외 고려 사항들(Other Considerations)

• 딱히 없음

마일스톤(Milestones)

• 08/31~09/02: editor-bar 디자인 수정
• 09/03~09/05: note list screen UI 개발 +노트 저장 기능
• 09/04~09/06: 파노라마 형식 렌더링 +폴더 렌더링
• 09/07: 정기 회의

일정은 예상되는 것보다 좀 더 여유있게 잡았습니다. 그러나 직접 개발할 때는 생각할 때와는 많이 틀릴 때도 있어서 더 늦게 끝날 수도 있을 것 같아요. 일단 ‘+’가 붙은 일들은 시간 여유가 있을 때 추가해서 하는 작업으로 알고 계시면 좋을 것 같습니다.