Feature/#156 마일스톤 페이지 내 파일 접근 방식 수정 (#159)

* refactor: 파일 다운로드 기능 deprecated #155 * feat: 외부에서 파일 리소스에 직접 접근할 수 있도록 설정 #155 * feat: 외부에서 파일 리소스에 직접 접근할 수 있도록 설정 #155 * fix: 파일 다운로드 테스트 삭제 #155 * fix: 파일 다운로드 api 호출 로직 삭제 #156 * refactor: 파일 api 호출 로직을 url로 서버 리소스에 접근하는 방식으로 변경 #156 * feat: 파일 불러오는 api 호출 로직 삭제 #156 --------- Co-authored-by: amaran-th <[email protected]>
SW-CSS · Aug 25, 2024 · dcb2fd6 · dcb2fd6
1 parent d1d8f18
commit dcb2fd6
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 87 deletions.
diff --git a/frontend/src/app/admin/milestone/list/[slug]/components/FilePreview/index.tsx b/frontend/src/app/admin/milestone/list/[slug]/components/FilePreview/index.tsx
@@ -1,33 +1,26 @@
-'use client';
-
 import Image from 'next/image';
-import { useMemo } from 'react';
 
 import { HistoryFileType } from '@/data/milestone';
-import { useFileQuery } from '@/lib/hooks/useApi';
 import { getFileType } from '@/lib/utils/utils';
 
 interface FilePreviewProps {
   fileName: string | null;
 }
 
 const FilePreview = ({ fileName }: FilePreviewProps) => {
-  const { data: file } = useFileQuery(fileName);
-  const fileUrl = useMemo(() => {
-    if (file) {
-      return URL.createObjectURL(file);
-    }
-    return '';
-  }, [file]);
   switch (getFileType(fileName)) {
     case HistoryFileType.PDF:
       return (
         <>
-          <a className="w-full rounded-sm bg-admin-primary-main text-white" href={fileUrl} download>
+          <a
+            className="w-full rounded-sm bg-admin-primary-main text-white"
+            href={process.env.NEXT_PUBLIC_FILE_URL + '/' + fileName}
+            download
+          >
             다운로드
           </a>
           <embed
-            src={fileUrl}
+            src={process.env.NEXT_PUBLIC_FILE_URL + '/' + fileName}
             type="application/pdf"
             className="h-full w-full"
             style={{ height: '100%', minHeight: '800px' }}
@@ -37,10 +30,21 @@ const FilePreview = ({ fileName }: FilePreviewProps) => {
     case HistoryFileType.IMAGE:
       return (
         <>
-          <a className="w-full rounded-sm bg-admin-primary-main text-white" href={fileUrl} download>
+          <a
+            className="w-full rounded-sm bg-admin-primary-main text-white"
+            href={process.env.NEXT_PUBLIC_FILE_URL + '/' + fileName}
+            download
+          >
             다운로드
           </a>
-          <Image src={fileUrl} priority={false} layout="responsive" alt={fileName ?? ''} width={532} height={532} />
+          <Image
+            src={process.env.NEXT_PUBLIC_FILE_URL + '/' + fileName}
+            priority={false}
+            layout="responsive"
+            alt={fileName ?? ''}
+            width={532}
+            height={532}
+          />
         </>
       );
     case HistoryFileType.EMPTY:

diff --git a/frontend/src/app/admin/milestone/register/page.tsx b/frontend/src/app/admin/milestone/register/page.tsx
@@ -7,13 +7,11 @@
 import { Form, Formik } from 'formik';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
-import { useMemo } from 'react';
-import * as Yup from 'yup';
 import { toast } from 'react-toastify';
+import * as Yup from 'yup';
 
 import { FileUploader } from '@/app/components/Formik/FileUploader';
 import { useRegisterHistoryInBatchMutation } from '@/lib/hooks/useAdminApi';
-import { useFileQuery } from '@/lib/hooks/useApi';
 
 const validationSchema = Yup.object().shape({
   file: Yup.mixed()
@@ -39,68 +37,30 @@ const initialValues: HistoryRegisterFormProps = {
 
 const Page = () => {
   const router = useRouter();
-  const { data: standardFile } = useFileQuery('history_standard.pdf');
-  const standardFileUrl = useMemo(() => {
-    if (standardFile) {
-      return URL.createObjectURL(standardFile);
-    }
-    return '';
-  }, [standardFile]);
-
-  const { data: sampleFile } = useFileQuery('history_register_sample.xlsx');
-  const sampleFileUrl = useMemo(() => {
-    if (sampleFile) {
-      return URL.createObjectURL(sampleFile);
-    }
-    return '';
-  }, [sampleFile]);
-
   const { mutate: registerHistories } = useRegisterHistoryInBatchMutation();
 
-  const handleStandardFileDownloadButtonClick = () => {
-    if (!standardFileUrl) {
-      toast.error('파일을 불러오는 데 실패하였습니다.');
-      return;
-    }
-    const a = document.createElement('a');
-    a.href = standardFileUrl;
-    a.download = '마일스톤_실적_내역_목록.xlsx';
-    a.click();
-  };
-
-  const handleSampleFileDownloadButtonClick = () => {
-    if (!sampleFileUrl) {
-      toast.error('파일을 불러오는 데 실패하였습니다.');
-      return;
-    }
-    const a = document.createElement('a');
-    a.href = sampleFileUrl;
-    a.download = '마일스톤_실적_내역_목록.xlsx';
-    a.click();
-  };
-
   return (
     <>
       <div className="flex items-center rounded-sm border-[1px] border-admin-border bg-admin-background-light px-5 py-3 text-sm">
         <p className="flex flex-1 justify-center gap-1">
           점수 산정 기준 표 - <Image src="/images/admin/pdf_icon.svg" alt="pdf" width="16" height="16" />
-          <button
-            type="button"
-            onClick={handleStandardFileDownloadButtonClick}
+          <a
             className="pl-[0.5px] text-red-500 underline underline-offset-4"
+            href={process.env.NEXT_PUBLIC_FILE_URL + '/history_standard.pdf'}
+            download
           >
             점수산정파일.pdf
-          </button>
+          </a>
         </p>
         <p className="flex flex-1 justify-center gap-1">
           일괄등록 파일 예시 - <Image src="/images/admin/xlsx_icon.svg" alt="xlsx" width="16" height="16" />
-          <button
-            type="button"
-            onClick={handleSampleFileDownloadButtonClick}
+          <a
             className="pl-[0.5px] text-green-500 underline underline-offset-4"
+            href={process.env.NEXT_PUBLIC_FILE_URL + '/history_register_sample.xlsx'}
+            download
           >
             sample.xlsx
-          </button>
+          </a>
         </p>
       </div>
       <Formik

diff --git a/frontend/src/lib/api/server.api.ts b/frontend/src/lib/api/server.api.ts
@@ -60,16 +60,6 @@ export async function getMilestoneHistory(historyId: number) {
   return response;
 }
 
-export async function getFile(fileName: string | null) {
-  const response = await server
-    .get<Blob>(`/files/${fileName}`, {
-      responseType: 'blob',
-    })
-    .then((res) => res.data)
-    .catch((err) => Promise.reject(err));
-  return response;
-}
-
 export async function getValidationStudentId(studentId: string) {
   const response = await server
     .get(`/sign-up/exists/student-id`, {

diff --git a/frontend/src/lib/hooks/useApi.ts b/frontend/src/lib/hooks/useApi.ts
@@ -131,19 +131,6 @@ export function useStudentMembersQuery() {
   });
 }
 
-export function useFileQuery(fileName: string | null) {
-  return useAxiosQuery({
-    queryKey: QueryKeys.FILE(fileName),
-    queryFn: async (): Promise<Blob | null> => {
-      const response = await client.get(`/files/${fileName}`, { responseType: 'blob' });
-      if (response?.status !== 200) {
-        return null;
-      }
-      return response?.data;
-    },
-  });
-}
-
 export function useMilestoneHistoryCreateMutation() {
   return useAxiosMutation({
     mutationFn: async ({ milestoneId, description, count, file, activatedAt }: MilestoneHistoryCreateDto) => {