From 7a304bb3f0ed29ec7e2402e07b48916779faa7a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=9A=B0=EC=B0=AC?=
 <132538081+dmdmdkdkr@users.noreply.github.com>
Date: Tue, 21 Nov 2023 16:01:31 +0900
Subject: [PATCH 1/2] =?UTF-8?q?key=20props=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Contest/ContestBreadCrumb.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

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 (
     <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>
   );

From dacd821438e81a5658822ddfb69b462808c0ecd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=9A=B0=EC=B0=AC?=
 <132538081+dmdmdkdkr@users.noreply.github.com>
Date: Tue, 21 Nov 2023 16:03:29 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EB=AC=B8=EC=A0=9C=20=EB=B3=B4?=
 =?UTF-8?q?=EA=B8=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/ProblemPage.tsx | 45 ++++++++++++++++++++++++++++++
 frontend/src/router.tsx            |  5 ++++
 2 files changed, 50 insertions(+)
 create mode 100644 frontend/src/pages/ProblemPage.tsx

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