[#20] 유저가 작성한 코드 결과 서버로 보내기

frontend/package.json

@@ -32,6 +32,7 @@
     "remark-gfm": "^4.0.0",
     "remark-parse": "^11.0.0",
     "remark-react": "^9.0.1",
+    "socket.io-client": "^4.7.2",
     "unified": "^11.0.4"
   },
   "devDependencies": {

frontend/src/App.tsx

@@ -1,11 +1,5 @@
 import { Outlet } from 'react-router-dom';
 
-import worker from './__mocks__';
-
-if (process.env.NODE_ENV === 'development') {
-  worker.start();
-}
-
 function App() {
   return <Outlet></Outlet>;
 }

frontend/src/apis/problems/index.ts

@@ -15,3 +15,17 @@ export async function fetchProblemList(): Promise<ProblemInfo[]> {
     return [];
   }
 }
+
+export async function fetchCompetitionProblemList(competitionId: number): Promise<ProblemInfo[]> {
+  try {
+    const { data } = await api.get<FetchProblemListResponse>(
+      `/competitions/${competitionId}/problems`,
+    );
+
+    return data;
+  } catch (err) {
+    console.error(err);
+
+    return [];
+  }
+}

frontend/src/components/Submission/Score.tsx

@@ -0,0 +1,21 @@
+import Loading from './Loading';
+import type { ScoreResult } from './types';
+
+interface Props {
+  score: ScoreResult;
+}
+
+export default function Score({ score }: Props) {
+  const { problemId, result, stdOut } = score;
+
+  if (problemId < 0) {
+    return <Loading color="#e15b64" size="2rem" />;
+  }
+
+  return (
+    <div>
+      <p>결과: {result}</p>
+      <p>출력: {stdOut}</p>
+    </div>
+  );
+}

frontend/src/components/Submission/SubmissionResult.tsx

@@ -0,0 +1,71 @@
+import { css } from '@style/css';
+
+import { useEffect, useState } from 'react';
+
+import { range } from '@/utils/array';
+import type { Socket } from '@/utils/socket';
+
+import Score from './Score';
+import type { Message, ScoreResult } from './types';
+
+interface Props {
+  socket: Socket;
+}
+
+export function SubmissionResult({ socket }: Props) {
+  const [scoreResults, setScoreResults] = useState<ScoreResult[]>([]);
+
+  const handleScoreResult = (rawData: string) => {
+    const newResult = JSON.parse(rawData) as ScoreResult;
+
+    setScoreResults((results) => {
+      return results.map((result, index) => {
+        if (index === newResult.testcaseId) {
+          return newResult;
+        }
+        return result;
+      });
+    });
+  };
+
+  const handleMessage = (rawData: string) => {
+    const { message } = JSON.parse(rawData) as Message;
+    console.log(message);
+  };
+
+  useEffect(() => {
+    if (!socket.hasListeners('message')) {
+      socket.on('message', handleMessage);
+      const totalSubmissionResult = 10;
+      setScoreResults(
+        range(0, totalSubmissionResult).map((_, index) => ({
+          problemId: -1,
+          result: '',
+          stdOut: '',
+          testcaseId: index,
+        })),
+      );
+    }
+    if (!socket.hasListeners('scoreResult')) {
+      socket.on('scoreResult', handleScoreResult);
+    }
+  }, [socket]);
+
+  return (
+    <>
+      <section className={resultWrapperStyle}>
+        {scoreResults.map((result) => (
+          <Score key={result.testcaseId} score={result} />
+        ))}
+      </section>
+    </>
+  );
+}
+
+const resultWrapperStyle = css({
+  padding: '24px',
+  minHeight: '40vh',
+  width: '80vw',
+  backgroundColor: 'darkgray',
+  margin: '0 auto',
+});

frontend/src/components/Submission/index.tsx

@@ -0,0 +1 @@
+export { SubmissionResult } from './SubmissionResult';

frontend/src/components/Submission/types.ts

@@ -0,0 +1,21 @@
+import { ProblemId } from '@/apis/problems';
+
+export interface SubmitResult {
+  contestId: number;
+  problemId: number;
+  testcaseId: number;
+  resultStatus: number;
+  elapsedTime: number;
+  memoryUsage: number;
+}
+
+export type Message = {
+  message: string;
+};
+
+export type ScoreResult = {
+  problemId: ProblemId;
+  result: string;
+  stdOut: string;
+  testcaseId: number;
+};