Dev/Suspend/test

package.json

@@ -4,19 +4,16 @@
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
-    "@toast-ui/editor": "^3.1.3",
-    "@toast-ui/react-editor": "^3.1.3",
     "@tui-nuxt/editor": "^1.0.0-beta.3",
     "axios": "^0.26.0",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.4",
     "history": "^5.2.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-icons": "^4.3.1",
-    "react-modal": "^3.14.4",
+    "react-modal": "^3.15.1",
     "react-router": "^6.2.1",
     "react-router-dom": "^6.2.1",
     "react-scripts": "^5.0.1",

src/App.js

@@ -1,25 +1,25 @@
 import './App.css';
+import { Suspense } from 'react';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import CirclePage from './Component/CirclePage/CirclePage';
 import MyPage from './Component/MyPage/MyPage';
 import LoginPage from './Component/LoginPage/LoginPage';
 import RegisterPage from './Component/RegisterPage/RegisterPage';
 import ClubSearchPage from './Component/ClubSearchPage/ClubSearchPage';
 import LostPage from './Component/LostPage/LostPage';
+import ScrollTop from './Context/ScrollTop';
 //npm install -save react-scripts
 
 function App() {
   return (
-    <BrowserRouter>
-      <Routes>
-        <Route exact path="/" element={<ClubSearchPage />} />
-        <Route path="/circle/:circleName/:boardName/*" element={<CirclePage />} />
-        <Route exact path="/mypage" element={<MyPage />} />
-        <Route exact path="/login" element={<LoginPage />} />
-        <Route exact path="/register" element={<RegisterPage />} />
-        <Route exact path="/lost" element={<LostPage />} />
-      </Routes>
-    </BrowserRouter>
+    <Routes>
+      <Route exact path="/" element={<ClubSearchPage />} />
+      <Route path="/circle/:circleName/:boardName/*" element={<CirclePage />} />
+      <Route exact path="/mypage" element={<MyPage />} />
+      <Route exact path="/login" element={<LoginPage />} />
+      <Route exact path="/register" element={<RegisterPage />} />
+      <Route exact path="/lost" element={<LostPage />} />
+    </Routes>
   );
 }
 

src/Component/CirclePage/CirclePage.js

@@ -2,7 +2,7 @@ import styles from './CirclePage.module.scss';
 import { BiCalendar, BiSearchAlt2 } from 'react-icons/bi';
 import { AiFillTags } from 'react-icons/ai';
 import { BsPinAngle } from 'react-icons/bs';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, Suspense } from 'react';
 import QnAList from './QnA/QnAList/QnAList';
 import Header from '../Header/Header';
 import QnA from './QnA/QnA';
@@ -19,10 +19,12 @@ import RegisterPage from '../RegisterPage/RegisterPage';
 import classNames from 'classnames';
 import QnAItem from './QnA/QnAItem/QnAItem';
 
+import fetchData from '../../Functions/fetchData';
+
 const DummyMenuList = [{ name: '소개' }, { name: 'QnA' }, { name: '지원' }, { name: '커뮤니티' }];
 
 const CirclePage = () => {
-  const { accessToken, isLogin } = useSessionContext();
+  const { accessToken, refreshToken, isLogin, checkToken, refreshing, setRefreshing } = useSessionContext();
   const navigate = useNavigate();
   const params = useParams();
 
@@ -51,7 +53,7 @@ const CirclePage = () => {
         console.log(error);
       });
 
-    if (isLogin) {
+    if (isLogin && refreshing) {
       axios
         .get(`api/v1/circle/${params.circleName}/board/`, {
           headers: {
@@ -61,6 +63,7 @@ const CirclePage = () => {
         .then((response) => {
           setMenuList(response.data);
           setCurBoardId(response.data.find((item) => item.name === params.boardName).id);
+          setRefreshing(false);
         })
         .catch((error) => {
           console.log(error);
@@ -71,12 +74,13 @@ const CirclePage = () => {
         .then((response) => {
           setMenuList(response.data);
           setCurBoardId(response.data.find((item) => item.name === params.boardName).id);
+          setRefreshing(false);
         })
         .catch((error) => {
           console.log(error);
         });
     }
-  }, []);
+  }, [accessToken]);
 
   useEffect(() => {
     if (circleId !== null && curBoardId !== null && curBoardId !== undefined) {
@@ -85,9 +89,7 @@ const CirclePage = () => {
   }, [circleId, curBoardId]);
 
   const tempFunction = () => {
-    console.log(curBoardId);
-    console.log(circleId);
-    console.log(isLoad);
+    console.log(isLogin);
   };
 
   return (
@@ -128,15 +130,28 @@ const CirclePage = () => {
             </div>
           </div>
           <div className={styles.board_wrapper}>
-            {params.boardName === 'QnA' ? (
+            {params.boardName === 'QnA' && isLoad ? (
               <div className={styles.board_qna}>
                 <Routes>
                   <Route
                     exact
                     path="/:id"
                     element={<QnAItem circleId={circleId} curBoardId={curBoardId} isLoad={isLoad} />}
                   />
-                  <Route exact path="/" element={<QnA circleId={circleId} curBoardId={curBoardId} isLoad={isLoad} />} />
+                  <Route
+                    exact
+                    path="/"
+                    element={
+                      <Suspense fallback={<div>Loading...</div>}>
+                        <QnA
+                          circleId={circleId}
+                          curBoardId={curBoardId}
+                          isLoad={isLoad}
+                          resource={fetchData(circleId, curBoardId).qnaList}
+                        />
+                      </Suspense>
+                    }
+                  />
                 </Routes>
               </div>
             ) : null}

src/Component/CirclePage/QnA/QnA.js

@@ -16,15 +16,16 @@ import { AiOutlineSearch } from 'react-icons/ai';
 import axios from 'axios';
 
 const QnA = (props) => {
-  const { circleId, curBoardId, isLoad } = props;
+  const { circleId, curBoardId, isLoad, resource } = props;
+  const qnaList = circleId !== null && curBoardId !== null ? resource.read().articles : [];
   const params = useParams();
 
   const { isLogin, handleLogout } = useSessionContext();
   const { DummyQnA, PageNum } = useFunctionContext();
 
   const [search, setSearch] = useState('');
 
-  const [qnaList, setQnAList] = useState([]);
+  //const [qnaList, setQnAList] = useState([]);
   const [isLoginOpen, setIsLoginOpen] = useState(false);
   const [isWrite, setIsWrite] = useState(false);
 
@@ -40,7 +41,10 @@ const QnA = (props) => {
     }
   };
 
-  useEffect(() => {
+  const test = circleId !== null && curBoardId !== null ? console.log('sucess') : console.log('null case');
+  //const qnaList = circleId !== null && curBoardId !== null ? resource.qnaList.read().articles : [];
+
+  /*useEffect(() => {
     if (isLoad) {
       axios
         .get(`api/v1/circle/${circleId}/board/${curBoardId}/article/`)
@@ -52,7 +56,7 @@ const QnA = (props) => {
           console.log(error);
         });
     }
-  }, [isLoad, isWrite]);
+  }, [isLoad, isWrite]);*/
 
   return (
     <div className={styles.board_skel}>

src/Component/CirclePage/QnA/QnAItem/QnAComment/CommentWrite/CommentWrite.js

@@ -18,7 +18,7 @@ const CommentWrite = (props) => {
     if (isLogin) {
       axios
         .post(
-          `api/v1/article/${params.id}/comment/?reply_to=${id}`,
+          `api/v1/article/${params.id}/comment/?reply_to=${id}/`,
           {
             content: contents,
           },

src/Component/CirclePage/QnA/QnAItem/QnAItem.js

@@ -30,7 +30,7 @@ const QnAItem = (props) => {
   useEffect(() => {
     if (isLoad) {
       axios
-        .get(`api/v1/circle/${circleId}/board/${curBoardId}/article/${params.id}`)
+        .get(`api/v1/circle/${circleId}/board/${curBoardId}/article/${params.id}/`)
         .then((response) => {
           console.log(response.data);
           setQnAItem(response.data);

src/Component/CirclePage/QnA/QnAWrite/QnAWrite.js

@@ -33,6 +33,8 @@ const QnAWrite = (props) => {
       .then((response) => {
         toast.success('질문을 등록하였습니다.');
         setIsOpen(false);
+        setTitle('');
+        setContents('');
       })
       .catch((error) => {
         console.log(error);

src/Component/ClubSearchPage/ClubInfo.js

@@ -17,7 +17,7 @@ const ClubInfo = ({ club }) => {
   const navigate = useNavigate();
 
   const handleClick = () => {
-    navigate(`circle/${club.name}/소개`, {
+    navigate(`circle/${club.name}/QnA`, {
       state: {
         id: club.id,
       },

src/Context/ScrollTop.js

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const ScrollTop = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+};
+
+export default ScrollTop;

src/Context/SessionContext.js

@@ -32,6 +32,7 @@ export const SessionProvider = ({ children }) => {
 
   //자동 로그아웃 타이머
   const [count, setCount] = useState(0);
+  const [refreshing, setRefreshing] = useState(false);
 
   const handleLogin = (id, userid, img, accessToken, refreshToken) => {
     localStorage.setItem('id', id);
@@ -66,6 +67,7 @@ export const SessionProvider = ({ children }) => {
           })
           .then((response) => {
             setAccessToken(response.data.access);
+            setRefreshing(true);
           })
           .catch((error) => {
             console.log(error);
@@ -113,7 +115,20 @@ export const SessionProvider = ({ children }) => {
 
   return (
     <SessionContext.Provider
-      value={{ isLogin, accessToken, refreshToken, id, userId, userImg, handleLogin, handleLogout, setUserImg }}
+      value={{
+        isLogin,
+        accessToken,
+        refreshToken,
+        id,
+        userId,
+        userImg,
+        handleLogin,
+        handleLogout,
+        setUserImg,
+        checkToken,
+        refreshing,
+        setRefreshing,
+      }}
     >
       {children}
     </SessionContext.Provider>

src/Functions/fetchData.js

@@ -0,0 +1,55 @@
+import axios from 'axios';
+
+function fetchQnAList(circleId, curBoardId) {
+  let list = null;
+  /*const suspender = fetch(`http://sharkle-server.kro.kr/api/v1/circle/${circleId}/board/${curBoardId}/article/`)
+    .then((response) => response.json())
+    .then((data) => {
+      list = data;
+    });*/
+
+  const suspender = axios
+    .get(`api/v1/circle/${circleId}/board/${curBoardId}/article/`)
+    .then((response) => {
+      list = response.data;
+    })
+    .catch((error) => {});
+  return {
+    read() {
+      if (list === null || circleId === null || curBoardId === null) {
+        throw suspender;
+      } else {
+        return list;
+      }
+    },
+  };
+}
+
+function fetchCircleInfo(userId) {
+  console.log('s넌 왜 실행대누');
+  let posts = null;
+  const suspender = fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`)
+    .then((response) => response.json())
+    .then((data) => {
+      setTimeout(() => {
+        posts = data;
+      }, 3000);
+    });
+  return {
+    read() {
+      if (posts === null) {
+        throw suspender;
+      } else {
+        return posts;
+      }
+    },
+  };
+}
+
+function fetchData(circleId, curBoardId) {
+  return {
+    qnaList: fetchQnAList(circleId, curBoardId),
+  };
+}
+
+export default fetchData;

src/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
@@ -8,20 +7,26 @@ import axios from 'axios';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { FunctionProvider } from './Functions/Functions';
+import ScrollTop from './Context/ScrollTop';
+import { BrowserRouter } from 'react-router-dom';
+import * as ReactDOM from 'react-dom/client';
+import './index.css';
 
 axios.defaults.baseURL = 'http://sharkle-server.kro.kr/';
 
-ReactDOM.render(
-  <React.StrictMode>
-    <SessionProvider>
-      <FunctionProvider>
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <SessionProvider>
+    <FunctionProvider>
+      <BrowserRouter>
         <ToastContainer autoClose={2700} />
+        <ScrollTop />
         <App />
-      </FunctionProvider>
-    </SessionProvider>
-  </React.StrictMode>,
-  document.getElementById('root')
+      </BrowserRouter>
+    </FunctionProvider>
+  </SessionProvider>
 );
+reportWebVitals();
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))