feat: 문제 생성 버튼 클릭 시, 모달 구현 (#50)

src/pages/Class/ClassContestProblemList.tsx

@@ -1,10 +1,13 @@
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
+import { useState } from 'react';
 
 import { Button, Heading, Table } from '@/components';
+
 import { useContestProblemListTable, useClassContestListQuery } from './hooks';
+import { ContestProblemCreateModal } from './components';
 
 export function ClassContestProblemList() {
-  const navigate = useNavigate();
+  const [showModal, setShowModal] = useState(false);
   const { classId, contestId } = useParams() as { classId: string; contestId: string };
   const {
     data: { results },
@@ -14,7 +17,7 @@ export function ClassContestProblemList() {
   const tableProps = useContestProblemListTable(classId, contestId);
 
   const handleCreateButtonClick = () => {
-    navigate('create');
+    setShowModal(true);
   };
 
   return (
@@ -24,6 +27,7 @@ export function ClassContestProblemList() {
         <Button onClick={handleCreateButtonClick}>문제 생성</Button>
       </header>
       <Table {...tableProps} />
+      <ContestProblemCreateModal showModal={showModal} setShowModal={setShowModal} />
     </>
   );
 }

src/pages/Class/components/ContestProblemCreateModal.tsx

@@ -0,0 +1,37 @@
+import { useNavigate } from 'react-router-dom';
+
+import { Modal, Button } from '@/components';
+import { StateAndAction } from '@/types/state';
+
+type ContestProblemCreateModal<T extends React.ElementType> = Component<T> &
+  StateAndAction<boolean, 'showModal'>;
+
+export function ContestProblemCreateModal({
+  showModal,
+  setShowModal,
+}: ContestProblemCreateModal<'div'>) {
+  const navigate = useNavigate();
+
+  const handleCreateButtonClick = () => {
+    navigate('create');
+  };
+
+  const handleGetButtonClick = () => {
+    navigate('edit');
+  };
+
+  return (
+    <Modal open={showModal}>
+      <Modal.Header>문제 만들기</Modal.Header>
+      <Modal.Body className="w-[300px] flex flex-col gap-2">
+        <Button onClick={handleCreateButtonClick}>새로운 문제 만들기</Button>
+        <Button onClick={handleGetButtonClick}>기존 문제 가져오기</Button>
+      </Modal.Body>
+      <Modal.Footer className="gap-2">
+        <Button color="error" type="button" onClick={() => setShowModal(false)}>
+          닫기
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}

src/pages/Class/components/index.ts

@@ -3,3 +3,4 @@ export * from './ClassStudentForm';
 export * from './ClassFormModal';
 export * from './ContestFormModal';
 export * from './ContestEditModal';
+export * from './ContestProblemCreateModal';