feat: 대회 관리 페이지 추가

package.json

@@ -13,6 +13,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",

src/apis/category.ts

@@ -0,0 +1,22 @@
+import { CategoryDto } from 'types/DTO';
+import apiClient from './apiClient';
+
+export const getAllCategory = async () => {
+  const res = await apiClient.get<CategoryDto[]>('/categories');
+  return res.data;
+};
+
+export const postCategory = async (categoryName: string) => {
+  const res = await apiClient.post('/categories', { categoryName });
+  return res.data;
+};
+
+export const patchCategory = async (categoryId: number, categoryName: string) => {
+  const res = await apiClient.patch(`/categories/${categoryId}`, { categoryName });
+  return res.data;
+};
+
+export const deleteCategory = async (categoryId: number) => {
+  const res = await apiClient.delete(`/categories/${categoryId}`);
+  return res.data;
+};

src/apis/contests.ts

@@ -1,8 +1,12 @@
-import { ContestResponseDto, VoteTermDto } from 'types/DTO';
+import { ContestRequestDto, ContestResponseDto, VoteTermDto } from 'types/DTO';
 import apiClient from './apiClient';
-import { mockContestsResponse } from 'mocks/data/contests';
 import { TeamListItemResponseDto } from 'types/DTO/teams/teamListDto';
 
+export const postContest = async (payload: ContestRequestDto): Promise<ContestResponseDto> => {
+  const res = await apiClient.post('/contests', payload);
+  return res.data;
+};
+
 export const getAllContests = async (): Promise<ContestResponseDto[]> => {
   const res = await apiClient.get('/contests');
   return res.data.map((contest: ContestResponseDto) => ({
@@ -18,12 +22,11 @@ export const postAllContests = async (contestName: string) => {
 
 export const deleteContest = async (contestId: number) => {
   const res = await apiClient.delete(`/contests/${contestId}`);
-  console.log(res);
   return res.data;
 };
 
-export const patchContest = async (contestId: number, contestName: string) => {
-  const res = await apiClient.patch(`/contests/${contestId}`, { contestName });
+export const patchContest = async (contestId: number, payload: ContestRequestDto) => {
+  const res = await apiClient.patch(`/contests/${contestId}`, payload);
   return res.data;
 };
 
@@ -32,11 +35,23 @@ export const getCurrentContestTeams = async (): Promise<TeamListItemResponseDto[
   return res.data;
 };
 
+export const patchChangeOngoingContest = async (contestId: number, isCurrent: boolean) => {
+  const res = await apiClient.patch(`/contests/${contestId}/current`, { isCurrent });
+  return res.data;
+};
+
 export const getContestTeams = async (contestId: number): Promise<TeamListItemResponseDto[]> => {
   const res = await apiClient.get(`/contests/${contestId}/teams`);
   return res.data;
 };
 
+export const postBulkAddTeams = async (contestId: number, formData: FormData) => {
+  const res = await apiClient.post(`/contests/${contestId}/teams/bulk`, formData, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  });
+  return res.data;
+};
+
 export const getVoteTerm = async (contestId: number): Promise<VoteTermDto> => {
   const res = await apiClient.get(`/contests/${contestId}/vote`);
   return res.data;

src/apis/notices.ts

@@ -1,19 +1,14 @@
+import { NoticeDetailDto, NoticeListDto, NoticeRequestDto } from 'types/DTO/noticeDto';
 import apiClient from './apiClient';
-import { NoticeResponseDto } from 'types/DTO/notices/NoticeResponseDto';
-import { NoticeDetailDto } from '../types/DTO/notices/NoticeDetailDto';
-import { NoticeRequestDto } from 'types/DTO/notices/NoticeRequestDto';
 
-export const getNotices = async (): Promise<NoticeResponseDto[]> => {
+export const getNotices = async (): Promise<NoticeListDto[]> => {
   const { data } = await apiClient.get('/notices');
-  return data.map((notice: NoticeResponseDto) => ({
-    ...notice,
-    createdAt: new Date(notice.createdAt),
-  }));
+  return data;
 };
 
 export const getNoticeDetail = async (noticeId: number): Promise<NoticeDetailDto> => {
   const { data } = await apiClient.get(`/notices/${noticeId}`);
-  return { ...data, updatedAt: new Date(data.updatedAt), createdAt: new Date(data.createdAt) };
+  return data;
 };
 
 export const postCreateNotice = async (request: NoticeRequestDto) => {

src/components/Input.tsx

@@ -1,11 +1,15 @@
 import { InputHTMLAttributes } from 'react';
+import { twMerge } from 'tailwind-merge';
 
 interface Props extends InputHTMLAttributes<HTMLInputElement> {}
 
 const Input = ({ className = '', ...props }: Props) => {
   return (
     <input
-      className={`border-lightGray focus:outline-mainGreen w-full rounded-lg border p-3 text-lg focus:outline-2 ${className}`}
+      className={twMerge(
+        `border-lightGray focus:outline-mainGreen w-full rounded-lg border p-3 text-lg focus:outline-2`,
+        className,
+      )}
       {...props}
     />
   );

src/components/ui/admin.tsx

@@ -0,0 +1,83 @@
+import { VscKebabVertical } from 'react-icons/vsc';
+import { LuPencil } from 'react-icons/lu';
+import { FaRegTrashAlt } from 'react-icons/fa';
+import { twMerge } from 'tailwind-merge';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+import { DialogClose, DialogContent, DialogTitle } from './dialog';
+import Button from '@components/Button';
+
+export const AdminCard = ({ children }: React.ComponentProps<'div'>) => {
+  return <div className="border-lightGray flex flex-col gap-0.5 rounded-xl border-2">{children}</div>;
+};
+
+export const AdminCardTop = ({ children }: React.ComponentProps<'div'>) => {
+  return <div className="border-lightGray flex items-center justify-between border-b px-5 py-4">{children}</div>;
+};
+
+export const AdminCardCreateButton = ({ children, ...props }: React.ComponentProps<'button'>) => {
+  return (
+    <button className="text-midGray hover:text-mainBlue rounded-xl px-[15px] py-2.5 font-bold" {...props}>
+      {children}
+    </button>
+  );
+};
+
+export const AdminCardRow = ({ children, className }: React.ComponentProps<'div'>) => {
+  return <div className={twMerge('flex items-center justify-between px-5 py-3', className)}>{children}</div>;
+};
+
+export const AdminPopoverMenu = ({ children, ...props }: React.ComponentProps<'div'>) => {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button className="group rounded-4xl px-2 py-2 hover:bg-blue-100">
+          <VscKebabVertical size={16} className="group-hover:fill-mainBlue fill-midGray" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-fit p-1.5">
+        <div className="flex w-[70px] flex-col gap-1" {...props}>
+          {children}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export const AdminPopoverEditButton = ({ onEdit }: { onEdit: () => void }) => {
+  return (
+    <button className="hover:bg-whiteGray flex items-center gap-2.5 rounded-sm p-1 text-sm" onClick={onEdit}>
+      <LuPencil size={16} className="mt-1" />
+      수정
+    </button>
+  );
+};
+
+export const AdminPopoverDeleteButton = ({ onDelete }: { onDelete: () => void }) => {
+  return (
+    <button
+      className="hover:bg-whiteGray flex items-center gap-2.5 rounded-sm p-1 text-sm text-red-500"
+      onClick={onDelete}
+    >
+      <FaRegTrashAlt size={16} className="mt-1 fill-red-500" />
+      삭제
+    </button>
+  );
+};
+
+export const AdminDeleteConfirmModal = ({ title, onDelete }: { title: string; onDelete: () => void }) => {
+  return (
+    <DialogContent className="gap-6">
+      <DialogTitle className="text-center text-lg font-semibold text-gray-800">{title}</DialogTitle>
+      <div className="flex justify-center gap-4">
+        <DialogClose asChild>
+          <Button className="border-lightGray text-midGray rounded-full border px-4 py-2 hover:bg-gray-100">
+            {'닫기'}
+          </Button>
+        </DialogClose>
+        <Button className="rounded-full bg-red-700 px-4 py-2" onClick={onDelete}>
+          {'삭제'}
+        </Button>
+      </div>
+    </DialogContent>
+  );
+};

src/components/ui/dialog.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { RxCross2 } from 'react-icons/rx';
+
+import { cn } from '@components/lib/utils';
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.DialogTrigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Overlay
+        data-slot="dialog-overlay"
+        className="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/30"
+      />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        aria-describedby={undefined}
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-1/2 left-1/2 z-50 grid w-fit -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-4 border p-7 pt-9 pr-9 shadow-lg duration-200 sm:rounded-lg',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close
+          asChild
+          className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-2 right-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none"
+        >
+          <button>
+            <RxCross2 size={20} />
+            <span className="sr-only">Close</span>
+          </button>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  );
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title data-slot="dialog-title" asChild>
+      <h3 className={cn('"text-center text-gray-800" text-lg font-semibold', className)} {...props} />
+    </DialogPrimitive.Title>
+  );
+}
+
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+export { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogClose };

src/hooks/useContestName.ts

@@ -0,0 +1,12 @@
+import { useParams } from 'react-router-dom';
+import useContests from './useContests';
+
+const useContestName = () => {
+  const { contestId: contestIdParam } = useParams();
+  const { data: contests } = useContests();
+  const contestName = contests?.find((contest) => contest.contestId === Number(contestIdParam))?.contestName;
+
+  return contestName;
+};
+
+export default useContestName;

src/layout/admin/contest/AdminContestLayout.tsx

@@ -9,7 +9,7 @@ const AdminContestLayout = () => {
       <LayoutTopBar />
       <div className="flex">
         <LayoutSideBar />
-        <div className="border-l">
+        <div className="flex-1 border-l">
           <FullContainerLayout />
         </div>
       </div>