src/components/popup/SurveySaleSubmitPopup.tsx

@@ -139,7 +139,7 @@ export default function SurveySaleSubmitPopup() {
           to: submitData.receiver,
           cc: submitData.reference ?? '',
           subject: submitData.title,
-          content: generateEmailContent(),
+          content: contentsRef.current?.innerHTML ?? '',
         })
           .then(() => {
             if (!isSubmittingSurvey) {
@@ -160,38 +160,7 @@ export default function SurveySaleSubmitPopup() {
     }
   }
 
-  const generateEmailContent = () => `
-  <div>
-    <p style="font-size: 13px; font-weight: 400; color: #2e3a59; margin-bottom: 15px;">
-      HANASYS現地調査アプリを使用した現地調査結果が送信されました。
-    </p>
-    <p style="font-size: 13px; font-weight: 400; color: #2e3a59; margin-bottom: 3px;">
-      -担当者名： <span style="color: #417DDC;">${surveyDetail?.representative}</span>
-    </p>
-    <p style="font-size: 13px; font-weight: 400; color: #2e3a59; margin-bottom: 3px;">
-      -販売店名：
-      <span style="color: #417DDC;">
-        ${surveyDetail?.store} (${surveyDetail?.storeId})
-      </span>
-    </p>
-    <p style="font-size: 13px; font-weight: 400; color: #2e3a59; margin-bottom: 15px;">
-      -施工店名:
-      <span style="color: #417DDC;">${surveyDetail?.constructionPoint}</span>
-    </p>
-    <p>
-      <a
-        style="font-size: 13px; font-weight: 400; color: #1259CB; margin-bottom: 5px; text-decoration: underline;"
-        href="${process.env.NEXT_PUBLIC_API_URL}/pdf/survey-sale/${surveyDetail?.id}"
-        target="_blank"
-      >
-        現地調査結果PDFダウンロード
-      </a>
-    </p>
-    <p style="font-size: 13px; font-weight: 400; color: #2e3a59;">
-      ※リンクをクリックしてローカル調査結果PDFをダウンロードできます。
-    </p>
-  </div>
-  `
+  const contentsRef = useRef<HTMLDivElement>(null)
 
   const handleClose = () => {
     popupController.setSurveySaleSubmitPopup(false)
@@ -216,7 +185,36 @@ export default function SurveySaleSubmitPopup() {
         <div className="data-input">
           {field.id === 'contents' ? (
             <div className="submit-content" id={field.id}>
-              <div dangerouslySetInnerHTML={{ __html: generateEmailContent() }} />
+              <div ref={contentsRef}>
+                <p style={{ fontSize: '13px', fontWeight: '400', color: '#2e3a59', marginBottom: '15px' }}>
+                  HANASYS現地調査アプリを使用した現地調査結果が送信されました。
+                </p>
+                <p style={{ fontSize: '13px', fontWeight: '400', color: '#2e3a59', marginBottom: '3px' }}>
+                  -担当者名： <span style={{ color: '#417DDC' }}>{surveyDetail?.representative}</span>
+                </p>
+                <p style={{ fontSize: '13px', fontWeight: '400', color: '#2e3a59', marginBottom: '3px' }}>
+                  -販売店名：
+                  <span style={{ color: '#417DDC' }}>
+                    {surveyDetail?.store} ({surveyDetail?.storeId})
+                  </span>
+                </p>
+                <p style={{ fontSize: '13px', fontWeight: '400', color: '#2e3a59', marginBottom: '15px' }}>
+                  -施工店名:
+                  <span style={{ color: '#417DDC' }}>{surveyDetail?.constructionPoint}</span>
+                </p>
+                <p>
+                  <a
+                    style={{ fontSize: '13px', fontWeight: '400', color: '#1259CB', marginBottom: '5px', textDecoration: 'underline' }}
+                    href={`${process.env.NEXT_PUBLIC_API_URL}/pdf/survey-sale/${surveyDetail?.id}`}
+                    target="_blank"
+                  >
+                    現地調査結果PDFダウンロード
+                  </a>
+                </p>
+                <p style={{ fontSize: '13px', fontWeight: '400', color: '#2e3a59' }}>
+                  ※リンクをクリックしてローカル調査結果PDFをダウンロードできます。
+                </p>
+              </div>
             </div>
           ) : (
             <>

src/components/survey-sale/detail/RoofForm.tsx

@@ -492,6 +492,7 @@ export default function RoofForm(props: {
                   className="textarea-form"
                   name="memo"
                   id="memo"
+                  placeholder="TextArea Filed"
                   value={roofInfo?.memo ?? ''}
                   disabled={mode === 'READ'}
                   onChange={(e) => setRoofInfo({ ...roofInfo, memo: e.target.value })}