feat: 가입 승인 페이지 추가

src/app/(user)/page.tsx

@@ -1,3 +1,26 @@
+"use client";
+
+import { CommonAxios } from "@/utils/CommonAxios";
+import { Button } from "@mantine/core";
+
 export default function Home() {
-  return <main>Hello, world!</main>;
+  const body = {
+    name: "stop-user",
+    phoneNumber: "010-1234-1234",
+    userType: "INACTIVE_PROFESSOR",
+    email: "[email protected]",
+    signUpSource: "ad",
+    division: null,
+    position: null,
+  };
+
+  return (
+    <main>
+      <Button
+        onClick={() => {
+          CommonAxios.post("/auth/register", body);
+        }}
+      />
+    </main>
+  );
 }

src/components/common/Row/Row.tsx

@@ -1,17 +1,19 @@
-import { Box, BoxProps, Group, Text } from "@mantine/core";
+import { Box, BoxProps, Group, StyleProp, Text } from "@mantine/core";
 import classes from "./Row.module.css";
 
 export interface RowProps extends BoxProps {
   field?: string; // 필드 이름
   children: React.ReactNode;
   fieldSize?: "sm" | "md" | "lg" | "xl" | number; // 필드 부분이 차지하는 길이
+  fieldWeight?: StyleProp<React.CSSProperties["fontWeight"]>;
   flexStart?: boolean;
 }
 
 export function Row({
   field = "",
   fieldSize = "md",
   children,
+  fieldWeight,
   flexStart = false,
   ...props
 }: RowProps) {
@@ -32,6 +34,7 @@ export function Row({
                       : fieldSize,
           }}
           fz={16}
+          fw={fieldWeight}
         >
           {field}
         </Text>

src/components/pages/AdminApplicationListSection/AdminApplicationListSection.tsx

@@ -5,17 +5,17 @@ import { DataTable } from "@/components/common/DataTable";
 import { DataTableData } from "@/components/common/DataTable/elements/DataTableData";
 import { DataTableRow } from "@/components/common/DataTable/elements/DataTableRow";
 import { APPLICATION_TABLE_HEADERS } from "@/constants/DataTableHeaders";
+import { USER_TYPE_LOOKUP_TABLE } from "@/constants/LookupTables";
 import { PAGE_SIZES, REFRESH_DEFAULT_PAGE_NUMBER } from "@/constants/PageSize";
 import { useApplications } from "@/hooks/swr/useApplications";
 import { useTableSort } from "@/hooks/useTableSort";
 import { CommonAxios } from "@/utils/CommonAxios";
-import { Button, Checkbox, Group, Stack } from "@mantine/core";
-import { useRouter } from "next/navigation";
+import { Checkbox, Group, Stack } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
 import { useEffect, useState } from "react";
+import { ApplicationConfirmModal } from "./ApplicationConfirmModal";
 
 export function AdminApplicationListSection() {
-  /* next 라우터, 페이지 이동에 이용 */
-  const { push } = useRouter();
   /* 페이지당 행 개수 */
   const [pageSize, setPageSize] = useState<string | null>(String(PAGE_SIZES[0]));
   /* 페이지네이션 페이지 넘버*/
@@ -24,9 +24,8 @@ export function AdminApplicationListSection() {
   const { sortBy, order, handleSortButton } = useTableSort();
 
   /* SWR 훅을 사용하여 공지사항 목록 패칭 */
-  // TODO: 백엔드 수정 이후 sort 파라미터 추가
   const { data, pageData, mutate } = useApplications({
-    params: { page: pageNumber - 1, size: Number(pageSize) },
+    params: { page: pageNumber - 1, size: Number(pageSize), sort: sortBy + "," + order },
   });
 
   /* 체크박스 전체선택, 일괄선택 다루는 파트 */
@@ -61,22 +60,30 @@ export function AdminApplicationListSection() {
     );
   };
 
+  /* 전체 승인 버튼 핸들러 */
+  const handleConfirm = () => {
+    // TODO: 삭제 확인하는 모달 추가
+    Promise.all(selectedApplications.map((id) => CommonAxios.patch(`/applications/${id}`))).then(
+      () => {
+        setSelectedApplications([]);
+        mutate();
+      }
+    );
+  };
+
+  /* 가입 승인 모달 hook */
+  const [opened, { open, close }] = useDisclosure();
+
   useEffect(() => {
     setPageNumber(REFRESH_DEFAULT_PAGE_NUMBER);
   }, [data, pageSize]);
 
   return (
     <>
       <Stack>
-        <Group justify="space-between">
+        <Group justify="flex-start">
           <DangerButton onClick={handleDelete}>선택 삭제</DangerButton>
-          <PrimaryButton
-            onClick={() => {
-              push("notices/create");
-            }}
-          >
-            게시글 등록
-          </PrimaryButton>
+          <PrimaryButton onClick={handleConfirm}>선택 승인</PrimaryButton>
         </Group>
         <DataTable
           headers={APPLICATION_TABLE_HEADERS}
@@ -104,11 +111,17 @@ export function AdminApplicationListSection() {
               <DataTableData>{application.name}</DataTableData>
               <DataTableData>{application.division}</DataTableData>
               <DataTableData>{application.position}</DataTableData>
-              <DataTableData>{application.userType}</DataTableData>
+              <DataTableData>{USER_TYPE_LOOKUP_TABLE[application.userType]}</DataTableData>
               <DataTableData>{application.createdAt}</DataTableData>
               <DataTableData text={false}>
-                <Button>수정</Button>
+                <PrimaryButton onClick={open}>승인</PrimaryButton>
               </DataTableData>
+              <ApplicationConfirmModal
+                applicationId={application.id}
+                opened={opened}
+                onClose={close}
+                mutate={mutate}
+              />
             </DataTableRow>
           ))}
         </DataTable>

src/components/pages/AdminApplicationListSection/ApplicationConfirmModal.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { PrimaryButton } from "@/components/common/Buttons";
+import { Row } from "@/components/common/Row";
+import { DetailedApplication, PagedApplicationsResponse } from "@/types/application";
+import { CommonAxios } from "@/utils/CommonAxios";
+import { Modal, ModalProps, Stack, Text } from "@mantine/core";
+import { useEffect, useState } from "react";
+import { KeyedMutator } from "swr";
+
+interface ApplicationConfirmModalProps extends ModalProps {
+  applicationId: number;
+  mutate: KeyedMutator<PagedApplicationsResponse>;
+}
+
+export function ApplicationConfirmModal({
+  applicationId,
+  mutate,
+  ...props
+}: ApplicationConfirmModalProps) {
+  const [application, setApplication] = useState<DetailedApplication | null>(null);
+
+  // 가입 승인
+  const handleConfirm = async () => {
+    try {
+      await CommonAxios.patch(`/applications/${applicationId}`);
+      mutate();
+      close();
+    } catch (error) {
+      // TODO: 에러 처리
+      console.error(error);
+    }
+  };
+
+  // 가입 신청 정보 가져오기
+  useEffect(() => {
+    const fetchApplication = async () => {
+      const { data } = await CommonAxios.get<DetailedApplication>(`/applications/${applicationId}`);
+      setApplication(data);
+    };
+
+    fetchApplication();
+  }, [applicationId]);
+
+  return (
+    <Modal radius={"md"} {...props}>
+      <Stack gap={"xl"} align="center">
+        <Text fz={20} fw={600}>
+          가입 승인
+        </Text>
+        <Stack gap={"xl"} align="flex-start" justify="center" mb={20}>
+          <Row field="이름" fieldWeight={600} pl={10}>
+            {application?.name}
+          </Row>
+          <Row field="전화번호" fieldWeight={600} pl={10}>
+            {application?.phone}
+          </Row>
+          <Row field="이메일" fieldWeight={600} pl={10}>
+            {application?.email}
+          </Row>
+          <Row field="소속" fieldWeight={600} pl={10}>
+            {application?.division}
+          </Row>
+          <Row field="직책" fieldWeight={600} pl={10}>
+            {application?.position}
+          </Row>
+        </Stack>
+        <PrimaryButton w={"100%"} onClick={handleConfirm}>
+          승인
+        </PrimaryButton>
+      </Stack>
+    </Modal>
+  );
+}

src/constants/LookupTables.ts

@@ -0,0 +1,12 @@
+import { Role } from "@/types/user";
+
+export const USER_TYPE_LOOKUP_TABLE: Record<Role, string> = {
+  STUDENT: "학생",
+  PROFESSOR: "교수",
+  COMPANY: "기업관계자",
+  ADMIN: "관리자",
+  INACTIVE_PROFESSOR: "미승인 교수",
+  INACTIVE_COMPANY: "미승인 기업관계자",
+  OTHERS: "기타",
+  TEMP: "임시",
+};