modern-agile-team · rhehfl · Nov 4, 2024 · Oct 13, 2024 · Oct 16, 2024 · Oct 16, 2024
@@ -9,6 +9,7 @@
   </head>
   <body>
     <div id="root"></div>
+    <div id="modal-root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
@@ -12,7 +12,11 @@
   "dependencies": {
     "@tanstack/react-query": "^5.59.0",
     "@tanstack/react-query-devtools": "^5.59.0",
+    "@types/dompurify": "^3.0.5",
     "axios": "^1.7.7",
+    "dompurify": "^3.1.7",
+    "html-react-parser": "^5.1.18",
+    "query-string": "^9.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",

@@ -2,7 +2,14 @@ import Router from './route/Router';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 function App() {
-  const queryClient = new QueryClient();
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: Infinity,
+        gcTime: Infinity,
+      },
+    },
+  });
   return (
     <>
       <QueryClientProvider client={queryClient}>

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import ReactDom from 'react-dom';
+export default function ModalPortal({ children }: PropsWithChildren) {
+  const modalRoot = document.getElementById('modal-root') as HTMLElement;
+  return ReactDom.createPortal(children, modalRoot);
+}
@@ -1,6 +1,14 @@
 import axios from 'axios';
+import queryString from 'query-string';
+
 const api = axios.create({
   baseURL: import.meta.env.VITE_BASE_URL,
   timeout: 5000,
+  paramsSerializer: params => {
+    return queryString.stringify(params, {
+      skipEmptyString: true,
+      skipNull: true,
+    });
+  },
 });
 export default api;
@@ -3,7 +3,6 @@ axiosConfig.interceptors.request.use(config => {
   //요청 성공 직전 호출
   //헤더에 인가 토큰 부착
   //로컬스토리지에 저장한다고 가정한다면
-  console.log('asdasd');
   const accessToken: string | null = localStorage.getItem('Token');
   if (accessToken !== null) {
     config.headers.Authorization = `Bearer ${accessToken}`;

@@ -0,0 +1,13 @@
+import Quiz from '../types/Quiz';
+import api from './axios/instance';
+
+const quizzesApis = {
+  getquizzes: async (params?: {
+    sectionId?: number;
+    partId: number;
+  }): Promise<Quiz[]> => {
+    const response = await api.get('/quizzes', { params });
+    return response.data;
+  },
+};
+export default quizzesApis;