refactor: ProblemViewer컴포넌트 생성 및 중복되는 코드 제거

boostcampwm2023 · Nov 21, 2023 · d514812 · d514812
1 parent 2ec20a4
commit d514812
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 28 deletions.
diff --git a/frontend/src/components/Problem/ProblemViewer.tsx b/frontend/src/components/Problem/ProblemViewer.tsx
@@ -0,0 +1,27 @@
+import { css } from '@style/css';
+
+import Markdown from './Markdown';
+
+interface Props {
+  content: string;
+}
+
+export default function ProblemViewer(props: Props) {
+  const { content } = props;
+
+  return (
+    <div className={style}>
+      <Markdown markdownContent={content} />
+    </div>
+  );
+}
+
+const style = css({
+  width: '450px',
+  height: '500px',
+  backgroundColor: '#1e1e1e',
+  color: '#ffffff',
+  padding: '10px',
+  overflowY: 'auto',
+  whiteSpace: 'pre-wrap',
+});
diff --git a/frontend/src/pages/ContestPage.tsx b/frontend/src/pages/ContestPage.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 
 import ContestBreadCrumb from '@/components/Contest/ContestBreadCrumb';
 import Editor from '@/components/Editor/Editor';
-import Markdown from '@/components/Problem/Markdown';
+import ProblemViewer from '@/components/Problem/ProblemViewer';
 import SimulatorList from '@/components/Simulation/SimulatorList';
 import type { TestCase } from '@/components/Simulation/types';
 import SubmissionResult from '@/components/SubmissionResult';
@@ -94,9 +94,7 @@ export default function ContestPage() {
         <span className={problemTitleStyle}>{targetProblem.title}</span>
       </section>
       <section className={rowListStyle}>
-        <div className={problemViewerStyle}>
-          <Markdown markdownContent={targetProblem.content} />
-        </div>
+        <ProblemViewer content={targetProblem.content} />
         <div className={colListStyle}>
           <Editor code={code} onChangeCode={handleChangeCode}></Editor>
           <SimulatorList
@@ -140,13 +138,3 @@ const problemTitleStyle = css({
   padding: '10px',
   borderBottom: '2px solid white',
 });
-
-const problemViewerStyle = css({
-  width: '450px',
-  height: '500px',
-  backgroundColor: '#1e1e1e',
-  color: '#ffffff',
-  padding: '10px',
-  overflowY: 'auto',
-  whiteSpace: 'pre-wrap',
-});
diff --git a/frontend/src/pages/ProblemPage.tsx b/frontend/src/pages/ProblemPage.tsx
@@ -2,7 +2,7 @@ import { css } from '@style/css';
 
 import { useState } from 'react';
 
-import Markdown from '@/components/Problem/Markdown';
+import ProblemViewer from '@/components/Problem/ProblemViewer';
 import mockData from '@/mockData.json';
 
 const notFoundProblem = {
@@ -25,9 +25,7 @@ function ProblemPage() {
   return (
     <main className={style}>
       <span className={problemTitleStyle}>{targetProblem.title}</span>
-      <div className={problemViewerStyle}>
-        <Markdown markdownContent={targetProblem.content} />
-      </div>
+      <ProblemViewer content={targetProblem.content} />
     </main>
   );
 }
@@ -39,16 +37,6 @@ const style = css({
   color: '#ffffff',
 });
 
-const problemViewerStyle = css({
-  width: '450px',
-  height: '500px',
-  backgroundColor: '#1e1e1e',
-  color: '#ffffff',
-  padding: '10px',
-  overflowY: 'auto',
-  whiteSpace: 'pre-wrap',
-});
-
 const problemTitleStyle = css({
   display: 'inline-block',
   height: '50px',