diff --git a/src/Components/Contents.js b/src/Components/Contents.js index b7537b4..4fe1bb1 100644 --- a/src/Components/Contents.js +++ b/src/Components/Contents.js @@ -1,8 +1,8 @@ import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; -import Introduction from "./Tabs/Introduction/Introduction"; -import ErrorReport from "./Tabs/ErrorReport/ErrorReport"; -import SolutionReport from "./Tabs/SolutionReport/SolutionReport"; +import Introduction from "./Tabs/Introduction"; +import ErrorReport from "./Tabs/ErrorReport"; +import SolutionReport from "./Tabs/SolutionReport"; export default function TabNavigation() { return ( diff --git a/src/Components/Tabs/ErrorReport.js b/src/Components/Tabs/ErrorReport.js new file mode 100644 index 0000000..10d9d9a --- /dev/null +++ b/src/Components/Tabs/ErrorReport.js @@ -0,0 +1,91 @@ +import { useState } from "react"; + +export default function ErrorReport() { + const [submitted, setSubmitted] = useState(false); + const [errorCategory, setErrorCategory] = useState(-1); + const [questionName, setQuestionName] = useState(""); + const [detailInput, setDetailInput] = useState(""); + + return submitted ? ( +
+

제보해주셔서 감사합니다.

+ +
+ ) : ( +
+
+ 오류 유형: + setErrorCategory(0)} + /> + + setErrorCategory(1)} + /> + + setErrorCategory(2)} + /> + +
+ + {errorCategory === -1 || errorCategory === 1 ? null : ( +
+ 문제 이름: + setQuestionName(e.target.value)} + defaultValue={questionName} + /> + + +
+ )} + + {errorCategory === -1 || (errorCategory === 0 && questionName === "") ? null : ( + <> +
+ 내용: + +
+
+ +
+ + )} +
+ ); +} diff --git a/src/Components/Tabs/ErrorReport/ErrorReport.js b/src/Components/Tabs/ErrorReport/ErrorReport.js deleted file mode 100644 index 79f87ca..0000000 --- a/src/Components/Tabs/ErrorReport/ErrorReport.js +++ /dev/null @@ -1,34 +0,0 @@ -export default function ErrorReport() { - return ( -
-

ErrorReportTab

-
- 오류 유형: - - - - - - - - -
-
- 문제 이름: - - - -
-
- 내용: - -
-
- -
-
- ); -} diff --git a/src/Components/Tabs/Introduction/Introduction.js b/src/Components/Tabs/Introduction.js similarity index 100% rename from src/Components/Tabs/Introduction/Introduction.js rename to src/Components/Tabs/Introduction.js diff --git a/src/Components/Tabs/SolutionReport.js b/src/Components/Tabs/SolutionReport.js new file mode 100644 index 0000000..a26cdca --- /dev/null +++ b/src/Components/Tabs/SolutionReport.js @@ -0,0 +1,62 @@ +import { useState } from "react"; + +export default function SolutionReport() { + const [submitted, setSubmitted] = useState(false); + const [questionName, setQuestionName] = useState(""); + const [detailInput, setDetailInput] = useState(""); + + return submitted ? ( +
+

제보해주셔서 감사합니다.

+ +
+ ) : ( +
+
+ 문제 이름: + setQuestionName(e.target.value)} + defaultValue={questionName} + /> + + +
+ + {questionName === "" ? null : ( + <> +
+ 기여자 등록: + +
+
+ 내용: + +
+
+ +
+ + )} +
+ ); +} diff --git a/src/Components/Tabs/SolutionReport/SolutionReport.js b/src/Components/Tabs/SolutionReport/SolutionReport.js deleted file mode 100644 index a713b9f..0000000 --- a/src/Components/Tabs/SolutionReport/SolutionReport.js +++ /dev/null @@ -1,27 +0,0 @@ -export default function SolutionReport() { - return ( -
-

SolutionReportTab

-
- 문제 이름: - - - -
-
- 기여자 등록: - -
-
- 정답 코드: - -
-
- -
-
- ); -} diff --git a/src/recoil/atom 2.js b/src/recoil/atom 2.js new file mode 100644 index 0000000..9e958b5 --- /dev/null +++ b/src/recoil/atom 2.js @@ -0,0 +1,6 @@ +import { atom } from "recoil"; + +export const tabNoState = atom({ + key: "tabNoState", + default: 0, +});