Feat(Search): 문제 검색 시 자격증 필터링

- 문제 검색은 무조건 자격증을 선택하여야 함 - 검색 페이지 입장 시 ID = 1인 자격증을 즉시 설정
Jabiseo · Sep 13, 2024 · 9b36983 · 9b36983
1 parent 0994f17
commit 9b36983
Show file tree

Hide file tree

Showing 21 changed files with 383 additions and 323 deletions.
diff --git a/src/api/apis/handleBookmark.ts b/src/api/apis/handleBookmark.ts
@@ -0,0 +1,63 @@
+import { mainfetch } from "./mainFetch";
+
+const handleBookmarkModule = async <T>(
+  targetProblem: Problem | ProblemViewType | BookMarkProblem | ProblemDetailType,
+  isProcessing: boolean,
+  setIsProcessing: React.Dispatch<React.SetStateAction<boolean>>,
+  callbackArray?: React.Dispatch<React.SetStateAction<T[]>>,
+  callbackObject?: React.Dispatch<React.SetStateAction<T>>
+) => {
+  if (isProcessing) return;
+
+  setIsProcessing(true);
+  if (callbackArray) {
+    callbackArray((problems: any) => {
+      return problems.map((problem: any) =>
+        problem.problemId === targetProblem.problemId
+          ? { ...problem, isBookmark: !targetProblem.isBookmark }
+          : problem
+      );
+    });
+  } else if (callbackObject) {
+    callbackObject((targetProblem: any) => {
+      return { ...targetProblem, isBookmark: !targetProblem.isBookmark };
+    });
+  }
+  try {
+    const method = targetProblem.isBookmark ? "DELETE" : "POST";
+    const endpoint = "/bookmarks";
+
+    const res = await mainfetch(
+      endpoint,
+      {
+        method,
+        body: {
+          problemId: targetProblem.problemId,
+        },
+      },
+      true
+    );
+
+    if (!res.ok) {
+      if (callbackArray) {
+        callbackArray((problems: any) => {
+          const handledProblems = problems.map((problem: any) =>
+            problem.problemId === targetProblem.problemId
+              ? { ...problem, isBookmark: targetProblem.isBookmark }
+              : problem
+          );
+          return handledProblems;
+        });
+      } else if (callbackObject) {
+        callbackObject((targetProblem: any) => {
+          return { ...targetProblem, isBookmark: targetProblem.isBookmark };
+        });
+      }
+    }
+  } catch (error) {
+  } finally {
+    setIsProcessing(false); // 처리 완료
+  }
+};
+
+export default handleBookmarkModule;
diff --git a/src/api/apis/interceptor.ts b/src/api/apis/interceptor.ts
@@ -10,7 +10,7 @@ export const refreshTokenInterceptor = async () => {
       "Content-Type": "application/json",
       Authorization: `Bearer ${accessToken}`,
     },
-    body: refreshToken,
+    body: JSON.stringify({ refreshToken }),
   })
     .then(res => res.json())
     .then(data => data.accessToken)

diff --git a/src/api/types/bookmark.ts b/src/api/types/bookmark.ts
@@ -5,3 +5,11 @@ interface BookMarkProblem {
   isBookmark: boolean;
   description: string;
 }
+
+interface handleBookmarkProps {
+  targetProblem: Problem;
+  isProcessing: boolean;
+  setIsProcessing: React.Dispatch<React.SetStateAction<boolean>>;
+  callbackArray?: React.Dispatch<React.SetStateAction<Problem[]>>;
+  callbackObject?: React.Dispatch<React.SetStateAction<Problem>>;
+}
diff --git a/src/app/bookmark/components/bookMarkMain.tsx b/src/app/bookmark/components/bookMarkMain.tsx
@@ -5,11 +5,12 @@ 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 { useEffect, useState } from "react";
+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";
 
 const MAX_SELECTED_PROBLEMS = 100;
 
@@ -94,38 +95,12 @@ const BookMarkMain = () => {
     }
   };
 
-  const handleBookmark = async (problemId: number) => {
-    if (isProcessing) return;
-
-    setIsProcessing(true);
-
-    try {
-      const targetProblem = problems.find(problem => problem.problemId === problemId);
-      if (!targetProblem) throw new Error("Problem not found");
-      const method = targetProblem.isBookmark ? "DELETE" : "POST";
-      const endpoint = "/bookmarks";
-
-      await mainfetch(
-        endpoint,
-        {
-          method,
-          body: {
-            problemId,
-          },
-        },
-        true
-      );
-
-      const handledProblems = problems.map(problem =>
-        problem.problemId === problemId ? { ...problem, isBookmark: !problem.isBookmark } : problem
-      );
-
-      setProblems(handledProblems);
-    } catch (error) {
-    } finally {
-      setIsProcessing(false); // 처리 완료
-    }
-  };
+  const handleBookmark = useCallback(
+    (problem: BookMarkProblem) => {
+      handleBookmarkModule<BookMarkProblem>(problem, isProcessing, setIsProcessing, setProblems);
+    },
+    [isProcessing, setIsProcessing, setProblems]
+  );
 
   const selectAllProblems = () => {
     const allProblems = problems.map(problem => problem.problemId);

diff --git a/src/app/bookmark/components/examChoice.tsx b/src/app/bookmark/components/examChoice.tsx
@@ -2,7 +2,6 @@ import { globalTheme } from "@/src/components/globalStyle";
 import {
   Box,
   FormControl,
-  InputLabel,
   MenuItem,
   Select,
   SelectChangeEvent,
@@ -58,11 +57,11 @@ const ExamChoice: React.FC<ExamChoiceProps> = ({
             >
               {exams.map((exam, index) => (
                 <MenuItem
-                  autoFocus={index === 1}
                   key={exam.examId}
                   value={exam.description}
                   sx={{
                     "&.Mui-selected": {
+                      "&.Mui-focusVisible": { background: "#44bbd429" },
                       backgroundColor: "#44bbd429",
                       color: "#44bbd429",
                     },

diff --git a/src/app/bookmark/components/mobileBookMarkMain.tsx b/src/app/bookmark/components/mobileBookMarkMain.tsx
@@ -5,12 +5,13 @@ import { globalTheme } from "@/src/components/globalStyle";
 import useBookmarks from "@/src/hooks/useBookmarks";
 import useCertificateInfo from "@/src/hooks/useCertificateInfo";
 import { Box, Button, Collapse, SelectChangeEvent, ThemeProvider, Typography } from "@mui/material";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import BookMarkModal from "./bookmarkModal";
 import BookMarkSlider from "./bookMarkSlider";
 import ExamChoice from "./examChoice";
 import BookmarkProblemList from "./problemList";
 import SubjectChoice from "./subjectChoice";
+import handleBookmarkModule from "@/src/api/apis/handleBookmark";
 
 const MAX_SELECTED_PROBLEMS = 100;
 
@@ -100,38 +101,12 @@ const MobileBookMarkMain = () => {
     }
   };
 
-  const handleBookmark = async (problemId: number) => {
-    if (isProcessing) return;
-
-    setIsProcessing(true);
-
-    try {
-      const targetProblem = problems.find(problem => problem.problemId === problemId);
-      if (!targetProblem) throw new Error("Problem not found");
-      const method = targetProblem.isBookmark ? "DELETE" : "POST";
-      const endpoint = "/bookmarks";
-
-      await mainfetch(
-        endpoint,
-        {
-          method,
-          body: {
-            problemId,
-          },
-        },
-        true
-      );
-
-      const handledProblems = problems.map(problem =>
-        problem.problemId === problemId ? { ...problem, isBookmark: !problem.isBookmark } : problem
-      );
-
-      setProblems(handledProblems);
-    } catch (error) {
-    } finally {
-      setIsProcessing(false); // 처리 완료
-    }
-  };
+  const handleBookmark = useCallback(
+    (problem: BookMarkProblem) => {
+      handleBookmarkModule<BookMarkProblem>(problem, isProcessing, setIsProcessing, setProblems);
+    },
+    [isProcessing, setIsProcessing, setProblems]
+  );
 
   const selectAllProblems = () => {
     const allProblems = problems.map(problem => problem.problemId);

diff --git a/src/app/bookmark/components/problemList.tsx b/src/app/bookmark/components/problemList.tsx
@@ -12,7 +12,7 @@ interface BookmarkProblemListProps {
   problems: BookMarkProblem[];
   selectedProblems: number[];
   selectProblem: (problemId: number) => void;
-  handleBookmark: (problemId: number) => void;
+  handleBookmark: (problem: BookMarkProblem) => void;
   totalPage: number;
   handleChangePage: (page: number) => void;
 }
@@ -122,7 +122,7 @@ const BookmarkProblemList: React.FC<BookmarkProblemListProps> = ({
 
                 <Box
                   onClick={() => {
-                    handleBookmark(problem.problemId);
+                    handleBookmark(problem);
                   }}
                 >
                   {problem.isBookmark ? (

diff --git a/src/app/exam/components/examMainUI.tsx b/src/app/exam/components/examMainUI.tsx
@@ -22,6 +22,7 @@ import SmallOmrUI from "../components/smallOmrUI";
 import ExamFooterUI from "./examFooterUI";
 import ExamInfoUI from "./examInfoUI";
 import SubmitResultUI from "./SubmitResultUI";
+import handleBookmarkModule from "@/src/api/apis/handleBookmark";
 
 interface ExamMainUIProps {
   getProblems: ProblemViewType[];
@@ -62,6 +63,11 @@ const ExamMainUI: React.FC<ExamMainUIProps> = ({
     setProblem(problems[problemNumber - 1]);
   }, [problemNumber, problems]);
 
+  useEffect(() => {
+    if (!problem) return;
+    setProblem(problems[problemNumber - 1]);
+  }, [problems]);
+
   const nextProblem = () => {
     if (problemNumber === problems.length) {
       return;
@@ -143,44 +149,10 @@ const ExamMainUI: React.FC<ExamMainUIProps> = ({
   };
 
   const handleBookmark = useCallback(
-    async (problemId: number) => {
-      if (isProcessing) return;
-      if (localStorage.getItem("accessToken") === null) {
-        return;
-      }
-
-      setIsProcessing(true);
-
-      try {
-        const targetProblem = problems.find(problem => problem.problemId === problemId);
-        if (!targetProblem) throw new Error("Problem not found");
-        const method = targetProblem.isBookmark ? "DELETE" : "POST";
-        const endpoint = "/bookmarks";
-
-        await mainfetch(
-          endpoint,
-          {
-            method,
-            body: {
-              problemId,
-            },
-          },
-          true
-        );
-
-        setProblems(prevProblems =>
-          prevProblems.map(problem =>
-            problem.problemId === problemId
-              ? { ...problem, isBookmark: !problem.isBookmark }
-              : problem
-          )
-        );
-      } catch (error) {
-      } finally {
-        setIsProcessing(false);
-      }
+    (problem: ProblemViewType) => {
+      handleBookmarkModule<ProblemViewType>(problem, isProcessing, setIsProcessing, setProblems);
     },
-    [isProcessing, problems, mainfetch]
+    [isProcessing, setIsProcessing, setProblems]
   );
 
   const theme = useTheme();

diff --git a/src/app/exam/components/problemUI.tsx b/src/app/exam/components/problemUI.tsx
@@ -15,7 +15,7 @@ const ProblemUI: React.FC<{
   problem: ProblemViewType;
   chooseAnswer: (number: number) => void;
   isSm: boolean;
-  handleBookmark: (problemId: number) => void;
+  handleBookmark: (problem: ProblemViewType) => void;
 }> = memo(({ problem, chooseAnswer, isSm, handleBookmark }) => {
   const [colors, setColors] = useState(["white", "white", "white", "white", "white"]);
   const changeColor = () => {
@@ -59,7 +59,7 @@ const ProblemUI: React.FC<{
               marginRight: 1,
             }}
             onClick={() => {
-              handleBookmark(problem.problemId);
+              handleBookmark(problem);
             }}
           >
             {problem.isBookmark ? (

diff --git a/src/app/problem/[certificate]/[problemid]/page.tsx b/src/app/problem/[certificate]/[problemid]/page.tsx
@@ -76,7 +76,7 @@ const ProblemMainPage = ({
       >
         <ProblemMain
           problem={problem}
-          setProblem={setProblem as Dispatch<SetStateAction<ProblemViewType>>}
+          setProblem={setProblem as Dispatch<SetStateAction<ProblemDetailType>>}
           goToSimilarProblem={goToSimilarProblem}
         />
       </MiddleBoxColumn>