feat: 합/불 상태관리 페이지 추가

frontend/components/passState/ApplicantsList.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { gridRatio } from "@/app/(WithNavbar)/pass-state/[generation]/page";
+import {
+  useAllApplicantsWithPassState,
+  usePostApplicantPassState,
+} from "@/src/apis/passState";
+import { CURRENT_GENERATION } from "@/src/constants";
+import { cn } from "@/src/utils/cn";
+import { usePathname } from "next/navigation";
+import Txt from "../common/Txt.component";
+import { ApplicantPassState } from "@/src/apis/kanban";
+
+function getApplicantPassState(passState: ApplicantPassState) {
+  switch (passState) {
+    case "non-processed":
+      return "처리중";
+    case "first-passed":
+      return "1차 합격";
+    case "final-passed":
+      return "최종 합격";
+    case "non-passed":
+      return "탈락";
+  }
+}
+
+const ApplicantsList = () => {
+  const selectedGeneration = usePathname().split("/")[2];
+
+  const {
+    data: allApplicants,
+    isLoading,
+    isError,
+  } = useAllApplicantsWithPassState({
+    generation: `${CURRENT_GENERATION}`,
+  });
+  const { mutate: updateApplicantPassState } = usePostApplicantPassState({
+    generation: `${CURRENT_GENERATION}`,
+  });
+
+  if (+selectedGeneration !== CURRENT_GENERATION) {
+    return <div>현재 지원중인 기수만 확인 가능합니다.</div>;
+  }
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  if (isError) {
+    return <div>Error</div>;
+  }
+
+  if (!allApplicants) {
+    return <div>아직은 지원자가 없습니다 🥲</div>;
+  }
+
+  const onChangeapplicantsPassState = (
+    applicantName: string,
+    params: {
+      applicantsId: string;
+      afterState: "pass" | "non-pass";
+    }
+  ) => {
+    const ok = confirm(
+      `${applicantName}님을 ${params.afterState} 처리하시겠습니까?`
+    );
+    if (!ok) return;
+    updateApplicantPassState(params);
+  };
+
+  const { answers: applicants } = allApplicants;
+
+  return (
+    <ul className="flex flex-col gap-8">
+      {applicants.map(
+        ({ state: { passState }, field, field1, field2, id, name }) => (
+          <li key={id} className={cn("grid items-center", gridRatio)}>
+            <Txt typography="h6" className="text-left truncate">
+              {`[${field}] ${name}`}
+            </Txt>
+            <Txt className="text-left truncate">{`${field1}/${field2}`}</Txt>
+            <Txt className="text-left truncate">
+              {getApplicantPassState(passState)}
+            </Txt>
+            <div className="flex justify-between">
+              <button
+                className="border px-4 py-2 rounded-lg"
+                onClick={() =>
+                  onChangeapplicantsPassState(name, {
+                    applicantsId: id,
+                    afterState: "pass",
+                  })
+                }
+              >
+                합격
+              </button>
+              <button
+                className="border px-4 py-2 rounded-lg"
+                onClick={() =>
+                  onChangeapplicantsPassState(name, {
+                    applicantsId: id,
+                    afterState: "non-pass",
+                  })
+                }
+              >
+                불합격
+              </button>
+            </div>
+          </li>
+        )
+      )}
+    </ul>
+  );
+};
+
+export default ApplicantsList;

frontend/src/apis/passState/index.tsx

@@ -0,0 +1,131 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { https } from "../../functions/axios";
+import { ApplicantPassState } from "../kanban";
+
+interface PassInfo {
+  currentPage: number;
+  listCount: number;
+  pageLimit: number;
+  startPage: number;
+  endPage: number;
+  boardLimit: number;
+}
+
+interface Answer {
+  field: "개발자" | "디자이너" | "기획자";
+  field1: "APP" | "WEB" | "AI" | "GAME";
+  field2: "APP" | "WEB" | "AI" | "GAME";
+  name: string;
+  id: string;
+  year: number;
+  state: {
+    passState: ApplicantPassState;
+  };
+}
+
+interface AllApplicantReq {
+  pageInfo: PassInfo;
+  answers: Answer[];
+}
+
+const _mock: AllApplicantReq = {
+  pageInfo: {
+    currentPage: 1,
+    listCount: 1,
+    pageLimit: 1,
+    startPage: 1,
+    endPage: 1,
+    boardLimit: 1,
+  },
+  answers: [
+    {
+      field: "개발자",
+      field1: "APP",
+      field2: "APP",
+      name: "김개발",
+      id: "1",
+      year: 28,
+      state: {
+        passState: "final-passed",
+      },
+    },
+    {
+      field: "개발자",
+      field1: "APP",
+      field2: "APP",
+      name: "김개발",
+      id: "1",
+      year: 28,
+      state: {
+        passState: "non-passed",
+      },
+    },
+  ],
+};
+
+const getAllApplicantsPath = (generation: string) =>
+  `/page/1/year/${generation}/pass-states?order=state`;
+
+const getApplicantByIdWithField = ({
+  applicantsId,
+  afterState,
+}: {
+  applicantsId: string;
+  afterState: "non-pass" | "pass";
+}) => `/applicants/${applicantsId}/state?afterState=${afterState}`;
+
+const getAllApplicantsWithPassState = async (generation: string) => {
+  // const { data } = await https.get<AllApplicantReq>(
+  //   getAllApplicantsPath(generation)
+  // );
+
+  const data = _mock;
+
+  return data;
+};
+
+const postApplicantPassState = async ({
+  afterState,
+  applicantsId,
+}: {
+  applicantsId: string;
+  afterState: "non-pass" | "pass";
+}) => {
+  await https.post(getApplicantByIdWithField({ applicantsId, afterState }));
+};
+
+interface useAllApplicantsWithPassStateParams {
+  generation: string;
+}
+export const useAllApplicantsWithPassState = ({
+  generation,
+}: useAllApplicantsWithPassStateParams) => {
+  return useQuery(
+    [getAllApplicantsPath(generation)],
+    () => getAllApplicantsWithPassState(generation),
+    {
+      enabled: !!generation,
+    }
+  );
+};
+
+interface usePostApplicantPassStateParams {
+  applicantsId: string;
+  afterState: "non-pass" | "pass";
+}
+export const usePostApplicantPassState = ({
+  generation,
+}: {
+  generation: string;
+}) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (params: usePostApplicantPassStateParams) =>
+      postApplicantPassState(params),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [getAllApplicantsPath(generation)],
+      });
+    },
+  });
+};