From 81d1f6f227761f71e5df605bd26e103390849982 Mon Sep 17 00:00:00 2001 From: kasterra Date: Thu, 21 Mar 2024 16:14:26 +0900 Subject: [PATCH] feat : problem page --- app/API/problem.ts | 2 +- app/css/global.css | 4 + .../$lectureId+/$labId/SubmitModal.tsx | 35 +++-- .../$lectureId+/$labId/index.module.css | 138 ++++++++++++++++++ .../lectures+/$lectureId+/$labId/index.tsx | 80 +++++++++- 5 files changed, 242 insertions(+), 17 deletions(-) diff --git a/app/API/problem.ts b/app/API/problem.ts index 2ffabac..8a7931d 100644 --- a/app/API/problem.ts +++ b/app/API/problem.ts @@ -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; diff --git a/app/css/global.css b/app/css/global.css index 07c20f8..703ba50 100644 --- a/app/css/global.css +++ b/app/css/global.css @@ -7,3 +7,7 @@ body { display: flex; flex-direction: column; } + +button { + cursor: pointer; +} diff --git a/app/routes/_procted+/lectures+/$lectureId+/$labId/SubmitModal.tsx b/app/routes/_procted+/lectures+/$lectureId+/$labId/SubmitModal.tsx index a92ef50..40d058f 100644 --- a/app/routes/_procted+/lectures+/$lectureId+/$labId/SubmitModal.tsx +++ b/app/routes/_procted+/lectures+/$lectureId+/$labId/SubmitModal.tsx @@ -38,21 +38,26 @@ const SubmitModal = ({ isOpen, onClose }: Props) => { textList={["C", "Java", "Python", "Text"]} onChange={setLanguage as (value: string) => void} /> - 코드로 작성하여 제출 - - { - setFileList(files); - }} - description="main이 있는 파일을 첫번째 파일로 제출해 주세요." - /> + +
+ { + setFileList(files); + }} + /> +
+ 코드로 작성하여 제출 + +
+
+ diff --git a/app/routes/_procted+/lectures+/$lectureId+/$labId/index.module.css b/app/routes/_procted+/lectures+/$lectureId+/$labId/index.module.css index 68c4a7c..4976ca8 100644 --- a/app/routes/_procted+/lectures+/$lectureId+/$labId/index.module.css +++ b/app/routes/_procted+/lectures+/$lectureId+/$labId/index.module.css @@ -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; +} diff --git a/app/routes/_procted+/lectures+/$lectureId+/$labId/index.tsx b/app/routes/_procted+/lectures+/$lectureId+/$labId/index.tsx index 267bf96..89b14dd 100644 --- a/app/routes/_procted+/lectures+/$lectureId+/$labId/index.tsx +++ b/app/routes/_procted+/lectures+/$lectureId+/$labId/index.tsx @@ -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
labdetail
; + const navigate = useNavigate(); + const auth = useAuth(); + const { labId } = useParams(); + + const [problemDetail, setProblemDetail] = useState(); + 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 : ( +
+
+
+
마감 시간
+
01/01 08:00
+
남은 시간
+
1일 8시간 30분
+
+
+
+
문제 점수
+
0/0
+
+
+ + +
+
+
+
+

{problemDetail!.title}

+
+ + +
+
+ + setIsSubmitModalOpen(false)} + /> +
+ ); }; export default LabDetail;