feat: 제출 메세지 출력 & 스코어 상태 출력 변경

boostcampwm2023 · Nov 23, 2023 · 6558a13 · 6558a13
1 parent 14e615e
commit 6558a13
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 26 deletions.
diff --git a/frontend/src/components/Submission/Score.tsx b/frontend/src/components/Submission/Score.tsx
@@ -3,13 +3,11 @@ import type { ScoreResult, SubmitState } from './types';
 import { SUBMIT_STATE } from './types';
 
 interface Props {
-  score: ScoreResult;
-  submitState?: SubmitState;
+  score?: ScoreResult;
+  submitState: SubmitState;
 }
 
-export default function Score({ score, submitState = SUBMIT_STATE.notSubmitted }: Props) {
-  const { result, stdOut } = score;
-
+export default function Score({ score, submitState }: Props) {
   if (submitState === SUBMIT_STATE.notSubmitted) {
     return '';
   }
@@ -20,8 +18,8 @@ export default function Score({ score, submitState = SUBMIT_STATE.notSubmitted }
 
   return (
     <div>
-      <p>결과: {result}</p>
-      <p>출력: {stdOut}</p>
+      <p>결과: {score?.result ?? ''}</p>
+      <p>출력: {score?.stdOut ?? ''}</p>
     </div>
   );
 }
diff --git a/frontend/src/components/Submission/SubmissionResult.tsx b/frontend/src/components/Submission/SubmissionResult.tsx
@@ -13,22 +13,33 @@ interface Props {
 }
 
 type SubmitResult = {
+  testcaseId: number;
   submitState: SubmitState;
-  score: ScoreResult;
+  score?: ScoreResult;
 };
 
 export function SubmissionResult({ socket }: Props) {
   const [scoreResults, setScoreResults] = useState<SubmitResult[]>([]);
+  const [submissionMessage, setSubmissionMessage] = useState<string>('');
 
   const handleScoreResult = (rawData: string) => {
+    const { problemId, result, stdOut, testcaseId } = JSON.parse(rawData) as ScoreResult & {
+      testcaseId: number;
+    };
+
     const newResult = {
+      testcaseId,
       submitState: SUBMIT_STATE.submitted,
-      score: JSON.parse(rawData) as ScoreResult,
+      score: {
+        problemId,
+        result,
+        stdOut,
+      } satisfies ScoreResult,
     };
 
     setScoreResults((results) => {
       return results.map((result, index) => {
-        if (index === newResult.score.testcaseId) {
+        if (index === newResult.testcaseId) {
           return newResult;
         }
         return result;
@@ -38,24 +49,20 @@ export function SubmissionResult({ socket }: Props) {
 
   const handleMessage = (rawData: string) => {
     const { message } = JSON.parse(rawData) as Message;
-    console.log(message);
+    const totalSubmissionResult = 10;
+
+    setSubmissionMessage(message);
+    setScoreResults(
+      range(0, totalSubmissionResult).map((_, index) => ({
+        testcaseId: index,
+        submitState: SUBMIT_STATE.loading,
+      })),
+    );
   };
 
   useEffect(() => {
     if (!socket.hasListeners('message')) {
       socket.on('message', handleMessage);
-      const totalSubmissionResult = 10;
-      setScoreResults(
-        range(0, totalSubmissionResult).map((_, index) => ({
-          submitState: SUBMIT_STATE.loading,
-          score: {
-            problemId: -1,
-            result: '',
-            stdOut: '',
-            testcaseId: index,
-          },
-        })),
-      );
     }
     if (!socket.hasListeners('scoreResult')) {
       socket.on('scoreResult', handleScoreResult);
@@ -65,8 +72,9 @@ export function SubmissionResult({ socket }: Props) {
   return (
     <>
       <section className={resultWrapperStyle}>
-        {scoreResults.map(({ score, submitState }) => (
-          <Score key={score.testcaseId} score={score} submitState={submitState} />
+        <p>{submissionMessage}</p>
+        {scoreResults.map(({ score, submitState, testcaseId }) => (
+          <Score key={testcaseId} score={score} submitState={submitState} />
         ))}
       </section>
     </>

diff --git a/frontend/src/components/Submission/types.ts b/frontend/src/components/Submission/types.ts
@@ -25,5 +25,4 @@ export type ScoreResult = {
   problemId: ProblemId;
   result: string;
   stdOut: string;
-  testcaseId: number;
 };