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 (
);
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: ,
+ },
],
},
]);