diff --git a/app/routes/_procted+/grade+/$lectureId+/index.module.css b/app/routes/_procted+/grade+/$lectureId+/index.module.css index 846549f..ce79018 100644 --- a/app/routes/_procted+/grade+/$lectureId+/index.module.css +++ b/app/routes/_procted+/grade+/$lectureId+/index.module.css @@ -25,3 +25,10 @@ .sidebar * { text-decoration: none; } + +.blue-link { + color: #3366ff; + text-decoration: underline; + margin: 0; + cursor: pointer; +} diff --git a/app/routes/_procted+/grade+/$lectureId+/index.tsx b/app/routes/_procted+/grade+/$lectureId+/index.tsx index 9d123b1..731f3a7 100644 --- a/app/routes/_procted+/grade+/$lectureId+/index.tsx +++ b/app/routes/_procted+/grade+/$lectureId+/index.tsx @@ -1,4 +1,9 @@ -import { MetaFunction, useNavigate, useParams } from "@remix-run/react"; +import { + MetaFunction, + useNavigate, + useParams, + useSearchParams, +} from "@remix-run/react"; import { ReactNode, useEffect, useRef, useState } from "react"; import { getLectureScoreBoard, reJudge } from "~/API/submission"; import TableBase from "~/components/Table/TableBase"; @@ -29,29 +34,35 @@ const TableHeader = () => { const auth = useAuth(); const lectureData = useLectureData(); const dispatchLectureData = useLectureDataDispatch(); + const [searchParams, setSearchParams] = useSearchParams(); const [lectureListLoading, setLectureListLoading] = useState(true); const [lectureList, setLectureList] = useState([]); + const [pastLectureList, setPastLectureList] = useState([]); + const [currentLectureList, setCurrentLectureList] = useState([]); + const [futureLectureList, setFutureLectureList] = useState([]); const [isOpen, setIsOpen] = useState(false); const containerRef = useRef(null); + const semester = searchParams.get("semester"); + useEffect(() => { const getLectureList = async () => { try { - if (lectureData.semester === "present") { + if (!semester || semester === "present") { const response = await getCurrentSemesterLectures( auth.userId, auth.token ); if (isSuccessResponse(response)) setLectureList((response as SuccessLecturesResponse).data); - } else if (lectureData.semester === "past") { + } else if (semester === "past") { const response = await getPreviousSemesterLectures( auth.userId, auth.token ); if (isSuccessResponse(response)) setLectureList((response as SuccessLecturesResponse).data); - } else if (lectureData.semester === "future") { + } else if (semester === "future") { const response = await getFutureSemesterLectures( auth.userId, auth.token @@ -59,13 +70,38 @@ const TableHeader = () => { if (isSuccessResponse(response)) setLectureList((response as SuccessLecturesResponse).data); } + const pastResponse = await getPreviousSemesterLectures( + auth.userId, + auth.token + ); + const currentResponse = await getCurrentSemesterLectures( + auth.userId, + auth.token + ); + const futureResponse = await getFutureSemesterLectures( + auth.userId, + auth.token + ); + if (isSuccessResponse(pastResponse)) { + setPastLectureList((pastResponse as SuccessLecturesResponse).data); + } + if (isSuccessResponse(currentResponse)) { + setCurrentLectureList( + (currentResponse as SuccessLecturesResponse).data + ); + } + if (isSuccessResponse(futureResponse)) { + setFutureLectureList( + (futureResponse as SuccessLecturesResponse).data + ); + } setLectureListLoading(false); } catch (error) { console.error(error); } }; getLectureList(); - }, [lectureData.semester]); + }, [searchParams.get("semester")]); const handleClickOutside = (event: MouseEvent) => { if ( @@ -95,6 +131,58 @@ const TableHeader = () => { alt={isOpen ? "열림" : "닫힘"} /> + {semester && semester !== "present" ? ( +

{ + setSearchParams({ semester: "present" }); + dispatchLectureData({ + type: "UPDATE_DATA", + payload: { + lectureName: currentLectureList[0].title, + semester: "present", + }, + }); + }} + > + 현재 강의 관리하러 가기 +

+ ) : null} + {semester !== "past" && pastLectureList.length > 0 ? ( +

{ + setSearchParams({ semester: "past" }); + dispatchLectureData({ + type: "UPDATE_DATA", + payload: { + lectureName: pastLectureList[0].title, + semester: "past", + }, + }); + }} + > + 과거 강의 관리하러 가기 +

+ ) : null} + + {semester !== "future" && futureLectureList.length > 0 ? ( +

{ + setSearchParams({ semester: "future" }); + dispatchLectureData({ + type: "UPDATE_DATA", + payload: { + lectureName: futureLectureList[0].title, + semester: "future", + }, + }); + }} + > + 미래 강의 관리하러 가기 +

+ ) : null} {isOpen ? (
@@ -112,7 +200,11 @@ const TableHeader = () => { semester: lectureData.semester, }, }); - navigate(`/grade/${lecture.id}`); + navigate( + `/grade/${lecture.id}${ + semester ? `?semester=${semester}` : "" + }` + ); }} > {lecture.title} @@ -134,6 +226,7 @@ const LectureScoreBoard = () => { "학번", "총점", ]); + const [searchParams, setSearchParams] = useSearchParams(); useEffect(() => { async function getData() { @@ -191,7 +284,7 @@ const LectureScoreBoard = () => { } } getData(); - }, [params.lectureId, isLoading]); + }, [params.lectureId, isLoading, searchParams.get("semester")]); return isLoading ? (

Loading...

diff --git a/app/routes/_procted+/grade+/index.tsx b/app/routes/_procted+/grade+/index.tsx index 1bea260..d11adca 100644 --- a/app/routes/_procted+/grade+/index.tsx +++ b/app/routes/_procted+/grade+/index.tsx @@ -3,6 +3,7 @@ import { useEffect } from "react"; import toast from "react-hot-toast"; import { getCurrentSemesterLectures } from "~/API/lecture"; import { useAuth } from "~/contexts/AuthContext"; +import { useLectureDataDispatch } from "~/contexts/LectureDataContext"; import { SuccessLecturesResponse, isSuccessResponse, @@ -10,6 +11,7 @@ import { const GradeRedirect = () => { const navigate = useNavigate(); + const dispatchLectureData = useLectureDataDispatch(); const auth = useAuth(); useEffect(() => { @@ -19,6 +21,13 @@ const GradeRedirect = () => { auth.token ); if (isSuccessResponse(response)) { + dispatchLectureData({ + type: "UPDATE_DATA", + payload: { + semester: "present", + lectureName: (response as SuccessLecturesResponse).data[0].title, + }, + }); navigate(`/grade/${(response as SuccessLecturesResponse).data[0].id}`); } } diff --git a/app/routes/_procted+/students+/$lectureId+/Table.tsx b/app/routes/_procted+/students+/$lectureId+/Table.tsx index f6b0fd1..27d2844 100644 --- a/app/routes/_procted+/students+/$lectureId+/Table.tsx +++ b/app/routes/_procted+/students+/$lectureId+/Table.tsx @@ -1,5 +1,5 @@ import { ReactNode, useEffect, useRef, useState } from "react"; -import { useNavigate, useParams } from "@remix-run/react"; +import { useNavigate, useParams, useSearchParams } from "@remix-run/react"; import TableBase from "~/components/Table/TableBase"; import styles from "./index.module.css"; import tableStyles from "~/components/Table/table.module.css"; @@ -40,32 +40,66 @@ const TableHeader = () => { const [lectureList, setLectureList] = useState([]); const [isOpen, setIsOpen] = useState(false); const [isUserAddModalOpen, setIsUserAddModalOpen] = useState(false); + const [searchParams, setSearchParams] = useSearchParams(); + const [pastLectureList, setPastLectureList] = useState([]); + const [currentLectureList, setCurrentLectureList] = useState([]); + const [futureLectureList, setFutureLectureList] = useState([]); const containerRef = useRef(null); + const semester = searchParams.get("semester"); + + console.log(futureLectureList); + useEffect(() => { const getLectureList = async () => { try { - if (lectureData.semester === "present") { + if (!semester || semester === "present") { const response = await getCurrentSemesterLectures( auth.userId, auth.token ); if (isSuccessResponse(response)) setLectureList((response as SuccessLecturesResponse).data); - } else if (lectureData.semester === "past") { + } else if (semester === "past") { const response = await getPreviousSemesterLectures( auth.userId, auth.token ); if (isSuccessResponse(response)) setLectureList((response as SuccessLecturesResponse).data); - } else if (lectureData.semester === "future") { + } else if (semester === "future") { const response = await getFutureSemesterLectures( auth.userId, auth.token ); - if (isSuccessResponse(response)) + if (isSuccessResponse(response)) { setLectureList((response as SuccessLecturesResponse).data); + } + } + const pastResponse = await getPreviousSemesterLectures( + auth.userId, + auth.token + ); + const currentResponse = await getCurrentSemesterLectures( + auth.userId, + auth.token + ); + const futureResponse = await getFutureSemesterLectures( + auth.userId, + auth.token + ); + if (isSuccessResponse(pastResponse)) { + setPastLectureList((pastResponse as SuccessLecturesResponse).data); + } + if (isSuccessResponse(currentResponse)) { + setCurrentLectureList( + (currentResponse as SuccessLecturesResponse).data + ); + } + if (isSuccessResponse(futureResponse)) { + setFutureLectureList( + (futureResponse as SuccessLecturesResponse).data + ); } setLectureListLoading(false); } catch (error) { @@ -73,7 +107,7 @@ const TableHeader = () => { } }; getLectureList(); - }, []); + }, [searchParams.get("semester")]); const handleClickOutside = (event: MouseEvent) => { if ( @@ -92,17 +126,76 @@ const TableHeader = () => { return (
- +
+ +
+ {semester && semester !== "present" ? ( +

{ + dispatchLectureData({ + type: "UPDATE_DATA", + payload: { + lectureName: currentLectureList[0].title, + semester: "present", + }, + }); + navigate( + `/students/${currentLectureList[0].id}?semester=present` + ); + }} + > + 현재 강의 관리하러 가기 +

+ ) : null} + {semester !== "past" && pastLectureList.length > 0 ? ( +

{ + dispatchLectureData({ + type: "UPDATE_DATA", + payload: { + lectureName: pastLectureList[0].title, + semester: "past", + }, + }); + navigate(`/students/${pastLectureList[0].id}?semester=past`); + }} + > + 과거 강의 관리하러 가기 +

+ ) : null} + {semester !== "future" && futureLectureList.length > 0 ? ( +

{ + dispatchLectureData({ + type: "UPDATE_DATA", + payload: { + lectureName: futureLectureList[0].title, + semester: "future", + }, + }); + navigate( + `/students/${futureLectureList[0].id}?semester=future` + ); + }} + > + 미래 강의 관리하러 가기 +

+ ) : null} +
+