diff --git a/frontend/app/applicant/pdf-viewer/page.tsx b/frontend/app/applicant/pdf-viewer/page.tsx index cc55f18e..844151b6 100644 --- 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/frontend/components/applicant/PdfViewer.component.tsx b/frontend/components/applicant/PdfViewer.tsx similarity index 90% rename from frontend/components/applicant/PdfViewer.component.tsx rename to frontend/components/applicant/PdfViewer.tsx index f4350221..9d517c97 100644 --- a/frontend/components/applicant/PdfViewer.component.tsx +++ b/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 index ae20ad83..d6ff1ccb 100644 --- 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 new file mode 100644 index 00000000..10b4660c --- /dev/null +++ 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 index 513b9d2f..34358580 100644 --- 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/frontend/components/application/applicationNode/Radio.component.tsx b/frontend/components/application/applicationNode/Radio.tsx similarity index 94% rename from frontend/components/application/applicationNode/Radio.component.tsx rename to frontend/components/application/applicationNode/Radio.tsx index 8845ad10..32687e8a 100644 --- a/frontend/components/application/applicationNode/Radio.component.tsx +++ b/frontend/components/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 index c6ab1992..5d820d66 100644 --- 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 index b90c1099..a1282393 100644 --- 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 index d71f5314..aae58a1c 100644 --- 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 index 4fec02b2..03055f9e 100644 --- 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,7 +26,7 @@ export const getApplicationNames = ( case "radioForCheck": case "text": case "textarea": - if (element.require) { + if (!requirement || element.require) { applicationNameSet.add(element.name); } break; @@ -29,7 +34,7 @@ export const getApplicationNames = ( 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 !== ""); };