feat: 인권신고게시판 글 작성 뷰

[EATSTEAK]

1️⃣ 작업 내용 Summary

• resolved feat: 인권신고게시판 글 작성 뷰 #191

기존 코드에 영향을 미치지 않는 변경사항

• 신고자, 침해/피침해자 정보를 작성하기 위한 폼의 input인 FrontmatterInput을 작성했습니다.
  • 기존 Input을 활용하려 했으나, 디자인이 인권신고게시판의 경우에만 달라 임의의 컴포넌트를 작성했습니다. 디자인 단계에서 수정이 필요해 보입니다.
• 신고자, 침해/피침해자 정보를 작성하기 위한 key-value 형식의 폼인 FrontmatterEditor를 작성했습니다.
  • 기본적인 레이아웃 작업을 위한 ArticleHeader, ArticleFooter, Container 컴포넌트를 작성했습니다.
  • 인권신고 열람 뷰 등에서 이미 일부를 사용하고 있으므로, epic branch로 병합한 후 컴포넌트 관계를 다시 설정할 예정입니다.
• 단일 파일 입력을 위한 FileInput 컴포넌트를 작성했습니다.
• FileInput 컴포넌트를 기반으로 다중 파일 입력이 가능한 FileInputs를 작성했습니다.
• zod와 react-hook-form을 결합하여 form 상태 관리 및 검증을 수행하는 useHumanRightsForm() 훅을 작성했습니다.
  • 이 과정에서 zod Schema를 기반으로 MockHumanRightsPostEditRequest 타입을 작성했습니다.
  • 타입 정의는 epic branch 병합 후 하나의 파일로 합칠 예정입니다.
• Editor의 이미지 처리 및 산출물을 담당하는 useContentEditor(boardCode: string, ref: RefObject<Editor>) 훅을 추가했습니다.

기존 코드에 영향을 미치는 변경사항

• router에 human-rights/:id?/edit 라우트를 추가했습니다(id 프로퍼티의 유무에 따라 글 작성과 수정을 HumanRightsEditPage가 모두 수행할 수 있습니다).
• zod로 react-hook-form의 Form validation을 수행하기 위한 @hookform/resolvers 패키지를 설치했습니다.

버그 픽스

• @toast-ui/editor의 타입 정의가 제대로 불러와지지 않는 문제를 해결하였습니다.
  • 해결을 위해 devDependencies에 @toast-ui/editor를 추가했습니다.
  • @toast-ui/editor의 타입 정의 경로가 올바르지 않아 수동으로 path를 추가했습니다. (See tui.editor#3197)
• PetitionNoticeEditorSection의 addImageBlobHook의 잘못된 타입을 수정했습니다.

✚ 피그마

#191 참고바랍니다.

✚ 관련 문서

2️⃣ 리뷰어에게..

3️⃣ 추후 작업할 내용

• 게시글 생성, 수정에 따른 기본값 지정
• 게시글 등록, 수정시 다른 요청을 전송하도록 작업
• 데이터 fetch를 위한 mockQuery 작성(MSW 사용?)

4️⃣ 체크리스트

• develop 브랜치의 최신 코드를 pull 받았나요?

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
homepage-frontend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 18, 2024 2:57am

[EATSTEAK]

Editor에 이미지 첨부를 위한 공통 로직 작성 후 Ready 표시 예정입니다.