feat: change the order of fields at inquiry regist, detail page

Reviewed-on: #50

.env.development

@@ -2,14 +2,14 @@ NEXT_PUBLIC_RUN_MODE=development
 # 모바일 디바이스로 로컬 서버 확인하려면 자신 IP 주소로 변경
 # 다시 로컬에서 개발할때는 localhost로 변경
 #route handler
-NEXT_PUBLIC_API_URL=http://172.30.1.65:3000
+NEXT_PUBLIC_API_URL=http://localhost:3000
 
 #qsp 로그인 api
 NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120
+# NEXT_PUBLIC_QSP_API_URL=https://jp-dev.qsalesplatform.com
 
 #1:1문의 api
-NEXT_PUBLIC_INQUIRY_API_URL=http://172.23.4.129:8110
-NEXT_PUBLIC_INQUIRY_FILE_DOWNLOAD_API_URL=https://jp-dev.qsalesplatform.com
+NEXT_PUBLIC_INQUIRY_API_URL=https://jp-dev.qsalesplatform.com
 
 
 #QPARTNER 로그인 api
@@ -17,4 +17,11 @@ DB_HOST=202.218.61.226
 DB_USER=readonly
 DB_PASSWORD=aAjmFW12iHKW84l1
 DB_DATABASE=qpartners
-DB_PORT=3306
+DB_PORT=3306
+
+SMTP_HOST=autodiscover.qcells.com
+SMTP_PORT=25
+SMTP_SECURE=false
+SMTP_USER=hss404.u021@cleverse.dev
+SMTP_PASSWORD=0000
+SMTP_FROM=qsalesplatform@qcells.com

.env.localhost

@@ -2,18 +2,25 @@ NEXT_PUBLIC_RUN_MODE=local
 # 모바일 디바이스로 로컬 서버 확인하려면 자신 IP 주소로 변경
 # 다시 로컬에서 개발할때는 localhost로 변경
 #route handler
-NEXT_PUBLIC_API_URL=http://172.30.1.65:3000
+NEXT_PUBLIC_API_URL=http://localhost:3000
 
 #qsp 로그인 api
 NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120
+# NEXT_PUBLIC_QSP_API_URL=https://jp-dev.qsalesplatform.com
 
 #1:1문의 api
-NEXT_PUBLIC_INQUIRY_API_URL=http://172.23.4.129:8110
-NEXT_PUBLIC_INQUIRY_FILE_DOWNLOAD_API_URL=https://jp-dev.qsalesplatform.com
+NEXT_PUBLIC_INQUIRY_API_URL=https://jp-dev.qsalesplatform.com
 
 #QPARTNER 로그인 api
 DB_HOST=202.218.61.226
 DB_USER=readonly
 DB_PASSWORD=aAjmFW12iHKW84l1
 DB_DATABASE=qpartners
-DB_PORT=3306
+DB_PORT=3306
+
+SMTP_HOST=autodiscover.qcells.com
+SMTP_PORT=25
+SMTP_SECURE=false
+SMTP_USER=hss404.u021@cleverse.dev
+SMTP_PASSWORD=0000
+SMTP_FROM=qsalesplatform@qcells.com

.env.production

@@ -3,7 +3,8 @@ NEXT_PUBLIC_RUN_MODE=production
 NEXT_PUBLIC_API_URL=http://1.248.227.176:3000
 
 #qsp 로그인 api
-NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120
+# NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120
+NEXT_PUBLIC_QSP_API_URL=https://jp.qsalesplatform.com
 
 #1:1문의 api
 NEXT_PUBLIC_INQUIRY_API_URL=http://172.23.4.129:8110
@@ -13,4 +14,11 @@ DB_HOST=202.218.61.226
 DB_USER=readonly
 DB_PASSWORD=aAjmFW12iHKW84l1
 DB_DATABASE=qpartners
-DB_PORT=3306
+DB_PORT=3306
+
+SMTP_HOST=autodiscover.qcells.com
+SMTP_PORT=25
+SMTP_SECURE=true
+SMTP_USER=hss404.u021@cleverse.dev
+SMTP_PASSWORD=0000
+SMTP_FROM=qsalesplatform@qcells.com

package-lock.json

@@ -18,6 +18,7 @@
         "mssql": "^11.0.1",
         "mysql2": "^3.14.1",
         "next": "15.2.4",
+        "nodemailer": "^7.0.3",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-to-pdf": "^2.0.0",
@@ -3700,6 +3701,15 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/nodemailer": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-7.0.3.tgz",
+      "integrity": "sha512-Ajq6Sz1x7cIK3pN6KesGTah+1gnwMnx5gKl3piQlQQE/PwyJ4Mbc8is2psWYxK3RJTVeqsDaCv8ZzXLCDHMTZw==",
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/open": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/open/-/open-10.1.0.tgz",

package.json

@@ -18,6 +18,7 @@
     "@prisma/client": "^6.7.0",
     "@tanstack/react-query": "^5.71.0",
     "@tanstack/react-query-devtools": "^5.71.0",
+    "@types/nodemailer": "^6.4.17",
     "axios": "^1.8.4",
     "env-cmd": "^10.1.0",
     "iron-session": "^8.0.4",
@@ -25,6 +26,7 @@
     "mssql": "^11.0.1",
     "mysql2": "^3.14.1",
     "next": "15.2.4",
+    "nodemailer": "^7.0.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-to-pdf": "^2.0.0",

src/app/api/qna/file/route.ts

@@ -10,7 +10,7 @@ export async function GET(request: Request) {
     return NextResponse.json({ error: 'encodeFileNo is required' }, { status: 400 })
   }
   try {
-    const response = await axios.get(`${process.env.NEXT_PUBLIC_INQUIRY_FILE_DOWNLOAD_API_URL}/api/file/downloadFile2`, {
+    const response = await axios.get(`${process.env.NEXT_PUBLIC_INQUIRY_API_URL}/api/file/downloadFile2`, {
       responseType: 'arraybuffer',
       params: {
         encodeFileNo,

src/components/Login.tsx

@@ -83,6 +83,10 @@ export default function Login() {
         loginId: account.loginId,
         pwd: account.pwd,
       })
+      // const { data } = await axiosInstance(`${process.env.NEXT_PUBLIC_QSP_API_URL}`).post(`/api/user/login`, {
+      //   loginId: account.loginId,
+      //   pwd: account.pwd,
+      // })
 
       return data
     },

src/components/inquiry/Detail.tsx

@@ -3,6 +3,7 @@
 import Answer from './Answer'
 import { useInquiry } from '@/hooks/useInquiry'
 import { useParams, useRouter } from 'next/navigation'
+import { useSessionStore } from '@/store/session'
 
 export default function Detail() {
   const params = useParams()
@@ -12,6 +13,8 @@ export default function Detail() {
   const { commonCodeList } = useInquiry()
   const router = useRouter()
 
+  const { session } = useSessionStore()
+
   return (
     <>
       <div className="inquiry-frame">
@@ -30,24 +33,30 @@ export default function Detail() {
               <tbody>
                 <tr>
                   <th>登録日</th>
-                  <td>{inquiryDetail?.regDt}</td>
+                  <td>{inquiryDetail?.regDt.split(' ')[0]}</td>
                 </tr>
                 <tr>
-                  <th>作者</th>
-                  <td>{inquiryDetail?.regUserNm}</td>
+                  <th>顧客名</th>
+                  <td>
+                    {session?.userNm} {session?.builderNo ? `[${session?.builderNo}]` : ''}
+                  </td>
                 </tr>
                 <tr>
                   <th>販売店</th>
                   <td>{inquiryDetail?.storeNm}</td>
                 </tr>
-                <tr>
-                  <th>施工店</th>
-                  <td>{inquiryDetail?.compCd}</td>
-                </tr>
                 <tr>
                   <th>E-mail</th>
                   <td>{inquiryDetail?.regEmail}</td>
                 </tr>
+                <tr>
+                  <th>名前</th>
+                  <td>{inquiryDetail?.regUserNm}</td>
+                </tr>
+                <tr>
+                  <th>お問い合わせ</th>
+                  <td>{inquiryDetail?.regUserTelNo}</td>
+                </tr>
               </tbody>
             </table>
           </div>

src/components/inquiry/ListTable.tsx

@@ -1,91 +0,0 @@
-'use client'
-export default function ListTable() {
-  return (
-    <>
-      <div className="sale-frame">
-        <div className="inquiry-table-filter">
-          <div className="filter-check">
-            <div className="check-form-box">
-              <input type="checkbox" id="ch01" />
-              <label htmlFor="ch01">私が書いたお問い合わせ</label>
-            </div>
-          </div>
-          <div className="filter-select">
-            <select className="select-form" name="" id="">
-              <option value="">全体</option>
-              <option value="">全体</option>
-              <option value="">全体</option>
-              <option value="">全体</option>
-              <option value="">全体</option>
-            </select>
-          </div>
-        </div>
-        <div className="inquiry-list-wrap">
-          <div className="inquiry-list-tit">
-            合計 <span>98</span>個
-          </div>
-          <ul className="inquiry-list">
-            <li className="inquiry-item">
-              <div className="inquiry-item-bx">
-                <div className="inquiry-item-category">
-                  <span>屋根</span>
-                  <span>適合性</span>
-                  <span>屋根材</span>
-                </div>
-                <div className="inquiry-item-tit">屋根材適合性確認依頼</div>
-                <div className="inquiry-item-date">2025.04.02</div>
-                <div className="inquiry-badge badge blue">回答待ち</div>
-              </div>
-            </li>
-            <li className="inquiry-item">
-              <div className="inquiry-item-bx">
-                <div className="inquiry-item-category">
-                  <span>屋根</span>
-                  <span>適合性</span>
-                  <span>屋根材</span>
-                </div>
-                <div className="inquiry-item-tit">設置可能ですか？</div>
-                <div className="inquiry-item-date">2025.04.02</div>
-                <div className="inquiry-badge badge orange">回答完了</div>
-              </div>
-            </li>
-            <li className="inquiry-item">
-              <div className="inquiry-item-bx">
-                <div className="inquiry-item-category">
-                  <span>屋根</span>
-                  <span>適合性</span>
-                  <span>屋根材</span>
-                </div>
-                <div className="inquiry-item-tit">屋根材適合性確認依頼屋根材適合性確認依頼屋根材適合性確認依頼屋根材適合性確認依頼</div>
-                <div className="inquiry-item-date">2025.04.02</div>
-                <div className="inquiry-badge badge blue">回答待ち</div>
-              </div>
-            </li>
-            <li className="inquiry-item">
-              <div className="inquiry-item-bx">
-                <div className="inquiry-item-category">
-                  <span>屋根</span>
-                  <span>適合性</span>
-                  <span>屋根材</span>
-                </div>
-                <div className="inquiry-item-tit">設置可能ですか？</div>
-                <div className="inquiry-item-date">2025.04.02</div>
-                <div className="inquiry-badge badge orange">回答完了</div>
-              </div>
-            </li>
-            <li className="inquiry-item">
-              <div className="inquiry-item-bx nodata">
-                <div className="inquiry-item-nodata">조회된 데이터가 없습니다</div>
-              </div>
-            </li>
-          </ul>
-          <div className="sale-edit-btn">
-            <button className="btn-frame n-blue icon">
-              もっと見る<i className="btn-edit"></i>
-            </button>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}

src/components/inquiry/RegistForm.tsx

@@ -36,7 +36,13 @@ export default function RegistForm() {
 
   useEffect(() => {
     if (session?.isLoggedIn) {
-      setInquiryRequest({ ...inquiryRequest, regId: session?.userId ?? '', regUserNm: session?.userNm ?? '', storeId: session?.storeId ?? '' })
+      setInquiryRequest({
+        ...inquiryRequest,
+        regId: session?.userId ?? '',
+        regUserNm: session?.userNm ?? '',
+        storeId: session?.storeId ?? '',
+        qstMail: session?.email ?? '',
+      })
     }
   }, [session])
 
@@ -74,6 +80,17 @@ export default function RegistForm() {
       focusOnRequiredField('qstMail')
       return
     }
+    if (inquiryRequest.title.length > 100) {
+      alert('お問い合わせタイトルは100文字以内で入力してください。')
+      focusOnRequiredField('title')
+      return
+    }
+    if (inquiryRequest.contents.length > 2000) {
+      alert('お問い合わせ内容は2,000文字以内で入力してください。')
+      focusOnRequiredField('contents')
+      return
+    }
+
     const formData = new FormData()
     attachedFiles.forEach((file) => {
       formData.append('files', file)
@@ -92,6 +109,21 @@ export default function RegistForm() {
     )
   }
 
+  const handlePhoneNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value.replace(/[^\d]/g, '')
+
+    let formattedNumber = ''
+    if (value.length <= 3) {
+      formattedNumber = value
+    } else if (value.length <= 7) {
+      formattedNumber = `${value.slice(0, 3)}-${value.slice(3)}`
+    } else {
+      formattedNumber = `${value.slice(0, 3)}-${value.slice(3, 7)}-${value.slice(7, 11)}`
+    }
+
+    setInquiryRequest({ ...inquiryRequest, regUserTelNo: formattedNumber })
+  }
+
   return (
     <>
       <div className="inquiry-frame">
@@ -120,46 +152,50 @@ export default function RegistForm() {
                   ))}
               </select>
             </div>
-            <div className="data-input mt5">
-              <select
-                className="select-form"
-                name="qnaClsMidCd"
-                id="qnaClsMidCd"
-                value={inquiryRequest.qnaClsMidCd}
-                onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsMidCd: e.target.value })}
-              >
-                <option value="" hidden>
-                  選択してください
-                </option>
-                {commonCodeList
-                  .filter((code) => code.refChar1 === inquiryRequest.qnaClsLrgCd)
-                  .map((code) => (
-                    <option key={code.code} value={code.code}>
-                      {code.name}
-                    </option>
-                  ))}
-              </select>
-            </div>
-            <div className="data-input mt5">
-              <select
-                className="select-form"
-                name="qnaClsSmlCd"
-                id="qnaClsSmlCd"
-                value={inquiryRequest.qnaClsSmlCd ?? ''}
-                onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsSmlCd: e.target.value })}
-              >
-                <option value="" hidden>
-                  選択してください
-                </option>
-                {commonCodeList
-                  .filter((code) => code.refChar1 === inquiryRequest.qnaClsMidCd)
-                  .map((code) => (
-                    <option key={code.code} value={code.code}>
-                      {code.name}
-                    </option>
-                  ))}
-              </select>
-            </div>
+            {commonCodeList.filter((code) => code.refChar1 === inquiryRequest.qnaClsLrgCd).length > 0 && (
+              <div className="data-input mt5">
+                <select
+                  className="select-form"
+                  name="qnaClsMidCd"
+                  id="qnaClsMidCd"
+                  value={inquiryRequest.qnaClsMidCd}
+                  onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsMidCd: e.target.value })}
+                >
+                  <option value="" hidden>
+                    選択してください
+                  </option>
+                  {commonCodeList
+                    .filter((code) => code.refChar1 === inquiryRequest.qnaClsLrgCd)
+                    .map((code) => (
+                      <option key={code.code} value={code.code}>
+                        {code.name}
+                      </option>
+                    ))}
+                </select>
+              </div>
+            )}
+            {commonCodeList.filter((code) => code.refChar1 === inquiryRequest.qnaClsMidCd).length > 0 && (
+              <div className="data-input mt5">
+                <select
+                  className="select-form"
+                  name="qnaClsSmlCd"
+                  id="qnaClsSmlCd"
+                  value={inquiryRequest.qnaClsSmlCd ?? ''}
+                  onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsSmlCd: e.target.value })}
+                >
+                  <option value="" hidden>
+                    選択してください
+                  </option>
+                  {commonCodeList
+                    .filter((code) => code.refChar1 === inquiryRequest.qnaClsMidCd)
+                    .map((code) => (
+                      <option key={code.code} value={code.code}>
+                        {code.name}
+                      </option>
+                    ))}
+                </select>
+              </div>
+            )}
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">
@@ -181,10 +217,13 @@ export default function RegistForm() {
             <div className="data-input">
               <input
                 className="input-frame"
-                type="text"
+                type="tel"
+                inputMode="tel"
                 placeholder="電話番号を書き留めてください"
-                onChange={(e) => setInquiryRequest({ ...inquiryRequest, regUserTelNo: e.target.value })}
+                onChange={handlePhoneNumberChange}
+                value={inquiryRequest.regUserTelNo ?? ''}
                 id="regUserTelNo"
+                maxLength={13}
               />
             </div>
           </div>
@@ -197,6 +236,7 @@ export default function RegistForm() {
                 className="input-frame"
                 type="text"
                 placeholder="E-mailを書いてください"
+                value={inquiryRequest.qstMail}
                 onChange={(e) => setInquiryRequest({ ...inquiryRequest, qstMail: e.target.value })}
                 id="qstMail"
               />
@@ -212,21 +252,24 @@ export default function RegistForm() {
                 type="text"
                 placeholder="お問い合わせタイトルを記入してください"
                 onChange={(e) => setInquiryRequest({ ...inquiryRequest, title: e.target.value })}
+                maxLength={100}
                 id="title"
               />
             </div>
           </div>
           <div className="data-input-form-bx">
             <div className="data-input-form-tit">
-              お問い合わせタイプ <i className="import">*</i>
+              お問い合わせ内容 <i className="import">*</i>
             </div>
             <div className="data-input">
               <textarea
                 className="textarea-form"
                 rows={6}
                 id="contents"
-                placeholder="TextArea Filed"
+                placeholder="お問い合わせ内容を入力してください"
                 onChange={(e) => setInquiryRequest({ ...inquiryRequest, contents: e.target.value })}
+                value={inquiryRequest.contents}
+                maxLength={2000}
               ></textarea>
             </div>
           </div>
@@ -253,7 +296,10 @@ export default function RegistForm() {
               ))}
             </ul>
           </div>
-          <div className="sale-edit-btn">
+          <div className="btn-flex-wrap">
+            <button className="btn-frame n-blue icon" onClick={() => router.push('/inquiry/list')}>
+              リスト<i className="btn-arr"></i>
+            </button>
             <button className="btn-frame n-blue icon" onClick={handleSubmit} disabled={isSavingInquiry}>
               登録<i className="btn-arr"></i>
             </button>

src/components/inquiry/list/ListTable.tsx

@@ -13,12 +13,12 @@ const badgeStyle = [
   {
     id: 'Y',
     label: '回答完了',
-    color: 'blue',
+    color: 'orange',
   },
   {
     id: 'N',
     label: '回答待ち',
-    color: 'orange',
+    color: 'blue',
   },
 ]
 export default function ListTable() {
@@ -58,7 +58,11 @@ export default function ListTable() {
   }, [session, inquiryList])
 
   const handleMyInquiry = () => {
-    setInquiryListRequest({ ...inquiryListRequest, schRegId: inquiryListRequest.schRegId ? null : session.userId })
+    setOffset(1)
+    setInquiryListRequest({
+      ...inquiryListRequest,
+      schRegId: inquiryListRequest.schRegId ? null : session.userId,
+    })
   }
 
   const handleFilter = (e: React.ChangeEvent<HTMLSelectElement>) => {
@@ -98,39 +102,40 @@ export default function ListTable() {
           <div className="inquiry-list-tit">
             合計 <span>{heldInquiryList.length > 0 ? heldInquiryList[0].totCnt : 0}</span>個
           </div>
-          {heldInquiryList.length === 0 || (heldInquiryList.length > 0 && heldInquiryList[0].totCnt === 0) ? (
-            <div className="inquiry-item-bx nodata">
-              <div className="inquiry-item-nodata">照会されたデータがありません。</div>
-            </div>
-          ) : (
-            <ul className="inquiry-list">
-              {heldInquiryList.length > 0 &&
-                heldInquiryList.map((inquiry: InquiryList) => (
-                  <li className="inquiry-item" key={inquiry.qnaNo} onClick={() => router.push(`/inquiry/${inquiry.qnaNo}`)}>
-                    <div className="inquiry-item-bx">
-                      <div className="inquiry-item-category">
-                        <span>{inquiry.qnaClsLrgCd}</span>
-                        <span>{inquiry.qnaClsMidCd}</span>
-                        <span>{inquiry.qnaClsSmlCd}</span>
-                      </div>
-                      <div className="inquiry-item-tit">{inquiry.qstTitle}</div>
-                      <div className="inquiry-item-date">{inquiry.regDt}</div>
-                      <div className={`inquiry-badge badge ${badgeStyle.find((badge) => badge.id === inquiry.answerYn)?.color}`}>
-                        {badgeStyle.find((badge) => badge.id === inquiry.answerYn)?.label}
-                      </div>
+          <ul className="inquiry-list">
+            {heldInquiryList.length === 0 || (heldInquiryList.length > 0 && heldInquiryList[0].totCnt === 0) ? (
+              <li className="inquiry-item">
+                <div className="inquiry-item-bx nodata">
+                  <div className="inquiry-item-nodata">照会されたデータがありません。</div>
+                </div>
+              </li>
+            ) : (
+              heldInquiryList.map((inquiry: InquiryList) => (
+                <li className="inquiry-item" key={inquiry.qnaNo} onClick={() => router.push(`/inquiry/${inquiry.qnaNo}`)}>
+                  <div className="inquiry-item-bx">
+                    <div className="inquiry-item-category">
+                      <span>{inquiry.qnaClsLrgCd}</span>
+                      <span>{inquiry.qnaClsMidCd}</span>
+                      <span>{inquiry.qnaClsSmlCd}</span>
                     </div>
-                  </li>
-                ))}
-            </ul>
-          )}
-          <div className="sale-edit-btn">
-            <LoadMoreButton
-              hasMore={hasMore}
-              onLoadMore={() => {
-                setOffset(offset + 10)
-              }}
-            />
-          </div>
+                    <div className="inquiry-item-tit">{inquiry.qstTitle}</div>
+                    <div className="inquiry-item-date">{inquiry.regDt}</div>
+                    <div className={`inquiry-badge badge ${badgeStyle.find((badge) => badge.id === inquiry.answerYn)?.color}`}>
+                      {badgeStyle.find((badge) => badge.id === inquiry.answerYn)?.label}
+                    </div>
+                  </div>
+                </li>
+              ))
+            )}
+          </ul>
+        </div>
+        <div className="sale-edit-btn">
+          <LoadMoreButton
+            hasMore={hasMore}
+            onLoadMore={() => {
+              setOffset(offset + 10)
+            }}
+          />
         </div>
       </div>
     </>

src/components/pdf/SurveySaleDownloadPdf.tsx

@@ -2,22 +2,29 @@
 
 import { useEffect, useRef } from 'react'
 import generatePDF, { Margin, Resolution } from 'react-to-pdf'
-import { useParams } from 'next/navigation'
+import { useParams, useRouter } from 'next/navigation'
 import { useSurvey } from '@/hooks/useSurvey'
 import { radioEtcData, roofMaterial, selectBoxOptions, supplementaryFacilities } from '../survey-sale/detail/RoofForm'
+import { useSpinnerStore } from '@/store/spinnerStore'
 
 export default function SurveySaleDownloadPdf() {
   const params = useParams()
   const id = params.id
+  const router = useRouter()
 
   const { surveyDetail, isLoadingSurveyDetail } = useSurvey(Number(id))
-
-  useEffect(() => {
-    if (isLoadingSurveyDetail) return
-    handleDownPdf()
-  }, [surveyDetail, isLoadingSurveyDetail])
+  const { setIsShow } = useSpinnerStore()
 
   const targetRef = useRef<HTMLDivElement>(null)
+  const isGeneratedRef = useRef(false)
+
+  useEffect(() => {
+    setIsShow(true)
+    if (isLoadingSurveyDetail || !surveyDetail || isGeneratedRef.current) return
+    isGeneratedRef.current = true
+    handleDownPdf()
+  }, [surveyDetail?.id, isLoadingSurveyDetail])
+
   const handleDownPdf = () => {
     const options = {
       method: 'open' as const,
@@ -41,14 +48,31 @@ export default function SurveySaleDownloadPdf() {
       },
     }
 
-    generatePDF(targetRef, options)
-    // generatePDF(targetRef, { filename: 'page.pdf' })
+    generatePDF(targetRef, options).then(() => {
+      setIsShow(false)
+      router.push(`/survey-sale/${id}`)
+    })
   }
+  const supplementList = supplementaryFacilities
+    .filter((facility) => surveyDetail?.detailInfo?.supplementaryFacilities?.includes(facility.id.toString()))
+    .map((facility) => facility.name)
+
   return (
     <>
-      {/* <button onClick={handleDownPdf}>down</button> */}
-      <div ref={targetRef} style={{ boxSizing: 'border-box' }}>
-        <div style={{ margin: '0 auto', padding: 0, maxWidth: '800px', minWidth: '800px' }}>
+      <div
+        ref={targetRef}
+        style={{
+          width: '794px', // A4 너비
+          minHeight: '1123px', // A4 높이
+          transform: 'scale(1.0)',
+          transformOrigin: 'top left',
+          padding: '20px',
+          boxSizing: 'border-box',
+          backgroundColor: '#fff',
+          fontSize: '12px',
+        }}
+      >
+        <div>
           <div style={{ padding: '20px 20px 50px', borderBottom: '2px solid #2E3A59' }}>
             <div style={{ float: 'left', verticalAlign: 'middle', fontSize: '18px', color: '#101010', fontWeight: 600, fontFamily: 'M-Gothic' }}>
               HWJ 現地調査シート1/2
@@ -59,13 +83,13 @@ export default function SurveySaleDownloadPdf() {
                   現地明登施工店名
                 </p>
                 <p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#FF5656', fontWeight: 400, fontFamily: 'M-Gothic' }}>
-                  {surveyDetail?.store}
+                  {surveyDetail?.store ?? '-'}
                 </p>
               </div>
               <div style={{ float: 'right' }}>
                 <p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#101010', fontWeight: 500, fontFamily: 'M-Gothic' }}>現地阴買日</p>
                 <p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#FF5656', fontWeight: 400, fontFamily: 'M-Gothic' }}>
-                  {surveyDetail?.investigationDate}
+                  {surveyDetail?.investigationDate ?? '-'}
                 </p>
               </div>
             </div>
@@ -101,7 +125,7 @@ export default function SurveySaleDownloadPdf() {
                       boxSizing: 'border-box',
                     }}
                   >
-                    {surveyDetail?.customerName}
+                    {surveyDetail?.customerName ?? '-'}
                   </td>
                 </tr>
                 <tr>
@@ -168,7 +192,7 @@ export default function SurveySaleDownloadPdf() {
                       boxSizing: 'border-box',
                     }}
                   >
-                    {surveyDetail?.detailInfo?.contractCapacity}
+                    {surveyDetail?.detailInfo?.contractCapacity ?? '-'}
                   </td>
                   <th
                     style={{
@@ -195,7 +219,7 @@ export default function SurveySaleDownloadPdf() {
                       boxSizing: 'border-box',
                     }}
                   >
-                    {surveyDetail?.detailInfo?.retailCompany}
+                    {surveyDetail?.detailInfo?.retailCompany ?? '-'}
                   </td>
                 </tr>
                 <tr>
@@ -225,13 +249,11 @@ export default function SurveySaleDownloadPdf() {
                       boxSizing: 'border-box',
                     }}
                   >
-                    {supplementaryFacilities
-                      .filter((facility) => surveyDetail?.detailInfo?.supplementaryFacilities?.includes(facility.id.toString()))
-                      .map((facility) => facility.name)
-                      .join(', ')}
-                    {surveyDetail?.detailInfo?.supplementaryFacilitiesEtc
-                      ? `, (その他) ${surveyDetail?.detailInfo?.supplementaryFacilitiesEtc}`
-                      : '-'}
+                    {supplementList === null && surveyDetail?.detailInfo?.supplementaryFacilitiesEtc === null
+                      ? '-'
+                      : surveyDetail?.detailInfo?.supplementaryFacilitiesEtc
+                      ? `${supplementList.join(', ')}, ${surveyDetail?.detailInfo?.supplementaryFacilitiesEtc}`
+                      : supplementList.join(', ')}
                   </td>
                 </tr>
                 <tr>
@@ -261,11 +283,16 @@ export default function SurveySaleDownloadPdf() {
                       boxSizing: 'border-box',
                     }}
                   >
-                    {
-                      selectBoxOptions.installationSystem.find((system) => system.id.toString() === surveyDetail?.detailInfo?.installationSystem)
-                        ?.name
-                    }
-                    {surveyDetail?.detailInfo?.installationSystemEtc ? `, (その他) ${surveyDetail?.detailInfo?.installationSystemEtc}` : '-'}
+                    {/* {selectBoxOptions.installationSystem.find ((system) => system.id.toString() === surveyDetail?.detailInfo?.installationSystem)
+                      ?.name ?? surveyDetail?.detailInfo?.installationSystemEtc !== null
+                      ? `${surveyDetail?.detailInfo?.installationSystemEtc}`
+                      : '-'} */}
+                    {surveyDetail?.detailInfo?.installationSystem === null && surveyDetail?.detailInfo?.installationSystemEtc === null
+                      ? '-'
+                      : surveyDetail?.detailInfo?.installationSystemEtc
+                      ? `${surveyDetail?.detailInfo?.installationSystemEtc}`
+                      : selectBoxOptions.installationSystem.find((system) => system.id.toString() === surveyDetail?.detailInfo?.installationSystem)
+                          ?.name}
                   </td>
                 </tr>
               </tbody>
@@ -330,11 +357,13 @@ export default function SurveySaleDownloadPdf() {
                       boxSizing: 'border-box',
                     }}
                   >
-                    {roofMaterial
-                      .filter((material) => surveyDetail?.detailInfo?.roofMaterial?.includes(material.id.toString()))
-                      .map((material) => material.name)
-                      .join(', ')}
-                    {surveyDetail?.detailInfo?.roofMaterialEtc ? `, (その他) ${surveyDetail?.detailInfo?.roofMaterialEtc}` : '-'}
+                    {surveyDetail?.detailInfo?.roofMaterial === null && surveyDetail?.detailInfo?.roofMaterialEtc === null
+                      ? '-'
+                      : roofMaterial
+                          .filter((material) => surveyDetail?.detailInfo?.roofMaterial?.includes(material.id.toString()))
+                          .map((material) => material.name)
+                          .join(', ')}
+                    {surveyDetail?.detailInfo?.roofMaterialEtc ? `, ${surveyDetail?.detailInfo?.roofMaterialEtc}` : ''}
                   </td>
                   <th
                     style={{
@@ -361,7 +390,8 @@ export default function SurveySaleDownloadPdf() {
                       boxSizing: 'border-box',
                     }}
                   >
-                    {selectBoxOptions.roofShape.find((shape) => shape.id.toString() === surveyDetail?.detailInfo?.roofShape)?.name}
+                    {selectBoxOptions.roofShape.find((shape) => shape.id.toString() === surveyDetail?.detailInfo?.roofShape)?.name ??
+                      (surveyDetail?.detailInfo?.roofShapeEtc ? ` ${surveyDetail?.detailInfo?.roofShapeEtc}` : '-')}
                   </td>
                 </tr>
                 <tr>
@@ -390,7 +420,7 @@ export default function SurveySaleDownloadPdf() {
                       boxSizing: 'border-box',
                     }}
                   >
-                    {`${surveyDetail?.detailInfo?.roofSlope} 寸`}
+                    {surveyDetail?.detailInfo?.roofSlope ? `${surveyDetail?.detailInfo?.roofSlope} 寸` : '-'}
                   </td>
                   <th
                     style={{
@@ -418,7 +448,8 @@ export default function SurveySaleDownloadPdf() {
                       boxSizing: 'border-box',
                     }}
                   >
-                    {`${surveyDetail?.detailInfo?.houseStructure ? '木製' : '(その他)'} ${surveyDetail?.detailInfo?.houseStructureEtc}`}
+                    {radioEtcData.houseStructure.find((structure) => structure.id.toString() === surveyDetail?.detailInfo?.houseStructure)?.label ??
+                      (surveyDetail?.detailInfo?.houseStructureEtc ? ` ${surveyDetail?.detailInfo?.houseStructureEtc}` : '-')}
                   </td>
                 </tr>
                 <tr>
@@ -447,8 +478,12 @@ export default function SurveySaleDownloadPdf() {
                       boxSizing: 'border-box',
                     }}
                   >
+                    {/* {surveyDetail?.detailInfo?.rafterMaterial === null && surveyDetail?.detailInfo?.rafterMaterialEtc === null
+                      ? '-'
+                      : radioEtcData.rafterMaterial.find((material) => material.id.toString() === surveyDetail?.detailInfo?.rafterMaterial)?.label ??
+                        surveyDetail?.detailInfo?.rafterMaterialEtc} */}
                     {radioEtcData.rafterMaterial.find((material) => material.id.toString() === surveyDetail?.detailInfo?.rafterMaterial)?.label ??
-                      (surveyDetail?.detailInfo?.rafterMaterialEtc ? `(その他) ${surveyDetail?.detailInfo?.rafterMaterialEtc}` : '-')}
+                      (surveyDetail?.detailInfo?.rafterMaterialEtc ? ` ${surveyDetail?.detailInfo?.rafterMaterialEtc}` : '-')}
                   </td>
                   <th
                     style={{
@@ -477,7 +512,7 @@ export default function SurveySaleDownloadPdf() {
                     }}
                   >
                     {selectBoxOptions.rafterSize.find((size) => size.id.toString() === surveyDetail?.detailInfo?.rafterSize)?.name ??
-                      (surveyDetail?.detailInfo?.rafterSizeEtc ? `(その他) ${surveyDetail?.detailInfo?.rafterSizeEtc}` : '-')}
+                      (surveyDetail?.detailInfo?.rafterSizeEtc ? ` ${surveyDetail?.detailInfo?.rafterSizeEtc}` : '-')}
                   </td>
                 </tr>
                 <tr>
@@ -507,7 +542,7 @@ export default function SurveySaleDownloadPdf() {
                     }}
                   >
                     {selectBoxOptions.rafterPitch.find((pitch) => pitch.id.toString() === surveyDetail?.detailInfo?.rafterPitch)?.name ??
-                      (surveyDetail?.detailInfo?.rafterPitchEtc ? `(その他) ${surveyDetail?.detailInfo?.rafterPitchEtc}` : '-')}
+                      (surveyDetail?.detailInfo?.rafterPitchEtc ? ` ${surveyDetail?.detailInfo?.rafterPitchEtc}` : '-')}
                   </td>
                   <th
                     style={{
@@ -566,7 +601,7 @@ export default function SurveySaleDownloadPdf() {
                     }}
                   >
                     {selectBoxOptions.openFieldPlateKind.find((kind) => kind.id.toString() === surveyDetail?.detailInfo?.openFieldPlateKind)?.name ??
-                      (surveyDetail?.detailInfo?.openFieldPlateKindEtc ? `(その他) ${surveyDetail?.detailInfo?.openFieldPlateKindEtc}` : '-')}
+                      (surveyDetail?.detailInfo?.openFieldPlateKindEtc ? `${surveyDetail?.detailInfo?.openFieldPlateKindEtc}` : '-')}
                   </td>
                   <th
                     style={{
@@ -655,8 +690,7 @@ export default function SurveySaleDownloadPdf() {
                     }}
                   >
                     {radioEtcData.waterproofMaterial.find((material) => material.id.toString() === surveyDetail?.detailInfo?.waterproofMaterial)
-                      ?.label ??
-                      (surveyDetail?.detailInfo?.waterproofMaterialEtc ? `(その他) ${surveyDetail?.detailInfo?.waterproofMaterialEtc}` : '-')}
+                      ?.label ?? (surveyDetail?.detailInfo?.waterproofMaterialEtc ? ` ${surveyDetail?.detailInfo?.waterproofMaterialEtc}` : '-')}
                   </td>
                 </tr>
                 <tr>
@@ -690,7 +724,7 @@ export default function SurveySaleDownloadPdf() {
                       radioEtcData.insulationPresence.find((presence) => presence.id.toString() === surveyDetail?.detailInfo?.insulationPresence)
                         ?.label
                     }
-                    {surveyDetail?.detailInfo?.insulationPresenceEtc ? `(その他) ${surveyDetail?.detailInfo?.insulationPresenceEtc}` : '-'}
+                    {surveyDetail?.detailInfo?.insulationPresenceEtc ? `, ${surveyDetail?.detailInfo?.insulationPresenceEtc}` : ''}
                   </td>
                 </tr>
                 <tr>
@@ -720,8 +754,8 @@ export default function SurveySaleDownloadPdf() {
                       boxSizing: 'border-box',
                     }}
                   >
-                    {selectBoxOptions.structureOrder.find((order) => order.id.toString() === surveyDetail?.detailInfo?.structureOrder)?.name ??
-                      (surveyDetail?.detailInfo?.structureOrderEtc ? `(その他) ${surveyDetail?.detailInfo?.structureOrderEtc}` : '-')}
+                    {radioEtcData.structureOrder.find((order) => order.id.toString() === surveyDetail?.detailInfo?.structureOrder)?.label ??
+                      (surveyDetail?.detailInfo?.structureOrderEtc ? `${surveyDetail?.detailInfo?.structureOrderEtc}` : '-')}
                   </td>
                 </tr>
               </tbody>
@@ -759,14 +793,12 @@ export default function SurveySaleDownloadPdf() {
                       boxSizing: 'border-box',
                     }}
                   >
-                    {
-                      selectBoxOptions.installationAvailability.find(
-                        (availability) => availability.id.toString() === surveyDetail?.detailInfo?.installationAvailability,
-                      )?.name
-                    }
-                    {surveyDetail?.detailInfo?.installationAvailabilityEtc
-                      ? `(その他) ${surveyDetail?.detailInfo?.installationAvailabilityEtc}`
-                      : '-'}
+                    {surveyDetail?.detailInfo?.installationAvailability === null && surveyDetail.detailInfo?.installationAvailabilityEtc === null
+                      ? '-'
+                      : selectBoxOptions.installationAvailability.find(
+                          (availability) => availability.id.toString() === surveyDetail?.detailInfo?.installationAvailability,
+                        )?.name}
+                    {surveyDetail?.detailInfo?.installationAvailabilityEtc ? `, ${surveyDetail?.detailInfo?.installationAvailabilityEtc}` : ''}
                   </td>
                 </tr>
               </tbody>

src/components/popup/SurveySaleSubmitPopup.tsx

@@ -6,12 +6,14 @@ import { useEffect, useState } from 'react'
 import { useSessionStore } from '@/store/session'
 import { useCommCode } from '@/hooks/useCommCode'
 import { CommCode } from '@/types/CommCode'
+import { sendEmail } from '@/libs/mailer'
+import { useSpinnerStore } from '@/store/spinnerStore'
 
 interface SubmitFormData {
   saleBase: string | null
   store: string
   sender: string
-  receiver: string[]
+  receiver: string[] | string
   reference: string | null
   title: string
   contents: string
@@ -29,6 +31,7 @@ export default function SurveySaleSubmitPopup() {
   const params = useParams()
   const routeId = params.id
 
+  const { setIsShow } = useSpinnerStore()
   const [commCodeList, setCommCodeList] = useState<CommCode[]>([])
 
   const { getCommCode } = useCommCode()
@@ -86,10 +89,25 @@ export default function SurveySaleSubmitPopup() {
   const handleSubmit = () => {
     if (validateData(submitData)) {
       window.neoConfirm('送信しますか？ 送信後は変更・修正することはできません。', () => {
+        setIsShow(true)
         submitSurvey({ targetId: submitData.store })
+        sendEmail({
+          to: submitData.receiver,
+          subject: submitData.title,
+          content: submitData.contents,
+        })
+          .then(() => {
         if (!isSubmittingSurvey) {
           popupController.setSurveySaleSubmitPopup(false)
         }
+        })
+        .catch((error) => {
+          console.error('Error sending email:', error)
+          alert('メール送信に失敗しました。')
+          })
+          .finally(() => {
+            setIsShow(false)
+          })
       })
     }
   }

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

@@ -1,13 +1,14 @@
 'use client'
 
 import { useSurvey } from '@/hooks/useSurvey'
-import { useParams } from 'next/navigation'
+import { useParams, useRouter } from 'next/navigation'
 import { useEffect } from 'react'
 import DetailForm from './DetailForm'
 
 export default function DataTable() {
   const params = useParams()
   const id = params.id
+  const router = useRouter()
 
   useEffect(() => {
     if (Number.isNaN(Number(id))) {
@@ -67,7 +68,7 @@ export default function DataTable() {
             <tr>
               <th>ダウンロード</th>
               <td>
-                <button className="data-down" onClick={() => window.open(`/pdf/survey-sale/${id}`, '_blank')}>
+                <button className="data-down" onClick={() => router.push(`/pdf/survey-sale/${id}`)}>
                   HWJ現地調査票確認<i className="down-icon"></i>
                 </button>
               </td>

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

@@ -1,7 +1,14 @@
 import { useState } from 'react'
 import type { Mode, SurveyDetailInfo, SurveyDetailRequest } from '@/types/Survey'
 
-type RadioEtcKeys = 'houseStructure' | 'rafterMaterial' | 'waterproofMaterial' | 'insulationPresence' | 'rafterDirection' | 'leakTrace'
+type RadioEtcKeys =
+  | 'structureOrder'
+  | 'houseStructure'
+  | 'rafterMaterial'
+  | 'waterproofMaterial'
+  | 'insulationPresence'
+  | 'rafterDirection'
+  | 'leakTrace'
 type SelectBoxKeys =
   | 'installationSystem'
   | 'constructionYear'
@@ -9,7 +16,6 @@ type SelectBoxKeys =
   | 'rafterPitch'
   | 'rafterSize'
   | 'openFieldPlateKind'
-  | 'structureOrder'
   | 'installationAvailability'
 
 export const supplementaryFacilities = [
@@ -115,24 +121,6 @@ export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string
       name: '小幅板', //소판
     },
   ],
-  structureOrder: [
-    {
-      id: 1,
-      name: '屋根材', //지붕재
-    },
-    {
-      id: 2,
-      name: '防水材', //방수재
-    },
-    {
-      id: 3,
-      name: '屋根の基礎', //지붕의기초
-    },
-    {
-      id: 4,
-      name: '垂木', //서까래
-    },
-  ],
   installationAvailability: [
     {
       id: 1,
@@ -146,6 +134,12 @@ export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string
 }
 
 export const radioEtcData: Record<RadioEtcKeys, { id: number; label: string }[]> = {
+  structureOrder: [
+    {
+      id: 1,
+      label: '屋根材 - 防水材 - 屋根の基礎 - 垂木', //지붕재 방수재 지붕의기초 서까래
+    },
+  ],
   houseStructure: [
     {
       id: 1,
@@ -438,7 +432,7 @@ export default function RoofForm(props: {
             <div className="data-input-form-bx">
               {/* 지붕 구조의 순서 */}
               <div className="data-input-form-tit red-f">屋根構造の順序</div>
-              <SelectedBox mode={mode} column="structureOrder" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
+              <RadioSelected mode={mode} column="structureOrder" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
             </div>
             <div className="data-input-form-bx">
               {/* 지붕 제품명 설치 가능 여부 확인 */}

src/libs/mailer.ts

@@ -0,0 +1,50 @@
+'use server'
+
+import nodemailer from 'nodemailer'
+
+interface EmailParams {
+  to: string | string[]
+  cc?: string | string[]
+  subject: string
+  content: string
+}
+
+export async function sendEmail({ to, cc, subject, content }: EmailParams): Promise<void> {
+  // Create a transporter using SMTP
+  const transporter = nodemailer.createTransport({
+    host: process.env.SMTP_HOST,
+    port: Number(process.env.SMTP_PORT),
+    secure: process.env.SMTP_SECURE === 'true',
+    requireTLS: true,
+    auth: {
+      user: process.env.SMTP_USER,
+      pass: process.env.SMTP_PASSWORD,
+    },
+  })
+
+  // Email options
+  const mailOptions = {
+    from: process.env.SMTP_USER,
+    to: Array.isArray(to) ? to.join(', ') : to,
+    cc: cc ? (Array.isArray(cc) ? cc.join(', ') : cc) : undefined,
+    subject,
+    html: content,
+  }
+
+  try {
+    // Send email
+    await transporter.sendMail(mailOptions)
+  } catch (error) {
+    console.error('Error sending email:', error)
+    throw new Error('Failed to send email')
+  }
+}
+
+async function sendEmailTest() {
+  await sendEmail({
+    to: 'test@test.com',
+    cc: 'test2@test.com',
+    subject: 'Test Email',
+    content: '<h1>Hello</h1><p>This is a test email.</p>',
+  })
+}

src/styles/components/_sub.scss

@@ -1,38 +1,38 @@
-@use "../abstracts" as *;
+@use '../abstracts' as *;
 
 // input form 공통
-.data-input-form-bx{
+.data-input-form-bx {
   margin-bottom: 18px;
-  &:last-child{
+  &:last-child {
     margin-bottom: 0;
   }
-  .data-input-form-tit{
+  .data-input-form-tit {
     @include defaultFont($font-s-13, $font-w-500, $font-c);
     margin-bottom: 10px;
-    .import{
-      color: #F00;
+    .import {
+      color: #f00;
     }
-    span{
+    span {
       display: block;
-      @include defaultFont($font-s-13, $font-w-400, #A8B6C7);
+      @include defaultFont($font-s-13, $font-w-400, #a8b6c7);
     }
   }
-  .data-input-guide{
+  .data-input-guide {
     margin-top: 8px;
-    @include defaultFont($font-s-13, $font-w-400, #A8B6C7);
+    @include defaultFont($font-s-13, $font-w-400, #a8b6c7);
   }
-} 
+}
 
-.btn-flex-wrap{
+.btn-flex-wrap {
   @include flex(5px);
   margin-top: 24px;
-  .btn-bx{
+  .btn-bx {
     flex: 1;
   }
-  &.com{
-    .btn-bx{
+  &.com {
+    .btn-bx {
       flex: 1 1 auto;
-      button{
+      button {
         font-size: 12px;
       }
     }
@@ -40,13 +40,13 @@
 }
 
 // 매물 common
-.top-btn{
+.top-btn {
   position: fixed;
   bottom: 96px;
   right: 15px;
   width: 38px;
   height: 38px;
-  background-color: rgba(0, 0, 0, 0.50);
+  background-color: rgba(0, 0, 0, 0.5);
   background-image: url(/assets/images/sub/top_btn_icon.svg);
   background-position: center;
   background-repeat: no-repeat;
@@ -55,68 +55,68 @@
   z-index: 90000;
 }
 
-.sale-contents{
+.sale-contents {
   width: 100%;
-  background-color: #F5F5F5;
-  .sale-frame{
+  background-color: #f5f5f5;
+  .sale-frame {
     padding: 0 20px;
-    border-top: 1px solid #ECECEC;
-    border-bottom: 1px solid #ECECEC;
+    border-top: 1px solid #ececec;
+    border-bottom: 1px solid #ececec;
     margin-bottom: 10px;
     padding-bottom: 24px;
     padding-top: 24px;
     background-color: $white-fff;
-    &:first-child{
+    &:first-child {
       padding-top: 0;
       border-top: none;
     }
-    &:last-child{
+    &:last-child {
       padding-bottom: 0;
       border-bottom: none;
       margin-bottom: 0;
     }
   }
 }
-.sale-form-btn-wrap{
-  padding: 20px 20px 0 ;
+.sale-form-btn-wrap {
+  padding: 20px 20px 0;
   background-color: #fff;
-  .btn-flex-wrap{
+  .btn-flex-wrap {
     margin-top: 0;
   }
 }
 
 // 매물 목록
-.sale-form-bx{
+.sale-form-bx {
   margin-bottom: 14px;
-  &:last-child{
+  &:last-child {
     margin-bottom: 0;
   }
-} 
-.sale-list-wrap{
-  .sale-list-item{
+}
+.sale-list-wrap {
+  .sale-list-item {
     padding-top: 14px;
     padding-bottom: 14px;
-    border-bottom: 1px solid #ECECEC; 
+    border-bottom: 1px solid #ececec;
     cursor: pointer;
-    &:first-child{
+    &:first-child {
       padding-top: 0;
     }
-    &:last-child{
+    &:last-child {
       border-bottom: none;
       padding-bottom: 0;
     }
   }
 }
-.sale-item-bx{
-  .sale-item-date-bx{
+.sale-item-bx {
+  .sale-item-date-bx {
     @include flex(0px);
     align-items: center;
     margin-bottom: 9px;
-    .sale-item-num{
+    .sale-item-num {
       position: relative;
       @include defaultFont($font-s-13, $font-w-400, $font-c);
       padding-right: 6px;
-      &::after{
+      &::after {
         content: '';
         position: absolute;
         top: 50%;
@@ -124,31 +124,31 @@
         transform: translateY(-50%);
         width: 1px;
         height: 10px;
-        background-color: #A2ABB8;
+        background-color: #a2abb8;
       }
     }
-    .sale-item-date{
-      @include defaultFont($font-s-13, $font-w-400, #A2ABB8);
+    .sale-item-date {
+      @include defaultFont($font-s-13, $font-w-400, #a2abb8);
       padding-left: 6px;
     }
   }
-  .sale-item-tit{
+  .sale-item-tit {
     @include defaultFont($font-s-15, $font-w-500, $font-c);
     @include ellipsis(1);
     margin-bottom: 9px;
   }
-  .sale-item-customer{
+  .sale-item-customer {
     @include defaultFont($font-s-13, $font-w-400, $font-c);
     margin-bottom: 9px;
   }
-  .sale-item-update-bx{
+  .sale-item-update-bx {
     @include flex(0px);
     align-items: center;
-    .sale-item-name{
+    .sale-item-name {
       position: relative;
-      @include defaultFont($font-s-13, $font-w-400, #A2ABB8);
+      @include defaultFont($font-s-13, $font-w-400, #a2abb8);
       padding-right: 6px;
-      &::after{
+      &::after {
         content: '';
         position: absolute;
         top: 50%;
@@ -156,176 +156,177 @@
         transform: translateY(-50%);
         width: 1px;
         height: 10px;
-        background-color: #A2ABB8;
+        background-color: #a2abb8;
       }
     }
-    .sale-item-update{
-      @include defaultFont($font-s-13, $font-w-400, #A2ABB8);
+    .sale-item-update {
+      @include defaultFont($font-s-13, $font-w-400, #a2abb8);
       padding-left: 6px;
     }
   }
-  &.nodata{
-    .sale-item-nodata{
+  &.nodata {
+    .sale-item-nodata {
       padding: 5px 0;
       text-align: center;
       @include defaultFont($font-s-15, $font-w-500, $font-c);
     }
   }
 }
-.sale-edit-btn{
+.sale-edit-btn {
   margin-top: 24px;
 }
 
 // 매물 상세
-.sale-data-table-wrap{
+.sale-data-table-wrap {
   padding: 24px;
   background-color: #fff;
-  border-top: 1px solid #ECECEC;
+  border-top: 1px solid #ececec;
 }
-.sale-data-table{
+.sale-data-table {
   width: 100%;
   table-layout: fixed;
-  tbody{
-    tr{
-      th{
+  tbody {
+    tr {
+      th {
         @include defaultFont($font-s-13, $font-w-500, $font-c);
         vertical-align: top;
         padding: 5px 0;
       }
-      td{
+      td {
         @include defaultFont($font-s-13, $font-w-400, $font-c);
         padding: 5px 0 8px 14px;
-        .data-down{
+        .data-down {
           @include flex(8px);
           align-items: center;
-          color: #1259CB;
-          i{
+          color: #1259cb;
+          i {
             display: block;
             width: 8px;
             height: 12px;
-            background: url(/assets/images/sub/down_icon.svg)no-repeat center;
+            background: url(/assets/images/sub/down_icon.svg) no-repeat center;
             background-size: cover;
           }
         }
       }
-      &:first-child{
-        th,td{
+      &:first-child {
+        th,
+        td {
           padding-top: 0;
         }
       }
-      &:last-child{
-        th,td{
+      &:last-child {
+        th,
+        td {
           padding-bottom: 0;
         }
       }
     }
   }
-}  
+}
 
-.sale-detail-toggle-wrap{
-  border-top: 1px solid #ECECEC;
+.sale-detail-toggle-wrap {
+  border-top: 1px solid #ececec;
 }
-.sale-detail-toggle-bx{
-  border-bottom: 1px solid #ECECEC;
+.sale-detail-toggle-bx {
+  border-bottom: 1px solid #ececec;
 }
-.sale-detail-toggle-head{
+.sale-detail-toggle-head {
   @include flex(5px);
   padding: 14px 18px;
   background-color: $white-fff;
   cursor: pointer;
-  .sale-detail-toggle-name{
+  .sale-detail-toggle-name {
     @include defaultFont($font-s-13, $font-w-500, $font-c);
   }
-  .sale-detail-toggle-btn-wrap{
+  .sale-detail-toggle-btn-wrap {
     margin-left: auto;
-    .sale-detail-toggle-btn{
+    .sale-detail-toggle-btn {
       display: block;
       width: 22px;
       height: 22px;
-      background: url(/assets/images/sub/sale_toggle_btn.svg)no-repeat center;
-      background-size: cover
+      background: url(/assets/images/sub/sale_toggle_btn.svg) no-repeat center;
+      background-size: cover;
     }
   }
 }
-.sale-detail-toggle-cont{
+.sale-detail-toggle-cont {
   display: none;
-  .sale-frame{
+  .sale-frame {
     padding: 24px 20px;
-    &:first-child{
+    &:first-child {
       padding-top: 24px;
     }
-    &:last-child{
+    &:last-child {
       padding-bottom: 24px;
     }
   }
 }
 
-.sale-detail-toggle-bx{
-  &.act{
-    .sale-detail-toggle-head{
-      background-color: #5F738E;
-      .sale-detail-toggle-name{
-        color: #fff
+.sale-detail-toggle-bx {
+  &.act {
+    .sale-detail-toggle-head {
+      background-color: #5f738e;
+      .sale-detail-toggle-name {
+        color: #fff;
       }
-      .sale-detail-toggle-btn-wrap{
-        .sale-detail-toggle-btn{
-          background: url(/assets/images/sub/sale_toggle_btn_white.svg)no-repeat center;
+      .sale-detail-toggle-btn-wrap {
+        .sale-detail-toggle-btn {
+          background: url(/assets/images/sub/sale_toggle_btn_white.svg) no-repeat center;
         }
       }
     }
-    .sale-detail-toggle-cont{
+    .sale-detail-toggle-cont {
       display: block;
     }
   }
 }
 
 // 매물 기본정보
-.form-flex{
+.form-flex {
   @include flex(5px);
-  .form-bx{
+  .form-bx {
     flex: 1;
   }
 }
-.form-btn{
+.form-btn {
   margin-top: 12px;
 }
 
 // 매물 전기 지붕정보
-.sale-roof-title{
+.sale-roof-title {
   @include defaultFont($font-s-15, $font-w-500, $font-c);
   padding-bottom: 10px;
   margin-bottom: 20px;
-  border-bottom: 1px solid #2E3A59;
+  border-bottom: 1px solid #2e3a59;
 }
-.data-check-wrap{
+.data-check-wrap {
   @include flex(10px);
   flex-wrap: wrap;
   margin-bottom: 12px;
   .radio-form-box,
-  .check-form-box{
+  .check-form-box {
     width: calc(50% - 5px);
   }
-  &.mb0{
+  &.mb0 {
     margin-bottom: 0;
   }
 }
-.data-input{
-  &.flex{
+.data-input {
+  &.flex {
     @include flex(8px);
     align-items: center;
-    span{
+    span {
       flex: none;
       @include defaultFont($font-s-13, $font-w-400, $font-c);
     }
   }
 }
 
-
 // 1:1 문의 common
-.inquiry-frame{
+.inquiry-frame {
   padding: 0 20px;
 }
-.badge{
+.badge {
   min-width: 60px;
   height: 30px;
   line-height: 30px;
@@ -334,65 +335,64 @@
   text-align: center;
   font-size: $font-s-12;
   font-weight: $font-w-500;
-  &.blue{
-    color: #5497E9;
-    background-color: #ECF5FF;
+  &.blue {
+    color: #5497e9;
+    background-color: #ecf5ff;
   }
-  &.orange{
-    color: #F86A56;
-    background-color: #FFEFED;
+  &.orange {
+    color: #f86a56;
+    background-color: #ffefed;
   }
-  &.block{
+  &.block {
     width: 100%;
-    
   }
 }
 // 1:1 문의 목록
-.inquiry-table-filter{
+.inquiry-table-filter {
   margin-bottom: 24px;
-  .filter-check{
+  .filter-check {
     margin-bottom: 12px;
   }
 }
-.inquiry-list-tit{
+.inquiry-list-tit {
   padding-bottom: 10px;
-  border-bottom: 1px solid #2E3A59;
+  border-bottom: 1px solid #2e3a59;
   @include defaultFont($font-s-13, $font-w-400, $font-c);
-  span{
+  span {
     font-weight: $font-w-500;
   }
 }
-.inquiry-list{
-  .inquiry-item{
+.inquiry-list {
+  .inquiry-item {
     padding: 10px 0;
     cursor: pointer;
-    border-bottom: 1px solid #ECECEC;
-    &:last-child{
+    border-bottom: 1px solid #ececec;
+    &:last-child {
       border-bottom: none;
       padding-bottom: 0;
     }
-    .inquiry-item-bx{
+    .inquiry-item-bx {
       position: relative;
       padding-right: 70px;
-      .inquiry-item-category{
+      .inquiry-item-category {
         display: flex;
         align-items: center;
         margin-bottom: 5px;
-        span{
+        span {
           position: relative;
           display: block;
           @include defaultFont($font-s-13, $font-w-400, $font-c);
           padding: 0 6px;
-          &:first-child{
+          &:first-child {
             padding-left: 0;
           }
-          &:last-child{
+          &:last-child {
             padding-right: 0;
-            &::before{
+            &::before {
               display: none;
             }
           }
-          &::before{
+          &::before {
             content: '';
             position: absolute;
             top: 50%;
@@ -400,26 +400,31 @@
             transform: translateY(-50%);
             width: 1px;
             height: 10px;
-            background-color: #A2ABB8;
+            background-color: #a2abb8;
           }
         }
       }
-      .inquiry-item-tit{
+      .inquiry-item-tit {
         @include defaultFont($font-s-15, $font-w-500, $font-c);
         @include ellipsis(1);
         margin-bottom: 5px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
+        display: block;
       }
-      .inquiry-item-date{
-        @include defaultFont($font-s-13, $font-w-400, #A2ABB8);
+      .inquiry-item-date {
+        @include defaultFont($font-s-13, $font-w-400, #a2abb8);
       }
-      .inquiry-badge{
+      .inquiry-badge {
         position: absolute;
         top: 0;
         right: 0;
       }
-      &.nodata{
+      &.nodata {
         padding-right: 0;
-        .inquiry-item-nodata{
+        .inquiry-item-nodata {
           padding: 10px 0;
           text-align: center;
           @include defaultFont($font-s-15, $font-w-500, $font-c);
@@ -430,42 +435,45 @@
 }
 
 // 1:1문의 작성
-.inquiry-file-wrap{
+.textarea-form {
+  white-space: pre-wrap;
+}
+.inquiry-file-wrap {
   margin-top: 20px;
-  .file-list-wrap{
+  .file-list-wrap {
     margin-top: 14px;
   }
 }
-.file-list-tit{
+.file-list-tit {
   @include defaultFont($font-s-13, $font-w-500, $font-c);
 }
-.file-list{
+.file-list {
   margin-top: 14px;
-  .file-item{
-    border-top: 1px solid #EDEDED;
+  .file-item {
+    border-top: 1px solid #ededed;
     cursor: default;
-    .file-item-bx{
+    .file-item-bx {
       width: 100%;
       padding: 14px 0;
       @include flex(0px);
       align-items: center;
-      .file-item-name{
+      .file-item-name {
         @include ellipsis(1);
         @include defaultFont($font-s-13, $font-w-400, $font-c);
         padding-right: 10px;
       }
-      .file-del{
+      .file-del {
         flex: none;
         display: block;
         margin-left: auto;
         width: 16px;
         height: 16px;
-        background: url(/assets/images/common/id_delete_icon.svg)no-repeat center;
+        background: url(/assets/images/common/id_delete_icon.svg) no-repeat center;
         background-size: cover;
       }
     }
-    &:last-child{
-      .file-item-bx{
+    &:last-child {
+      .file-item-bx {
         padding-bottom: 0;
       }
     }
@@ -473,33 +481,33 @@
 }
 
 // 1:1 문의 상세
-.inquiry-detail-data-table{
+.inquiry-detail-data-table {
   padding: 20px 0;
-  border-bottom: 1px solid #ECECEC;
+  border-bottom: 1px solid #ececec;
 }
-.inquiry-detail-data{
+.inquiry-detail-data {
   padding: 20px 0;
-  border-bottom: 1px solid #2E3A59;
+  border-bottom: 1px solid #2e3a59;
   margin-bottom: 24px;
-  .inquiry-detail-category{
+  .inquiry-detail-category {
     display: flex;
     align-items: center;
     margin-bottom: 3px;
-    span{
+    span {
       position: relative;
       display: block;
       @include defaultFont($font-s-13, $font-w-400, $font-c);
       padding: 0 6px;
-      &:first-child{
+      &:first-child {
         padding-left: 0;
       }
-      &:last-child{
+      &:last-child {
         padding-right: 0;
-        &::before{
+        &::before {
           display: none;
         }
       }
-      &::before{
+      &::before {
         content: '';
         position: absolute;
         top: 50%;
@@ -507,151 +515,154 @@
         transform: translateY(-50%);
         width: 1px;
         height: 10px;
-        background-color: #A2ABB8;
+        background-color: #a2abb8;
       }
     }
   }
-  .inquiry-detail-tit{
+  .inquiry-detail-tit {
     @include defaultFont($font-s-15, $font-w-500, $font-c);
     margin-bottom: 10px;
+    word-wrap: break-word;
+    white-space: normal;
+    overflow-wrap: break-word;
   }
-  .inquiry-detail-txt{
+  .inquiry-detail-txt {
     @include defaultFont($font-s-13, $font-w-400, $font-c);
+    white-space: pre-line;
   }
 }
 
 // 1:1 문의 답변
-.inquiry-answer-wrap{
+.inquiry-answer-wrap {
   margin-top: 24px;
-  
 }
-.inquiry-answer-header{
+.inquiry-answer-header {
   padding: 20px 0;
-  border-top: 1px solid #F86A56;
-  border-bottom: 1px solid #ECECEC;
-  .inquiry-answer-tit{
-    @include defaultFont($font-s-14, $font-w-500, #F86A56);
+  border-top: 1px solid #f86a56;
+  border-bottom: 1px solid #ececec;
+  .inquiry-answer-tit {
+    @include defaultFont($font-s-14, $font-w-500, #f86a56);
     margin-bottom: 5px;
   }
-  .inquiry-answer-date{
-    @include defaultFont($font-s-13, $font-w-400, #F86A56);
+  .inquiry-answer-date {
+    @include defaultFont($font-s-13, $font-w-400, #f86a56);
   }
 }
-.inquiry-answer-tit{
+.inquiry-answer-tit {
   @include defaultFont($font-s-13, $font-w-400, $font-c);
   margin-bottom: 3px;
 }
 
 // 비밀번호 변경
-.border-frame{
+.border-frame {
   padding: 20px;
-  border-top: 1px solid #ECECEC;
-  border-bottom: 1px solid #ECECEC;
+  border-top: 1px solid #ececec;
+  border-bottom: 1px solid #ececec;
   background-color: #fff;
   margin-bottom: 10px;
-  &:last-child{
+  &:last-child {
     border-bottom: none;
     padding-bottom: 0;
     margin-bottom: 0;
   }
 }
-.pw-guide{
-  .pw-guide-tit{
-    @include defaultFont($font-s-16, $font-w-500, #1259CB);
+.pw-guide {
+  .pw-guide-tit {
+    @include defaultFont($font-s-16, $font-w-500, #1259cb);
   }
-  .pw-guide-txt{
-    @include defaultFont($font-s-13, $font-w-400, #417DDC);
+  .pw-guide-txt {
+    @include defaultFont($font-s-13, $font-w-400, #417ddc);
   }
 }
 
 // 지붕재 적합성
-.compliance-icon{
+.compliance-icon {
   display: flex;
 }
-.compliance-check-wrap{
+.compliance-check-wrap {
   padding-top: 10px;
 }
-.compliance-check-bx{
+.compliance-check-bx {
   position: relative;
   padding: 14px 18px;
-  border: 1px solid #EFEFEF;
+  border: 1px solid #efefef;
   border-radius: 4px;
   margin-bottom: 10px;
-  &:last-child{
+  &:last-child {
     margin-bottom: 0;
   }
-  &.act{
-    .bx-btn{
+  &.act {
+    .bx-btn {
       transform: rotate(0) !important;
     }
-    .reference-list{
-      display: block
+    .reference-list {
+      display: block;
     }
   }
 }
-.check-name-wrap{
+.check-name-wrap {
   @include flex(0px);
   align-items: center;
-  .check-name{
+  .check-name {
     @include defaultFont($font-s-13, $font-w-500, $font-c);
   }
-  .check-name-btn{
+  .check-name-btn {
     padding-left: 5px;
     margin-left: auto;
-    .bx-btn{
+    .bx-btn {
       display: block;
       width: 22px;
       height: 22px;
-      background: url(/assets/images/sub/compliance_bx_icon.svg)no-repeat center;
+      background: url(/assets/images/sub/compliance_bx_icon.svg) no-repeat center;
       transform: rotate(180deg);
     }
   }
 }
-.reference-list{
+.reference-list {
   display: none;
   margin-top: 10px;
   padding-top: 14px;
-  border-top: 1px solid #ECECEC;
-  transition: all .15s ease-in-out;
-  .reference-item{
+  border-top: 1px solid #ececec;
+  transition: all 0.15s ease-in-out;
+  .reference-item {
     margin-bottom: 8px;
     padding-left: 14px;
-    .reference-item-bx{
+    .reference-item-bx {
       @include flex(10px);
       @include defaultFont($font-s-13, $font-w-400, $font-c);
       align-items: center;
     }
-    &:last-child{
+    &:last-child {
       margin-bottom: 0;
     }
   }
-  &.check{
-    .reference-item{
+  &.check {
+    .reference-item {
       margin-bottom: 14px;
     }
   }
 }
 
-.compliace-nosearch{
+.compliace-nosearch {
   padding: 30px 0;
-  span{
+  span {
     display: block;
     @include defaultFont($font-s-13, $font-w-400, $font-c);
     text-align: center;
   }
 }
 
-.check-item-wrap{
+.check-item-wrap {
   @include flex(0px);
   align-items: center;
 }
-.compliance-icon-wrap{
+.compliance-icon-wrap {
   margin-left: auto;
   min-width: 44px;
   @include flex(0px);
   align-items: center;
 }
-.float-btn-wrap{
+.float-btn-wrap {
   position: sticky;
   bottom: 10px;
   left: 0;
@@ -659,14 +670,14 @@
   background-color: #fff;
   z-index: 9;
 }
-@media screen and (max-width: 360px){
-  .btn-flex-wrap{
+@media screen and (max-width: 360px) {
+  .btn-flex-wrap {
     flex-direction: column;
   }
-  .data-check-wrap{
+  .data-check-wrap {
     .radio-form-box,
-    .check-form-box{
+    .check-form-box {
       width: 100%;
     }
   }
-}
+}