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;
};