feat: 지원서 페이지 컴포넌트 추가

#202

frontend/components/applicant/_applicant/ApplicantDetailLeft.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { ApplicantReq } from "@/src/apis/applicant";
+import CustomResource from "./_applicantNode/CustomResource";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  postApplicantPassState,
+  PostApplicantPassStateParams,
+} from "@/src/apis/passState";
+import { applicantDataFinder } from "@/src/functions/finder";
+import { getMyInfo } from "@/src/apis/interview";
+import ApplicantLabel from "../applicantNode/Label.component";
+import ApplicantComment from "../applicantNode/comment/Comment.component";
+
+interface DetailLeftProps {
+  data: ApplicantReq[];
+  generation: string;
+  cardId: number;
+}
+const ApplicantDetailLeft = ({ data, cardId, generation }: DetailLeftProps) => {
+  const queryClient = useQueryClient();
+  const { mutate: updateApplicantPassState } = useMutation({
+    mutationFn: (params: PostApplicantPassStateParams) =>
+      postApplicantPassState(params),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [
+          "allApplicantsWithPassState",
+          applicantDataFinder(data, "generation"),
+        ],
+      });
+    },
+  });
+  const { data: userData } = useQuery(["user"], getMyInfo);
+
+  const postId = applicantDataFinder(data, "id");
+
+  const onClickPass = () => {
+    const ok = confirm("합격 처리하시겠습니까?");
+    if (!ok) return;
+    updateApplicantPassState({
+      applicantId: postId,
+      afterState: "pass",
+    });
+  };
+
+  const onClickNonPass = () => {
+    const ok = confirm("불합격 처리하시겠습니까?");
+    if (!ok) return;
+    updateApplicantPassState({
+      applicantId: postId,
+      afterState: "non-pass",
+    });
+  };
+
+  return (
+    <>
+      <CustomResource
+        data={data}
+        ableToEdit={userData?.role === "ROLE_OPERATION"}
+        onClickPass={onClickPass}
+        onClickNonPass={onClickNonPass}
+      />
+      <ApplicantLabel postId={postId} generation={generation} />
+      <ApplicantComment
+        cardId={cardId}
+        postId={postId}
+        generation={generation}
+      />
+    </>
+  );
+};
+
+export default ApplicantDetailLeft;

frontend/components/applicant/_applicant/_applicantNode/CustomResource.tsx

@@ -0,0 +1,80 @@
+import { applicantDataFinder } from "@/src/functions/finder";
+import Portfolio from "../../applicantNode/Portfolio";
+import { ApplicantReq } from "@/src/apis/applicant";
+import Txt from "@/components/common/Txt.component";
+import { getApplicantPassState } from "@/src/functions/formatter";
+
+interface CustomResourceProps {
+  data: ApplicantReq[];
+  ableToEdit?: boolean;
+  onClickPass?: () => void;
+  onClickNonPass?: () => void;
+}
+
+const CustomResource = ({
+  data,
+  ableToEdit = false,
+  onClickPass,
+  onClickNonPass,
+}: CustomResourceProps) => {
+  return (
+    <>
+      <div className="flex flex-col gap-1 mb-2">
+        <Txt className="text-xl text-secondary-200 font-medium">
+          {applicantDataFinder(data, "major")}
+        </Txt>
+        <div className="flex gap-8 items-center">
+          <Txt typography="h2">{`[${applicantDataFinder(
+            data,
+            "field"
+          )}] ${applicantDataFinder(data, "name")}`}</Txt>
+          <div className="flex justify-between grow items-center">
+            <Txt typography="h5" color="light_gray" className="truncate">
+              {getApplicantPassState(applicantDataFinder(data, "passState")) ||
+                "에러 발생"}
+            </Txt>
+            {ableToEdit && (
+              <div className="flex gap-4">
+                <button
+                  className="border rounded-lg px-4 py-2 truncate hover:bg-primary-100"
+                  onClick={onClickPass}
+                >
+                  합격
+                </button>
+                <button
+                  className="border rounded-lg px-4 py-2 truncate hover:bg-primary-100"
+                  onClick={onClickNonPass}
+                >
+                  불합격
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="flex gap-4 mb-8">
+        <div className="flex gap-1">
+          <Txt typography="h3" color="gray" className="font-normal">
+            1지망:
+          </Txt>
+          <Txt typography="h3" color="blue">
+            {applicantDataFinder(data, "field1")}
+          </Txt>
+        </div>
+        <div className="flex gap-1">
+          <Txt typography="h3" color="gray" className="font-normal">
+            2지망:
+          </Txt>
+          <Txt typography="h3" color="blue">
+            {applicantDataFinder(data, "field2")}
+          </Txt>
+        </div>
+      </div>
+      <div className="flex flex-col gap-4">
+        <Portfolio data={data} />
+      </div>
+    </>
+  );
+};
+
+export default CustomResource;

frontend/src/apis/passState/index.tsx

@@ -23,14 +23,12 @@ export const getAllApplicantsWithPassState = async (generation: string) => {
 };
 
 export interface PostApplicantPassStateParams {
-  applicantsId: string;
+  applicantId: string;
   afterState: "non-pass" | "pass";
 }
 export const postApplicantPassState = async ({
   afterState,
-  applicantsId,
+  applicantId,
 }: PostApplicantPassStateParams) => {
-  await https.post(
-    `/applicants/${applicantsId}/state?afterState=${afterState}`
-  );
+  await https.post(`/applicants/${applicantId}/state?afterState=${afterState}`);
 };