Merge pull request #300 from ODOICHON/fix/#299

[fix] 농가거래 게시글 수정 시 기존 게시글 상세내용이 불러와지지 않는 이슈
ODOICHON · Sep 23, 2024 · 733e240 · 733e240
2 parents 86dcefd + ca183a0
commit 733e240
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 3 deletions.
diff --git a/src/components/Community/Quill/index.tsx b/src/components/Community/Quill/index.tsx
@@ -3,6 +3,7 @@ import ReactQuill from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import DOMPurify from 'dompurify';
 import ModalPortal from '@/components/Common/ModalPortal';
 import ToastMessageModal from '@/components/Common/ToastMessageModal';
 import { QueryKeys, restFetcher } from '@/queryClient';
@@ -165,7 +166,7 @@ export default function CommunityQuill({ queryParam }: CommunityQuillProps) {
     if (boardData) {
       QuillRef.current
         ?.getEditor()
-        .clipboard.dangerouslyPasteHTML(0, boardData.code);
+        .clipboard.dangerouslyPasteHTML(0, DOMPurify.sanitize(boardData.code));
     }
     return () => {
       if (!isProcessingRef.current) {

diff --git a/src/components/Introduce/Quill/index.tsx b/src/components/Introduce/Quill/index.tsx
@@ -4,6 +4,7 @@ import 'react-quill/dist/quill.snow.css';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
+import DOMPurify from 'dompurify';
 import ModalPortal from '@/components/Common/ModalPortal';
 import ToastMessageModal from '@/components/Common/ToastMessageModal';
 import { QueryKeys, restFetcher } from '@/queryClient';
@@ -181,7 +182,7 @@ export default function IntroduceQuill() {
     if (boardData) {
       QuillRef.current
         ?.getEditor()
-        .clipboard.dangerouslyPasteHTML(0, boardData.code);
+        .clipboard.dangerouslyPasteHTML(0, DOMPurify.sanitize(boardData.code));
     }
     return () => {
       if (!isProcessingRef.current) {

diff --git a/src/components/Trade/Quill/index.tsx b/src/components/Trade/Quill/index.tsx
@@ -165,6 +165,11 @@ export default function TradeQuill({
   }, [images, isProcessing]);
 
   useEffect(() => {
+    if (form.code !== '') {
+      QuillRef.current
+        ?.getEditor()
+        .clipboard.dangerouslyPasteHTML(0, form.code);
+    }
     return () => {
       if (!isProcessingRef.current) {
         deleteFile(imagesRef.current);

diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx
@@ -5,6 +5,7 @@ import { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import dayjs from 'dayjs';
+import DOMPurify from 'dompurify';
 import { motion } from 'framer-motion';
 import { Autoplay, Pagination, Navigation } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
@@ -85,7 +86,11 @@ export default function MainPage() {
             }}
           >
             <h3>0{idx + 1}</h3>
-            <h1 dangerouslySetInnerHTML={{ __html: data.title }} />
+            <h1
+              dangerouslySetInnerHTML={{
+                __html: DOMPurify.sanitize(data.title),
+              }}
+            />
             <p>{data.content}</p>
           </SwiperSlide>
         ))}