From ca2f53aca7fbb1bccd5fd0f3025e8a35d3eb5b9b Mon Sep 17 00:00:00 2001
From: hynseok <wefwef12e@naver.com>
Date: Wed, 20 Nov 2024 15:57:12 +0900
Subject: [PATCH 1/5] =?UTF-8?q?fix:=20=EA=B3=B5=EC=A7=80=EC=82=AC=ED=95=AD?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95=20input=EC=82=AC=EC=9D=B4=EC=A6=88=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AdminNoticeEditForm/AdminNoticeEditForm.module.css    | 7 +++++++
 .../pages/AdminNoticeEditForm/AdminNoticeEditForm.tsx     | 8 +++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 src/components/pages/AdminNoticeEditForm/AdminNoticeEditForm.module.css

diff --git a/src/components/pages/AdminNoticeEditForm/AdminNoticeEditForm.module.css b/src/components/pages/AdminNoticeEditForm/AdminNoticeEditForm.module.css
new file mode 100644
index 0000000..72265ad
--- /dev/null
+++ b/src/components/pages/AdminNoticeEditForm/AdminNoticeEditForm.module.css
@@ -0,0 +1,7 @@
+.input {
+  width: 100%;
+}
+
+.input-md {
+  width: 50%;
+}
diff --git a/src/components/pages/AdminNoticeEditForm/AdminNoticeEditForm.tsx b/src/components/pages/AdminNoticeEditForm/AdminNoticeEditForm.tsx
index 359a577..46cc061 100644
--- a/src/components/pages/AdminNoticeEditForm/AdminNoticeEditForm.tsx
+++ b/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

From b5985f6bbd213009fced322d8d2a26bc6232d00e Mon Sep 17 00:00:00 2001
From: hynseok <wefwef12e@naver.com>
Date: Wed, 20 Nov 2024 15:57:59 +0900
Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=EA=B2=80=EC=83=89=EC=8B=9C=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=201=EB=A1=9C=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AdminInquiriesListSection/AdminInquiriesListSection.tsx      | 1 +
 .../pages/AdminNoticeListSection/AdminNoticeListSection.tsx      | 1 +
 .../pages/AdminProjectsListSection/AdminProjectsListsSection.tsx | 1 +
 src/components/pages/GalleryListSection/GalleryListSection.tsx   | 1 +
 .../pages/InterviewListSection/InterviewListSection.tsx          | 1 +
 .../pages/JobInterviewListSection/JobInterviewListSection.tsx    | 1 +
 6 files changed, 6 insertions(+)

diff --git a/src/components/pages/AdminInquiriesListSection/AdminInquiriesListSection.tsx b/src/components/pages/AdminInquiriesListSection/AdminInquiriesListSection.tsx
index f1d25c9..be4552d 100644
--- a/src/components/pages/AdminInquiriesListSection/AdminInquiriesListSection.tsx
+++ b/src/components/pages/AdminInquiriesListSection/AdminInquiriesListSection.tsx
@@ -79,6 +79,7 @@ export default function AdminInquiriesListSection() {
       value: event.target.value,
       setQuery,
     });
+    setPageNumber(1);
   };
 
   return (
diff --git a/src/components/pages/AdminNoticeListSection/AdminNoticeListSection.tsx b/src/components/pages/AdminNoticeListSection/AdminNoticeListSection.tsx
index d2e07be..1f9b129 100644
--- a/src/components/pages/AdminNoticeListSection/AdminNoticeListSection.tsx
+++ b/src/components/pages/AdminNoticeListSection/AdminNoticeListSection.tsx
@@ -73,6 +73,7 @@ export function AdminNoticeListSection({ event }: { event?: boolean }) {
       value: event.target.value,
       setQuery,
     });
+    setPageNumber(1);
   };
 
   /* 삭제 버튼 핸들러 */
diff --git a/src/components/pages/AdminProjectsListSection/AdminProjectsListsSection.tsx b/src/components/pages/AdminProjectsListSection/AdminProjectsListsSection.tsx
index 644b27d..a809c35 100644
--- a/src/components/pages/AdminProjectsListSection/AdminProjectsListsSection.tsx
+++ b/src/components/pages/AdminProjectsListSection/AdminProjectsListsSection.tsx
@@ -68,6 +68,7 @@ export function AdminProjectsListSection() {
       value: event.target.value,
       setQuery,
     });
+    setPageNumber(1);
   };
 
   /* 삭제 버튼 핸들러 */
diff --git a/src/components/pages/GalleryListSection/GalleryListSection.tsx b/src/components/pages/GalleryListSection/GalleryListSection.tsx
index 273e75e..a2ed02b 100644
--- a/src/components/pages/GalleryListSection/GalleryListSection.tsx
+++ b/src/components/pages/GalleryListSection/GalleryListSection.tsx
@@ -73,6 +73,7 @@ export function GalleryListSection() {
       value: event.target.value,
       setQuery,
     });
+    setPageNumber(1);
   };
 
   /* 삭제 버튼 핸들러 */
diff --git a/src/components/pages/InterviewListSection/InterviewListSection.tsx b/src/components/pages/InterviewListSection/InterviewListSection.tsx
index cfecf22..9a9318c 100644
--- a/src/components/pages/InterviewListSection/InterviewListSection.tsx
+++ b/src/components/pages/InterviewListSection/InterviewListSection.tsx
@@ -72,6 +72,7 @@ export function InterviewListSection() {
       value: event.target.value,
       setQuery,
     });
+    setPageNumber(1);
   };
 
   /* 삭제 버튼 핸들러 */
diff --git a/src/components/pages/JobInterviewListSection/JobInterviewListSection.tsx b/src/components/pages/JobInterviewListSection/JobInterviewListSection.tsx
index c4a78d0..1ae4ed5 100644
--- a/src/components/pages/JobInterviewListSection/JobInterviewListSection.tsx
+++ b/src/components/pages/JobInterviewListSection/JobInterviewListSection.tsx
@@ -72,6 +72,7 @@ export function JobInterviewListSection() {
       value: event.target.value,
       setQuery,
     });
+    setPageNumber(1);
   };
 
   /* 삭제 버튼 핸들러 */

From dfb8ab86c11145008be51d403294431e3c8039cd Mon Sep 17 00:00:00 2001
From: hynseok <wefwef12e@naver.com>
Date: Wed, 20 Nov 2024 15:58:33 +0900
Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=ED=8C=8C=EC=9D=BC=20=EC=97=85?=
 =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ProjectCreateSection.tsx                  |  8 ++++---
 src/hooks/useFiles/useFiles.ts                | 22 ++++++++++---------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/pages/AdminProjectsEditSection/ProjectCreateSection.tsx b/src/components/pages/AdminProjectsEditSection/ProjectCreateSection.tsx
index 3f3c831..7b5e8ba 100644
--- a/src/components/pages/AdminProjectsEditSection/ProjectCreateSection.tsx
+++ b/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) => ({
diff --git a/src/hooks/useFiles/useFiles.ts b/src/hooks/useFiles/useFiles.ts
index 7d554cf..49635d7 100644
--- a/src/hooks/useFiles/useFiles.ts
+++ b/src/hooks/useFiles/useFiles.ts
@@ -45,22 +45,24 @@ export function useFiles() {
         if (file.size == 0) {
           fileIds.push(id);
           continue;
+        } else {
+          filesToUpload.append("files", file);
         }
-
-        filesToUpload.append("files", file);
       }
     }
 
     try {
-      const response = await CommonAxios.post("/files", filesToUpload, {
-        headers: {
-          "Content-Type": "multipart/form-data",
-        },
-      });
+      if (filesToUpload.get("files") !== null) {
+        const response = await CommonAxios.post("/files", filesToUpload, {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+        });
 
-      response.data.forEach((file: ApiFile) => {
-        fileIds.push(String(file.id));
-      });
+        response.data.forEach((file: ApiFile) => {
+          fileIds.push(String(file.id));
+        });
+      }
     } catch (error) {
       console.error(`파일 업로드에 실패했습니다.`, error);
     }

From 3ea41cf059e3b09008a0c8c64506978c0582ea20 Mon Sep 17 00:00:00 2001
From: hynseok <wefwef12e@naver.com>
Date: Wed, 20 Nov 2024 15:58:54 +0900
Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=EA=B3=BC=EC=A0=9C=20=EC=A0=9C?=
 =?UTF-8?q?=EC=95=88=20=EB=8D=B0=EB=AA=A8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/projects/proposals/[id]/page.tsx    |  11 ++
 .../(admin)/admin/projects/proposals/page.tsx |  10 +-
 .../AdminProposalsListSection.tsx             | 135 ++++++++++++++++++
 src/constants/DataTableHeaders.ts             |   9 ++
 src/hooks/swr/useProposals.tsx                |  27 ++++
 src/types/proposals.ts                        |  19 +++
 6 files changed, 210 insertions(+), 1 deletion(-)
 create mode 100644 src/app/(admin)/admin/projects/proposals/[id]/page.tsx
 create mode 100644 src/components/pages/AdminProposalsListSection/AdminProposalsListSection.tsx
 create mode 100644 src/hooks/swr/useProposals.tsx
 create mode 100644 src/types/proposals.ts

diff --git a/src/app/(admin)/admin/projects/proposals/[id]/page.tsx b/src/app/(admin)/admin/projects/proposals/[id]/page.tsx
new file mode 100644
index 0000000..de2f4fc
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/app/(admin)/admin/projects/proposals/page.tsx b/src/app/(admin)/admin/projects/proposals/page.tsx
index 6079586..a9617a2 100644
--- a/src/app/(admin)/admin/projects/proposals/page.tsx
+++ b/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>
+  );
 }
diff --git a/src/components/pages/AdminProposalsListSection/AdminProposalsListSection.tsx b/src/components/pages/AdminProposalsListSection/AdminProposalsListSection.tsx
new file mode 100644
index 0000000..da70098
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/src/constants/DataTableHeaders.ts b/src/constants/DataTableHeaders.ts
index 9373180..5668937 100644
--- a/src/constants/DataTableHeaders.ts
+++ b/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 },
+];
diff --git a/src/hooks/swr/useProposals.tsx b/src/hooks/swr/useProposals.tsx
new file mode 100644
index 0000000..18600dd
--- /dev/null
+++ b/src/hooks/swr/useProposals.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { PagedProposalsRequestParams, PagedProposalsResponse } from "@/types/proposals";
+import useSWR from "swr";
+
+export function useProposals({ params }: { params: PagedProposalsRequestParams }) {
+  const result = useSWR<PagedProposalsResponse>({ url: "/proposals", query: params });
+
+  return {
+    data: result.data?.content,
+    pageData: result.data && {
+      pageSize: result.data.size,
+      pageNumber: result.data.number,
+      totalElements: result.data.totalElements,
+      totalPages: result.data.totalPages,
+    },
+    get isLoading() {
+      return result.isLoading;
+    },
+    get error() {
+      return result.error;
+    },
+    get mutate() {
+      return result.mutate;
+    },
+  };
+}
diff --git a/src/types/proposals.ts b/src/types/proposals.ts
new file mode 100644
index 0000000..0bba08f
--- /dev/null
+++ b/src/types/proposals.ts
@@ -0,0 +1,19 @@
+import { PagedApiRequestParams, PagedApiResponse } from "./common";
+
+export interface PagedProposalsRequestParams extends PagedApiRequestParams {
+  title?: string;
+  sort?: string;
+}
+
+export interface Proposal {
+  id: number;
+  authorName: string;
+  projectId: number;
+  projectName: string;
+  title: string;
+  content: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface PagedProposalsResponse extends PagedApiResponse<Proposal> {}

From ad336d6cf81e92dcd4d95b8d7cda2aacbf129e74 Mon Sep 17 00:00:00 2001
From: hynseok <wefwef12e@naver.com>
Date: Wed, 20 Nov 2024 17:35:20 +0900
Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=EC=9D=BC=EA=B4=84=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ProjectsExcelCreateSection.tsx            | 88 ++++++++++++++++++-
 .../handleDownloadFile/handleDownloadFile.ts  | 11 +++
 src/utils/handleDownloadFile/index.ts         |  1 +
 3 files changed, 97 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/AdminProjectsEditSection/ProjectsExcelCreateSection.tsx b/src/components/pages/AdminProjectsEditSection/ProjectsExcelCreateSection.tsx
index a162376..5ba0fd2 100644
--- a/src/components/pages/AdminProjectsEditSection/ProjectsExcelCreateSection.tsx
+++ b/src/components/pages/AdminProjectsEditSection/ProjectsExcelCreateSection.tsx
@@ -3,9 +3,72 @@
 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}>
@@ -13,12 +76,31 @@ export function ProjectsExcelCreateSection() {
       </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>
diff --git a/src/utils/handleDownloadFile/handleDownloadFile.ts b/src/utils/handleDownloadFile/handleDownloadFile.ts
index f2ffaea..8f9a879 100644
--- a/src/utils/handleDownloadFile/handleDownloadFile.ts
+++ b/src/utils/handleDownloadFile/handleDownloadFile.ts
@@ -30,3 +30,14 @@ export async function getFileUrlById(fileId: number) {
 
   return url;
 }
+
+export async function handleDownloadBlob(obj: Blob, fileName: string) {
+  const url = window.URL.createObjectURL(obj);
+  const link = document.createElement("a");
+  link.href = url;
+  link.setAttribute("download", fileName);
+  link.style.visibility = "hidden";
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
diff --git a/src/utils/handleDownloadFile/index.ts b/src/utils/handleDownloadFile/index.ts
index fe2d2c5..395dc48 100644
--- a/src/utils/handleDownloadFile/index.ts
+++ b/src/utils/handleDownloadFile/index.ts
@@ -1,3 +1,4 @@
 export { handleDownloadFile } from "./handleDownloadFile";
 export { handleDownloadClick } from "./handleDownloadClick";
+export { handleDownloadBlob } from "./handleDownloadFile";
 export { getFileUrlById } from "./handleDownloadFile";