From 081e657dcf0eccce2ff1ad7c018039bf11c90d91 Mon Sep 17 00:00:00 2001 From: chaerin <70943835+chaerin-dev@users.noreply.github.com> Date: Fri, 1 Jul 2022 00:53:07 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 58 +++++++++++++++++++ package.json | 1 + src/App.js | 6 +- src/Components/Contents.js | 28 +++++++++ .../CommonComponents/QuestionNameInput.js | 13 ----- .../CommonComponents/SubmitButton.js | 7 --- .../ContentsSection/ContentsSection.js | 18 ------ .../Components/ErrorCategoryInput.js | 18 ------ .../Components/ErrorDetailInput.js | 8 --- .../ErrorReport/ErrorReportTab.js | 16 ----- .../SolutionReport/Components/GitHubLogin.js | 8 --- .../Components/SolutionCodeInput.js | 8 --- .../SolutionReport/SolutionReportTab.js | 16 ----- src/Components/TabNavigation/TabNavigation.js | 27 --------- .../Tabs/ErrorReport/ErrorReport.js | 34 +++++++++++ .../Introduction/Introduction.js} | 4 +- .../Tabs/SolutionReport/SolutionReport.js | 27 +++++++++ 17 files changed, 152 insertions(+), 145 deletions(-) create mode 100644 src/Components/Contents.js delete mode 100644 src/Components/ContentsSection/CommonComponents/QuestionNameInput.js delete mode 100644 src/Components/ContentsSection/CommonComponents/SubmitButton.js delete mode 100644 src/Components/ContentsSection/ContentsSection.js delete mode 100644 src/Components/ContentsSection/ErrorReport/Components/ErrorCategoryInput.js delete mode 100644 src/Components/ContentsSection/ErrorReport/Components/ErrorDetailInput.js delete mode 100644 src/Components/ContentsSection/ErrorReport/ErrorReportTab.js delete mode 100644 src/Components/ContentsSection/SolutionReport/Components/GitHubLogin.js delete mode 100644 src/Components/ContentsSection/SolutionReport/Components/SolutionCodeInput.js delete mode 100644 src/Components/ContentsSection/SolutionReport/SolutionReportTab.js delete mode 100644 src/Components/TabNavigation/TabNavigation.js create mode 100644 src/Components/Tabs/ErrorReport/ErrorReport.js rename src/Components/{ContentsSection/Introduction/IntroductionTab.js => Tabs/Introduction/Introduction.js} (57%) create mode 100644 src/Components/Tabs/SolutionReport/SolutionReport.js diff --git a/package-lock.json b/package-lock.json index f31b0f3..ae26def 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,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", @@ -8477,6 +8478,14 @@ "he": "bin/he" } }, + "node_modules/history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "dependencies": { + "@babel/runtime": "^7.7.6" + } + }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -13956,6 +13965,30 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz", + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==", + "dependencies": { + "history": "^5.2.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "dependencies": { + "history": "^5.2.0", + "react-router": "6.3.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -22838,6 +22871,14 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "requires": { + "@babel/runtime": "^7.7.6" + } + }, "hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -26638,6 +26679,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz", + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==", + "requires": { + "history": "^5.2.0" + } + }, + "react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "requires": { + "history": "^5.2.0", + "react-router": "6.3.0" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index 7d7993a..45ee750 100644 --- 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 index e3008c4..bc4d145 100644 --- 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 ( <>

๐Ÿค– ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค JS ์ •๋‹ต ํ†ต๊ณผ๊ธฐ

- - + ); } diff --git a/src/Components/Contents.js b/src/Components/Contents.js new file mode 100644 index 0000000..b7537b4 --- /dev/null +++ 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 ( + +
    +
  • + ์†Œ๊ฐœ +
    • +
  • + ์˜ค๋ฅ˜ ์ œ๋ณด +
    • +
  • + ์ •๋‹ต ์ œ๋ณด +
    • +
+ + }> + }> + }> + + + ); +} diff --git a/src/Components/ContentsSection/CommonComponents/QuestionNameInput.js b/src/Components/ContentsSection/CommonComponents/QuestionNameInput.js deleted file mode 100644 index 71a2a8e..0000000 --- a/src/Components/ContentsSection/CommonComponents/QuestionNameInput.js +++ /dev/null @@ -1,13 +0,0 @@ -export default function QuestionNameSection() { - return ( -
- ๋ฌธ์ œ ์ด๋ฆ„: - - - -
- ); -} diff --git a/src/Components/ContentsSection/CommonComponents/SubmitButton.js b/src/Components/ContentsSection/CommonComponents/SubmitButton.js deleted file mode 100644 index c0deb33..0000000 --- a/src/Components/ContentsSection/CommonComponents/SubmitButton.js +++ /dev/null @@ -1,7 +0,0 @@ -export default function SubmitButton() { - return ( -
- -
- ); -} diff --git a/src/Components/ContentsSection/ContentsSection.js b/src/Components/ContentsSection/ContentsSection.js deleted file mode 100644 index f399983..0000000 --- a/src/Components/ContentsSection/ContentsSection.js +++ /dev/null @@ -1,18 +0,0 @@ -import { useRecoilValue } from "recoil"; -import { tabNoState } from "../../recoil/atom"; - -import ErrorReportTab from "./ErrorReport/ErrorReportTab"; -import IntroductionTab from "./Introduction/IntroductionTab"; -import SolutionReportTab from "./SolutionReport/SolutionReportTab"; - -export default function ContentsSection() { - const tabNo = useRecoilValue(tabNoState); - - const tabs = { - 0: , - 1: , - 2: , - }; - - return
{tabs[tabNo]}
; -} diff --git a/src/Components/ContentsSection/ErrorReport/Components/ErrorCategoryInput.js b/src/Components/ContentsSection/ErrorReport/Components/ErrorCategoryInput.js deleted file mode 100644 index 5dd5f91..0000000 --- a/src/Components/ContentsSection/ErrorReport/Components/ErrorCategoryInput.js +++ /dev/null @@ -1,18 +0,0 @@ -export default function ErrorCategoryInput() { - function resetInput() { - Array.from(document.querySelectorAll("input, textarea")).forEach((input) => (input.value = "")); - } - return ( -
- ์˜ค๋ฅ˜ ์œ ํ˜•: - - - - - - - - -
- ); -} diff --git a/src/Components/ContentsSection/ErrorReport/Components/ErrorDetailInput.js b/src/Components/ContentsSection/ErrorReport/Components/ErrorDetailInput.js deleted file mode 100644 index e0c6653..0000000 --- a/src/Components/ContentsSection/ErrorReport/Components/ErrorDetailInput.js +++ /dev/null @@ -1,8 +0,0 @@ -export default function ErrorDetailInput() { - return ( -
- ๋‚ด์šฉ: - -
- ); -} diff --git a/src/Components/ContentsSection/ErrorReport/ErrorReportTab.js b/src/Components/ContentsSection/ErrorReport/ErrorReportTab.js deleted file mode 100644 index 86cd758..0000000 --- a/src/Components/ContentsSection/ErrorReport/ErrorReportTab.js +++ /dev/null @@ -1,16 +0,0 @@ -import ErrorCategoryInput from "./Components/ErrorCategoryInput"; -import QuestionNameInput from "../CommonComponents/QuestionNameInput"; -import ErrorDetailInput from "./Components/ErrorDetailInput"; -import SubmitButton from "../CommonComponents/SubmitButton"; - -export default function ErrorReportTab() { - return ( -
-

ErrorReportTab

- - - - -
- ); -} diff --git a/src/Components/ContentsSection/SolutionReport/Components/GitHubLogin.js b/src/Components/ContentsSection/SolutionReport/Components/GitHubLogin.js deleted file mode 100644 index b3c5e39..0000000 --- a/src/Components/ContentsSection/SolutionReport/Components/GitHubLogin.js +++ /dev/null @@ -1,8 +0,0 @@ -export default function GitHubLogin() { - return ( -
- ๊ธฐ์—ฌ์ž ๋“ฑ๋ก: - -
- ); -} diff --git a/src/Components/ContentsSection/SolutionReport/Components/SolutionCodeInput.js b/src/Components/ContentsSection/SolutionReport/Components/SolutionCodeInput.js deleted file mode 100644 index a87a5a3..0000000 --- a/src/Components/ContentsSection/SolutionReport/Components/SolutionCodeInput.js +++ /dev/null @@ -1,8 +0,0 @@ -export default function SolutionCodeInput() { - return ( -
- ์ •๋‹ต ์ฝ”๋“œ: - -
- ); -} diff --git a/src/Components/ContentsSection/SolutionReport/SolutionReportTab.js b/src/Components/ContentsSection/SolutionReport/SolutionReportTab.js deleted file mode 100644 index f5f9618..0000000 --- a/src/Components/ContentsSection/SolutionReport/SolutionReportTab.js +++ /dev/null @@ -1,16 +0,0 @@ -import QuestionNameInput from "../CommonComponents/QuestionNameInput"; -import GitHubLogin from "./Components/GitHubLogin"; -import SolutionCodeInput from "./Components/SolutionCodeInput"; -import SubmitButton from "../CommonComponents/SubmitButton"; - -export default function SolutionReportTab() { - return ( -
-

SolutionReportTab

- - - - -
- ); -} diff --git a/src/Components/TabNavigation/TabNavigation.js b/src/Components/TabNavigation/TabNavigation.js deleted file mode 100644 index eea1242..0000000 --- a/src/Components/TabNavigation/TabNavigation.js +++ /dev/null @@ -1,27 +0,0 @@ -import { useSetRecoilState } from "recoil"; -import { tabNoState } from "../../recoil/atom"; - -export default function TabNavigation() { - const setTabNo = useSetRecoilState(tabNoState); - - function tabClicked(e) { - let targetId = e.target.id; - setTabNo(targetId[targetId.length - 1]); - } - - return ( -
-
    -
  • - ์†Œ๊ฐœ -
    • -
  • - ์˜ค๋ฅ˜์ œ๋ณด -
    • -
  • - ์ •๋‹ต์ œ๋ณด -
    • -
-
- ); -} diff --git a/src/Components/Tabs/ErrorReport/ErrorReport.js b/src/Components/Tabs/ErrorReport/ErrorReport.js new file mode 100644 index 0000000..79f87ca --- /dev/null +++ b/src/Components/Tabs/ErrorReport/ErrorReport.js @@ -0,0 +1,34 @@ +export default function ErrorReport() { + return ( +
+

ErrorReportTab

+
+ ์˜ค๋ฅ˜ ์œ ํ˜•: + + + + + + + + +
+
+ ๋ฌธ์ œ ์ด๋ฆ„: + + + +
+
+ ๋‚ด์šฉ: + +
+
+ +
+
+ ); +} diff --git a/src/Components/ContentsSection/Introduction/IntroductionTab.js b/src/Components/Tabs/Introduction/Introduction.js similarity index 57% rename from src/Components/ContentsSection/Introduction/IntroductionTab.js rename to src/Components/Tabs/Introduction/Introduction.js index 265edc9..9246900 100644 --- a/src/Components/ContentsSection/Introduction/IntroductionTab.js +++ b/src/Components/Tabs/Introduction/Introduction.js @@ -1,6 +1,6 @@ -export default function IntroductionTab() { +export default function Introduction() { return ( -
+

IntroductionTab

{/* IntroductionTab content will go here */}
diff --git a/src/Components/Tabs/SolutionReport/SolutionReport.js b/src/Components/Tabs/SolutionReport/SolutionReport.js new file mode 100644 index 0000000..a713b9f --- /dev/null +++ b/src/Components/Tabs/SolutionReport/SolutionReport.js @@ -0,0 +1,27 @@ +export default function SolutionReport() { + return ( +
+

SolutionReportTab

+
+ ๋ฌธ์ œ ์ด๋ฆ„: + + + +
+
+ ๊ธฐ์—ฌ์ž ๋“ฑ๋ก: + +
+
+ ์ •๋‹ต ์ฝ”๋“œ: + +
+
+ +
+
+ ); +}