feat :: 기업 정보 상세보기 프리뷰

Team-return · Mar 19, 2024 · 2537c39 · 2537c39
1 parent 6425d83
commit 2537c39
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -92,4 +92,9 @@ table {
     padding-left: 40px;
     padding-right: 40px;
   }
+  & .file {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
 }
diff --git a/src/components/company/CompanyTable.tsx b/src/components/company/CompanyTable.tsx
@@ -1,6 +1,7 @@
 import { CompaniesDetailsTable } from "@/apis/companies/type";
 import { pon_number_regex } from "@/util/regex";
 import React from "react";
+import FilePreview from "../recruitments/apply/FilePreview";
 
 function CompanyTable({ ...rest }: CompaniesDetailsTable) {
   const {
@@ -102,7 +103,20 @@ function CompanyTable({ ...rest }: CompaniesDetailsTable) {
           </tr>
           <tr>
             <td className="key">첨부파일</td>
-            <td className="value">첨부파일</td>
+            <td className="value file">
+              {attachments.length === 0
+                ? "-"
+                : attachments.map(fileUrl => (
+                    <FilePreview
+                      fileName={fileUrl.split("/")[1].slice(37)}
+                      onClick={() => {
+                        window.open(
+                          `${process.env.NEXT_PUBLIC_IMAGE_URL}/${fileUrl}`
+                        );
+                      }}
+                    />
+                  ))}
+            </td>
           </tr>
         </tbody>
       </table>

diff --git a/src/components/recruitments/apply/FilePreview.tsx b/src/components/recruitments/apply/FilePreview.tsx
@@ -6,13 +6,15 @@ import { Icon } from "@team-return/design-system";
 interface PropsType {
   fileName: string;
   prepend?: (fileName: string) => void;
+  onClick?: () => void;
 }
 
-function FilePreview({ fileName, prepend }: PropsType) {
+function FilePreview({ fileName, prepend, onClick }: PropsType) {
   return (
     <div
       className="flex gap-1 items-center py-1 px-3 rounded-[20px] bg-[#f7f7f7] hover:opacity-70 relative max-w-[200px]"
       title={fileName}
+      onClick={onClick}
     >
       <Image src={Clip} alt="첨부파일" width={16} height={16} />
       <p className="text-b3 leading-b3 font-r text-[#7f7f7f] text-ellipsis whitespace-nowrap overflow-hidden mr-[6px]">

diff --git a/src/components/recruitments/apply/FileUploader.tsx b/src/components/recruitments/apply/FileUploader.tsx
@@ -22,12 +22,12 @@ export default function FileUploader({
   const addFileList = () => {
     if (fileRef.current?.files?.length) {
       const files = Array.from(fileRef.current?.files);
-      setFileList((prev) => [...prev, ...files]);
+      setFileList(prev => [...prev, ...files]);
     }
   };
 
   const prependFileItem = (fileName: string) => {
-    setFileList((prev) => prev.filter((file) => file.name !== fileName));
+    setFileList(prev => prev.filter(file => file.name !== fileName));
   };
 
   useEffect(() => {