💄 편지 작성 - 메인 커스텀 툴바 및 텍스트 에디터 UI 수정, 연동

[ding-co]

📎 이슈번호

• 24

📃 변경사항

• [x] LetterWriteMain 컴포넌트
• [x] Toolbar 컴포넌트
• [x] TextEditor 컴포넌트
• [x] TextTip 컴포넌트
• [x] CustomTextEditorToolbar - ReactQuill Text Editor 연동
  • bold/italic/underline/strike (폰트 스타일) 테스트 완료 ✅ (중복 적용 가능, 토글 기능 추가)
  • 제목1/제목2/본문 (폰트 크기) --> 테스트 완료 ✅ (단일 선택)
  • 왼쪽/중앙/오른쪽 (정렬) --> 테스트 완료 ✅ (단일 선택)
  • 색상/배경색 --> 테스트 완료 ✅ (색상 끼리는 단일 선택, 배경색 끼리는 단일 선택, 색상 + 배경색 각 1개씩은 중복 적용 가능)

📌 중점적으로 볼 부분

• LetterWriteMain 컴포넌트 (src/components/features/LetterWrite/main/index.tsx)
• Toolbar 컴포넌트 (src/components/features/LetterWrite/main/Toolbar/index.tsx)
• TextEditor 컴포넌트 (src/components/features/LetterWrite/main/TextEditor/index.tsx)
• TextTip 컴포넌트 (src/components/features/LetterWrite/main/TextTip/index.tsx)
• CustomTextEditorToolbar - ReactQuill Text Editor 연동 (src/components/features/LetterWrite/main/TextEditor/CustomTextEditorToolbar/index.tsx)

🎇 스크린샷

https://user-images.githubusercontent.com/80014673/208696772-95397bc3-ef2c-45a8-9859-6f52d9eabf75.mov

💫 기타사항

✔ 체크리스트

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

[ding-co]

아 참고로 TopNavigation 공통 컴포넌트 - padding, height 수정하였습니다!