diff --git a/src/app/analysis/molecule/recommendTest.tsx b/src/app/analysis/molecule/recommendTest.tsx index 61282a9..1207b6d 100644 --- a/src/app/analysis/molecule/recommendTest.tsx +++ b/src/app/analysis/molecule/recommendTest.tsx @@ -1,6 +1,12 @@ import { Box, Button, Typography } from "@mui/material"; +import { useState } from "react"; +import RecommendTestModal from "./recommendTestModal"; const RecommendTest = () => { + const [isModalOpen, setIsModalOpen] = useState(false); + const handleModal = () => { + setIsModalOpen(!isModalOpen); + }; return ( { }, transition: "none", }} - href="/study/recommendations" + onClick={handleModal} > { + ); }; diff --git a/src/app/analysis/molecule/recommendTestModal.tsx b/src/app/analysis/molecule/recommendTestModal.tsx new file mode 100644 index 0000000..4ae0134 --- /dev/null +++ b/src/app/analysis/molecule/recommendTestModal.tsx @@ -0,0 +1,106 @@ +import CloseIcon from "@/public/icons/close-line.svg"; +import { NoHoverButton } from "@/src/components/elements/styledElements"; +import { globalTheme } from "@/src/components/globalStyle"; +import { Box, Modal, ThemeProvider, Typography } from "@mui/material"; +import { useRouter } from "next/navigation"; +interface RecommendTestModalProps { + isModalOpen: boolean; + handleModal: () => void; +} + +const RecommendTestModal: React.FC = ({ isModalOpen, handleModal }) => { + const router = useRouter(); + const gotoStudyMode = () => { + router.push("/study/recommendations"); + }; + const gotoExamMode = () => { + router.push("/exam/recommendations"); + }; + return ( + + + + + + + + + 문제 풀기 + + + 모드를 선택해주세요 + + + + + 공부 모드 + + + + + 시험 모드 + + + + + + + + ); +}; +export default RecommendTestModal; diff --git a/src/app/analysis/molecule/vulnerableSubjectItem.tsx b/src/app/analysis/molecule/vulnerableSubjectItem.tsx index e427861..661663d 100644 --- a/src/app/analysis/molecule/vulnerableSubjectItem.tsx +++ b/src/app/analysis/molecule/vulnerableSubjectItem.tsx @@ -1,5 +1,8 @@ import { Box, Button, Typography } from "@mui/material"; import ProgressBar from "../atom/progressBar"; +import { useRouter } from "next/navigation"; +import VulnerableSubjectModal from "./vulnerableSubjectModal"; +import { useState } from "react"; interface VulnerableSubjectItemProps { item: VulnerableSubject; @@ -7,6 +10,10 @@ interface VulnerableSubjectItemProps { } const VulnerableSubjectItem: React.FC = ({ item, index }) => { + const [isModalOpen, setIsModalOpen] = useState(false); + const handleModal = () => { + setIsModalOpen(!isModalOpen); + }; return ( = ({ item, ind borderRadius: "40px", padding: "8px 18px", }} - href="/learning" + onClick={handleModal} > = ({ item, ind + ); }; diff --git a/src/app/analysis/molecule/vulnerableSubjectModal.tsx b/src/app/analysis/molecule/vulnerableSubjectModal.tsx new file mode 100644 index 0000000..36a9927 --- /dev/null +++ b/src/app/analysis/molecule/vulnerableSubjectModal.tsx @@ -0,0 +1,111 @@ +import CloseIcon from "@/public/icons/close-line.svg"; +import { NoHoverButton } from "@/src/components/elements/styledElements"; +import { globalTheme } from "@/src/components/globalStyle"; +import { Box, Modal, ThemeProvider, Typography } from "@mui/material"; +import { useRouter } from "next/navigation"; +interface vulnerableSubjectModalProps { + isModalOpen: boolean; + handleModal: () => void; + subjectId: number; +} + +const vulnerableSubjectModal: React.FC = ({ + isModalOpen, + handleModal, + subjectId, +}) => { + const router = useRouter(); + const gotoStudyMode = () => { + router.push("/study/vulnerable-subjects/" + subjectId); + }; + const gotoExamMode = () => { + router.push("/exam/vulnerable-subjects/" + subjectId); + }; + return ( + + + + + + + + + 문제 풀기 + + + 모드를 선택해주세요 + + + + + 공부 모드 + + + + + 시험 모드 + + + + + + + + ); +}; +export default vulnerableSubjectModal; diff --git a/src/app/analysis/organism/studyCurrentOrganism.tsx b/src/app/analysis/organism/studyCurrentOrganism.tsx index fcbc464..7c8b36c 100644 --- a/src/app/analysis/organism/studyCurrentOrganism.tsx +++ b/src/app/analysis/organism/studyCurrentOrganism.tsx @@ -3,6 +3,7 @@ import { Box, Button, CircularProgress, Typography } from "@mui/material"; import StudyCurrentBox from "../molecule/studyCurrentBox"; import { useEffect, useState } from "react"; import { mainfetch } from "@/src/api/apis/mainFetch"; +import LodingUI from "@/src/components/lodingUI"; const StudyCurrentOrganism = () => { const [analysisToday, setAnalysisToday] = useState(); const [isLoading, setIsLoading] = useState(true); @@ -27,18 +28,7 @@ const StudyCurrentOrganism = () => { }, []); if (isLoading) { - return ( - - - - ); + return ; } return ( { }; if (loading) { - return
로딩중...
; + return ; } if (!isCertified) { diff --git a/src/app/bookmark/components/mobileBookMarkMain.tsx b/src/app/bookmark/components/mobileBookMarkMain.tsx index 0330dee..fe4c103 100644 --- a/src/app/bookmark/components/mobileBookMarkMain.tsx +++ b/src/app/bookmark/components/mobileBookMarkMain.tsx @@ -30,7 +30,7 @@ const MobileBookMarkMain = () => { const [selectedSubjectsId, setSelectedSubjectsId] = useState([]); const [page, setPage] = useState(0); const [isProcessing, setIsProcessing] = useState(false); - const { bookmarkedProblems, totalPage } = useBookmarks({ + const { bookmarkedProblems, totalPage, totalCount } = useBookmarks({ selectedExamId, selectedSubjectsId, page, @@ -277,7 +277,7 @@ const MobileBookMarkMain = () => { 총  - {problems.length} + {totalCount} 개의 북마크 diff --git a/src/app/bookmark/page.tsx b/src/app/bookmark/page.tsx index 560e2f4..67aac13 100644 --- a/src/app/bookmark/page.tsx +++ b/src/app/bookmark/page.tsx @@ -2,10 +2,6 @@ import BookMarkSize from "./components/bookMarkSize"; const BookMarkPage = () => { - return ( - <> - - - ); + return ; }; export default BookMarkPage; diff --git a/src/app/exam/[problems]/page.tsx b/src/app/exam/[...problems]/page.tsx similarity index 100% rename from src/app/exam/[problems]/page.tsx rename to src/app/exam/[...problems]/page.tsx diff --git a/src/app/study/[problems]/page.tsx b/src/app/study/[...problems]/page.tsx similarity index 100% rename from src/app/study/[problems]/page.tsx rename to src/app/study/[...problems]/page.tsx diff --git a/src/app/study/components/studyMainUI.tsx b/src/app/study/components/studyMainUI.tsx index 4659256..bd8d8d5 100644 --- a/src/app/study/components/studyMainUI.tsx +++ b/src/app/study/components/studyMainUI.tsx @@ -216,7 +216,21 @@ const StudyMainUI: React.FC = ({ }} > - + {problem ? ( <> = ({ )} - = ({ } sx={{ flex: 1 }} /> - + */} {problem && (tabValue === 0 ? ( { isLogin={isLogin} handleLogout={handleLogout} certificate={certificate} - fontColor={"white"} + fontColor={background ? "white" : "black"} focusTap={focusTap} - isScroll={30} + isScroll={background ? 30 : 50} /> = ({ diff --git a/src/components/lodingUI.tsx b/src/components/lodingUI.tsx new file mode 100644 index 0000000..421f60b --- /dev/null +++ b/src/components/lodingUI.tsx @@ -0,0 +1,18 @@ +import { Box, CircularProgress } from "@mui/material"; + +const LodingUI = () => { + return ( + + + + ); +}; + +export default LodingUI; diff --git a/src/hooks/useBookmarks.ts b/src/hooks/useBookmarks.ts index c72de55..d321356 100644 --- a/src/hooks/useBookmarks.ts +++ b/src/hooks/useBookmarks.ts @@ -49,6 +49,8 @@ const useBookmarks = (props: BookMarkProblemsProps) => { const fetchBookmarks = async () => { if (props.selectedSubjectsId.length === 0) { setBookmarkedProblems([]); + setTotalPage(0); + setTotalCount(0); return; } @@ -79,6 +81,10 @@ const useBookmarks = (props: BookMarkProblemsProps) => { fetchBookmarks(); } }, [props.selectedExamId, props.selectedSubjectsId, props.page, loading]); + + // const handleSelectSubjects = () => { + + // } return { bookmarkedProblems, totalPage, totalCount, isCertified, certificateInfo, loading }; }; diff --git a/src/hooks/useProblems.tsx b/src/hooks/useProblems.tsx index 2f0ef73..ce62e95 100644 --- a/src/hooks/useProblems.tsx +++ b/src/hooks/useProblems.tsx @@ -1,4 +1,4 @@ -import { usePathname } from "next/navigation"; +import { usePathname, useRouter } from "next/navigation"; import { useEffect, useState } from "react"; import { mainfetch } from "../api/apis/mainFetch"; @@ -8,11 +8,14 @@ const useProblems = () => { const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const path = usePathname().split("/exam/")[1] ?? usePathname().split("/study/")[1]; + const router = useRouter(); + useEffect(() => { + const isLogin = localStorage.getItem("accessToken") ? true : false; if (path.includes("bookmark")) { const problems = localStorage.getItem("bookmarkProblems"); if (!problems) { - setError("Error"); + router.push("/"); } const getBookmarkProblems = problems ? JSON.parse(problems) : []; const newProblems = getBookmarkProblems.problems.map((problem: Problem, index: number) => { @@ -27,10 +30,64 @@ const useProblems = () => { setgetProblems(newProblems); setCertificateInfo(getBookmarkProblems.certificateInfo); setLoading(false); + } else if (path.includes("recommendations")) { + const fetchProblems = async () => { + try { + const response = await mainfetch( + "/problems/recommendations", + { method: "GET" }, + isLogin + ); + const data = await response.json(); + const newProblems = data.problems.map((problem: Problem, index: number) => { + return { + ...problem, + chooseNumber: -1, + viewSolution: false, + viewTheory: false, + problemNumber: index + 1, + }; + }); + setgetProblems(newProblems); + setCertificateInfo(data.certificateInfo); + } catch (err: any) { + router.push("/"); + } finally { + setLoading(false); + } + }; + fetchProblems(); + } else if (path.includes("vulnerable")) { + const fetchProblems = async () => { + try { + const response = await mainfetch("/problems/" + path, { method: "GET" }, isLogin); + const data = await response.json(); + const newProblems = data.problems.map((problem: Problem, index: number) => { + return { + ...problem, + chooseNumber: -1, + viewSolution: false, + viewTheory: false, + problemNumber: index + 1, + }; + }); + setgetProblems(newProblems); + setCertificateInfo(data.certificateInfo); + } catch (err: any) { + router.push("/"); + } finally { + setLoading(false); + } + }; + fetchProblems(); } else { const fetchProblems = async () => { try { - const response = await mainfetch("/problems/set?" + path, { method: "GET" }, false); + const response = await mainfetch( + "/problems/set?" + path, + { method: "GET" }, + isLogin + ); const data = await response.json(); // 선택 정답을 추가한 데이터 const newProblems = data.problems.map((problem: Problem, index: number) => { @@ -45,7 +102,7 @@ const useProblems = () => { setgetProblems(newProblems); setCertificateInfo(data.certificateInfo); } catch (err: any) { - setError(err.message); + router.push("/"); } finally { setLoading(false); }