feat : classImplementation problem Main preview + type typo fix

app/components/CodeBlock/index.tsx

@@ -1,8 +1,8 @@
 import Editor, { useMonaco } from "@monaco-editor/react";
-import { lanugage } from "~/types";
+import { language } from "~/types";
 
 interface Props {
-  language: lanugage;
+  language: language;
   value: string;
   height: number | string;
   onChange: (arg: string) => void;

app/routes/_procted+/lectures+/$lectureId+/$practiceId+/$labId/SubmitModal.tsx

@@ -6,7 +6,7 @@ import inputStyle from "~/components/Input/input.module.css";
 import RadioGroup from "~/components/Radio/RadioGroup";
 import CodeBlock from "~/components/CodeBlock";
 import MultipleFileInput from "~/components/Input/MultipleFileInput";
-import { lanugage } from "~/types";
+import { language } from "~/types";
 import { submit } from "~/API/submission";
 import { useAuth } from "~/contexts/AuthContext";
 import { useNavigate, useParams } from "@remix-run/react";
@@ -27,7 +27,7 @@ const SubmitModal = ({ isOpen, onClose }: Props) => {
   const navigate = useNavigate();
   const [code, setCode] = useState("");
   const [fileList, setFileList] = useState<FileList | null>(null);
-  const [language, setLanguage] = useState<lanugage>("c");
+  const [language, setLanguage] = useState<language>("c");
   const [entryPoint, setEntryPoint] = useState("");
   const [isLoading, setIsLoading] = useState(true);
   const [problemDetail, setProblemDetail] = useState<SimpleProblemDetail>();
@@ -91,7 +91,7 @@ const SubmitModal = ({ isOpen, onClose }: Props) => {
         </form>
       ) : (
         <form
-          className={styles["modal-body"]}
+          className={styles["modal-section"]}
           onSubmit={async (e) => {
             e.preventDefault();
             const formData = new FormData(e.currentTarget);
@@ -108,64 +108,77 @@ const SubmitModal = ({ isOpen, onClose }: Props) => {
             );
           }}
         >
-          <RadioGroup
-            title="프로그래밍 언어"
-            name="language"
-            valueList={["c", "cpp", "java", "python", "plaintext"]}
-            textList={["C", "c++", "Java", "Python", "Text"]}
-            onChange={setLanguage as (value: string) => void}
-          />
+          <div className={styles["modal-body"]}>
+            <RadioGroup
+              title="프로그래밍 언어"
+              name="language"
+              valueList={["c", "cpp", "java", "python", "plaintext"]}
+              textList={["C", "c++", "Java", "Python", "Text"]}
+              onChange={setLanguage as (value: string) => void}
+              defaultValue={problemDetail?.prepared_main?.language || undefined}
+            />
 
-          <div className={styles.flex}>
-            {fileList && fileList.length > 1 ? (
-              <RadioGroup
-                title="엔트리 포인트 설정"
-                name="entrypoint"
-                valueList={[...fileList].map((file) => file.name)}
-                textList={[...fileList].map((file) => file.name)}
-                onChange={setEntryPoint as (value: string) => void}
+            <div className={styles.flex}>
+              {fileList && fileList.length > 1 ? (
+                <RadioGroup
+                  title="엔트리 포인트 설정"
+                  name="entrypoint"
+                  valueList={[...fileList].map((file) => file.name)}
+                  textList={[...fileList].map((file) => file.name)}
+                  onChange={setEntryPoint as (value: string) => void}
+                />
+              ) : null}
+              <MultipleFileInput
+                title="파일로 제출"
+                name="files"
+                onFileUpload={async (files) => {
+                  setFileList(files);
+                }}
               />
-            ) : null}
-            <MultipleFileInput
-              title="파일로 제출"
-              name="files"
-              onFileUpload={async (files) => {
-                setFileList(files);
-              }}
+              {!fileList || fileList.length === 0 ? (
+                <div style={{ display: "flex", flexDirection: "column" }}>
+                  <span className={inputStyle.title}>코드로 작성하여 제출</span>
+                  <CodeBlock
+                    height={500}
+                    language={language}
+                    value={code}
+                    onChange={setCode}
+                  />
+                  {language === "c" ? (
+                    <span style={{ color: "red" }}>
+                      void main()은 비표준 입니다. <br />
+                      정상적인 채점 결과를 위해 int main을 사용해 주세요
+                    </span>
+                  ) : null}
+                  {language === "java" ? (
+                    <span style={{ color: "red" }}>
+                      Java에서 코드 작성 제출의 경우 엔트리 포인트 클래스 이름이
+                      <br />
+                      <strong>Main</strong>이어야 합니다
+                    </span>
+                  ) : null}
+                </div>
+              ) : null}
+            </div>
+
+            <button
+              className={formStyles["primary-button"]}
+              type="submit"
+              disabled={!fileList && code.length === 0}
+            >
+              제출
+            </button>
+          </div>
+          <div className={styles["modal-body"]} style={{ minWidth: "500px" }}>
+            <h4>주어진 Main 코드 : {problemDetail!.prepared_main.code.name}</h4>
+            <CodeBlock
+              height={500}
+              language={problemDetail!.prepared_main.language}
+              value={problemDetail!.prepared_main.code.content}
+              onChange={() => null}
+              readOnly
             />
-            {!fileList || fileList.length === 0 ? (
-              <div style={{ display: "flex", flexDirection: "column" }}>
-                <span className={inputStyle.title}>코드로 작성하여 제출</span>
-                <CodeBlock
-                  height={500}
-                  language={language}
-                  value={code}
-                  onChange={setCode}
-                />
-                {language === "c" ? (
-                  <span style={{ color: "red" }}>
-                    void main()은 비표준 입니다. <br />
-                    정상적인 채점 결과를 위해 int main을 사용해 주세요
-                  </span>
-                ) : null}
-                {language === "java" ? (
-                  <span style={{ color: "red" }}>
-                    Java에서 코드 작성 제출의 경우 엔트리 포인트 클래스 이름이
-                    <br />
-                    <strong>Main</strong>이어야 합니다
-                  </span>
-                ) : null}
-              </div>
-            ) : null}
           </div>
-
-          <button
-            className={formStyles["primary-button"]}
-            type="submit"
-            disabled={!fileList && code.length === 0}
-          >
-            제출
-          </button>
         </form>
       )}
     </Modal>

app/routes/_procted+/lectures+/$lectureId+/$practiceId+/$labId/index.module.css

@@ -1,9 +1,16 @@
 .wrapper {
   max-width: 100vw;
 }
+
+.modal-section {
+  display: flex;
+  gap: 50px;
+}
+
 .modal-body {
   display: flex;
   flex-direction: column;
+  align-items: center;
   gap: 16px;
 }
 

app/routes/_procted+/lectures+/$lectureId+/_layout/ProblemAddModal.tsx

@@ -15,7 +15,7 @@ import {
 } from "~/API/problem";
 import { useAuth } from "~/contexts/AuthContext";
 import BlankPreviewModal from "./BlankPreviewModal";
-import { lanugage } from "~/types";
+import { language } from "~/types";
 import {
   getCodeFileExtension,
   problemTitles,
@@ -40,7 +40,7 @@ const ProblemAddModal = ({
   const [problemType, setProblemType] = useState<
     "blank" | "solving" | "class_implementation"
   >("solving");
-  const [language, setLanguage] = useState<lanugage>("c");
+  const [language, setLanguage] = useState<language>("c");
   const [codeString, setCodeString] = useState("");
   const [isPreviewModalOpen, setIsPreviewModalOpen] = useState(false);
   const auth = useAuth();
@@ -197,7 +197,7 @@ const ProblemAddModal = ({
                 <select
                   name="language"
                   id="language"
-                  onChange={(e) => setLanguage(e.target.value as lanugage)}
+                  onChange={(e) => setLanguage(e.target.value as language)}
                 >
                   <option value="c">C</option>
                   <option value="java">Java</option>
@@ -241,7 +241,7 @@ const ProblemAddModal = ({
                 <select
                   name="language"
                   id="language"
-                  onChange={(e) => setLanguage(e.target.value as lanugage)}
+                  onChange={(e) => setLanguage(e.target.value as language)}
                 >
                   <option value="c">C</option>
                   <option value="java">Java</option>

app/routes/_procted+/lectures+/$lectureId+/_layout/ProblemEditModal.tsx

@@ -19,7 +19,7 @@ import CodeBlock from "~/components/CodeBlock";
 import BlankPreviewModal from "./BlankPreviewModal";
 import SingleFileInput from "~/components/Input/SingleFileInput";
 import { uploadFile } from "~/API/media";
-import { lanugage } from "~/types";
+import { language } from "~/types";
 import { STATIC_SERVER_URL } from "~/util/constant";
 import { getCodeFileExtension, readFileAsServerFormat } from "~/util";
 import download from "~/assets/download.svg";
@@ -38,7 +38,7 @@ const ProblemEditModal = ({ isOpen, onClose, editingProblemId }: Props) => {
     "blank" | "solving" | "class_implementation"
   >("solving");
   const [prevProblemInfo, setPrevProblemInfo] = useState<SimpleProblemDetail>();
-  const [language, setLanguage] = useState<lanugage>("c");
+  const [language, setLanguage] = useState<language>("c");
   const [codeString, setCodeString] = useState("");
   const [isPreviewModalOpen, setIsPreviewModalOpen] = useState(false);
   const [dragFile, setDragFile] = useState<File | null>(null);
@@ -247,7 +247,7 @@ const ProblemEditModal = ({ isOpen, onClose, editingProblemId }: Props) => {
                   <select
                     name="language"
                     id="language"
-                    onChange={(e) => setLanguage(e.target.value as lanugage)}
+                    onChange={(e) => setLanguage(e.target.value as language)}
                     defaultValue={language}
                   >
                     <option value="c">C</option>
@@ -292,7 +292,7 @@ const ProblemEditModal = ({ isOpen, onClose, editingProblemId }: Props) => {
                   <select
                     name="language"
                     id="language"
-                    onChange={(e) => setLanguage(e.target.value as lanugage)}
+                    onChange={(e) => setLanguage(e.target.value as language)}
                   >
                     <option value="c">C</option>
                     <option value="java">Java</option>

app/types/APIResponse.ts

@@ -1,5 +1,5 @@
 import { codeHoles } from "~/util/codeHole";
-import { Lecture, ServerSideFile, judgeStatus, lanugage } from ".";
+import { Lecture, ServerSideFile, judgeStatus, language } from ".";
 
 export interface UserEntity {
   id: string;
@@ -103,7 +103,7 @@ export interface SimpleProblemDetail {
   parsed_code_elements: codeHoles;
   prepared_main: {
     code: ServerSideFile;
-    language: lanugage;
+    language: language;
   };
   testcases: {
     id: number;
@@ -164,7 +164,7 @@ export interface Submission {
   created_at: string;
   entrypoint: string;
   id: number;
-  language: lanugage;
+  language: language;
   message: string;
   progress: number;
   status: judgeStatus;

app/types/index.d.ts

@@ -22,7 +22,7 @@ export interface studentRow {
   userName: string;
 }
 
-export type lanugage =
+export type language =
   | "plaintext"
   | "python"
   | "java"

app/util/codeHole.ts

@@ -1,7 +1,7 @@
-import { lanugage } from "~/types";
+import { language } from "~/types";
 
 export interface codeHoles {
-  language: lanugage;
+  language: language;
   data: parsedCodeElement[][];
 }
 

app/util/index.ts

@@ -1,5 +1,5 @@
 import toast from "react-hot-toast";
-import { lanugage } from "~/types";
+import { language } from "~/types";
 
 export function semesterToString(semester: number) {
   switch (semester) {
@@ -141,7 +141,7 @@ export function readFileAsServerFormat(
   });
 }
 
-export function getCodeFileExtension(language: lanugage) {
+export function getCodeFileExtension(language: language) {
   switch (language) {
     case "c":
       return "c";