From bbadc3bd64e12f0514371c9d43b9cfd2a4882638 Mon Sep 17 00:00:00 2001
From: chaerin <70943835+chaerin-dev@users.noreply.github.com>
Date: Fri, 1 Jul 2022 02:21:46 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=98=A4=EB=A5=98=EC=A0=9C=EB=B3=B4,?=
 =?UTF-8?q?=20=EC=A0=95=EB=8B=B5=EC=A0=9C=EB=B3=B4=20=ED=83=AD=20=EC=88=9C?=
 =?UTF-8?q?=EC=B0=A8=EC=A0=81=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Components/Contents.js                    |  6 +-
 src/Components/Tabs/ErrorReport.js            | 91 +++++++++++++++++++
 .../Tabs/ErrorReport/ErrorReport.js           | 34 -------
 .../Tabs/{Introduction => }/Introduction.js   |  0
 src/Components/Tabs/SolutionReport.js         | 62 +++++++++++++
 .../Tabs/SolutionReport/SolutionReport.js     | 27 ------
 src/recoil/atom 2.js                          |  6 ++
 7 files changed, 162 insertions(+), 64 deletions(-)
 create mode 100644 src/Components/Tabs/ErrorReport.js
 delete mode 100644 src/Components/Tabs/ErrorReport/ErrorReport.js
 rename src/Components/Tabs/{Introduction => }/Introduction.js (100%)
 create mode 100644 src/Components/Tabs/SolutionReport.js
 delete mode 100644 src/Components/Tabs/SolutionReport/SolutionReport.js
 create mode 100644 src/recoil/atom 2.js

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 ? (
+    <div>
+      <p>제보해주셔서 감사합니다.</p>
+      <button
+        onClick={() => {
+          setSubmitted(false);
+          setErrorCategory(-1);
+          setQuestionName("");
+          setDetailInput("");
+        }}
+      >
+        다른 오류 제보
+      </button>
+    </div>
+  ) : (
+    <div>
+      <div>
+        <span>오류 유형: </span>
+        <input
+          type="radio"
+          id="errorCategory0"
+          name="errorCategory"
+          onClick={() => setErrorCategory(0)}
+        />
+        <label htmlFor="errorCategory0">정답 통과가 안돼요</label>
+        <input
+          type="radio"
+          id="errorCategory1"
+          name="errorCategory"
+          onClick={() => setErrorCategory(1)}
+        />
+        <label htmlFor="errorCategory1">코드 복사가 안돼요</label>
+        <input
+          type="radio"
+          id="errorCategory2"
+          name="errorCategory"
+          onClick={() => setErrorCategory(2)}
+        />
+        <label htmlFor="errorCategory2">기타</label>
+      </div>
+
+      {errorCategory === -1 || errorCategory === 1 ? null : (
+        <div>
+          <span>문제 이름:</span>
+          <input
+            list="questionName"
+            name="question"
+            onInput={(e) => setQuestionName(e.target.value)}
+            defaultValue={questionName}
+          />
+          <datalist id="questionName">
+            <option value="1번문제" />
+            <option value="2번문제" />
+            <option value="3번문제" />
+          </datalist>
+        </div>
+      )}
+
+      {errorCategory === -1 || (errorCategory === 0 && questionName === "") ? null : (
+        <>
+          <div>
+            <span>내용: </span>
+            <textarea
+              rows="20"
+              cols="100"
+              onInput={(e) => setDetailInput(e.target.value)}
+              defaultValue={detailInput}
+            ></textarea>
+          </div>
+          <div>
+            <button
+              id="submitBtn"
+              disabled={errorCategory === 2 && detailInput === ""}
+              onClick={() => setSubmitted(true)}
+            >
+              제출
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
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 (
-    <div>
-      <p>ErrorReportTab</p>
-      <div>
-        <span>오류 유형: </span>
-        <input type="radio" id="errorCategory0" name="errorCategory" />
-        <label htmlFor="errorCategory0">정답 통과가 안돼요</label>
-
-        <input type="radio" id="errorCategory1" name="errorCategory" />
-        <label htmlFor="errorCategory1">코드 복사가 안돼요</label>
-
-        <input type="radio" id="errorCategory2" name="errorCategory" />
-        <label htmlFor="errorCategory2">기타</label>
-      </div>
-      <div>
-        <span>문제 이름:</span>
-        <input list="questionName" name="question" />
-        <datalist id="questionName">
-          <option value="1번문제" />
-          <option value="2번문제" />
-          <option value="3번문제" />
-        </datalist>
-      </div>
-      <div>
-        <span>내용: </span>
-        <textarea rows="20" cols="100"></textarea>
-      </div>
-      <div>
-        <button id="submitBtn">제출</button>
-      </div>
-    </div>
-  );
-}
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 ? (
+    <div>
+      <p>제보해주셔서 감사합니다.</p>
+      <button
+        onClick={() => {
+          setSubmitted(false);
+          setQuestionName("");
+          setDetailInput("");
+        }}
+      >
+        다른 정답 제보
+      </button>
+    </div>
+  ) : (
+    <div>
+      <div>
+        <span>문제 이름:</span>
+        <input
+          list="questionName"
+          name="question"
+          onInput={(e) => setQuestionName(e.target.value)}
+          defaultValue={questionName}
+        />
+        <datalist id="questionName">
+          <option value="1번문제" />
+          <option value="2번문제" />
+          <option value="3번문제" />
+        </datalist>
+      </div>
+
+      {questionName === "" ? null : (
+        <>
+          <div className="gitHubLogin">
+            <span>기여자 등록: </span>
+            <button id="gitHubLoginBtn">GitHub 로그인</button>
+          </div>
+          <div>
+            <span>내용: </span>
+            <textarea
+              rows="20"
+              cols="100"
+              onInput={(e) => setDetailInput(e.target.value)}
+              defaultValue={detailInput}
+            ></textarea>
+          </div>
+          <div>
+            <button id="submitBtn" disabled={detailInput === ""} onClick={() => setSubmitted(true)}>
+              제출
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
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 (
-    <div>
-      <p>SolutionReportTab</p>
-      <div className="questionNameSection">
-        <span>문제 이름:</span>
-        <input list="questionName" name="question" />
-        <datalist id="questionName">
-          <option value="1번문제" />
-          <option value="2번문제" />
-          <option value="3번문제" />
-        </datalist>
-      </div>
-      <div className="gitHubLogin">
-        <span>기여자 등록: </span>
-        <button id="gitHubLoginBtn">GitHub 로그인</button>
-      </div>
-      <div className="SolutionCodeInput">
-        <span>정답 코드: </span>
-        <textarea rows="20" cols="100"></textarea>
-      </div>
-      <div className="SubmitButton">
-        <button id="submitBtn">제출</button>
-      </div>
-    </div>
-  );
-}
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,
+});