제출한 문제는 관리자 승인 이후 등록됩니다.
- 문제 내용과 카테고리가 정확히 등록되었는지 다시 한 번 확인해주세요.
+ 과정 중 수정사항이 발견될 경우, 문제 내용이 변경될 수 있습니다.
diff --git a/frontend/src/components/template/createquiz/CreateQuizBody.tsx b/frontend/src/components/template/createquiz/CreateQuizBody.tsx
index fc01baa..2cf7d41 100644
--- a/frontend/src/components/template/createquiz/CreateQuizBody.tsx
+++ b/frontend/src/components/template/createquiz/CreateQuizBody.tsx
@@ -1,14 +1,20 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
import styled from "@emotion/styled";
import CreateQuizCategory from "../../molecules/CreateQuizCategory";
import { useRecoilState } from "recoil";
-import typeState from "../../../recoil/type";
-import categoryState from "@/recoil/category";
+import newQuizState from "@/recoil/newquiz";
import CreateMultiple from "@/components/organisms/createquiz/CreateMultiple";
import CreateShortAnswer from "@/components/organisms/createquiz/CreateShortAnswer";
import CreateEssay from "@/components/organisms/createquiz/CreateEssay";
import LargeButton from "@/components/atoms/buttons/LargeButton";
import CreateModal from "@/components/template/common/CreateModal";
+import api from "@/interceptor";
+import { useRouter } from "next/router";
+import swal from "sweetalert";
+
+interface Props {
+ stat?: String;
+}
const Div = styled.div`
color: white;
@@ -18,32 +24,124 @@ const Div = styled.div`
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
+
+ .row {
+ display: flex;
+ justify-content: space-between;
+ }
`;
/**
* 문제 작성 template: 객관식/주관식/서술형 컴포넌트 구분
* @returns
*/
-export default function CreateQuizBody() {
- const [type, setType] = useRecoilState(typeState);
+export default function CreateQuizBody(props: Props) {
+ const router = useRouter();
+ const baseURL = process.env.NEXT_PUBLIC_API_BASE_URL;
+ const { id } = router.query;
+ const [newQuiz, setNewQuiz] = useRecoilState(newQuizState);
+ const [authorId, setAuthorId] = useState(0);
- // 삭제 모달 관리
+ useEffect(() => {
+ if (props.stat === "update" && id) {
+ api
+ .get(`${baseURL}/api/problem/pending/${id}`)
+ .then((res) => {
+ const problem = res.data.data.problem;
+ setAuthorId(res.data.data.problem.authorId);
+ setNewQuiz((prev) => ({ ...prev, title: problem.title }));
+ setNewQuiz((prev) => ({ ...prev, category: problem.category }));
+ setNewQuiz((prev) => ({ ...prev, answer: problem.answer }));
+ setNewQuiz((prev) => ({ ...prev, description: problem.description }));
+ setNewQuiz((prev) => ({ ...prev, type: problem.type }));
+ setNewQuiz((prev) => ({ ...prev, question: problem.question }));
+ setNewQuiz((prev) => ({ ...prev, options: problem.options }));
+ })
+ .catch(() => {
+ // 없는 문제의 경우 404
+ router.push("/error");
+ });
+ }
+ }, [props.stat, id]);
+
+ // 모달 관리
const [showModal, setShowModal] = useState(false);
- const clickModal = () => setShowModal(!showModal);
+ function clickModal() {
+ // 유효성 검사
+ if (newQuiz.title === "") {
+ alert("제목을 입력하세요.");
+ } else if (newQuiz.question === "") {
+ alert("문제를 입력하세요.");
+ } else if (newQuiz.answer === "") {
+ alert("정답을 입력하세요.");
+ } else if (newQuiz.description === "") {
+ alert("해설을 입력하세요.");
+ } else {
+ setShowModal(!showModal);
+ }
+ }
+
+ // 답안 제출
+ function onSubmit() {}
+
+ function onAccept() {
+ api
+ .post(`${baseURL}/api/problem/pending/authorization`, {
+ pendingProblemId: id,
+ title: newQuiz.title,
+ category: newQuiz.category,
+ type: newQuiz.type,
+ question: newQuiz.question,
+ options: newQuiz.options,
+ answer: newQuiz.answer,
+ description: newQuiz.description,
+ authorId: authorId,
+ })
+ .then(() => {
+ router.push("/admin");
+ })
+ .catch(() => {
+ swal("일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요.", {
+ icon: "error",
+ });
+ });
+ }
+
+ // 문제 반려
+ function onReject() {
+ api
+ .put(`${baseURL}/api/problem/pending/authorization/${id}`)
+ .then((res) => {
+ router.push("/admin");
+ })
+ .catch((e) => {
+ swal("일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요.", {
+ icon: "error",
+ });
+ });
+ }
return (
- {type == "multiple" ? (
+ {newQuiz.type == "객관식" ? (
- ) : type === "short-answer" ? (
+ ) : newQuiz.type === "주관식" ? (
) : (
)}
-
-
-
+
+ {props.stat === "update" ? (
+
+
+
+
+ ) : (
+
+
+
+ )}
{showModal &&
}
diff --git a/frontend/src/pages/admin.tsx b/frontend/src/pages/admin.tsx
new file mode 100644
index 0000000..8e5add4
--- /dev/null
+++ b/frontend/src/pages/admin.tsx
@@ -0,0 +1,22 @@
+import api from "@/interceptor";
+import { useEffect } from "react";
+
+export default function Admin() {
+ const baseURL = process.env.NEXT_PUBLIC_API_BASE_URL;
+
+ useEffect(() => {
+ api
+ .get(`${baseURL}/api/problem/pending`)
+ .then((res) => {
+ console.log(res);
+ })
+ .catch((e) => {
+ console.log(e);
+ });
+ }, []);
+ return (
+ <>
+
admin
+
+ );
+}
diff --git a/frontend/src/pages/pending/[id].tsx b/frontend/src/pages/pending/[id].tsx
new file mode 100644
index 0000000..69fa93a
--- /dev/null
+++ b/frontend/src/pages/pending/[id].tsx
@@ -0,0 +1,11 @@
+import CreateQuizBody from "@/components/template/createquiz/CreateQuizBody";
+import Header from "@/components/Header";
+
+export default function Pending() {
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/frontend/src/recoil/newquiz.ts b/frontend/src/recoil/newquiz.ts
new file mode 100644
index 0000000..9815af3
--- /dev/null
+++ b/frontend/src/recoil/newquiz.ts
@@ -0,0 +1,16 @@
+import { atom } from "recoil";
+
+const newQuizState = atom({
+ key: "newQuizState ",
+ default: {
+ title: "",
+ category: "네트워크",
+ type: "객관식",
+ question: "",
+ options: ["", "", "", ""],
+ answer: "",
+ description: "",
+ },
+});
+
+export default newQuizState;