[React] 글과 이미지가 같이 있는 글 저장해서 보여주는 방법

nextjs에서 Quill Editor를 사용해서 글과 이미지를 등록해주었다.
(여기서는 에디터에 대한 내용은 없다. 관리자 쪽에서 등록해주는 것을 보여주기만 한다. )
 
글 내용이 아래와 같이 저장이 된다. 
 

<p>첫번째 공지사항입니다.</p><img src="/svc/images/NOTICE/202403/ad-banner02.png"><p>2024년 3월 골프장이 오픈했습니다. 오픈 행사도 많으니 많은 관심 부탁드립니다 ^^</p><img src="/svc/images/NOTICE/202403/sample-img.png"></p>

 
 
이렇게 저장이 된 글과 img를 아래의 코드로 작성해주면 

import React, { useState, useRef, useEffect } from "react";
import { useRouter } from "next/router";
import { format } from "date-fns";
import { getNoticeInfo, InfoModel } from "@apis/notice";
import Layout from "@comps/Layout";
import Main from "@comps/Main";

function DetailPage() {
  const router = useRouter();
  const { idx } = router.query;
  const [data, setData] = useState<InfoModel>();
  const formattedCrteDt = useState("");

  async function fetchData(idx: any) {
    const request = {
      idx: Number(idx),
    };

    const response = await getNoticeInfo(request);

    if (response.status == 200) {
      // 성공하면 데이터 세팅..

      response.data.crteDt = format(response.data.crteDt as Date, "yyyy.MM.dd");
      setData(response.data);
    }
  }

  /** 목록으로 이동 */
  const moveList = () => {
    router.push("/member/notice/list/");
  };

  /**  목록 조회 GET */
  useEffect(() => {
    fetchData(idx);
  }, [idx]); // idx가 변경될 때마다 fetchData() 호출


  // contens 안의 이미지 URL 변경 함수
  const transformImageUrl = (url: string) => {
    console.log('변환 전 url:', url) ///svc/images/NOTICE/202403/ad-banner02.png
    url = url.replace("/svc/images", "http://199.67.120.80/file");
    console.log('변환 후 url:', url) ///svc/images/NOTICE/202403/ad-banner02.png
    return url;
  };


  return (
    <>
      <Layout
        isMenuBtn={true}
        menuNum={5}
        title={"공지사항"}
        backUrl="/member/notice/list"
      />

      <Main>
        <div className="white-type">
          <div className="section white-type">
            <div className="wrapper">
              <div className="post-top-wrap">
                <div className="post-top">
                  <div className="post-tit">{data?.title}</div>
                  <ul className="post-info">
                    <li>{data?.nick}</li>
                    <li>{data?.crteDt}</li>
                  </ul>
                </div>
              </div>
              <div className="post-content">
                {data?.contents && (
                  <div
                    dangerouslySetInnerHTML={{
                      __html: data.contents.replace(
                        /<img([^>]*)\ssrc="([^"]+)"([^>]*)>/g,
                        (match, p1, src, p3) => `<img${p1} src="${transformImageUrl(src)}"${p3}>`
                      ),
                    }}
                  ></div>
                )}


              </div>
            </div>
          </div>

          <div className="btn-wrap center-type">
            <a className="btn gray-border-full" onClick={moveList}>
              목록
            </a>
          </div>
        </div>
      </Main>
    </>
  );
}

export default DetailPage;

 
 
아래와 같이 잘 저장이 된다 !!!