diff --git a/src/components/diary/list/DiaryList.tsx b/src/components/diary/list/DiaryList.tsx index c17e9835..9e7acf02 100644 --- a/src/components/diary/list/DiaryList.tsx +++ b/src/components/diary/list/DiaryList.tsx @@ -53,7 +53,7 @@ const DiaryList = async ({ page }: Props) => { ); diff --git a/src/components/diary/write/DiaryEditor.tsx b/src/components/diary/write/DiaryEditor.tsx index 1b751c3f..2408c5be 100644 --- a/src/components/diary/write/DiaryEditor.tsx +++ b/src/components/diary/write/DiaryEditor.tsx @@ -4,7 +4,8 @@ import DateRangeModalContainer from "@/containers/diary/write/DateRangeModalCont import { useDiaryEditorStoreType } from "@/store/diaryEditorStore"; import dynamic from "next/dynamic"; import QuillEditorSkeleton from "@/components/skeleton/common/QuillEditorSkeleton"; -import { FormEvent } from "react"; +import { useFormContext } from "react-hook-form"; +import { parse } from "node-html-parser"; const QuillEditorContainer = dynamic( () => import("@/containers/diary/write/QuillEditorContainer"), @@ -41,6 +42,8 @@ const DiaryEditor = ({ setCurrentDay, onSubmit, }: Props) => { + const formContext = useFormContext(); + return (
{dateRangeModal && ( @@ -54,35 +57,40 @@ const DiaryEditor = ({ 새로운 경험을 기록하고 나만의 추억카드를 만들어보세요!

-
+

제목*

- diaryEditorStore.setDiaryEditor({ title: e.target.value }) - } + onChange={(e) => { + formContext.setValue("title", e.target.value); + formContext.trigger("title"); + }} /> + {formContext.formState.errors.title && ( +

+ {formContext.formState.errors.title.message as String} +

+ )}
-
+

날짜*

+ {formContext.formState.errors.startDate && ( +

+ {formContext.formState.errors.startDate.message as String} +

+ )}
{diaryEditorStore.days > 0 && ( -
+

지역*

+ {formContext.formState.errors.address && ( +

+ 주소를 입력해 주세요. +

+ )}
)}
@@ -144,7 +166,9 @@ const DiaryEditor = ({
)} {diaryEditorStore.days > 0 && ( -
+

{`하루 기분은 어땠나요? (Day ${diaryEditorStore.currentDay})`}

@@ -152,13 +176,14 @@ const DiaryEditor = ({ {["최고", "좋아", "무난", "슬퍼", "화나"].map((value, index) => (
)} {diaryEditorStore.days > 0 && }