feat: implement file download function

.env.development

@@ -9,6 +9,8 @@ NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120
 
 #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
+
 
 #QPARTNER 로그인 api
 DB_HOST=202.218.61.226

.env.localhost

@@ -9,6 +9,7 @@ NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120
 
 #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
 
 #QPARTNER 로그인 api
 DB_HOST=202.218.61.226

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

@@ -4,19 +4,30 @@ import { NextResponse } from 'next/server'
 export async function GET(request: Request) {
   const { searchParams } = new URL(request.url)
   const encodeFileNo = searchParams.get('encodeFileNo')
+  const srcFileNm = searchParams.get('srcFileNm')
 
   if (!encodeFileNo) {
     return NextResponse.json({ error: 'encodeFileNo is required' }, { status: 400 })
   }
   try {
-    const response = await axios.get(`${process.env.NEXT_PUBLIC_INQUIRY_API_URL}/file/downloadFile`, {
+    const response = await axios.get(`${process.env.NEXT_PUBLIC_INQUIRY_FILE_DOWNLOAD_API_URL}/api/file/downloadFile2`, {
+      responseType: 'arraybuffer',
       params: {
         encodeFileNo,
       },
     })
-    return NextResponse.json(response.data)
+    if (response.headers['content-type'] === 'application/octet-stream;charset=UTF-8') {
+      return new NextResponse(response.data, {
+        status: 200,
+        headers: {
+          'Content-Type': 'application/octet-stream;charset=UTF-8',
+          'Content-Disposition': `attachment; filename="${srcFileNm}"`,
+        },
+      })
+    } else {
+      return NextResponse.json({ error: 'file not found' }, { status: 404 })
+    }
   } catch (error: any) {
-    console.error(error.response)
     return NextResponse.json({ error: error.response.data }, { status: 500 })
   }
 }

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

@@ -3,6 +3,7 @@ import { NextResponse } from 'next/server'
 
 export async function POST(request: Request) {
   const formData = await request.formData()
+  console.log(formData)
   try {
     const response = await axios.post(`${process.env.NEXT_PUBLIC_INQUIRY_API_URL}/api/qna/save`, formData, {
       headers: {

src/components/inquiry/Answer.tsx

@@ -2,7 +2,13 @@
 
 import { Inquiry } from '@/types/Inquiry'
 
-export default function Answer({ inquiryDetail, downloadFile }: { inquiryDetail: Inquiry; downloadFile: (encodeFileNo: number) => Promise<File> }) {
+export default function Answer({
+  inquiryDetail,
+  downloadFile,
+}: {
+  inquiryDetail: Inquiry
+  downloadFile: (encodeFileNo: number, srcFileNm: string) => Promise<Blob | null>
+}) {
   return (
     <>
       <div className="inquiry-answer-wrap">
@@ -21,7 +27,7 @@ export default function Answer({ inquiryDetail, downloadFile }: { inquiryDetail:
           <ul className="file-list">
             {inquiryDetail?.ansListFile?.map((file) => (
               <li className="file-item" key={file.fileNo}>
-                <button className="file-item-bx" onClick={() => downloadFile(Number(file.encodeFileNo))}>
+                <button className="file-item-bx" onClick={() => downloadFile(Number(file.encodeFileNo), file.srcFileNm)}>
                   <div className="file-item-name">{file.srcFileNm} </div>
                 </button>
               </li>

src/components/inquiry/Detail.tsx

@@ -65,7 +65,12 @@ export default function Detail() {
             <ul className="file-list">
               {inquiryDetail?.listFile?.map((file) => (
                 <li className="file-item" key={file.fileNo}>
-                  <button className="file-item-bx" onClick={() => downloadFile(Number(file.encodeFileNo))}>
+                  <button
+                    className="file-item-bx"
+                    onClick={() => {
+                      downloadFile(Number(file.encodeFileNo), file.srcFileNm)
+                    }}
+                  >
                     <div className="file-item-name">{file.srcFileNm} </div>
                   </button>
                 </li>

src/components/inquiry/RegistForm.tsx

@@ -74,7 +74,6 @@ export default function RegistForm() {
       focusOnRequiredField('qstMail')
       return
     }
-
     const formData = new FormData()
     attachedFiles.forEach((file) => {
       formData.append('files', file)
@@ -82,12 +81,6 @@ export default function RegistForm() {
     Object.entries(inquiryRequest).forEach(([key, value]) => {
       formData.append(key, value ?? '')
     })
-
-    const formDataObj: Record<string, any> = {}
-    formData.forEach((value, key) => {
-      formDataObj[key] = value
-    })
-
     window.neoConfirm(
       'お問い合わせを登録しますか？ Hanwha Japanの担当者にお問い合わせメールが送信されます。',
       async () => {
@@ -115,7 +108,9 @@ export default function RegistForm() {
                 value={inquiryRequest.qnaClsLrgCd}
                 onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsLrgCd: e.target.value })}
               >
-                <option value="" hidden>選択してください</option>
+                <option value="" hidden>
+                  選択してください
+                </option>
                 {commonCodeList
                   .filter((code) => code.headCd === '204200')
                   .map((code) => (
@@ -133,7 +128,9 @@ export default function RegistForm() {
                 value={inquiryRequest.qnaClsMidCd}
                 onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsMidCd: e.target.value })}
               >
-                <option value="" hidden>選択してください</option>
+                <option value="" hidden>
+                  選択してください
+                </option>
                 {commonCodeList
                   .filter((code) => code.refChar1 === inquiryRequest.qnaClsLrgCd)
                   .map((code) => (
@@ -151,7 +148,9 @@ export default function RegistForm() {
                 value={inquiryRequest.qnaClsSmlCd ?? ''}
                 onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsSmlCd: e.target.value })}
               >
-                <option value="" hidden>選択してください</option>
+                <option value="" hidden>
+                  選択してください
+                </option>
                 {commonCodeList
                   .filter((code) => code.refChar1 === inquiryRequest.qnaClsMidCd)
                   .map((code) => (

src/hooks/useInquiry.ts

@@ -15,7 +15,7 @@ export function useInquiry(
   isLoadingInquiryDetail: boolean
   isSavingInquiry: boolean
   saveInquiry: (formData: FormData) => Promise<InquirySaveResponse>
-  downloadFile: (encodeFileNo: number) => Promise<File>
+  downloadFile: (encodeFileNo: number, srcFileNm: string) => Promise<Blob | null>
   commonCodeList: CommonCode[]
 } {
   const queryClient = useQueryClient()
@@ -74,9 +74,23 @@ export function useInquiry(
     },
   })
 
-  const downloadFile = async (encodeFileNo: number) => {
+  const downloadFile = async (encodeFileNo: number, srcFileNm: string) => {
-    const resp = await axiosInstance(null).get<File>(`/api/qna/file`, { params: { encodeFileNo } })
+    try {
-    return resp.data
+      const resp = await axiosInstance(null).get<Blob>(`/api/qna/file`, { params: { encodeFileNo, srcFileNm } })
+      const blob = new Blob([resp.data], { type: 'application/octet-stream;charset=UTF-8' })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = `${srcFileNm}`
+      a.click()
+      URL.revokeObjectURL(url)
+      return blob
+    } catch (error: any) {
+      if (error.response.status === 404) {
+        alert('ファイルが見つかりません')
+      }
+      return null
+    }
   }
 
   const { data: commonCodeList, isLoading: isLoadingCommonCodeList } = useQuery({