[#85] 문제 보기

frontend/src/components/Contest/ContestBreadCrumb.tsx

@@ -10,9 +10,11 @@ export default function ContestBreadCrumb(props: Props) {
   return (
     <header>
       <div className={titleContainerStyle}>
-        {crumbs.map((crumb) => {
-          return <span className={crumbStyle}>{crumb}</span>;
-        })}
+        {crumbs.map((crumb, index) => (
+          <span key={index} className={crumbStyle}>
+            {crumb}
+          </span>
+        ))}
       </div>
     </header>
   );

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 (
+    <main className={style}>
+      <span className={problemTitleStyle}>{targetProblem.title}</span>
+      <ProblemViewer content={targetProblem.content} />
+    </main>
+  );
+}
+
+export default ProblemPage;
+
+const style = css({
+  backgroundColor: '#1e1e1e',
+  color: '#ffffff',
+});
+
+const problemTitleStyle = css({
+  display: 'inline-block',
+  height: '50px',
+  padding: '10px',
+  borderBottom: '2px solid white',
+});

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: <ContestPage />,
       },
+      {
+        path: '/problem/:id', // TODO: api 연동 후 수정
+        element: <ProblemPage />,
+      },
     ],
   },
 ]);