22.5 기 리크루팅 변경사항 반영 릴리즈

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

@@ -4,18 +4,19 @@ import { javascript } from "@codemirror/lang-javascript";
 import { useCallback, useState } from "react";
 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 { c } from "@codemirror/legacy-modes/mode/clike";
+// import { c, kotlin } from "@codemirror/legacy-modes/mode/clike";
+// import { swift } from "@codemirror/legacy-modes/mode/swift";
+import { LanguageCode, LanguageCodeV2 } from "../../../types/apiTypes";
 
 export const languages = [
   "C",
   "C++",
   "Java",
   "Javascript",
   "Python",
-  "Kotlin",
-  "Swift",
+  // "Kotlin",
+  // "Swift",
 ] as const;
 export type Language = (typeof languages)[number];
 export const languageSupports: Record<
@@ -27,8 +28,8 @@ export const languageSupports: Record<
   Java: java(),
   Javascript: javascript(),
   Python: python(),
-  Kotlin: StreamLanguage.define(kotlin),
-  Swift: StreamLanguage.define(swift),
+  // Kotlin: StreamLanguage.define(kotlin),
+  // Swift: StreamLanguage.define(swift),
 };
 
 export const languageCodes: Record<Language, LanguageCode> = {
@@ -37,14 +38,25 @@ export const languageCodes: Record<Language, LanguageCode> = {
   Java: LanguageCode.JAVA,
   Javascript: LanguageCode.JAVASCRIPT,
   Python: LanguageCode.PYTHON,
-  Kotlin: LanguageCode.KOTLIN,
-  Swift: LanguageCode.SWFIT,
+  // Kotlin: LanguageCode.KOTLIN,
+  // 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>
 
+// 코드에서 한글은 전부 지워주세요
 int main(void)
 {
   printf("Hello World!\\n");
@@ -63,27 +75,32 @@ int main()
     return 0;
 }`,
   Java: `// Java 클래스 이름은 반드시 Main으로 하여 제출해주세요
+// 코드에서 한글은 전부 지워주세요 
 class Main {
   public static void main(String[] args) {
     System.out.println("Hello World!");
   }
 }`,
-  Javascript: `console.log("Hello, world!");`,
-  Python: `print("Hello, world!")`,
-  Kotlin: `fun main(args: Array<String>) {
-    println("Hello, world!")
-}`,
-  Swift: `print("Hello, world!")`,
+  Javascript: `// 코드에서 한글은 전부 지워주세요
+console.log("Hello, world!");`,
+  Python: `# 코드에서 한글은 전부 지워주세요
+print("Hello, world!")`,
+  //   Kotlin: `// 코드에서 한글은 전부 지워주세요
+  // fun main(args: Array<String>) {
+  //   println("Hello, world!")
+  // }`,
+  //   Swift: `// 코드에서 한글은 전부 지워주세요
+  // print("Hello, world!")`,
 };
 
 export const languageVersions: Record<Language, string> = {
-  C: "gcc 9.2.0",
-  "C++": "g++ 9.2.0 (C++14)",
-  Java: "OpenJDK 13.0.1",
-  Javascript: "Node.js 18.15.0",
+  C: "gcc 12.2.0",
+  "C++": "g++ 12.2.0",
+  Java: "OpenJDK 17.0.12",
+  Javascript: "Node.js 18.19.0",
   Python: "Python 3.11.2",
-  Kotlin: "Kotlin 1.3.70",
-  Swift: "Swift 5.2.3",
+  // Kotlin: "Kotlin 1.3.70",
+  // Swift: "Swift 5.2.3",
 };
 
 // localStorage에 저장된 언어를 불러옴

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

src/pages/Dashboard.tsx

@@ -36,12 +36,12 @@ export default function Dashboard() {
           />
         </Title>
         <Description>
-          <MarkdownRenderer
+          {/* <MarkdownRenderer
             markdownString={`와플스튜디오의 21.5기 ${
               recruiting.id === 1 ? "루키" : "디자이너"
             }를 모집합니다.`}
             StyledWrapper={DescriptionMarkdownStyledWrapper}
-          />
+          /> */}
         </Description>
         <Information>
           <MarkdownRenderer
@@ -168,15 +168,15 @@ const Description = styled.p`
   margin-bottom: 3.5rem;
 `;
 
-const DescriptionMarkdownStyledWrapper = styled.div`
-  p {
-    color: #373737;
-    font-size: 2rem;
-    font-weight: 500;
-    line-height: 160%; /* 3.2rem */
-    letter-spacing: 0.08rem;
-  }
-`;
+// const DescriptionMarkdownStyledWrapper = styled.div`
+//   p {
+//     color: #373737;
+//     font-size: 2rem;
+//     font-weight: 500;
+//     line-height: 160%; /* 3.2rem */
+//     letter-spacing: 0.08rem;
+//   }
+// `;
 
 const Information = styled.div`
   margin-bottom: 3.4rem;