feat(submissionDetail) : show file results

kasterra · May 24, 2024 · fcaca60 · fcaca60
1 parent 5f05f24
commit fcaca60
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 0 deletions.
diff --git a/app/css/judge.module.css b/app/css/judge.module.css
@@ -17,3 +17,39 @@
 .error {
   color: #834ba9;
 }
+
+.file-rows {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 2px;
+}
+
+.file-row {
+  display: flex;
+  height: 20px;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.file-name {
+  font-size: 20px;
+}
+
+.icon-area {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.icon {
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+}
+
+.icon img {
+  width: 100%;
+  height: 100%;
+}
diff --git a/app/routes/_procted+/students+/$lectureId+/$labId+/history+/SubmissionDetailModal.tsx b/app/routes/_procted+/students+/$lectureId+/$labId+/history+/SubmissionDetailModal.tsx
@@ -2,12 +2,16 @@ import { useEffect, useState } from "react";
 import { getSubmissionWithSubmissionId } from "~/API/submission";
 import Modal from "~/components/Modal";
 import styles from "./index.module.css";
+import judgeStyles from "~/css/judge.module.css";
 import { useAuth } from "~/contexts/AuthContext";
 import CodeBlock from "~/components/CodeBlock";
 import TextInput from "~/components/Input/TextInput";
 import TextArea from "~/components/Input/TextArea";
 import { bytesToSize } from "~/util";
 import toast from "react-hot-toast";
+import download from "~/assets/download.svg";
+import pkg from "file-saver";
+const { saveAs } = pkg;
 
 interface Props {
   isOpen: boolean;
@@ -172,6 +176,93 @@ const SubmissionDetailModal = ({ isOpen, onClose, submissionId }: Props) => {
                       name=""
                       defaultValue={result.exit_code}
                     />
+                    {result.file_inputs && (
+                      <div className={styles.area}>
+                        <h3 className={styles.title}>파일 입력</h3>
+                        <div className={judgeStyles["file-rows"]}>
+                          {result.file_inputs!.map(
+                            (file: { name: string; content: string }) => (
+                              <div
+                                className={judgeStyles["file-row"]}
+                                onClick={() => {
+                                  saveAs(
+                                    new File([file.content], file.name),
+                                    file.name
+                                  );
+                                }}
+                              >
+                                <span className={judgeStyles["file-name"]}>
+                                  {file.name}
+                                </span>
+                                <div className={judgeStyles["icon-area"]}>
+                                  <div className={judgeStyles["icon"]}>
+                                    <img src={download} alt="download icon" />
+                                  </div>
+                                </div>
+                              </div>
+                            )
+                          )}
+                        </div>
+                      </div>
+                    )}
+                    {result.file_outputs && (
+                      <div className={styles.area}>
+                        <h3 className={styles.title}>내 파일 출력</h3>
+                        <div className={judgeStyles["file-rows"]}>
+                          {result.file_outputs!.map(
+                            (file: { name: string; content: string }) => (
+                              <div
+                                className={judgeStyles["file-row"]}
+                                onClick={() => {
+                                  saveAs(
+                                    new File([file.content], file.name),
+                                    file.name
+                                  );
+                                }}
+                              >
+                                <span className={judgeStyles["file-name"]}>
+                                  {file.name}
+                                </span>
+                                <div className={judgeStyles["icon-area"]}>
+                                  <div className={judgeStyles["icon"]}>
+                                    <img src={download} alt="download icon" />
+                                  </div>
+                                </div>
+                              </div>
+                            )
+                          )}
+                        </div>
+                      </div>
+                    )}
+                    {result.judge_file_outputs && (
+                      <div className={styles.area}>
+                        <h3 className={styles.title}>저지 파일 출력</h3>
+                        <div className={judgeStyles["file-rows"]}>
+                          {result.judge_file_outputs!.map(
+                            (file: { name: string; content: string }) => (
+                              <div
+                                className={judgeStyles["file-row"]}
+                                onClick={() => {
+                                  saveAs(
+                                    new File([file.content], file.name),
+                                    file.name
+                                  );
+                                }}
+                              >
+                                <span className={judgeStyles["file-name"]}>
+                                  {file.name}
+                                </span>
+                                <div className={judgeStyles["icon-area"]}>
+                                  <div className={judgeStyles["icon"]}>
+                                    <img src={download} alt="download icon" />
+                                  </div>
+                                </div>
+                              </div>
+                            )
+                          )}
+                        </div>
+                      </div>
+                    )}
                     {result.message && (
                       <TextArea
                         title="컴파일러 메세지"

diff --git a/app/routes/_procted+/students+/$lectureId+/$labId+/history+/index.module.css b/app/routes/_procted+/students+/$lectureId+/$labId+/history+/index.module.css
@@ -151,3 +151,19 @@
   gap: 10px;
   align-items: center;
 }
+
+.area {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 10px;
+}
+
+.title {
+  color: #756f86;
+  font-family: IBMPlexSans;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}