문제 풀이 에러 핸들링 로직 개선 / 리스트 스타일 개선

src/apis/problem.ts

@@ -42,6 +42,7 @@ export const getProblemSubmissionV2 = (problem_id: number) =>
     | { type: "skip"; data: { items: [] } }
     | { type: "message"; data: { items: ProblemSubmissionResultV2[] } }
     | { type: "error"; data: { detail: string } }
+    | { type: "unknown"; data: unknown }
   >(
     `/v2/problems/${problem_id}/submission`,
     {}, // body

src/apis/utility.ts

@@ -131,12 +131,20 @@ export const sseRequest = <Response extends { type: string; data: unknown }>(
     for await (const event of parseEvent(reader)) {
       yield {
         type: event.type,
-        data: JSON.parse(event.data),
+        data: tryParseData(event.data),
       } as Response;
     }
   },
 });
 
+function tryParseData(data: string) {
+  try {
+    return JSON.parse(data);
+  } catch {
+    return data;
+  }
+}
+
 async function* parseLine(reader: ReadableStreamDefaultReader<string>) {
   let lastLine = "";
   while (true) {
@@ -156,7 +164,7 @@ async function* parseEvent(reader: ReadableStreamDefaultReader<string>) {
     if (line.length > 0) lines.push(line);
     else {
       const type = removeFirstSpace(
-        lines.find((line) => line.startsWith("event:"))?.slice(6) ?? " " + line,
+        lines.find((line) => line.startsWith("event:"))?.slice(6) ?? "unknown",
       );
       const data = lines
         .filter((line) => line.startsWith("data:"))

src/components/solve/ProblemDescription/ProblemDescription.tsx

@@ -184,8 +184,8 @@ const MarkdownStyledWrapper = styled.div`
   ul,
   ol {
     list-style: disc outside none !important;
-    .li {
-    }
+    font-size: 1.8rem;
+    line-height: 160%;
   }
   code {
     background: rgba(135, 131, 120, 0.15);

src/pages/SolveV2.tsx

@@ -1,26 +1,26 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useRef, useState } from "react";
+import { flushSync } from "react-dom";
 import { Link, useParams } from "react-router-dom";
 import styled from "styled-components";
-import ProblemDescription from "../components/solve/ProblemDescription/ProblemDescription.tsx";
-import CodeEditor from "../components/solve/CodeEditor/index.tsx";
-import TestResultConsole from "../components/solve/TestResultConsoleV2.tsx";
-import DragResizable from "../components/solve/DragResizable.tsx";
-import { useRef, useState } from "react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   getProblemById,
   getProblemSubmissionV2,
   postProblemSubmissionV2,
 } from "../apis/problem.ts";
+import CodeEditor from "../components/solve/CodeEditor/index.tsx";
+import { useCodeRef } from "../components/solve/CodeEditor/useCode.tsx";
 import {
   boilerplates,
   languageCodesV2,
   useLanguage,
 } from "../components/solve/CodeEditor/useLanguage.tsx";
-import { useCodeRef } from "../components/solve/CodeEditor/useCode.tsx";
+import DragResizable from "../components/solve/DragResizable.tsx";
+import ProblemDescription from "../components/solve/ProblemDescription/ProblemDescription.tsx";
 import { useCustomTestCases } from "../components/solve/ProblemDescription/useCustomTestCases.tsx";
-import { ProblemSubmissionResultV2 } from "../types/apiTypes.ts";
+import TestResultConsole from "../components/solve/TestResultConsoleV2.tsx";
 import { unreachable } from "../lib/unreachable.ts";
-import { flushSync } from "react-dom";
+import { ProblemSubmissionResultV2 } from "../types/apiTypes.ts";
 
 export default function Solve() {
   const params = useParams();
@@ -71,6 +71,13 @@ export default function Solve() {
             expected_output: t.output,
           }))
         : [],
+    }).catch((e: Response) => {
+      return e.json().then((data: any) => {
+        if (data.detail) throw Error(data.detail);
+        else {
+          throw Error("코드 제출에 실패했습니다. 운영팀에게 문의해주세요.");
+        }
+      });
     });
     res
       .then(() => getProblemSubmissionV2(problemNumber))
@@ -100,14 +107,20 @@ export default function Solve() {
                 });
               }
               break;
+            case "unknown":
+              console.error(`Unknown data: ${data}`);
+              break;
             default:
               unreachable(type);
           }
         }
       })
       .catch((e) => {
-        console.error(e);
-        alert("모집이 기간이 아닙니다.");
+        if (e instanceof Error) {
+          alert(e.message);
+        } else {
+          alert("채점 결과 조회에 실패했습니다. 운영팀에게 문의 바랍니다.");
+        }
       });
     setIsSubmitting(false);
   };