편지 작성 - 텍스트 에디터, 툴바 컴포넌트 추가 [수정 및 추가]

[ding-co]

📎 이슈번호

• 24

📃 변경사항

• ToolbarContainer 컴포넌트 -> Styled component로 변경 (wrapper, style 용도)
• ToolbarItem 컴포넌트 -> Toolbar 컴포넌트로 변경
• TextTip 기본 컴포넌트 추가
• TextEditor React Quill 기본 컴포넌트 추가 및 커스터마이징을 위한 forwardRef 추가
• CustomTextEdtiorToolbar UI 컴포넌트 추가 및 현재 디자인 연동 테스트 완료 (정렬 4종류, 텍스트 4종류)

📌 중점적으로 볼 부분

• Toolbar 컴포넌트
• TextEditor - CustomTextEditorToolbar 연동

🎇 스크린샷

💫 기타사항

• 텍스트 에디터에서 임베디드로 기본적으로 제공하는 툴바를 이용하는 것이 아닌 커스텀 툴바를 이용하므로 고려할 것이 조금 있습니다. 우선 현재 디자인에서 사이즈, 색상, 배경색은 빠져 있는 상태이고 각 툴바에 대한 중복 사용 및 제한 여부, active/in-active 디자인, color picker 등 추가와 같은 작업이 필요합니다. 또 모바일 사용성을 고려하여 터치에 대한 UI/UX도 잘 살펴봐야 할 것 같습니다.

✔ 체크리스트

• [x] 브랜치 전략에 맞는 브랜치에 PR을 올리고 있습니다. (master/main이 아닙니다.)
• [x] 커밋 메세지를 컨벤션에 맞추었습니다.
• [x] 변경 후 코드는 컴파일러/브라우저 warning/error 가 발생시키지 않습니다.
• [x] 변경 후 코드는 기존의 테스트를 통과합니다.
• [x] 테스트 추가가 필요한지 검토해보았고, 필요한 경우 테스트를 추가했습니다.
• [x] docs 수정이 필요한지 검토해보았고, 필요한 경우 docs를 수정했습니다.

[ding-co]

생각보다 저희 편지 서비스에서 사용하는 기능들이 간단해서 텍스트 에디터를 저희 서비스에 맞게 처음부터 만들어볼까도 고민하고 있습니다.

[ding-co]

초반에 React Quill 라이브러리 설치할 때 설정을 잘못해서 충돌나서 작은 feature 단위의 feature/text-editor 브랜치를 따로 만들었습니다. 해당 브랜치로 작업 이어가겠습니다.