feat: add publish at surveyDetail page (structure order), submit popup page

src/components/popup/SurveySaleSubmitPopup.tsx

@@ -2,7 +2,7 @@ import Image from 'next/image'
 import { usePopupController } from '@/store/popupController'
 import { useParams } from 'next/navigation'
 import { useSurvey } from '@/hooks/useSurvey'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useSessionStore } from '@/store/session'
 import { useCommCode } from '@/hooks/useCommCode'
 import { CommCode } from '@/types/CommCode'
@@ -16,7 +16,7 @@ interface SubmitFormData {
   receiver: string[] | string
   reference: string | null
   title: string
-  contents: string
+  contents: string | null
 }
 
 interface FormField {
@@ -32,10 +32,10 @@ export default function SurveySaleSubmitPopup() {
   const routeId = params.id
 
   const { setIsShow } = useSpinnerStore()
-  const [commCodeList, setCommCodeList] = useState<CommCode[]>([])
-
   const { getCommCode } = useCommCode()
+  const { surveyDetail } = useSurvey(Number(routeId))
 
+  const [commCodeList, setCommCodeList] = useState<CommCode[]>([])
   useEffect(() => {
     if (session?.isLoggedIn && session?.role === 'Admin') {
       getCommCode('SALES_OFFICE_CD').then((codes) => {
@@ -45,13 +45,13 @@ export default function SurveySaleSubmitPopup() {
   }, [session])
 
   const FORM_FIELDS: FormField[] = [
+    { id: 'sender', name: '発送者', required: true },
     { id: 'saleBase', name: '提出地点選択', required: session?.role === 'Admin' },
     { id: 'store', name: '提出販売店', required: true },
-    { id: 'sender', name: '発送者', required: true },
     { id: 'receiver', name: '受信者', required: true },
     { id: 'reference', name: '参考', required: false },
     { id: 'title', name: 'タイトル', required: true },
-    { id: 'contents', name: '内容', required: true },
+    { id: 'contents', name: '内容', required: false },
   ]
 
   const [submitData, setSubmitData] = useState<SubmitFormData>({
@@ -94,16 +94,16 @@ export default function SurveySaleSubmitPopup() {
         sendEmail({
           to: submitData.receiver,
           subject: submitData.title,
-          content: submitData.contents,
+          content: contentsRef.current?.innerHTML ?? '',
         })
           .then(() => {
-        if (!isSubmittingSurvey) {
+            if (!isSubmittingSurvey) {
-          popupController.setSurveySaleSubmitPopup(false)
+              popupController.setSurveySaleSubmitPopup(false)
-        }
+            }
-        })
+          })
-        .catch((error) => {
+          .catch((error) => {
-          console.error('Error sending email:', error)
+            console.error('Error sending email:', error)
-          alert('メール送信に失敗しました。')
+            alert('メール送信に失敗しました。')
           })
           .finally(() => {
             setIsShow(false)
@@ -112,6 +112,8 @@ export default function SurveySaleSubmitPopup() {
     }
   }
 
+  const contentsRef = useRef<HTMLDivElement>(null)
+
   const handleClose = () => {
     popupController.setSurveySaleSubmitPopup(false)
   }
@@ -122,7 +124,6 @@ export default function SurveySaleSubmitPopup() {
     if (field.id === 'saleBase' && session?.role !== 'Admin') {
       return null
     }
-
     return (
       <div className="data-input-form-bx" key={field.id}>
         <div className="data-input-form-tit">
@@ -130,12 +131,38 @@ export default function SurveySaleSubmitPopup() {
         </div>
         <div className="data-input">
           {field.id === 'contents' ? (
-            <textarea
+            <div className="submit-content" id={field.id}>
-              className="textarea-form"
+              <div ref={contentsRef}>
-              id={field.id}
+                <p style={{ fontSize: '13px', fontWeight: '400', color: '#2e3a59', marginBottom: '15px' }}>
-              value={submitData[field.id] ?? ''}
+                  HANASYS現地調査アプリを使用した現地調査結果が送信されました。
-              onChange={(e) => handleInputChange(field.id, e.target.value)}
+                </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>
           ) : (
             <>
               {field.id === 'saleBase' && session?.role === 'Admin' ? (

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

@@ -137,7 +137,7 @@ export const radioEtcData: Record<RadioEtcKeys, { id: number; label: string }[]>
   structureOrder: [
     {
       id: 1,
-      label: '屋根材 - 防水材 - 屋根の基礎 - 垂木', //지붕재 방수재 지붕의기초 서까래
+      label: '屋根材 > 防水材 > 屋根の基礎 > 垂木', //지붕재 방수재 지붕의기초 서까래
     },
   ],
   houseStructure: [

src/styles/components/_pop-contents.scss

@@ -113,3 +113,12 @@
     @include defaultFont($font-s-13, $font-w-400, $font-c);
   }
 }
+
+// 제출팝업
+.submit-content{
+  padding: 15px 10px;
+  border: 1px solid #D5DEE8;
+  border-radius: 4px;
+  background-color: #f5f6fa;
+  cursor: default;
+}