[FIX] 어드민페이지 오류 수정 / 프로젝트 일괄등록 추가

src/app/(admin)/admin/projects/proposals/[id]/page.tsx

@@ -0,0 +1,11 @@
+import { PageHeader } from "@/components/common/PageHeader";
+import { AdminInquiriesEditForm } from "@/components/pages/AdminInquiriesEditForm/AdminInquiriesEditForm";
+
+export default function AdminInquiriesPage({ params }: { params: { id: string } }) {
+  return (
+    <main>
+      <PageHeader title={"과제 제안 답변"} />
+      <AdminInquiriesEditForm id={params.id} />
+    </main>
+  );
+}

src/app/(admin)/admin/projects/proposals/page.tsx

@@ -1,3 +1,11 @@
+import { PageHeader } from "@/components/common/PageHeader";
+import AdminProposalsListSection from "@/components/pages/AdminProposalsListSection/AdminProposalsListSection";
+
 export default function AdminProposalsPage() {
-  return <main>Hello, world!</main>;
+  return (
+    <main>
+      <PageHeader title={"과제 제안 게시판 관리"} />
+      <AdminProposalsListSection />
+    </main>
+  );
 }

src/components/pages/AdminInquiriesListSection/AdminInquiriesListSection.tsx

@@ -79,6 +79,7 @@ export default function AdminInquiriesListSection() {
       value: event.target.value,
       setQuery,
     });
+    setPageNumber(1);
   };
 
   return (

src/components/pages/AdminNoticeEditForm/AdminNoticeEditForm.module.css

@@ -0,0 +1,7 @@
+.input {
+  width: 100%;
+}
+
+.input-md {
+  width: 50%;
+}

src/components/pages/AdminNoticeEditForm/AdminNoticeEditForm.tsx

@@ -12,6 +12,7 @@ import { isNotEmpty, useForm } from "@mantine/form";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { EventImageSection } from "./EventImageSection";
+import classes from "./AdminNoticeEditForm.module.css";
 
 interface NoticeEditFormInputs {
   title: string;
@@ -109,7 +110,12 @@ export function AdminNoticeEditForm({ noticeId, event }: { noticeId?: number; ev
       <form onSubmit={onSubmit(handleSubmit)}>
         <Stack gap="lg">
           <Row field="제목" fieldSize={150}>
-            <TextInput id="input-title" {...getInputProps("title")} w={"50%"} />
+            <TextInput
+              id="input-title"
+              wrapperClasses={{ root: classes.input }}
+              initialValue={values.title}
+              {...getInputProps("title")}
+            />
           </Row>
           <Row field="내용" fieldSize={150}>
             <Textarea

src/components/pages/AdminNoticeListSection/AdminNoticeListSection.tsx

@@ -73,6 +73,7 @@ export function AdminNoticeListSection({ event }: { event?: boolean }) {
       value: event.target.value,
       setQuery,
     });
+    setPageNumber(1);
   };
 
   /* 삭제 버튼 핸들러 */

src/components/pages/AdminProjectsEditSection/ProjectCreateSection.tsx

@@ -82,11 +82,13 @@ export function ProjectCreateSection({ projectId }: { projectId?: number }) {
   const handleSubmit = async (values: ProjectEditFormInputs) => {
     try {
       const fileIds = { thumbnailId: values.thumbnailId, posterId: values.posterId };
-      // TODO: 파일 업로드 로직 수정
-      const uploadedThumbnail = await uploadFiles([{ id: "0", file: thumbnail }]);
+
+      const uploadedThumbnail = await uploadFiles([
+        { id: String(values.thumbnailId), file: thumbnail },
+      ]);
       fileIds.thumbnailId = Number(uploadedThumbnail[0]);
 
-      const uploadedPoster = await uploadFiles([{ id: "0", file: poster }]);
+      const uploadedPoster = await uploadFiles([{ id: String(values.posterId), file: poster }]);
       fileIds.posterId = Number(uploadedPoster[0]);
 
       const professorsArr = professors?.split(",").map((professor) => ({

src/components/pages/AdminProjectsEditSection/ProjectsExcelCreateSection.tsx

@@ -3,22 +3,104 @@
 import { PrimaryButton } from "@/components/common/Buttons";
 import { Row } from "@/components/common/Row";
 import { Section } from "@/components/common/Section";
+import { CommonAxios } from "@/utils/CommonAxios";
+import { handleDownloadBlob } from "@/utils/handleDownloadFile";
 import { FileInput, Group, Stack, Title } from "@mantine/core";
+import { useState } from "react";
 
 export function ProjectsExcelCreateSection() {
+  const [thumbnailFiles, setThumbnailFiles] = useState<File[] | null>(null);
+  const [posterFiles, setPosterFiles] = useState<File[] | null>(null);
+  const [excelFile, setExcelFile] = useState<File | null>(null);
+
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async () => {
+    const thumbnailFormData = new FormData();
+    const posterFormData = new FormData();
+    const uploadFormData = new FormData();
+
+    if (thumbnailFiles && posterFiles && excelFile) {
+      thumbnailFiles.forEach((file) => {
+        thumbnailFormData.append("files", file);
+      });
+      posterFiles.forEach((file) => {
+        posterFormData.append("files", file);
+      });
+
+      const thumbnailRes = await CommonAxios.post("/files", thumbnailFormData, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      });
+      const thumbnailResBlob = new Blob([JSON.stringify(thumbnailRes.data)], {
+        type: "application/json",
+      });
+
+      const posterRes = await CommonAxios.post("/files", posterFormData, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      });
+      const posterResBlob = new Blob([JSON.stringify(posterRes.data)], {
+        type: "application/json",
+      });
+
+      uploadFormData.append("thumbnails", thumbnailResBlob);
+      uploadFormData.append("posters", posterResBlob);
+      uploadFormData.append("excel", excelFile);
+
+      CommonAxios.post("/projects/excel", uploadFormData, {
+        headers: { "Content-Type": "multipart/form-data" },
+      });
+    } else {
+      setError("파일을 선택해 주세요.");
+    }
+  };
+
+  const handleDownload = async () => {
+    const res = await CommonAxios.get("/files/form/projects", { responseType: "blob" });
+
+    handleDownloadBlob(
+      new Blob([res.data], {
+        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      }),
+      "프로젝트_일괄_업로드_양식.xlsx"
+    );
+  };
+
   return (
     <Section>
       <Title order={2} fz={24} pl={20} mb={24}>
         일괄 등록
       </Title>
       <Stack>
         <Row field="일괄등록 양식" fieldSize={130}>
-          <PrimaryButton>다운로드</PrimaryButton>
+          <PrimaryButton onClick={handleDownload}>다운로드</PrimaryButton>
         </Row>
         <Row field="일괄등록" fieldSize={130}>
           <Group w={"50%"}>
-            <FileInput placeholder={"파일 선택"} w={"50%"} />
-            <PrimaryButton>등록하기</PrimaryButton>
+            <FileInput
+              placeholder={"썸네일 선택"}
+              w={"50%"}
+              multiple
+              onChange={(files) => setThumbnailFiles(files)}
+            />
+            <FileInput
+              placeholder={"포스터 선택"}
+              w={"50%"}
+              multiple
+              onChange={(files) => setPosterFiles(files)}
+            />
+            <FileInput
+              placeholder={"엑셀 파일 선택"}
+              w={"50%"}
+              onChange={(file) => setExcelFile(file)}
+            />
+            <PrimaryButton onClick={handleSubmit}>등록하기</PrimaryButton>
+            {error && (
+              <p style={{ color: "red", marginBlockStart: 0, marginBlockEnd: 0 }}>{error}</p>
+            )}
           </Group>
         </Row>
       </Stack>

src/components/pages/AdminProjectsListSection/AdminProjectsListsSection.tsx

@@ -68,6 +68,7 @@ export function AdminProjectsListSection() {
       value: event.target.value,
       setQuery,
     });
+    setPageNumber(1);
   };
 
   /* 삭제 버튼 핸들러 */

src/components/pages/AdminProposalsListSection/AdminProposalsListSection.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { DangerButton } from "@/components/common/Buttons";
+import { DataTable } from "@/components/common/DataTable";
+import { DataTableData } from "@/components/common/DataTable/elements/DataTableData";
+import { DataTableRow } from "@/components/common/DataTable/elements/DataTableRow";
+import { PROPOSALS_TABLE_HEADERS } from "@/constants/DataTableHeaders";
+import { Button, Checkbox, Group, Stack } from "@mantine/core";
+import { useProposals } from "@/hooks/swr/useProposals";
+import { ChangeEvent, useState } from "react";
+import { useTableSort } from "@/hooks/useTableSort";
+import { PAGE_SIZES } from "@/constants/PageSize";
+import { CommonAxios } from "@/utils/CommonAxios";
+import { SearchInput } from "@/components/common/SearchInput";
+import { handleChangeSearch } from "@/utils/handleChangeSearch";
+import { useDebouncedState } from "@mantine/hooks";
+import { PagedProposalsRequestParams } from "@/types/proposals";
+import { useRouter } from "next/navigation";
+
+export default function AdminProposalListSection() {
+  const { push } = useRouter();
+
+  /* 페이지당 행 개수 */
+  const [pageSize, setPageSize] = useState<string | null>(String(PAGE_SIZES[0]));
+  /* 페이지네이션 페이지 넘버*/
+  const [pageNumber, setPageNumber] = useState(1);
+  /* 데이터 정렬 훅 */
+  const { sortBy, order, handleSortButton } = useTableSort();
+
+  /* 쿼리 debounced state, 검색창에 이용 */
+  const [query, setQuery] = useDebouncedState<PagedProposalsRequestParams>(
+    {
+      page: pageNumber - 1,
+      size: Number(pageSize),
+    },
+    300
+  );
+
+  /* SWR 훅을 사용하여 공지사항 목록 패칭 */
+  // TODO: 백엔드 수정 이후 sort 파라미터 추가
+  const { data, pageData, mutate } = useProposals({
+    params: { ...query, page: pageNumber - 1, size: Number(pageSize) },
+  });
+
+  /* 체크박스 전체선택, 일괄선택 다루는 파트 */
+  const [selectedProposal, setSelectedProposal] = useState<number[]>([]);
+  const allChecked = selectedProposal.length === data?.length;
+  const indeterminate = selectedProposal.length > 0 && !allChecked;
+  // 전체선택 함수
+  const handleSelectAll = () => {
+    if (data) {
+      if (allChecked) {
+        setSelectedProposal([]);
+      } else {
+        setSelectedProposal(data.map((application) => application.id));
+      }
+    }
+  };
+  // 개별선택 함수
+  const handleSelect = (id: number) => {
+    setSelectedProposal((prev) =>
+      prev.includes(id) ? prev.filter((applicationId) => applicationId !== id) : [...prev, id]
+    );
+  };
+
+  /* 삭제 버튼 핸들러 */
+  const handleDelete = () => {
+    // TODO: 삭제 확인하는 모달 추가
+    Promise.all(selectedProposal.map((id) => CommonAxios.delete(`/Proposal/${id}`))).then(() => {
+      setSelectedProposal([]);
+      mutate();
+    });
+  };
+
+  /* 검색창 핸들러 */
+  const onSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
+    handleChangeSearch<string, PagedProposalsRequestParams>({
+      name: "title",
+      value: event.target.value,
+      setQuery,
+    });
+    setPageNumber(1);
+  };
+
+  return (
+    <>
+      <Stack>
+        <Group justify="flex-end">
+          <SearchInput placeholder="제목 입력" w={300} onChange={onSearchChange} />
+        </Group>
+        <Group justify="flex-start">
+          <DangerButton onClick={handleDelete}>선택 삭제</DangerButton>
+        </Group>
+        <DataTable
+          headers={PROPOSALS_TABLE_HEADERS}
+          sortBy={sortBy}
+          order={order}
+          handleSortButton={handleSortButton}
+          totalElements={String(pageData?.totalElements)}
+          pageSize={pageSize}
+          setPageSize={setPageSize}
+          totalPages={pageData?.totalPages}
+          pageNumber={pageNumber}
+          setPageNumber={setPageNumber}
+          withCheckbox
+          checkboxProps={{ checked: allChecked, indeterminate, onChange: handleSelectAll }}
+        >
+          {data?.map((inquiry, index) => (
+            <DataTableRow key={index}>
+              <DataTableData text={false}>
+                <Checkbox
+                  checked={selectedProposal.includes(inquiry.id)}
+                  onChange={() => handleSelect(inquiry.id)}
+                />
+              </DataTableData>
+              <DataTableData>{index + 1 + (pageNumber - 1) * Number(pageSize)}</DataTableData>
+              <DataTableData>{inquiry.title}</DataTableData>
+              <DataTableData>{inquiry.authorName}</DataTableData>
+              <DataTableData>{inquiry.createdAt}</DataTableData>
+              <DataTableData text={false}>
+                <Button
+                  onClick={() => {
+                    push(`Proposal/${inquiry.id}`);
+                  }}
+                >
+                  수정
+                </Button>
+              </DataTableData>
+            </DataTableRow>
+          ))}
+        </DataTable>
+      </Stack>
+    </>
+  );
+}

src/components/pages/GalleryListSection/GalleryListSection.tsx

@@ -73,6 +73,7 @@ export function GalleryListSection() {
       value: event.target.value,
       setQuery,
     });
+    setPageNumber(1);
   };
 
   /* 삭제 버튼 핸들러 */

src/components/pages/InterviewListSection/InterviewListSection.tsx

@@ -72,6 +72,7 @@ export function InterviewListSection() {
       value: event.target.value,
       setQuery,
     });
+    setPageNumber(1);
   };
 
   /* 삭제 버튼 핸들러 */

src/components/pages/JobInterviewListSection/JobInterviewListSection.tsx

@@ -72,6 +72,7 @@ export function JobInterviewListSection() {
       value: event.target.value,
       setQuery,
     });
+    setPageNumber(1);
   };
 
   /* 삭제 버튼 핸들러 */

src/constants/DataTableHeaders.ts

@@ -42,6 +42,7 @@ export const INTERVIEW_TABLE_HEADERS: DataTableHeaderProps[] = [
   { label: "소속", widthPercentage: 20, sort: true, selector: "talkerBelonging" },
   { label: "이름", widthPercentage: 20, sort: true, selector: "talkerName" },
   { label: "작성일", widthPercentage: 10, sort: true, selector: "createdAt" },
+  { label: "관리", widthPercentage: 7, sort: false },
 ];
 
 export const PROJECT_TABLE_HEADERS: DataTableHeaderProps[] = [
@@ -77,3 +78,11 @@ export const INQUIRIES_TABLE_HEADERS: DataTableHeaderProps[] = [
   { label: "작성일", widthPercentage: 7, sort: false },
   { label: "관리", widthPercentage: 7, sort: false },
 ];
+
+export const PROPOSALS_TABLE_HEADERS: DataTableHeaderProps[] = [
+  { label: "순번", widthPercentage: 7, sort: true, selector: "id" },
+  { label: "제목", widthPercentage: 15, sort: true, selector: "title" },
+  { label: "작성자", widthPercentage: 7, sort: false },
+  { label: "작성일", widthPercentage: 7, sort: false },
+  { label: "관리", widthPercentage: 7, sort: false },
+];