diff --git a/frontend/src/components/Submission/Score.tsx b/frontend/src/components/Submission/Score.tsx index 3b6e30b..62b6172 100644 --- 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 (
-

결과: {result}

-

출력: {stdOut}

+

결과: {score?.result ?? ''}

+

출력: {score?.stdOut ?? ''}

); } diff --git a/frontend/src/components/Submission/SubmissionResult.tsx b/frontend/src/components/Submission/SubmissionResult.tsx index 45d3355..6a938fe 100644 --- 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([]); + const [submissionMessage, setSubmissionMessage] = useState(''); 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 ( <>
- {scoreResults.map(({ score, submitState }) => ( - +

{submissionMessage}

+ {scoreResults.map(({ score, submitState, testcaseId }) => ( + ))}
diff --git a/frontend/src/components/Submission/types.ts b/frontend/src/components/Submission/types.ts index 8516a16..f281f6d 100644 --- 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; };