129 lines
4.6 KiB
JavaScript
129 lines
4.6 KiB
JavaScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { useAxios } from '@/hooks/useAxios'
|
|
import { handleFileDown } from '@/util/board-utils'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { sessionStore } from '@/store/commonAtom'
|
|
import { useRecoilState } from 'recoil'
|
|
|
|
export default function QnaDetailModal({ qnaNo, setOpen, qnaType }) {
|
|
const { getMessage } = useMessage()
|
|
// api 조회 관련
|
|
const { get } = useAxios()
|
|
const [boardDetail, setBoardDetail] = useState({})
|
|
const [sessionState, setSessionState] = useRecoilState(sessionStore)
|
|
|
|
useEffect(() => {
|
|
// 상세 조회
|
|
const fetchDetail = async (qnaNo) => {
|
|
const url = `/api/board/detail`
|
|
const params = new URLSearchParams({
|
|
noticeNo : qnaNo,
|
|
qnaNo : qnaNo,
|
|
schNoticeClsCd: 'QNA',
|
|
compCd : 5200,
|
|
loginId : sessionState.userId,
|
|
langCd : 'JA',
|
|
siteTpCd : 'QC',
|
|
})
|
|
const apiUrl = `${url}?${params.toString()}`
|
|
|
|
const resultData = await get({ url: apiUrl })
|
|
|
|
if (resultData) {
|
|
if (resultData.result.code === 200) {
|
|
const boardDetail = resultData.data
|
|
setBoardDetail(boardDetail)
|
|
} else {
|
|
alert(resultData.result.message)
|
|
}
|
|
}
|
|
}
|
|
|
|
fetchDetail(qnaNo)
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<div key={qnaNo} className="modal-popup community">
|
|
<div className="modal-dialog">
|
|
<div className="modal-content">
|
|
<div className="modal-header">
|
|
<button
|
|
type="button"
|
|
className="modal-close"
|
|
onClick={() => {
|
|
setOpen(false)
|
|
}}
|
|
>
|
|
{getMessage('board.sub.btn.close')}
|
|
</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="oneonone-header-wrap">
|
|
<div className="oneonone-title"> {qnaType} {boardDetail.qstTitle}</div>
|
|
<div className="oneonone-infor">
|
|
<div className="profile">{boardDetail.regUserNm}</div>
|
|
<div className="date">{boardDetail.regDt}</div>
|
|
</div>
|
|
</div>
|
|
<div className="oneonone-detail">
|
|
{boardDetail.listFile && (
|
|
<dl className="community_detail-file-wrap">
|
|
<dt>{getMessage('qna.detail.sub.fileList')}</dt>
|
|
{boardDetail.listFile.map((boardFile) => (
|
|
<dd key={boardFile.encodeFileNo}>
|
|
<button type="button" className="down" onClick={() => handleFileDown(boardFile.fileNo, 'NO')}>
|
|
{boardFile.srcFileNm}
|
|
</button>
|
|
</dd>
|
|
))}
|
|
</dl>
|
|
)}
|
|
<div
|
|
className="community_detail-inner"
|
|
dangerouslySetInnerHTML={{
|
|
__html: boardDetail.qstContents ? boardDetail.qstContents.replaceAll('\n', '<br/>') : '',
|
|
}}
|
|
></div>
|
|
</div>
|
|
{boardDetail?.answerYn === 'Y' && (
|
|
<div className="oneonone-answer">
|
|
<div className="answer-title-wrap">
|
|
<div className="answer-title">Hanwha Japan {getMessage('qna.detail.sub.answer')}</div>
|
|
<div className="oneonone-infor">
|
|
<div className="profile">{boardDetail.ansRegNm}</div>
|
|
<div className="date">{boardDetail.ansRegDt}</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="community_detail-inner"
|
|
dangerouslySetInnerHTML={{
|
|
__html: boardDetail.ansContents ? boardDetail.ansContents.replaceAll('\n', '<br/>') : '',
|
|
}}
|
|
></div>
|
|
{boardDetail.ansListFile && (
|
|
<dl className="community_detail-file-wrap">
|
|
<dt>{getMessage('qna.detail.sub.fileList')}</dt>
|
|
{boardDetail.ansListFile.map((boardFile) => (
|
|
<dd key={boardFile.encodeFileNo}>
|
|
<button type="button" className="down" onClick={() => handleFileDown(boardFile.fileNo, 'N')}>
|
|
{boardFile.srcFileNm}
|
|
</button>
|
|
</dd>
|
|
))}
|
|
</dl>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</>
|
|
)
|
|
}
|