JCTG-JavaScript-Coding-Test-Group · chaerin-dev · Jun 30, 2022 · Jun 30, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "recoil": "^0.7.4",
     "styled-components": "^5.3.5",

diff --git a/src/App.js b/src/App.js
@@ -1,12 +1,10 @@
-import TabNavigation from "./Components/TabNavigation/TabNavigation";
-import ContentsSection from "./Components/ContentsSection/ContentsSection";
+import Contents from "./Components/Contents";
 
 export default function App() {
   return (
     <>
       <h1>🤖 프로그래머스 JS 정답 통과기</h1>
-      <TabNavigation />
-      <ContentsSection />
+      <Contents />
     </>
   );
 }
diff --git a/src/Components/Contents.js b/src/Components/Contents.js
@@ -0,0 +1,28 @@
+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";
+
+export default function TabNavigation() {
+  return (
+    <BrowserRouter>
+      <ul>
+        <li>
+          <Link to="/">소개</Link>
+        </li>
+        <li>
+          <Link to="/error-report">오류 제보</Link>
+        </li>
+        <li>
+          <Link to="/solution-report">정답 제보</Link>
+        </li>
+      </ul>
+      <Routes>
+        <Route path="/" element={<Introduction />}></Route>
+        <Route path="/error-report" element={<ErrorReport />}></Route>
+        <Route path="/solution-report" element={<SolutionReport />}></Route>
+      </Routes>
+    </BrowserRouter>
+  );
+}
diff --git a/src/Components/ContentsSection/CommonComponents/QuestionNameInput.js b/src/Components/ContentsSection/CommonComponents/QuestionNameInput.js
diff --git a/src/Components/ContentsSection/CommonComponents/SubmitButton.js b/src/Components/ContentsSection/CommonComponents/SubmitButton.js
diff --git a/src/Components/ContentsSection/ContentsSection.js b/src/Components/ContentsSection/ContentsSection.js
diff --git a/src/Components/ContentsSection/ErrorReport/Components/ErrorCategoryInput.js b/src/Components/ContentsSection/ErrorReport/Components/ErrorCategoryInput.js
diff --git a/src/Components/ContentsSection/ErrorReport/Components/ErrorDetailInput.js b/src/Components/ContentsSection/ErrorReport/Components/ErrorDetailInput.js
diff --git a/src/Components/ContentsSection/ErrorReport/ErrorReportTab.js b/src/Components/ContentsSection/ErrorReport/ErrorReportTab.js
diff --git a/src/Components/ContentsSection/SolutionReport/Components/GitHubLogin.js b/src/Components/ContentsSection/SolutionReport/Components/GitHubLogin.js
diff --git a/src/Components/ContentsSection/SolutionReport/Components/SolutionCodeInput.js b/src/Components/ContentsSection/SolutionReport/Components/SolutionCodeInput.js
diff --git a/src/Components/ContentsSection/SolutionReport/SolutionReportTab.js b/src/Components/ContentsSection/SolutionReport/SolutionReportTab.js
diff --git a/src/Components/TabNavigation/TabNavigation.js b/src/Components/TabNavigation/TabNavigation.js
diff --git a/src/Components/Tabs/ErrorReport/ErrorReport.js b/src/Components/Tabs/ErrorReport/ErrorReport.js
@@ -0,0 +1,34 @@
+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/...tsSection/Introduction/IntroductionTab.js → ...ponents/Tabs/Introduction/Introduction.js b/...tsSection/Introduction/IntroductionTab.js → ...ponents/Tabs/Introduction/Introduction.js
@@ -1,6 +1,6 @@
-export default function IntroductionTab() {
+export default function Introduction() {
   return (
-    <div className="IntroductionTab">
+    <div>
       <p>IntroductionTab</p>
       {/* IntroductionTab content will go here */}
     </div>

diff --git a/src/Components/Tabs/SolutionReport/SolutionReport.js b/src/Components/Tabs/SolutionReport/SolutionReport.js
@@ -0,0 +1,27 @@
+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>
+  );
+}