◐ Shell
clean mode source ↗

[#8] 제보사이트 페이지 분리 by chaerin-dev · Pull Request #9 · JCTG-JavaScript-Coding-Test-Group/SolutionBankWebsite

JCTG-JavaScript-Coding-Test-Group

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#8] 제보사이트 페이지 분리 #9

Changes from all commits

Commits

File filter

Filter by extension
Conversations

Failed to load comments.

Loading

Jump to

Jump to file

Failed to load files.

Loading

Diff view
Diff view

58 changes: 58 additions & 0 deletions package-lock.json

1 change: 1 addition & 0 deletions package.json

Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

6 changes: 2 additions & 4 deletions src/App.js

Original file line number Diff line number Diff line change
@@ -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 />
</>
);
}

28 changes: 28 additions & 0 deletions src/Components/Contents.js

Original file line number Diff line number Diff line change
@@ -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>
);
}

18 changes: 0 additions & 18 deletions src/Components/ContentsSection/ContentsSection.js

16 changes: 0 additions & 16 deletions src/Components/ContentsSection/ErrorReport/ErrorReportTab.js

27 changes: 0 additions & 27 deletions src/Components/TabNavigation/TabNavigation.js

34 changes: 34 additions & 0 deletions src/Components/Tabs/ErrorReport/ErrorReport.js

Original file line number Diff line number Diff line change
@@ -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>
);
}
Original file line number Diff line number Diff line change
@@ -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>
Expand Down

27 changes: 27 additions & 0 deletions src/Components/Tabs/SolutionReport/SolutionReport.js

Original file line number Diff line number Diff line change
@@ -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>
);
}