Feat/fe createquiz

frontend/src/components/Header.tsx

@@ -58,7 +58,7 @@ export default function Header() {
 
   function logout() {
     axios.get(`${baseURL}/api/auth/logout`).then((res) => {
-      console.log(res);
+      // console.log(res);
       if (res.data.statusCode === 200) {
         localStorage.clear();
         setLogin(false);

frontend/src/components/atoms/buttons/LargeButton.tsx

@@ -2,8 +2,27 @@ import styled from "@emotion/styled";
 
 interface Props {
   label: string;
+  type?: string;
+  onClick: () => void;
 }
 
+const Div = styled.div`
+  .half {
+    width: 47vw;
+  }
+
+  .red {
+    background-color: #ef7474;
+    width: 47vw;
+    &:hover {
+      background-color: #cc6e6e;
+    }
+  }
+
+  .full {
+  }
+`;
+
 const Button = styled.button`
   margin-top: 10px;
   font-family: "DungGeunMo";
@@ -26,5 +45,11 @@ const Button = styled.button`
  * @returns
  */
 export default function LargeButton(props: Props) {
-  return <Button>{props.label}</Button>;
+  return (
+    <Div>
+      <Button onClick={props.onClick} className={props.type}>
+        {props.label}
+      </Button>
+    </Div>
+  );
 }

frontend/src/components/atoms/etc/Multiple.tsx

@@ -1,9 +1,18 @@
 import styled from "@emotion/styled";
 
 interface Props {
-  num: number;
+  num: string;
+  selected: string;
   func: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
+
+const Div = styled.div`
+  .selected {
+    background-color: #d6e7e2;
+    color: #5bb8a1;
+  }
+`;
+
 const Button = styled.button`
   font-family: "Press Start 2P";
   border-radius: 10px;
@@ -14,10 +23,7 @@ const Button = styled.button`
   border: none;
   color: white;
   margin: 5px 10px 5px 0px;
-  &:focus {
-    background-color: #d6e7e2;
-    color: #5bb8a1;
-  }
+
   &:hover {
     cursor: pointer;
     background-color: #25b097;
@@ -31,8 +37,14 @@ const Button = styled.button`
  */
 export default function Multiple(props: Props) {
   return (
-    <Button onClick={props.func} value={props.num}>
-      {props.num}
-    </Button>
+    <Div>
+      <Button
+        className={props.selected === props.num ? "selected" : ""}
+        onClick={props.func}
+        value={props.num}
+      >
+        {props.num}
+      </Button>
+    </Div>
   );
 }

frontend/src/components/atoms/inputs/LargeInput.tsx

@@ -1,4 +1,11 @@
 import styled from "@emotion/styled";
+import { ChangeEvent } from "react";
+
+interface Props {
+  value: string;
+  onChange: any;
+  // onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+}
 
 const Textarea = styled.textarea`
   border-radius: 10px;
@@ -18,6 +25,6 @@ const Textarea = styled.textarea`
   }
 `;
 
-export default function LargeInput() {
-  return <Textarea />;
+export default function LargeInput({ value, onChange }: Props) {
+  return <Textarea value={value} onChange={onChange} />;
 }

frontend/src/components/atoms/inputs/SmallInput.tsx

@@ -1,5 +1,10 @@
 import styled from "@emotion/styled";
+import { ChangeEvent } from "react";
 
+interface Props {
+  value: string;
+  onChange: (event: ChangeEvent<HTMLInputElement>, index?: number) => void;
+}
 const Input = styled.input`
   border-radius: 10px;
   width: 100%;
@@ -18,6 +23,6 @@ const Input = styled.input`
   }
 `;
 
-export default function SmallInput() {
-  return <Input />;
+export default function SmallInput({ value, onChange }: Props) {
+  return <Input value={value} onChange={onChange} />;
 }

frontend/src/components/molecules/CreateQuizCategory.tsx

@@ -1,8 +1,7 @@
-import typeState from "@/recoil/type";
-import categoryState from "@/recoil/category";
 import styled from "@emotion/styled";
 import { useRecoilState } from "recoil";
 import Dropdown from "../atoms/etc/Dropdown";
+import newQuizState from "@/recoil/newquiz";
 
 const Container = styled.div`
   font-family: "DungGeunMo";
@@ -26,9 +25,9 @@ const Text2 = styled.div`
  */
 export default function CreateQuizCategory() {
   const types = [
-    { value: "multiple", name: "객관식" },
-    { value: "short-answer", name: "주관식" },
-    { value: "essay", name: "서술형" },
+    { value: "객관식", name: "객관식" },
+    { value: "주관식", name: "주관식" },
+    { value: "서술형", name: "서술형" },
   ];
   const categories = [
     { value: "네트워크", name: "네트워크" },
@@ -38,14 +37,14 @@ export default function CreateQuizCategory() {
     { value: "앱", name: "앱" },
   ];
 
-  const [type, setType] = useRecoilState(typeState);
+  const [newQuiz, setNewQuiz] = useRecoilState(newQuizState);
+
   const handleType = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setType(e.target.value);
+    setNewQuiz((prev) => ({ ...prev, type: e.target.value }));
   };
 
-  const [category, setCategory] = useRecoilState(categoryState);
   const handleCategory = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setCategory(e.target.value);
+    setNewQuiz((prev) => ({ ...prev, category: e.target.value }));
   };
 
   return (

frontend/src/components/organisms/createquiz/CreateMultiple.tsx

@@ -2,6 +2,7 @@ import Multiple from "@/components/atoms/etc/Multiple";
 import LargeInput from "@/components/atoms/inputs/LargeInput";
 import SmallInput from "@/components/atoms/inputs/SmallInput";
 import multipleAnswerState from "@/recoil/multipleanswer";
+import newQuizState from "@/recoil/newquiz";
 import styled from "@emotion/styled";
 import { useRecoilState } from "recoil";
 
@@ -28,47 +29,89 @@ const Title = styled.div`
  * @returns
  */
 export default function CreateMultiple() {
-  const [answer, setAnswer] = useRecoilState(multipleAnswerState);
+  const [newQuiz, setNewQuiz] = useRecoilState(newQuizState);
+  // console.log("curr: ", newQuiz);
   const handleAnswer = (e: any) => {
-    setAnswer(e.target.value);
+    setNewQuiz((prev) => ({ ...prev, answer: e.target.value }));
+  };
+
+  const handleTitle = (e: any) => {
+    setNewQuiz((prev) => ({ ...prev, title: e.target.value }));
+  };
+
+  const handleQuestion = (e: any) => {
+    setNewQuiz((prev) => ({ ...prev, question: e.target.value }));
+  };
+
+  const handleOption = (v: any, index: number) => {
+    setNewQuiz((prevData) => {
+      return {
+        ...prevData,
+        options: [...prevData.options.slice(0, index), v, ...prevData.options.slice(index + 1)],
+      };
+    });
+  };
+
+  const handleDescription = (e: any) => {
+    setNewQuiz((prev) => ({ ...prev, description: e.target.value }));
   };
 
   return (
     <Container>
       <Row>
         <Title>제목</Title>
-        <SmallInput />
+        <SmallInput value={newQuiz.title} onChange={handleTitle} />
       </Row>
       <Row>
         <Title>문제</Title>
-        <SmallInput />
+        <SmallInput value={newQuiz.question} onChange={handleQuestion} />
       </Row>
       <Row>
         <Title>1</Title>
-        <SmallInput />
+        <SmallInput
+          value={newQuiz.options[0]}
+          onChange={(e) => {
+            handleOption(e.target.value, 0);
+          }}
+        />
       </Row>
       <Row>
         <Title>2</Title>
-        <SmallInput />
+        <SmallInput
+          value={newQuiz.options[1]}
+          onChange={(e) => {
+            handleOption(e.target.value, 1);
+          }}
+        />
       </Row>
       <Row>
         <Title>3</Title>
-        <SmallInput />
+        <SmallInput
+          value={newQuiz.options[2]}
+          onChange={(e) => {
+            handleOption(e.target.value, 2);
+          }}
+        />
       </Row>
       <Row>
         <Title>4</Title>
-        <SmallInput />
+        <SmallInput
+          value={newQuiz.options[3]}
+          onChange={(e) => {
+            handleOption(e.target.value, 3);
+          }}
+        />
       </Row>
       <Row>
         <Title>정답&nbsp;</Title>
-        <Multiple num={1} func={handleAnswer} />
-        <Multiple num={2} func={handleAnswer} />
-        <Multiple num={3} func={handleAnswer} />
-        <Multiple num={4} func={handleAnswer} />
+        <Multiple selected={newQuiz.answer} num={"1"} func={handleAnswer} />
+        <Multiple selected={newQuiz.answer} num={"2"} func={handleAnswer} />
+        <Multiple selected={newQuiz.answer} num={"3"} func={handleAnswer} />
+        <Multiple selected={newQuiz.answer} num={"4"} func={handleAnswer} />
       </Row>
       <Row>
         <Title>해설</Title>
-        <LargeInput />
+        <LargeInput value={newQuiz.description} onChange={handleDescription} />
       </Row>
     </Container>
   );

frontend/src/components/template/auth/SignUpBody.tsx

@@ -102,7 +102,7 @@ export default function SignUpBody() {
       axios
         .post(`${baseURL}/api/auth/signup`, data)
         .then((res) => {
-          console.log(res);
+          // console.log(res);
           if (res.data.statusCode === 201) {
             swal("회원가입이 완료되었습니다", {
               icon: "success",

frontend/src/components/template/common/CreateModal.tsx

@@ -1,6 +1,9 @@
 import styled from "@emotion/styled";
 import router from "next/router";
 import { useEffect } from "react";
+import api from "@/interceptor";
+import newQuizState from "@/recoil/newquiz";
+import { useRecoilState } from "recoil";
 
 // 모달 창 뒷배경
 export const SearchModalBox = styled.div`
@@ -42,7 +45,11 @@ export const SearchModalContent = styled.div`
     font-size: 1.7em;
   }
   > div:nth-of-type(4) {
-    margin-top: 10px;
+    margin-top: 15px;
+    font-size: 1em;
+  }
+  > div:nth-of-type(5) {
+    margin-top: 5px;
     font-size: 1em;
   }
   > div {
@@ -53,7 +60,7 @@ export const SearchModalContent = styled.div`
       border: none;
       width: 180px;
       margin-top: 20px;
-      padding: 0.4rem 0.6rem;
+      padding: 0.2rem 0.6rem;
       font-size: 0.9rem;
       margin-right: 10px;
       border-radius: 5px;
@@ -88,19 +95,29 @@ export default function CreateModal(props: Props) {
     };
   }, []);
 
-  const onSubmit = () => {
-    router.push("/");
-  };
+  const [newQuiz, setNewQuiz] = useRecoilState(newQuizState);
+
+  const baseURL = process.env.NEXT_PUBLIC_API_BASE_URL;
+
+  function onSubmit() {
+    api
+      .post(`${baseURL}/api/problem/pending`, newQuiz)
+      .then((res) => {
+        console.log(res);
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  }
 
   return (
     <SearchModalBox onClick={props.clickModal}>
       <SearchModalContent onClick={(e) => e.stopPropagation()}>
         <div onClick={props.clickModal}>X</div>
         <div>알림!</div>
         <div>제출한 문제는 관리자 승인 이후 등록됩니다.</div>
-        <div>
-          과정 중 수정사항이 발견될 경우, 문제 내용이 변경될 수 있습니다.
-        </div>
+        <div>문제 내용과 카테고리가 정확히 등록되었는지 다시 한 번 확인해주세요.</div>
+        <div>과정 중 수정사항이 발견될 경우, 문제 내용이 변경될 수 있습니다.</div>
         <div>
           <button onClick={onSubmit}>계속하기</button>
           <button onClick={props.clickModal}>취소하기</button>