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 (
     <>
       <h1>🤖 프로그래머스 JS 정답 통과기</h1>
-      <TabNavigation />
-      <ContentsSection />
+      <Contents />
     </>
   );
 }
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 (
+    <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
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 (
-    <div className="questionNameSection">
-      <span>문제 이름:</span>
-      <input list="questionName" name="question" />
-      <datalist id="questionName">
-        <option value="1번문제" />
-        <option value="2번문제" />
-        <option value="3번문제" />
-      </datalist>
-    </div>
-  );
-}
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 (
-    <div className="SubmitButton">
-      <button id="submitBtn">제출</button>
-    </div>
-  );
-}
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: <IntroductionTab />,
-    1: <ErrorReportTab />,
-    2: <SolutionReportTab />,
-  };
-
-  return <div>{tabs[tabNo]}</div>;
-}
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 (
-    <div className="errorCategoryinput">
-      <span>오류 유형: </span>
-      <input type="radio" id="errorCategory0" name="errorCategory" onClick={resetInput} />
-      <label htmlFor="errorCategory0">정답 통과가 안돼요</label>
-
-      <input type="radio" id="errorCategory1" name="errorCategory" onClick={resetInput} />
-      <label htmlFor="errorCategory1">코드 복사가 안돼요</label>
-
-      <input type="radio" id="errorCategory2" name="errorCategory" onClick={resetInput} />
-      <label htmlFor="errorCategory2">기타</label>
-    </div>
-  );
-}
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 (
-    <div className="ErrorDetailInput">
-      <span>내용: </span>
-      <textarea rows="20" cols="100"></textarea>
-    </div>
-  );
-}
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 (
-    <div className="ErrorReportTab">
-      <p>ErrorReportTab</p>
-      <ErrorCategoryInput />
-      <QuestionNameInput />
-      <ErrorDetailInput />
-      <SubmitButton />
-    </div>
-  );
-}
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 (
-    <div className="gitHubLogin">
-      <span>기여자 등록: </span>
-      <button id="gitHubLoginBtn">GitHub 로그인</button>
-    </div>
-  );
-}
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 (
-    <div className="SolutionCodeInput">
-      <span>정답 코드: </span>
-      <textarea rows="20" cols="100"></textarea>
-    </div>
-  );
-}
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 (
-    <div className="SolutionReportTab">
-      <p>SolutionReportTab</p>
-      <QuestionNameInput />
-      <GitHubLogin />
-      <SolutionCodeInput />
-      <SubmitButton />
-    </div>
-  );
-}
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 (
-    <div className="navigationTab">
-      <ul className="tabs">
-        <li id="tab0" onClick={tabClicked}>
-          소개
-        </li>
-        <li id="tab1" onClick={tabClicked}>
-          오류제보
-        </li>
-        <li id="tab2" onClick={tabClicked}>
-          정답제보
-        </li>
-      </ul>
-    </div>
-  );
-}
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 (
+    <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/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 (
-    <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
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 (
+    <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>
+  );
+}