Merge pull request #257 from TripInfoWeb/dev_diary

Refactor: 여행일기 수정 시 useForm 사용
TripInfoWeb · Sep 3, 2024 · 0785ae6 · 0785ae6
2 parents 70cdc84 + 0adabbd
commit 0785ae6
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 54 deletions.
diff --git a/src/app/api/support/notice/route.ts b/src/app/api/support/notice/route.ts
@@ -5,7 +5,7 @@ import { NextRequest } from "next/server";
  */
 export async function GET(request: NextRequest) {
   const url = new URL(request.url);
-  const page = url.searchParams.get("page") || "1"; 
+  const page = url.searchParams.get("page") || "1";
 
   // 페이지 번호를 0 기반으로 조정합니다.
   const zeroBasedPage = Number(page) - 1;
@@ -18,9 +18,8 @@ export async function GET(request: NextRequest) {
     headers: {
       "Content-Type": "application/json",
     },
-    cache: "no-cache",
+    cache: "no-store",
   });
 
   return response;
 }
-
diff --git a/src/containers/diary/edit/DiaryEditorContainer.tsx b/src/containers/diary/edit/DiaryEditorContainer.tsx
@@ -11,6 +11,8 @@ import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import sanitizeHtml from "sanitize-html";
 import { parse } from "node-html-parser";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
 
 interface Props {
   diaryData: GetDiaryResponseDto;
@@ -23,42 +25,36 @@ const DiaryEditorContainer = ({ diaryData }: Props) => {
   const [dateRangeModal, setDateRangeModal] = useState<boolean>(false);
   const [addressModal, setAddressModal] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
-
-  const onSubmit = async () => {
-    // Validate from fields using Zod
-    const validatedFields = DiaryUpdateFormSchema.safeParse({
+  const methods = useForm({
+    resolver: zodResolver(DiaryUpdateFormSchema),
+    defaultValues: {
       userId: authStore.id,
-      title: diaryEditorStore.title,
-      startDate: diaryEditorStore.startDate,
-      endDate: diaryEditorStore.endDate,
-      address: diaryEditorStore.address,
-      image:
-        parse(diaryEditorStore.contents[0])
-          .querySelector("img")
-          ?.getAttribute("src") ?? "",
-      moodLevels: diaryEditorStore.moodLevels,
-      contents: diaryEditorStore.contents.map((content) =>
-        sanitizeHtml(content, sanitizeOption),
-      ),
-    });
+      title: "",
+      startDate: new Date(),
+      endDate: new Date(),
+      address: [""],
+      image: "",
+      moodLevels: [0],
+      contents: [""],
+    },
+    mode: "onChange",
+  });
 
-    // If validation fails, return errors early. Otherwise, continue.
-    if (!validatedFields.success) {
-      alert(validatedFields.error.issues[0].message);
-      return;
-    }
+  const onSubmit = async () => {
+    const { title, image, startDate, endDate, contents, moodLevels, address } =
+      methods.getValues();
 
     const data: UpdateDiaryRequestDto = {
-      title: validatedFields.data.title,
-      titleImage: validatedFields.data.image,
-      startDatetime: validatedFields.data.startDate,
-      endDatetime: validatedFields.data.endDate,
+      title: title,
+      titleImage: image,
+      startDatetime: startDate,
+      endDatetime: endDate,
       diaryDayRequests: Array.from(
         { length: diaryEditorStore.days },
         (_, index) => ({
-          content: validatedFields.data.contents[index],
-          feelingStatus: FEELING_STATUS[validatedFields.data.moodLevels[index]],
-          place: validatedFields.data.address[index],
+          content: sanitizeHtml(contents[index], sanitizeOption),
+          feelingStatus: FEELING_STATUS[moodLevels[index]],
+          place: address[index],
         }),
       ),
     };
@@ -90,35 +86,48 @@ const DiaryEditorContainer = ({ diaryData }: Props) => {
 
   useEffect(() => {
     diaryEditorStore.setDiaryEditor({
-      title: diaryData.diaryContentResponse.title,
-      startDate: new Date(
+      days: diaryData.diaryContentResponse.diaryDayContentResponses
+        .diaryDayContentDetail.length,
+      currentDay: 1,
+    });
+
+    methods.setValue("title", diaryData.diaryContentResponse.title);
+    methods.setValue(
+      "startDate",
+      new Date(
         new Date(
           new Date(diaryData.diaryContentResponse.startDatetime).getTime() +
             1000 * 60 * 60 * 24,
         ).toLocaleDateString("ko-KR"),
       ),
-      endDate: new Date(
+    );
+    methods.setValue(
+      "endDate",
+      new Date(
         new Date(
           new Date(diaryData.diaryContentResponse.endDatetime).getTime() +
             1000 * 60 * 60 * 24,
         ).toLocaleDateString("ko-KR"),
       ),
-      address:
-        diaryData.diaryContentResponse.diaryDayContentResponses.diaryDayContentDetail.map(
-          (value) => value.place,
-        ),
-      days: diaryData.diaryContentResponse.diaryDayContentResponses
-        .diaryDayContentDetail.length,
-      currentDay: 1,
-      moodLevels:
-        diaryData.diaryContentResponse.diaryDayContentResponses.diaryDayContentDetail.map(
-          (value) => Number(FEELING_STATUS[value.feelingStatus]),
-        ),
-      contents:
-        diaryData.diaryContentResponse.diaryDayContentResponses.diaryDayContentDetail.map(
-          (value) => value.content,
-        ),
-    });
+    );
+    methods.setValue(
+      "address",
+      diaryData.diaryContentResponse.diaryDayContentResponses.diaryDayContentDetail.map(
+        (value) => value.place,
+      ),
+    );
+    methods.setValue(
+      "moodLevels",
+      diaryData.diaryContentResponse.diaryDayContentResponses.diaryDayContentDetail.map(
+        (value) => Number(FEELING_STATUS[value.feelingStatus]),
+      ),
+    );
+    methods.setValue(
+      "contents",
+      diaryData.diaryContentResponse.diaryDayContentResponses.diaryDayContentDetail.map(
+        (value) => value.content,
+      ),
+    );
 
     // 화면에서 벗어났을 때 초기화
     return () => {

diff --git a/src/containers/diary/write/DiaryEditorContainer.tsx b/src/containers/diary/write/DiaryEditorContainer.tsx
@@ -10,8 +10,7 @@ import { CreateDiaryRequestDto } from "@/types/DiaryDto";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import sanitizeHtml from "sanitize-html";
-import { parse } from "node-html-parser";
-import { FormProvider, useForm, useFormContext } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 
 const DiaryEditorContainer = () => {
@@ -49,7 +48,7 @@ const DiaryEditorContainer = () => {
       diaryDayRequests: Array.from(
         { length: diaryEditorStore.days },
         (_, index) => ({
-          content: contents[index],
+          content: sanitizeHtml(contents[index], sanitizeOption),
           feelingStatus: FEELING_STATUS[moodLevels[index]],
           place: address[index],
         }),