Merge pull request #68 from KERT-core/feat/board-api

feat: 게시판 페이지 API 연동
KERT-core · Nov 5, 2024 · fa4a64b · fa4a64b
2 parents d25794d + 5957892
commit fa4a64b
Show file tree

Hide file tree

Showing 18 changed files with 341 additions and 130 deletions.
diff --git a/src/components/display/dashboard/admin/AdminElement.jsx b/src/components/display/dashboard/admin/AdminElement.jsx
@@ -80,10 +80,8 @@ export const AdminElement = ({ admin }) => {
   const { openConfirm, closeConfirm } = useConfirm();
 
   const { data, isLoading } = useQuery(`user-${admin.student_id}`, async () => {
-    const data = await API.GET(`/users/${admin.student_id}`, {
-      headers: { Authorization: localStorage.getItem('accessToken') },
-    });
-    return { ...admin, ...data };
+    const res = await API.GET(`/users/${admin.student_id}`);
+    return { ...admin, ...res.data };
   });
 
   // 관리자 편집을 위한 Reference
@@ -180,7 +178,6 @@ export const AdminElement = ({ admin }) => {
 
     API.PUT(`/admin/${data.student_id}`, {
       body: updated_admin,
-      headers: { Authorization: localStorage.getItem('accessToken') },
     })
       .then((api_res) => {
         closeConfirm();

diff --git a/src/components/display/dashboard/admin/EditAdmin.jsx b/src/components/display/dashboard/admin/EditAdmin.jsx
@@ -105,9 +105,7 @@ export const EditAdmin = forwardRef(({ admin, ...props }, ref) => {
     closeConfirm();
     showLoading({ message: '관리자를 삭제하는 중...' });
 
-    API.DELETE(`/admin/${admin.student_id}`, {
-      headers: { Authorization: localStorage.getItem('accessToken') },
-    })
+    API.DELETE(`/admin/${admin.student_id}`)
       .then((api_res) => {
         openAlert({
           title: '관리자 삭제 완료',

diff --git a/src/components/display/dashboard/history/HistoryElement.jsx b/src/components/display/dashboard/history/HistoryElement.jsx
@@ -124,7 +124,6 @@ export const HistoryElement = ({ history }) => {
 
     API.PUT(`/histories/${history.history_id}`, {
       body: updated_history,
-      headers: { Authorization: localStorage.getItem('accessToken') },
     })
       .then((api_res) => {
         closeConfirm();
@@ -157,9 +156,7 @@ export const HistoryElement = ({ history }) => {
     closeConfirm();
     showLoading({ message: '연혁을 삭제하는 중...' });
 
-    API.DELETE(`/histories/${history.history_id}`, {
-      headers: { Authorization: localStorage.getItem('accessToken') },
-    })
+    API.DELETE(`/histories/${history.history_id}`)
       .then((api_res) => {
         openAlert({
           title: '연혁 삭제됨',

diff --git a/src/components/display/dashboard/home/board/Admin.jsx b/src/components/display/dashboard/home/board/Admin.jsx
@@ -16,10 +16,8 @@ export const Admin = () => {
   const { data, isLoading } = useQuery(
     'admin',
     async () => {
-      const data = await API.GET('/admin', {
-        headers: { Authorization: localStorage.getItem('accessToken') },
-      });
-      return data;
+      const res = await API.GET('/admin');
+      return res.data;
     },
     { retry: 2 },
   );

diff --git a/src/components/display/dashboard/home/board/History.jsx b/src/components/display/dashboard/home/board/History.jsx
@@ -18,8 +18,8 @@ export const History = () => {
   const { data, isLoading } = useQuery(
     'history',
     async () => {
-      const data = await API.GET('/histories');
-      return data;
+      const res = await API.GET('/histories');
+      return res.data;
     },
     { retry: 2 },
   );

diff --git a/src/components/display/dashboard/home/board/User.jsx b/src/components/display/dashboard/home/board/User.jsx
@@ -15,10 +15,8 @@ export const User = () => {
   const { data, isLoading } = useQuery(
     'user',
     async () => {
-      const data = await API.GET('/users', {
-        headers: { Authorization: localStorage.getItem('accessToken') },
-      });
-      return data;
+      const res = await API.GET('/users');
+      return res.data;
     },
     { retry: 2 },
   );

diff --git a/src/components/display/dashboard/user/DetailUser.jsx b/src/components/display/dashboard/user/DetailUser.jsx
@@ -104,9 +104,7 @@ export const DetailUser = ({ user }) => {
     closeConfirm();
     showLoading({ message: '회원을 삭제하는 중...' });
 
-    API.DELETE(`/users/${user.student_id}`, {
-      headers: { Authorization: localStorage.getItem('accessToken') },
-    })
+    API.DELETE(`/users/${user.student_id}`)
       .then(() => {
         openAlert({
           title: '회원 삭제 완료',

diff --git a/src/components/navigation/AuthContext.jsx b/src/components/navigation/AuthContext.jsx
@@ -18,24 +18,22 @@ export const AuthProvider = ({ children }) => {
     }
   });
 
-  const login = (token, userInfo) => {
-    localStorage.setItem('token', token); // 로그인 시 토큰 저장
+  const login = (access_token, refresh_token, userInfo) => {
+    localStorage.setItem('accessToken', access_token); // 로그인 시 토큰 저장
+    localStorage.setItem('refreshToken', refresh_token); // 로그인 시 토큰 저장
     localStorage.setItem('user', JSON.stringify(userInfo)); // 사용자 정보 저장
     setUser(userInfo); // 사용자 정보 저장
     setIsLoggedIn(true);
   };
 
   const logout = async () => {
     try {
-      await API.POST('/logout', {
-        headers: {
-          Authorization: localStorage.getItem('accessToken'),
-        },
-      });
+      await API.POST('/logout');
     } catch (error) {
       console.error('Error during logout:', error);
     } finally {
-      localStorage.removeItem('token');
+      localStorage.removeItem('accessToken');
+      localStorage.removeItem('refreshToken');
       localStorage.removeItem('user');
       setIsLoggedIn(false);
       setUser(null);

diff --git a/src/components/navigation/Navigation.jsx b/src/components/navigation/Navigation.jsx
@@ -74,7 +74,7 @@ export const Navigation = () => {
   const { isLoggedIn, logout, user } = useAuth();
   const { theme, toggleTheme } = useTheme();
 
-  console.log(user);
+  // console.log(user);
 
   return (
     <Nav>

diff --git a/src/hooks/utils/useDebounce.js b/src/hooks/utils/useDebounce.js
@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+const useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    }; //value 변경 시점에 clearTimeout을 해줘야함.
+  }, [delay, value]);
+
+  return debouncedValue;
+};
+
+export default useDebounce;
diff --git a/src/pages/Article.jsx b/src/pages/Article.jsx
@@ -1,5 +1,28 @@
+import { useEffect } from 'react';
+import useTheme from '@/hooks/theme/useTheme';
 import styled from 'styled-components';
 import { Text } from '@components/typograph/Text';
+import { useParams } from 'react-router-dom';
+import { useQuery } from 'react-query';
+import { API } from '@/utils/api';
+import { Viewer } from '@toast-ui/react-editor';
+import '@toast-ui/editor/dist/toastui-editor.css';
+import 'tui-color-picker/dist/tui-color-picker.css';
+import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';
+import '@toast-ui/editor/dist/i18n/ko-kr';
+
+import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';
+import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';
+import Prism from 'prismjs';
+
+import 'prismjs/themes/prism.css';
+import 'prismjs/themes/prism-okaidia.css'; // 다크 모드 테마를 추가합니다
+import '@toast-ui/editor/dist/theme/toastui-editor-dark.css'; // Toast UI 에디터 다크 모드 테마를 추가합니다
+
+import 'prismjs/components/prism-jsx.min'; // JSX 언어 지원을 포함합니다 (선택 사항)
+
+import 'prismjs/plugins/line-numbers/prism-line-numbers.css'; // 코드 블럭에 줄 번호를 추가하기 위해 이 줄을 추가합니다
+import 'prismjs/plugins/line-numbers/prism-line-numbers.min';
 
 const ArticleContainer = styled.div`
   width: 100%;
@@ -44,26 +67,74 @@ const ArticleHorizontalLine = styled.hr`
   border: 1px solid #282c30;
 `;
 
+const ArticleViewerWrapper = styled.div`
+  color: white;
+`;
+
 export default function Article() {
+  const { id } = useParams();
+  const theme = useTheme();
+
+  const { data, isLoading } = useQuery(['post', id], () =>
+    API.GET(`/posts/${id}`),
+  );
+
+  useEffect(() => {
+    const editorEl = document.getElementsByClassName(
+      'toastui-editor-contents',
+    )[0];
+
+    if (editorEl) {
+      const shouldAddDarkClass =
+        theme.theme === 'dark' &&
+        !editorEl.classList.contains('toastui-editor-dark');
+      const shouldRemoveDarkClass =
+        theme.theme !== 'dark' &&
+        editorEl.classList.contains('toastui-editor-dark');
+
+      if (shouldAddDarkClass) {
+        editorEl.classList.add('toastui-editor-dark');
+      } else if (shouldRemoveDarkClass) {
+        editorEl.classList.remove('toastui-editor-dark');
+      }
+    }
+  }, [theme]);
+
+  const post = data?.data;
+
   return (
     <ArticleContainer>
-      <ArticleHeader>
-        <Text size="18px" weight="bold" color="--secondary-text-color">
-          카테고리
-        </Text>
-        <ArticleTitleGroup>
-          <Text size="40px" weight="extrabold">
-            제목을 입력하세요
-          </Text>
-          <Text size="m" color="--secondary-text-color">
-            카드에 표시될 설명을 입력하세요
-          </Text>
-        </ArticleTitleGroup>
-        <Text size="s" color="--secondary-text-color">
-          KERT 관리자 | 2024.07.27
-        </Text>
-      </ArticleHeader>
-      <ArticleHorizontalLine />
+      {isLoading ? (
+        <Text>불러오는 중</Text>
+      ) : (
+        <>
+          <ArticleHeader>
+            <Text size="18px" weight="bold" color="--secondary-text-color">
+              {post?.tag}
+            </Text>
+            <ArticleTitleGroup>
+              <Text size="40px" weight="extrabold">
+                {post?.title}
+              </Text>
+              <Text size="m" color="--secondary-text-color">
+                {post?.description}
+              </Text>
+            </ArticleTitleGroup>
+            <Text size="s" color="--secondary-text-color">
+              {post?.user?.name} | {post?.createdAt}
+            </Text>
+          </ArticleHeader>
+          <ArticleHorizontalLine />
+          <ArticleViewerWrapper>
+            <Viewer
+              initialValue={post?.content}
+              language="ko-KR"
+              plugins={[[codeSyntaxHighlight, { highlighter: Prism }]]}
+              theme={theme.theme === 'dark' ? 'dark' : 'default'}
+            />
+          </ArticleViewerWrapper>
+        </>
+      )}
     </ArticleContainer>
   );
 }