feat: problem API v2 반영

src/apis/problem.ts

@@ -1,9 +1,11 @@
 import {
   Problem,
   ProblemSubmissionRequest,
+  ProblemSubmissionRequestV2,
   ProblemSubmissionResult,
+  ProblemSubmissionResultV2,
 } from "../types/apiTypes";
-import { getRequest, sseRequest } from "./utility";
+import { getRequest, postRequest, sseRequest } from "./utility";
 
 export const getProblemById = (problem_id: number) =>
   getRequest<Problem>(`/v1/problems/${problem_id}`);
@@ -21,3 +23,29 @@ export const postProblemSubmission = (
     {}, // headers
     true, // authorized
   );
+
+export const getProblemByIdV2 = (problem_id: number) =>
+  getRequest<Problem>(`/v2/problems/${problem_id}`);
+
+export const postProblemSubmissionV2 = (
+  problemSubmission: ProblemSubmissionRequestV2,
+) =>
+  postRequest<{ message: string }>(
+    "/v2/problems/submission",
+    problemSubmission,
+    {}, // headers
+    true, // authorized
+  );
+
+export const getProblemSubmissionV2 = (problem_id: number) =>
+  sseRequest<
+    | { type: "skip"; data: { items: [] } }
+    | { type: "message"; data: { items: ProblemSubmissionResultV2[] } }
+    | { type: "error"; data: { detail: string } }
+  >(
+    `/v2/problems/${problem_id}/submission`,
+    {}, // body
+    {}, // headers
+    true, // authorized
+    "GET", // method
+  );

src/apis/utility.ts

@@ -105,17 +105,18 @@ export const sseRequest = <Response extends { type: string; data: unknown }>(
   body: object,
   header: HeadersInit = {},
   authorized = true,
+  method: "GET" | "POST" = "POST",
 ): AsyncIterable<Response> => ({
   async *[Symbol.asyncIterator]() {
     const response = await fetch(`${BASE_URL}${url}`, {
-      method: "POST",
+      method,
       headers: {
         ...defaultCommonHeader,
         ...defaultPostHeader,
         ...header,
         ...(authorized ? authorizedHeader(getSsoToken()) : {}),
       },
-      body: JSON.stringify(body),
+      body: method === "POST" ? JSON.stringify(body) : undefined,
     });
     if (!response.ok) {
       throw response;

src/components/solve/CodeEditor/useLanguage.tsx

@@ -6,7 +6,7 @@ import { LanguageSupport, StreamLanguage } from "@codemirror/language";
 import { java } from "@codemirror/lang-java";
 import { c, kotlin } from "@codemirror/legacy-modes/mode/clike";
 import { swift } from "@codemirror/legacy-modes/mode/swift";
-import { LanguageCode } from "../../../types/apiTypes";
+import { LanguageCode, LanguageCodeV2 } from "../../../types/apiTypes";
 
 export const languages = [
   "C",
@@ -41,6 +41,16 @@ export const languageCodes: Record<Language, LanguageCode> = {
   Swift: LanguageCode.SWFIT,
 };
 
+export const languageCodesV2: Record<Language, LanguageCodeV2> = {
+  C: LanguageCodeV2.C,
+  "C++": LanguageCodeV2.CPP,
+  Java: LanguageCodeV2.JAVA,
+  Javascript: LanguageCodeV2.JAVASCRIPT,
+  Python: LanguageCodeV2.PYTHON,
+  Kotlin: LanguageCodeV2.KOTLIN,
+  Swift: LanguageCodeV2.SWIFT,
+};
+
 export const boilerplates: Record<Language, string> = {
   C: `#include <stdio.h>
 #include <stdlib.h>

src/components/solve/TestResultConsoleV2.tsx

@@ -0,0 +1,77 @@
+import styled from "styled-components";
+import { ProblemSubmissionResultV2 } from "../../types/apiTypes.ts";
+import { LegacyRef } from "react";
+
+type Props = {
+  results: ProblemSubmissionResultV2[];
+  error: string[];
+  ulRef?: LegacyRef<HTMLUListElement>;
+};
+
+export default function TestResultConsole(props: Props) {
+  return (
+    <Section>
+      <SectionTitle>Console</SectionTitle>
+      <ul ref={props.ulRef}>
+        {props.results.map((result) => (
+          <li key={result.num}>
+            <h4>{result.num}번 테스트케이스</h4>
+            <p>시간: {result.time}초</p>
+            <p>메모리: {result.memory}KB</p>
+            <Status $status={result.status}>결과: {result.status}</Status>
+            {result.stdout && (
+              <details>
+                <summary>출력</summary>
+                <pre>{result.stdout}</pre>
+              </details>
+            )}
+          </li>
+        ))}
+        {props.error.map((err, i) => (
+          <li key={i}>
+            <h4>에러 {i + 1}</h4>
+            <pre>{err}</pre>
+          </li>
+        ))}
+      </ul>
+    </Section>
+  );
+}
+
+const Section = styled.section`
+  border: 0.4rem solid #373737;
+  border-top-width: 0.2rem;
+  border-radius: 0.5rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+
+  h3 {
+    font-weight: bold;
+  }
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    line-height: 1.2;
+    overflow: auto;
+
+    h4 {
+      font-weight: bold;
+    }
+  }
+
+  /* Solve page layout */
+  flex: 1;
+`;
+
+const SectionTitle = styled.h3`
+  font-size: 1.6rem;
+`;
+
+const Status = styled.p<{ $status: string }>`
+  color: ${(props) => (props.$status === "CORRECT" ? "#2fa500" : "#ff0000")};
+`;

src/main.tsx

@@ -6,7 +6,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import GlobalStyles from "./GlobalStyles";
 import Home from "./pages/Home";
-import Solve from "./pages/Solve";
+import Solve from "./pages/SolveV2";
 import Resume from "./pages/Resume";
 import Recruit from "./pages/Recruit";
 import Dashboard from "./pages/Dashboard";