[FE] 게시글 편집기 및 게시글 열람 페이지

yejunian commented 1 month ago

️⃣ 연관된 이슈

게시글 편집기와 관련된 클라이언트 작업입니다.

글쓰기 페이지에 React Quill 에디터 적용
- 최소 기능 사용: 굵기, 밑줄, 크기, 폰트, 텍스트 컬러, 이미지
게시글 열람 페이지의 게시글 영역 스타일 작성: ql-로 시작하는 className
- 게시글 에디터에서도 게시글 열람 페이지와 동일하게 보이도록 스타일링
- 다크 모드를 위한 글자색 처리: 에디터 기본값인 인라인 스타일 하드코딩에서 className 부여 방식으로 변경
이미지 파일 관리
- 이미지 첨부 구현: 서버에 이미지 업로드 요청 후 URL을 받아서 본문에 <img> 엘리먼트 삽입
- 업로드한 이미지 목록 — Quill 에디터 객체에 접근하여, S3에 업로드한 이미지 목록 추출

후속 진행 예정 작업
- 업로드한 이미지 삭제: 서버로 삭제 요청 후 에디터에 반영 - 이미지 편집: 크기 조정

에디터 폭을 게시글 열람 페이지의 너비와 맞췄습니다.

post-summary

"같은 자리 = 같은 className"입니다.

업로드한 이미지 목록을 게시글 내용에서 추출했는데, 이렇게 구현해도 괜찮을까요?
- 이렇게 하면 나중에 이미지 삭제 기능을 넣었을 때, 다른 유저가 업로드한 이미지를 S3에서 제거할 수 있게 됩니다.
- 시나리오: 타인의 글에서 첨부 이미지 복사 → 내 글에 붙여넣기 → 첨부한 이미지 목록에 뜨는 타인의 이미지 삭제
잘못 구현되었거나 변경했으면 하는 부분 있으면 말씀해 주세요.
- 에디터 영역 스타일링은(박스, 툴바, 다크모드) 기능 먼저 구현해 놓고 틈틈이 진행하려 합니다.
- 폼 레이블 다크모드 또한 틈틈이 진행하려 합니다. (<TextInput> 컴포넌트와도 관련 있음)

HungKungE commented 1 month ago

그리고 이미지 복사 막으려면 App.tsx에 아래 코드 추가하거나

useEffect(() => {
    document.oncontextmenu = function(){
        return false;
    }
},[])

page div에 아래 코드 추가하면 될거에요

  onContextMenu={e => {
      e.preventDefault();
  }}

그런데 개인적인 생각으로는 업로드한 이미지를 삭제하지 않고 content에서만 안보이게 하고나서 일정 기간 사용되지 않는 이미지를 자동으로 삭제하도록 하는게 더 안정적일 것 같네요

yejunian commented 1 month ago

구현 아이디어 감사합니다! 그럼 아래 3가지 내용으로 수정하고 다시 리뷰 요청할게요!

이미지 삭제는 일단 본문에서만 내리도록 구현
게시글 열람 페이지에서 이미지 복사 방지, 또는 에디터에서 (첨부 목록에 없는) S3 이미지 붙여넣기 방지 처리
- + 첨부 이미지 다운로드 링크 목록 제공
에디터에 코드블록 기능 추가 (아마 툴바에 추가만 하면 될 거예요)

HungKungE commented 1 month ago

1과 2는 둘 중 하나만 하면 될거 같아요!

yejunian commented 1 month ago

처음에는 붙여넣기 방지를 생각하고 있었는데 생각보다 많이 복잡했고(비동기 처리와 preventDefault가 동시에 요구됨), 복사 방지는 우회 방법이 많아서, 2번 대신 1번으로 진행하게 되었습니다.