fix: 첨부링크가 post 요청하지 못하는 이슈를 해결한다 (#123)

JNU-econovation · Mar 3, 2024 · ab8e37c · ab8e37c
2 parents 7488192 + bc80637
commit ab8e37c
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 37 deletions.
diff --git a/frontend/app/applicant/pdf-viewer/page.tsx b/frontend/app/applicant/pdf-viewer/page.tsx
@@ -1,7 +1,7 @@
 import { dehydrate, Hydrate } from "@tanstack/react-query";
 import getQueryClient from "@/src/functions/getQueryClient";
 import { getApplicationById } from "@/src/apis/applicant";
-import ApplicationPdfViewer from "@/components/applicant/PdfViewer.component";
+import ApplicationPdfViewer from "@/components/applicant/PdfViewer";
 
 interface ApplicationPdfViewerPageProps {
   searchParams: {

diff --git a/...ponents/applicant/PdfViewer.component.tsx → frontend/components/applicant/PdfViewer.tsx b/...ponents/applicant/PdfViewer.component.tsx → frontend/components/applicant/PdfViewer.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";
 
 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,8 +1,7 @@
 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";
 interface ApplicantResourceProps {
   data: ApplicantReq[];
   postId: string;
@@ -39,25 +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>
-            <Link href={applicantDataFinder(data, "portfolio")} target="_blank">
-              <Txt className="break-all">
-                {applicantDataFinder(data, "portfolio")}
-              </Txt>
-            </Link>
-          </div>
-          <div className="flex-1 flex flex-col">
-            <Txt typography="h6">파일</Txt>
-            <Link href={applicantDataFinder(data, "fileUrl")} target="_blank">
-              <Txt className="break-all">
-                {applicantDataFinder(data, "fileUrl")}
-              </Txt>
-            </Link>
-          </div>
-        </div>
+        <Portfolio data={data} />
       </div>
     </>
   );

diff --git a/frontend/components/applicant/applicantNode/Portfolio.tsx b/frontend/components/applicant/applicantNode/Portfolio.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;
diff --git a/frontend/components/application/Junction.component.tsx b/frontend/components/application/Junction.component.tsx
@@ -1,7 +1,7 @@
 import { ApplicationNode } from "@/src/constants/application/type";
 import { ReactNode } from "react";
 
-import ApplicationRadio from "./applicationNode/Radio.component";
+import ApplicationRadio from "./applicationNode/Radio";
 import ApplicationRadioByTwoRank from "./applicationNode/RadioByTwoRank.component";
 import ApplicationText from "./applicationNode/Text.component";
 import ApplicationCheckboxWithEtc from "./applicationNode/CheckboxWithEtc.component";

diff --git a/...ation/applicationNode/Radio.component.tsx → ...nts/application/applicationNode/Radio.tsx b/...ation/applicationNode/Radio.component.tsx → ...nts/application/applicationNode/Radio.tsx
@@ -5,15 +5,15 @@ import Txt from "@/components/common/Txt.component";
 import {
   APPLICATION_DESIGN,
   APPLICATION_NAVBAR_DESIGN,
-} from "@/src/constants/application/26/designer";
+} from "@/src/constants/application/27/designer";
 import {
   APPLICATION_DEVELOPER,
   APPLICATION_NAVBAR_DEVELOPER,
-} from "@/src/constants/application/26/developer";
+} from "@/src/constants/application/27/developer";
 import {
   APPLICATION_MANAGER,
   APPLICATION_NAVBAR_MANAGER,
-} from "@/src/constants/application/26/manager";
+} from "@/src/constants/application/27/manager";
 import {
   ApplicationNode,
   type ApplicationRadio,

diff --git a/frontend/src/constants/application/27/designer.ts b/frontend/src/constants/application/27/designer.ts
@@ -137,7 +137,7 @@ export const APPLICATION_DESIGN: ApplicationQuestion[] = [
     title: "자신을 어필할 수 있는 포트폴리오를 업로드해 주세요.",
     direction: "horizontal",
     subtitle:
-      "지원자 분의 포트폴리오 링크 접근 권한을 열어주세요 만약 접근 권한이 없을 경우 불이익이 있을 수 있습니다.",
+      "지원자 분의 포트폴리오 링크 접근 권한을 열어주세요. 만약 접근 권한이 없을 경우 불이익이 있을 수 있습니다.",
     nodes: [
       {
         name: "portfolio",

diff --git a/frontend/src/constants/application/27/developer.ts b/frontend/src/constants/application/27/developer.ts
@@ -127,7 +127,7 @@ export const APPLICATION_DEVELOPER: ApplicationQuestion[] = [
     id: 12,
     title: "자신을 어필할 수 있는 포트폴리오를 업로드해 주세요.",
     subtitle:
-      "지원자 분의 포트폴리오 링크 접근 권한을 열어주세요 만약 접근 권한이 없을 경우 불이익이 있을 수 있습니다.",
+      "지원자 분의 포트폴리오 링크 접근 권한을 열어주세요. 만약 접근 권한이 없을 경우 불이익이 있을 수 있습니다.",
     direction: "horizontal",
     nodes: [
       {

diff --git a/frontend/src/constants/application/27/manager.ts b/frontend/src/constants/application/27/manager.ts
@@ -144,7 +144,7 @@ export const APPLICATION_MANAGER: ApplicationQuestion[] = [
     id: 13,
     title: "자신을 어필할 수 있는 포트폴리오를 업로드해 주세요.",
     subtitle:
-      "지원자 분의 포트폴리오 링크 접근 권한을 열어주세요 만약 접근 권한이 없을 경우 불이익이 있을 수 있습니다.",
+      "지원자 분의 포트폴리오 링크 접근 권한을 열어주세요. 만약 접근 권한이 없을 경우 불이익이 있을 수 있습니다.",
     direction: "horizontal",
     nodes: [
       {

diff --git a/frontend/src/functions/getApplication.ts b/frontend/src/functions/getApplication.ts
@@ -7,12 +7,17 @@ import { isApplicationQuestion } from "./validator";
 
 export const getApplicationNames = (
   node: (ApplicationQuestion | ApplicationNode)[],
+  requirement: boolean = true,
   applicationName?: Set<string>
 ) => {
   const applicationNameSet = applicationName || new Set<string>();
   node.forEach((element) => {
     if (isApplicationQuestion(element)) {
-      return getApplicationNames(element.nodes, applicationNameSet);
+      return getApplicationNames(
+        element.nodes,
+        requirement,
+        applicationNameSet
+      );
     }
     switch (element.type) {
       case "checkbox":
@@ -21,15 +26,15 @@ export const getApplicationNames = (
       case "radioForCheck":
       case "text":
       case "textarea":
-        if (element.require) {
+        if (!requirement || element.require) {
           applicationNameSet.add(element.name);
         }
         break;
       case "booleanTextarea":
       case "radioByTwoRank":
         if (element.subNodes) {
           element.subNodes.forEach((subNode) => {
-            if (subNode.require) {
+            if (!requirement || subNode.require) {
               applicationNameSet.add(subNode.name);
             }
           });
@@ -46,9 +51,14 @@ export const getApplicationNames = (
 };
 
 export const getApplicationValues = (node: ApplicationQuestion[]) => {
-  const applicationNames = getApplicationNames(node);
-  return Array.from(applicationNames).map((name) => ({
-    name,
-    answer: localStorage.get(name, ""),
-  }));
+  const applicationNames = getApplicationNames(node, false);
+  return Array.from(applicationNames)
+    .map((name) => {
+      const value = localStorage.get(name, "");
+      return {
+        name,
+        answer: value ? value : "",
+      };
+    })
+    .filter((item) => item.answer !== "");
 };