Feat(RecommendTest) : 추천 모의고사 기능 추가

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 (
     <Box
       sx={{
@@ -80,7 +86,7 @@ const RecommendTest = () => {
               },
               transition: "none",
             }}
-            href="/study/recommendations"
+            onClick={handleModal}
           >
             <Typography
               variant="h1"
@@ -97,6 +103,7 @@ const RecommendTest = () => {
           </Button>
         </Box>
       </Box>
+      <RecommendTestModal isModalOpen={isModalOpen} handleModal={handleModal} />
     </Box>
   );
 };

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<RecommendTestModalProps> = ({ isModalOpen, handleModal }) => {
+  const router = useRouter();
+  const gotoStudyMode = () => {
+    router.push("/study/recommendations");
+  };
+  const gotoExamMode = () => {
+    router.push("/exam/recommendations");
+  };
+  return (
+    <ThemeProvider theme={globalTheme}>
+      <Modal open={isModalOpen} onClose={handleModal}>
+        <Box
+          sx={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: {
+              xs: "70%",
+              sm: "60%",
+              md: "50%",
+              lg: "40%",
+              xl: "40%",
+            },
+
+            bgcolor: "background.paper",
+            boxShadow: 24,
+            p: 4,
+            borderRadius: "20px",
+          }}
+        >
+          <Box
+            sx={{
+              "&:hover": {
+                cursor: "pointer",
+              },
+            }}
+            onClick={handleModal}
+          >
+            <CloseIcon width={28} height={28} />
+          </Box>
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+            }}
+          >
+            <Typography variant="h1" fontSize={28} mb={6}>
+              문제 풀기
+            </Typography>
+            <Typography variant="body2" fontSize={24} mb={4}>
+              모드를 선택해주세요
+            </Typography>
+            <Box sx={{ display: "flex", justifyContent: "flex-end", my: 2 }}>
+              <NoHoverButton
+                onClick={gotoStudyMode}
+                sx={{
+                  mr: 3,
+                  border: "1.5px solid var(--c-gray2)",
+                  borderRadius: "40px",
+                  padding: "12px 28px",
+                  "&:hover": {
+                    border: "1.5px solid var(--c-sub3)",
+                    filter: "drop-shadow(0px 1px 12px rgba(0, 0, 0, 0.16))",
+                  },
+                }}
+              >
+                <Typography variant="h1" fontSize={20} color="var(--c-sub4)">
+                  공부 모드
+                </Typography>
+              </NoHoverButton>
+              <NoHoverButton
+                onClick={gotoExamMode}
+                sx={{
+                  border: "1.5px solid var(--c-gray2)",
+                  borderRadius: "40px",
+                  padding: "12px 28px",
+                  "&:hover": {
+                    border: "1.5px solid var(--c-sub3)",
+                    filter: "drop-shadow(0px 1px 12px rgba(0, 0, 0, 0.16))",
+                  },
+                }}
+              >
+                <Typography variant="h1" fontSize={20} color="var(--c-sub4)">
+                  시험 모드
+                </Typography>
+              </NoHoverButton>
+            </Box>
+          </Box>
+        </Box>
+      </Modal>
+    </ThemeProvider>
+  );
+};
+export default RecommendTestModal;

src/app/analysis/molecule/vulnerableSubjectItem.tsx

@@ -1,12 +1,19 @@
 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;
   index: number;
 }
 
 const VulnerableSubjectItem: React.FC<VulnerableSubjectItemProps> = ({ item, index }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const handleModal = () => {
+    setIsModalOpen(!isModalOpen);
+  };
   return (
     <Box
       sx={{
@@ -138,7 +145,7 @@ const VulnerableSubjectItem: React.FC<VulnerableSubjectItemProps> = ({ item, ind
             borderRadius: "40px",
             padding: "8px 18px",
           }}
-          href="/learning"
+          onClick={handleModal}
         >
           <Typography
             variant="h4"
@@ -152,6 +159,11 @@ const VulnerableSubjectItem: React.FC<VulnerableSubjectItemProps> = ({ item, ind
           </Typography>
         </Button>
       </Box>
+      <VulnerableSubjectModal
+        isModalOpen={isModalOpen}
+        handleModal={handleModal}
+        subjectId={item.subjectId}
+      />
     </Box>
   );
 };

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<vulnerableSubjectModalProps> = ({
+  isModalOpen,
+  handleModal,
+  subjectId,
+}) => {
+  const router = useRouter();
+  const gotoStudyMode = () => {
+    router.push("/study/vulnerable-subjects/" + subjectId);
+  };
+  const gotoExamMode = () => {
+    router.push("/exam/vulnerable-subjects/" + subjectId);
+  };
+  return (
+    <ThemeProvider theme={globalTheme}>
+      <Modal open={isModalOpen} onClose={handleModal}>
+        <Box
+          sx={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: {
+              xs: "70%",
+              sm: "60%",
+              md: "50%",
+              lg: "40%",
+              xl: "40%",
+            },
+
+            bgcolor: "background.paper",
+            boxShadow: 24,
+            p: 4,
+            borderRadius: "20px",
+          }}
+        >
+          <Box
+            sx={{
+              "&:hover": {
+                cursor: "pointer",
+              },
+            }}
+            onClick={handleModal}
+          >
+            <CloseIcon width={28} height={28} />
+          </Box>
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+            }}
+          >
+            <Typography variant="h1" fontSize={28} mb={6}>
+              문제 풀기
+            </Typography>
+            <Typography variant="body2" fontSize={24} mb={4}>
+              모드를 선택해주세요
+            </Typography>
+            <Box sx={{ display: "flex", justifyContent: "flex-end", my: 2 }}>
+              <NoHoverButton
+                onClick={gotoStudyMode}
+                sx={{
+                  mr: 3,
+                  border: "1.5px solid var(--c-gray2)",
+                  borderRadius: "40px",
+                  padding: "12px 28px",
+                  "&:hover": {
+                    border: "1.5px solid var(--c-sub3)",
+                    filter: "drop-shadow(0px 1px 12px rgba(0, 0, 0, 0.16))",
+                  },
+                }}
+              >
+                <Typography variant="h1" fontSize={20} color="var(--c-sub4)">
+                  공부 모드
+                </Typography>
+              </NoHoverButton>
+              <NoHoverButton
+                onClick={gotoExamMode}
+                sx={{
+                  border: "1.5px solid var(--c-gray2)",
+                  borderRadius: "40px",
+                  padding: "12px 28px",
+                  "&:hover": {
+                    border: "1.5px solid var(--c-sub3)",
+                    filter: "drop-shadow(0px 1px 12px rgba(0, 0, 0, 0.16))",
+                  },
+                }}
+              >
+                <Typography variant="h1" fontSize={20} color="var(--c-sub4)">
+                  시험 모드
+                </Typography>
+              </NoHoverButton>
+            </Box>
+          </Box>
+        </Box>
+      </Modal>
+    </ThemeProvider>
+  );
+};
+export default vulnerableSubjectModal;

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<AnalysisToday>();
   const [isLoading, setIsLoading] = useState(true);
@@ -27,18 +28,7 @@ const StudyCurrentOrganism = () => {
   }, []);
 
   if (isLoading) {
-    return (
-      <Box
-        sx={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          height: "300px", // 적절한 높이로 조정하세요
-        }}
-      >
-        <CircularProgress />
-      </Box>
-    );
+    return <LodingUI />;
   }
   return (
     <Box

src/app/bookmark/components/bookMarkMain.tsx

@@ -1,16 +1,16 @@
 "use client";
+import handleBookmarkModule from "@/src/api/apis/handleBookmark";
 import { mainfetch } from "@/src/api/apis/mainFetch";
-import { MiddleBoxColumn, NoHoverButton } from "@/src/components/elements/styledElements";
+import { NoHoverButton } from "@/src/components/elements/styledElements";
 import { globalTheme } from "@/src/components/globalStyle";
 import useBookmarks from "@/src/hooks/useBookmarks";
-import useCertificateInfo from "@/src/hooks/useCertificateInfo";
 import { Box, Button, Grid, SelectChangeEvent, ThemeProvider, Typography } from "@mui/material";
 import { useCallback, useEffect, useState } from "react";
 import BookMarkModal from "./bookmarkModal";
 import ExamChoice from "./examChoice";
 import BookmarkProblemList from "./problemList";
 import SubjectChoice from "./subjectChoice";
-import handleBookmarkModule from "@/src/api/apis/handleBookmark";
+import LodingUI from "@/src/components/lodingUI";
 
 const MAX_SELECTED_PROBLEMS = 100;
 
@@ -158,7 +158,7 @@ const BookMarkMain = () => {
   };
 
   if (loading) {
-    return <div>로딩중...</div>;
+    return <LodingUI />;
   }
 
   if (!isCertified) {

src/app/bookmark/components/mobileBookMarkMain.tsx

@@ -30,7 +30,7 @@ const MobileBookMarkMain = () => {
   const [selectedSubjectsId, setSelectedSubjectsId] = useState<number[]>([]);
   const [page, setPage] = useState<number>(0);
   const [isProcessing, setIsProcessing] = useState(false);
-  const { bookmarkedProblems, totalPage } = useBookmarks({
+  const { bookmarkedProblems, totalPage, totalCount } = useBookmarks({
     selectedExamId,
     selectedSubjectsId,
     page,
@@ -277,7 +277,7 @@ const MobileBookMarkMain = () => {
                 총&nbsp;
               </Typography>
               <Typography fontSize="18px" variant="subtitle1" color="var(--c-main)">
-                {problems.length}
+                {totalCount}
               </Typography>
               <Typography fontSize="18px" variant="subtitle1">
                 개의 북마크

src/app/bookmark/page.tsx

@@ -2,10 +2,6 @@
 import BookMarkSize from "./components/bookMarkSize";
 
 const BookMarkPage = () => {
-  return (
-    <>
-      <BookMarkSize />
-    </>
-  );
+  return <BookMarkSize />;
 };
 export default BookMarkPage;