Feat: QuillEditor.tsx 이미지 핸들러를 사용해 이미지를 등록한다

개요

PortfolioEditPage.tsx 에서 QuillEditor를 사용해 이미지 등록을 가능하게 합니다.

QuillEditor에서 자체 제공하는 이미지 핸들러는 base64 인코딩으로 인해 DB 용량 차지가 크므로, 이미지를 별도 저장소에 저장하고 해당 주소를 인코딩하는 커스텀 이미지 핸들러를 사용합니다.

그 외 작은 동작 이슈를 해결합니다.

PortfolioEditPage에서 태그 중복 입력을 막는다.
PortfolioDetailPage.tsx에서 portfolio.content를 표시할 때, HTML 문서를 인코딩해 보여준다.
- domPurify를 사용해 보안을 유지한다.
useHtmlContent.ts 훅을 사용해 HTML 문서를 인코딩한다.
- Heading, 굵기, 기울임, 밑줄, 취소선, 글자 색상, 글자 배경색을 정상 출력한다.
useImageHandler.ts 훅을 생성한다.
- 이미지를 등록할 때마다 /pictures POST 요청을 보내고, 저장소에 이미지를 저장한다.
- 서버에서 이미지 주소를 반환하면 이를 request body에 저장한다.
PortfolioEditPage.tsx에서의 새로고침, 뒤로가기를 막는다.
- usePreventGoBack.ts
- usePreventRefresh.ts
- Edit 페이지 헤더의 로고를 클릭해도 '정말 나가시겠습니까?' confirm을 띄운다.

현재 MSW로 시범 동작만 테스트하고 있기 때문에, MSW 핸들러에서는 별다른 동작 없이 임시 이미지 주소 배열을 반환합니다.