Skip to content
This repository has been archived by the owner on Sep 20, 2024. It is now read-only.

Commit

Permalink
feat : problem page
Browse files Browse the repository at this point in the history
  • Loading branch information
kasterra committed Mar 21, 2024
1 parent 30f956a commit 81d1f6f
Show file tree
Hide file tree
Showing 5 changed files with 242 additions and 17 deletions.
2 changes: 1 addition & 1 deletion app/API/problem.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export async function postSolveProblem(
token: string
) {
const fileUploadResponse = await uploadFile(file, token);
if (fileUploadResponse.status !== 201) {
if (fileUploadResponse.status !== 200) {
return { status: fileUploadResponse.status };
}
const file_path = (fileUploadResponse as SuccessUploadFileResponse).data.path;
Expand Down
4 changes: 4 additions & 0 deletions app/css/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,7 @@ body {
display: flex;
flex-direction: column;
}

button {
cursor: pointer;
}
35 changes: 20 additions & 15 deletions app/routes/_procted+/lectures+/$lectureId+/$labId/SubmitModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,21 +38,26 @@ const SubmitModal = ({ isOpen, onClose }: Props) => {
textList={["C", "Java", "Python", "Text"]}
onChange={setLanguage as (value: string) => void}
/>
<span className={inputStyle.title}>코드로 작성하여 제출</span>
<CodeBlock
height={500}
language={language}
value={code}
onChange={setCode}
/>
<MultipleFileInput
title="파일로 제출"
name="files"
onFileUpload={async (files) => {
setFileList(files);
}}
description="main이 있는 파일을 첫번째 파일로 제출해 주세요."
/>

<div className={styles.flex}>
<MultipleFileInput
title="파일로 제출"
name="files"
onFileUpload={async (files) => {
setFileList(files);
}}
/>
<div>
<span className={inputStyle.title}>코드로 작성하여 제출</span>
<CodeBlock
height={500}
language={language}
value={code}
onChange={setCode}
/>
</div>
</div>

<button className={formStyles["primary-button"]} type="submit">
제출
</button>
Expand Down
138 changes: 138 additions & 0 deletions app/routes/_procted+/lectures+/$lectureId+/$labId/index.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,141 @@
flex-direction: column;
gap: 16px;
}

.aside {
display: flex;
}

.problem-meta {
width: 100%;
display: flex;
justify-content: space-between;
}

.pdf-top {
width: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}

.table-row {
display: flex;
color: #101828;
font-size: 20px;
font-style: normal;
font-weight: 400;
border: 1px solid #eaecf0;
}

.table-row > div {
width: 140px;
height: 160px;
display: flex;
justify-content: center;
align-items: center;
}

.table-row > div:not(:last-child) {
border-right: 1px solid #eaecf0;
}

.table-title {
color: #101828;
font-size: 25px;
font-style: normal;
font-weight: 700;
}

.top-right {
display: flex;
gap: 40px;
}

.table-col {
color: #101828;
font-size: 20px;
font-style: normal;
font-weight: 400;
border: 1px solid #eaecf0;
}

.table-col > div {
width: 200px;
height: 72px;
display: flex;
justify-content: center;
align-items: center;
}

.table-col > div:not(:last-child) {
border-bottom: 1px solid #eaecf0;
}

.submit-buttons {
display: flex;
flex-direction: column;
gap: 20px;
}

.submit-button {
display: flex;
justify-content: center;
align-items: center;
width: 138px;
height: 68px;
color: #101828;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 20px;
border: 1px solid #eaecf0;
background: none;
}

.problem-edit {
position: absolute;
display: flex;
gap: 20px;
right: 0;
}

.pdf {
width: 1130px;
height: 1460px;
}

.problem-title {
font-size: 30px;
font-weight: 700;
}

.delete-button {
width: 146px;
height: 45px;
background-color: #da1e28;
display: flex;
justify-content: center;
align-items: center;
color: white;
border: none;
cursor: pointer;
}

.edit-button {
width: 146px;
height: 45px;
background-color: #0880ae;
display: flex;
justify-content: center;
align-items: center;
color: white;
border: none;
cursor: pointer;
}

.flex {
display: flex;
gap: 50px;
}
80 changes: 79 additions & 1 deletion app/routes/_procted+/lectures+/$lectureId+/$labId/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,83 @@
import { useNavigate, useParams } from "@remix-run/react";
import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import { getProblemWithProblemId } from "~/API/lecture";
import { useAuth } from "~/contexts/AuthContext";
import {
SimpleProblemDetail,
SuccessProblemDetailResponse,
isSuccessResponse,
} from "~/types/APIResponse";
import { STATIC_SERVER_URL } from "~/util/constant";
import styles from "./index.module.css";
import SubmitModal from "./SubmitModal";

const LabDetail = () => {
return <div>labdetail</div>;
const navigate = useNavigate();
const auth = useAuth();
const { labId } = useParams();

const [problemDetail, setProblemDetail] = useState<SimpleProblemDetail>();
const [loading, setLoading] = useState(true);
const [isSubmitModalOpen, setIsSubmitModalOpen] = useState(false);
useEffect(() => {
async function getData() {
const response = await getProblemWithProblemId(
parseInt(labId!),
auth.token
);
if (isSuccessResponse(response)) {
setProblemDetail((response as SuccessProblemDetailResponse).data);
setLoading(false);
} else {
toast.error("잘못된 접근입니다");
navigate("/");
}
}
getData();
}, []);
return loading ? null : (
<div>
<div className={styles["problem-meta"]}>
<div className={styles["table-row"]}>
<div className={styles["table-title"]}>마감 시간</div>
<div>01/01 08:00</div>
<div className={styles["table-title"]}>남은 시간</div>
<div>1일 8시간 30분</div>
</div>
<div className={styles["top-right"]}>
<div className={styles["table-col"]}>
<div className={styles["table-title"]}>문제 점수</div>
<div>0/0</div>
</div>
<div className={styles["submit-buttons"]}>
<button className={styles["submit-button"]}>채점 기록</button>
<button
className={styles["submit-button"]}
onClick={() => setIsSubmitModalOpen(true)}
>
정답 제출
</button>
</div>
</div>
</div>
<div className={styles["pdf-top"]}>
<h1 className={styles["problem-title"]}>{problemDetail!.title}</h1>
<div className={styles["problem-edit"]}>
<button className={styles["delete-button"]}>문제 삭제하기</button>
<button className={styles["edit-button"]}>문제 수정하기</button>
</div>
</div>
<object
data={`${STATIC_SERVER_URL}/${problemDetail!.file_path}`}
className={styles.pdf}
></object>
<SubmitModal
isOpen={isSubmitModalOpen}
onClose={() => setIsSubmitModalOpen(false)}
/>
</div>
);
};

export default LabDetail;

0 comments on commit 81d1f6f

Please sign in to comment.