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

frontend/app/(WithNavbar)/pass-state/[generation]/page.tsx

@@ -0,0 +1,61 @@
+import Txt from "@/components/common/Txt.component";
+import ApplicantsList from "@/components/passState/ApplicantsList";
+import { CURRENT_GENERATION } from "@/src/constants";
+import Image from "next/image";
+import Link from "next/link";
+
+interface PassStatePageProps {
+  searchParams: {
+    sortedBy?: "field";
+  };
+}
+
+const PassStatePage = ({ searchParams: { sortedBy } }: PassStatePageProps) => {
+  return (
+    <div className="flex-1 ml-32 min-w-[46rem] mb-12">
+      <div className="mt-20" />
+      <Txt typography="h3">
+        {CURRENT_GENERATION}기 지원자 합격 상태 관리 페이지
+      </Txt>
+      <div className="mt-8" />
+      {sortedBy === "field" && (
+        <Link href={`/pass-state/${CURRENT_GENERATION}`}>
+          <Txt typography="h5" className="text-secondary-200">
+            현재 분야별로 정렬되어 있습니다. (WEB - APP - AI - GAME)
+          </Txt>
+          <div className="mt-8" />
+        </Link>
+      )}
+      <div className="grid grid-cols-[8fr_8fr_4fr_3fr] gap-4">
+        <Txt typography="h6" className="text-left text-secondary-100">
+          지원자 이름
+        </Txt>
+        <Link
+          href={`/pass-state/${CURRENT_GENERATION}?${new URLSearchParams(
+            "sortedBy=field"
+          )}`}
+          className="text-start flex justify-between pr-4 items-center"
+        >
+          <Txt typography="h6" className="text-left text-secondary-100">
+            분야
+          </Txt>
+          <Image
+            src={"/icons/chevron-down.svg"}
+            alt="sort by field"
+            width={16}
+            height={16}
+          />
+        </Link>
+        <Txt typography="h6" className="text-left text-secondary-100">
+          합격 상태
+        </Txt>
+      </div>
+      <div className="mt-2" />
+      <hr />
+      <div className="mt-4" />
+      <ApplicantsList sortedBy={sortedBy} />
+    </div>
+  );
+};
+
+export default PassStatePage;

frontend/components/common/Txt.component.tsx

@@ -18,6 +18,7 @@ const colorType = {
   white: "text-white",
   blue: "text-primary",
   light_gray: "text-secondary-200",
+  red: "text-error",
 };
 
 interface TxtProps extends PropsWithChildren {

frontend/components/common/navbar/Navbar.tsx

@@ -6,6 +6,7 @@ import { NavbarOperation } from "./NavbarOperation";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { NavbarGenerationToggle } from "./NavbarGenerationToggle";
+import { NavbarManagePassState } from "./NavbarManagePassState";
 
 const CommonNavbar = () => {
   const [_, currentType, generation] = usePathname().split("/");
@@ -31,7 +32,8 @@ const CommonNavbar = () => {
           />
         ))}
         <NavbarGenerationToggle generation={generation} isShort={isShort} />
-        <NavbarOperation currentType={currentType} />
+        <NavbarManagePassState currentType={currentType} isShort={isShort} />
+        <NavbarOperation currentType={currentType} isShort={isShort} />
       </div>
       <NavbarUserInfo />
     </nav>

frontend/components/common/navbar/NavbarManagePassState.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import CommonNavbarCell from "./NavbarCell";
+import { getMyInfo } from "@/src/apis/interview";
+import { usePathname } from "next/navigation";
+
+type NavbarManagePassStateProps = {
+  isShort: boolean;
+  currentType: string;
+};
+export const NavbarManagePassState = ({
+  currentType,
+  isShort,
+}: NavbarManagePassStateProps) => {
+  const currentPath = usePathname();
+  const generation = currentPath.split("/")[2];
+  const { data: userData, isLoading } = useQuery(["user"], getMyInfo);
+  if (isLoading || !userData) {
+    return <div>Loading...</div>;
+  }
+
+  if (userData.role !== "ROLE_OPERATION") {
+    return <div>관리자만 접근이 가능합니다.</div>;
+  }
+
+  return (
+    <CommonNavbarCell
+      currentType={currentType}
+      isShort={isShort}
+      href={`/pass-state/${generation}`}
+      short_title="합/불 관리"
+      title="합/불 상태 관리"
+      target="_self"
+      type="pass-state"
+    />
+  );
+};

frontend/components/common/navbar/NavbarOperation.tsx

@@ -7,8 +7,12 @@ import { usePathname } from "next/navigation";
 
 type NavbarOperationProps = {
   currentType: string;
+  isShort: boolean;
 };
-export const NavbarOperation = ({ currentType }: NavbarOperationProps) => {
+export const NavbarOperation = ({
+  currentType,
+  isShort,
+}: NavbarOperationProps) => {
   const currentPath = usePathname();
   const generation = currentPath.split("/")[2];
   const { data: userData } = useQuery(["user"], getMyInfo);
@@ -23,7 +27,7 @@ export const NavbarOperation = ({ currentType }: NavbarOperationProps) => {
   return (
     <CommonNavbarCell
       currentType={currentType}
-      isShort={false}
+      isShort={isShort}
       href={`/admin/${generation}`}
       short_title="관리자"
       title="관리자 페이지"

frontend/components/passState/ApplicantsList.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import {
+  getAllApplicantsWithPassState,
+  postApplicantPassState,
+} from "@/src/apis/passState";
+import { CURRENT_GENERATION } from "@/src/constants";
+import { usePathname } from "next/navigation";
+import Txt from "../common/Txt.component";
+import { getApplicantPassState } from "@/src/functions/formatter";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type {
+  PostApplicantPassStateParams,
+  Answer,
+} from "@/src/apis/passState";
+
+function sortApplicantsByField1(applicants: Answer[]) {
+  const passStateOrder = {
+    "final-passed": 0,
+    "first-passed": 1,
+    "non-passed": 2,
+    "non-processed": 3,
+  };
+
+  const field1Order = {
+    WEB: 0,
+    APP: 1,
+    AI: 2,
+    GAME: 3,
+  };
+
+  return applicants.sort((a, b) => {
+    if (
+      passStateOrder[a.state.passState] !== passStateOrder[b.state.passState]
+    ) {
+      return (
+        passStateOrder[a.state.passState] - passStateOrder[b.state.passState]
+      );
+    }
+    return field1Order[a.field1] - field1Order[b.field1];
+  });
+}
+
+interface ApplicantsListProps {
+  sortedBy?: "position" | "field";
+}
+const ApplicantsList = ({ sortedBy }: ApplicantsListProps) => {
+  const selectedGeneration = usePathname().split("/")[2];
+  const queryClient = useQueryClient();
+
+  const {
+    data: allApplicants,
+    isLoading,
+    isError,
+  } = useQuery(["allApplicantsWithPassState", selectedGeneration], () =>
+    getAllApplicantsWithPassState(selectedGeneration)
+  );
+
+  const { mutate: updateApplicantPassState } = useMutation({
+    mutationFn: (params: PostApplicantPassStateParams) =>
+      postApplicantPassState(params),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["allApplicantsWithPassState", selectedGeneration],
+      });
+    },
+  });
+
+  {
+    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: PostApplicantPassStateParams
+  ) => {
+    const ok = confirm(
+      `${applicantName}님을 ${params.afterState} 처리하시겠습니까?`
+    );
+    if (!ok) return;
+    updateApplicantPassState(params);
+  };
+
+  const applicants =
+    sortedBy === "field"
+      ? sortApplicantsByField1(allApplicants)
+      : allApplicants;
+
+  return (
+    <ul className="flex flex-col gap-4">
+      {applicants.map(
+        ({ state: { passState }, field, field1, field2, id, name }) => (
+          <li
+            key={id}
+            className="grid grid-cols-[8fr_8fr_4fr_3fr] gap-4 items-center"
+          >
+            <Txt typography="h6" className="text-left truncate">
+              {`[${field}] ${name}`}
+            </Txt>
+            <Txt
+              className="text-left truncate"
+              color="gray"
+            >{`${field1}/${field2}`}</Txt>
+            <Txt
+              className="text-left truncate"
+              color={
+                passState === "non-passed"
+                  ? "red"
+                  : passState === "final-passed"
+                  ? "blue"
+                  : "black"
+              }
+            >
+              {getApplicantPassState(passState)}
+            </Txt>
+            <div className="flex justify-between">
+              <button
+                className="border px-4 py-2 rounded-lg truncate hover:bg-primary-100"
+                onClick={() =>
+                  onChangeApplicantsPassState(name, {
+                    applicantsId: id,
+                    afterState: "pass",
+                  })
+                }
+              >
+                합격
+              </button>
+              <button
+                className="border px-4 rounded-lg truncate hover:bg-primary-100"
+                onClick={() =>
+                  onChangeApplicantsPassState(name, {
+                    applicantsId: id,
+                    afterState: "non-pass",
+                  })
+                }
+              >
+                불합격
+              </button>
+            </div>
+          </li>
+        )
+      )}
+    </ul>
+  );
+};
+
+export default ApplicantsList;