Merge pull request #278 from TripInfoWeb/dev_diary

Refactor: 일기 등록 및 수정 API 재연동
TripInfoWeb · Sep 9, 2024 · 4e3e4d1 · 4e3e4d1
2 parents 2d86ca7 + 58883e4
commit 4e3e4d1
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/diary/write/DateRangeModal.tsx b/src/components/diary/write/DateRangeModal.tsx
@@ -43,7 +43,7 @@ const DateRangeModal = ({
           rangeColors={["#00B488"]}
         />
         <button
-          className="h-10 w-32 self-center rounded-full bg-main text-[0.9375rem] text-white hover:scale-105"
+          className="mt-4 h-10 w-32 self-center rounded-full bg-main text-[0.9375rem] text-white hover:scale-105"
           type="button"
           onClick={() => onChangeDateRange()}
         >

diff --git a/src/containers/diary/edit/DiaryEditorContainer.tsx b/src/containers/diary/edit/DiaryEditorContainer.tsx
@@ -25,17 +25,29 @@ const DiaryEditorContainer = ({ diaryData }: Props) => {
   const [dateRangeModal, setDateRangeModal] = useState<boolean>(false);
   const [addressModal, setAddressModal] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
-  const methods = useForm({
+  const [originalThumbnailUrl, setOriginalThumbnailUrl] = useState<string>("");
+  const [originalContentUrl, setOriginalContentUrl] = useState<string[][]>([]);
+
+  const methods = useForm<{
+    userId: number;
+    title: string;
+    startDate: Date | null;
+    endDate: Date | null;
+    address: string[];
+    image: string;
+    moodLevels: number[];
+    contents: string[];
+  }>({
     resolver: zodResolver(DiaryUpdateFormSchema),
     defaultValues: {
       userId: authStore.id,
       title: "",
-      startDate: new Date(),
-      endDate: new Date(),
+      startDate: null,
+      endDate: null,
       address: [""],
       image: "",
-      moodLevels: [0],
-      contents: [""],
+      moodLevels: [],
+      contents: [],
     },
     mode: "onChange",
   });
@@ -46,6 +58,14 @@ const DiaryEditorContainer = ({ diaryData }: Props) => {
         .querySelector("img")
         ?.getAttribute("src") ?? "";
 
+    const contentImagesUrl = methods.getValues("contents").map((content) =>
+      parse(content)
+        .querySelectorAll("img")
+        .filter((img) => img.getAttribute("src") !== imageUrl)
+        .map((img) => img.getAttribute("src") ?? "")
+        .join(","),
+    );
+
     if (imageUrl === "") {
       alert("Day1에 최소 1장의 이미지를 등록해 주세요.");
       return;
@@ -63,14 +83,25 @@ const DiaryEditorContainer = ({ diaryData }: Props) => {
 
     const data: UpdateDiaryRequestDto = {
       title: title,
-      titleImage: image,
-      startDatetime: startDate,
-      endDatetime: endDate,
+      deleteTitleImage: ![image, ...contentImagesUrl[0].split(",")].includes(
+        originalThumbnailUrl,
+      )
+        ? originalThumbnailUrl
+        : "",
+      saveTitleImage: image,
+      startDatetime: startDate!,
+      endDatetime: endDate!,
       diaryDayRequests: Array.from(
         { length: diaryEditorStore.days },
         (_, index) => ({
           content: sanitizeHtml(contents[index], sanitizeOption),
           feelingStatus: FEELING_STATUS[moodLevels[index]],
+          deleteImagesUrl: originalContentUrl[index]
+            .filter(
+              (value) => !contentImagesUrl[index].split(",").includes(value),
+            )
+            .join(","),
+          saveImagesUrl: contentImagesUrl[index],
           place: address[index],
         }),
       ),
@@ -146,6 +177,13 @@ const DiaryEditorContainer = ({ diaryData }: Props) => {
       ),
     );
 
+    setOriginalThumbnailUrl(diaryData.diaryContentResponse.titleImage);
+    setOriginalContentUrl(
+      diaryData.diaryContentResponse.diaryDayContentResponses.diaryDayContentDetail.map(
+        (value) => value.diaryDayContentImages.split(","),
+      ),
+    );
+
     // 화면에서 벗어났을 때 초기화
     return () => {
       diaryEditorStore.initialize();

diff --git a/src/containers/diary/write/DiaryEditorContainer.tsx b/src/containers/diary/write/DiaryEditorContainer.tsx
@@ -52,6 +52,14 @@ const DiaryEditorContainer = () => {
         .querySelector("img")
         ?.getAttribute("src") ?? "";
 
+    const contentImagesUrl = methods.getValues("contents").map((content) =>
+      parse(content)
+        .querySelectorAll("img")
+        .filter((img) => img.getAttribute("src") !== imageUrl)
+        .map((img) => img.getAttribute("src") ?? "")
+        .join(","),
+    );
+
     if (imageUrl === "") {
       alert("Day1에 최소 1장의 이미지를 등록해 주세요.");
       return;
@@ -77,6 +85,7 @@ const DiaryEditorContainer = () => {
         (_, index) => ({
           content: sanitizeHtml(contents[index], sanitizeOption),
           feelingStatus: FEELING_STATUS[moodLevels[index]],
+          diaryDayContentImages: contentImagesUrl[index],
           place: address[index],
         }),
       ),

diff --git a/src/types/DiaryDto.ts b/src/types/DiaryDto.ts
@@ -9,6 +9,7 @@ export interface CreateDiaryRequestDto {
   diaryDayRequests: {
     content: string;
     feelingStatus: string;
+    diaryDayContentImages: string;
     place: string;
   }[];
 }
@@ -27,6 +28,7 @@ export interface GetDiaryResponseDto {
       diaryDayContentDetail: {
         content: string;
         feelingStatus: string;
+        diaryDayContentImages: string;
         place: string;
       }[];
     };
@@ -47,6 +49,7 @@ export interface GetDiaryListResponseDto {
       diaryDayContentDetail: {
         content: string;
         feelingStatus: string;
+        contentImage: string;
         place: string;
       }[];
     };
@@ -61,12 +64,15 @@ export interface GetDiaryListResponseDto {
  */
 export interface UpdateDiaryRequestDto {
   title: string;
-  titleImage: string;
+  deleteTitleImage: string;
+  saveTitleImage: string;
   startDatetime: Date;
   endDatetime: Date;
   diaryDayRequests: {
     content: string;
     feelingStatus: string;
+    deleteImagesUrl: string;
+    saveImagesUrl: string;
     place: string;
   }[];
 }