feat: 포트폴리오 란을 따로 컴포넌트로 분리

- pdf viewer에 포트폴리오를 추가한다
JNU-econovation · Mar 3, 2024 · 5c7ba09 · 5c7ba09
1 parent 3e0dc39
commit 5c7ba09
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 35 deletions.
diff --git a/frontend/components/applicant/PdfViewer.component.tsx b/frontend/components/applicant/PdfViewer.component.tsx
@@ -4,6 +4,7 @@ import ApplicantDetailRight from "@/components/applicant/DetailRight.component";
 import { getApplicationById } from "@/src/apis/applicant";
 import { useQuery } from "@tanstack/react-query";
 import { useSearchParams } from "next/navigation";
+import Portfolio from "./applicantNode/Portfolio.component";
 
 const ApplicationPdfViewer = () => {
   const searchParams = useSearchParams();
@@ -28,6 +29,7 @@ const ApplicationPdfViewer = () => {
   return (
     <div className="p-24">
       <ApplicantDetailRight data={data} />
+      <Portfolio data={data} />
     </div>
   );
 };

diff --git a/frontend/components/applicant/applicantNode/CustomResource.component.tsx b/frontend/components/applicant/applicantNode/CustomResource.component.tsx
@@ -1,24 +1,13 @@
 import Txt from "@/components/common/Txt.component";
 import { ApplicantReq } from "@/src/apis/applicant";
 import { applicantDataFinder } from "@/src/functions/finder";
-import Link from "next/link";
-
+import Portfolio from "./Portfolio.component";
 interface ApplicantResourceProps {
   data: ApplicantReq[];
   postId: string;
 }
 
 const ApplicantResource = ({ data, postId }: ApplicantResourceProps) => {
-  const regex = /[\s,;|]+/;
-
-  const portfolio = applicantDataFinder(data, "portfolio")
-    .split(regex)
-    .map((url: string) => url.trim());
-
-  const file = applicantDataFinder(data, "fileUrl")
-    .split(regex)
-    .map((url: string) => url.trim());
-
   return (
     <>
       <div className="flex flex-col gap-1 mb-2">
@@ -49,29 +38,7 @@ const ApplicantResource = ({ data, postId }: ApplicantResourceProps) => {
         </div>
       </div>
       <div className="flex flex-col gap-4">
-        <Txt typography="h4">포트폴리오</Txt>
-        <div className="flex gap-4">
-          <div className="flex-1 flex flex-col">
-            <Txt typography="h6">링크</Txt>
-            {portfolio.map((url: string, index: number) => {
-              return (
-                <Link href={url} target="_blank" key={index}>
-                  <Txt className="break-all">{url}</Txt>
-                </Link>
-              );
-            })}
-          </div>
-          <div className="flex-1 flex flex-col">
-            <Txt typography="h6">파일</Txt>
-            {file.map((url: string, index: number) => {
-              return (
-                <Link href={url} target="_blank" key={index}>
-                  <Txt className="break-all">{url}</Txt>
-                </Link>
-              );
-            })}
-          </div>
-        </div>
+        <Portfolio data={data} />
       </div>
     </>
   );

diff --git a/frontend/components/applicant/applicantNode/Portfolio.component.tsx b/frontend/components/applicant/applicantNode/Portfolio.component.tsx
@@ -0,0 +1,50 @@
+import Txt from "@/components/common/Txt.component";
+import { ApplicantReq } from "@/src/apis/applicant";
+import { applicantDataFinder } from "@/src/functions/finder";
+import Link from "next/link";
+
+interface PortfolioProps {
+  data: ApplicantReq[];
+}
+
+const Portfolio = ({ data }: PortfolioProps) => {
+  const regex = /[\s,;|]+/;
+
+  const portfolio = applicantDataFinder(data, "portfolio")
+    .split(regex)
+    .map((url: string) => url.trim());
+
+  const file = applicantDataFinder(data, "fileUrl")
+    .split(regex)
+    .map((url: string) => url.trim());
+
+  return (
+    <>
+      <Txt typography="h4">포트폴리오</Txt>
+      <div className="flex gap-4">
+        <div className="flex-1 flex flex-col">
+          <Txt typography="h6">링크</Txt>
+          {portfolio.map((url: string, index: number) => {
+            return (
+              <Link href={url} target="_blank" key={index}>
+                <Txt className="break-all">{url}</Txt>
+              </Link>
+            );
+          })}
+        </div>
+        <div className="flex-1 flex flex-col">
+          <Txt typography="h6">파일</Txt>
+          {file.map((url: string, index: number) => {
+            return (
+              <Link href={url} target="_blank" key={index}>
+                <Txt className="break-all">{url}</Txt>
+              </Link>
+            );
+          })}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Portfolio;