diff --git a/frontend/src/components/Contest/ContestBreadCrumb.tsx b/frontend/src/components/Contest/ContestBreadCrumb.tsx index 8ce1adf..fb086e2 100644 --- a/frontend/src/components/Contest/ContestBreadCrumb.tsx +++ b/frontend/src/components/Contest/ContestBreadCrumb.tsx @@ -10,9 +10,11 @@ export default function ContestBreadCrumb(props: Props) { return (
- {crumbs.map((crumb) => { - return {crumb}; - })} + {crumbs.map((crumb, index) => ( + + {crumb} + + ))}
); diff --git a/frontend/src/pages/ProblemPage.tsx b/frontend/src/pages/ProblemPage.tsx new file mode 100644 index 0000000..a553f8e --- /dev/null +++ b/frontend/src/pages/ProblemPage.tsx @@ -0,0 +1,45 @@ +import { css } from '@style/css'; + +import { useState } from 'react'; + +import ProblemViewer from '@/components/Problem/ProblemViewer'; +import mockData from '@/mockData.json'; + +const notFoundProblem = { + title: 'Problem Not Found', + timeLimit: 0, + memoryLimit: 0, + content: 'The requested problem could not be found.', + solutionCode: '', + testcases: [], + createdAt: new Date().toISOString(), +}; + +const INITIAL_PROBLEM_ID = 6; + +function ProblemPage() { + const [currentProblemId] = useState(INITIAL_PROBLEM_ID); + const targetProblem = + mockData.problems.find((problem) => problem.id === currentProblemId) || notFoundProblem; + + return ( +
+ {targetProblem.title} + +
+ ); +} + +export default ProblemPage; + +const style = css({ + backgroundColor: '#1e1e1e', + color: '#ffffff', +}); + +const problemTitleStyle = css({ + display: 'inline-block', + height: '50px', + padding: '10px', + borderBottom: '2px solid white', +}); diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx index 74f0ede..ebd142c 100644 --- a/frontend/src/router.tsx +++ b/frontend/src/router.tsx @@ -1,6 +1,7 @@ import { createBrowserRouter } from 'react-router-dom'; import ContestPage from '@/pages/ContestPage'; +import ProblemPage from '@/pages/ProblemPage'; import App from './App'; @@ -13,6 +14,10 @@ const router = createBrowserRouter([ index: true, element: , }, + { + path: '/problem/:id', // TODO: api 연동 후 수정 + element: , + }, ], }, ]);