Merge pull request #161 from ssu-student-union/feat/#160_acl-QA-error

Feat/#160 acl qa error
ssu-student-union · Sep 25, 2024 · 35e846b · 35e846b
2 parents 94107df + 8e99262
commit 35e846b
Show file tree

Hide file tree

Showing 20 changed files with 113 additions and 86 deletions.
diff --git a/src/components/MainCarousel/index.tsx b/src/components/MainCarousel/index.tsx
@@ -1,8 +1,10 @@
 import Slider from 'react-slick';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
+import { useRecoilValue } from 'recoil';
+import { LoginState } from '@/recoil/atoms/atom';
 
 const CounterItem = ({ isActive }: { isActive: boolean }) => (
   <span className={`block h-[7px] w-[45px] rounded-[15px] ${isActive ? 'bg-[#B8B8B8]' : 'bg-[#E4E4E4]'}`} />
@@ -20,7 +22,7 @@ const images = ['/image/1.jpeg', '/image/2.jpeg', '/image/3.jpeg'];
 
 const MainCarousel = () => {
   const [currentSlide, setCurrentSlide] = useState(0);
-  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(!!localStorage.getItem('accessToken'));
+  const isLoggedIn = useRecoilValue(LoginState);
   const navigate = useNavigate();
 
   const settings = {
@@ -40,17 +42,17 @@ const MainCarousel = () => {
   };
 
   // Monitor accessToken changes and update state accordingly
-  useEffect(() => {
-    const handleStorageChange = () => {
-      setIsLoggedIn(!!localStorage.getItem('accessToken'));
-    };
+  // useEffect(() => {
+  //   const handleStorageChange = () => {
+  //     setIsLoggedIn(!!localStorage.getItem('accessToken'));
+  //   };
 
-    window.addEventListener('storage', handleStorageChange);
+  //   window.addEventListener('storage', handleStorageChange);
 
-    return () => {
-      window.removeEventListener('storage', handleStorageChange);
-    };
-  }, []);
+  //   return () => {
+  //     window.removeEventListener('storage', handleStorageChange);
+  //   };
+  // }, []);
 
   return (
     <div className="relative h-screen w-full overflow-hidden">

diff --git a/src/hooks/useDelBoardPosts.ts b/src/hooks/useDelBoardPosts.ts
@@ -3,7 +3,7 @@ import { useMutation, UseMutationResult, useQueryClient } from '@tanstack/react-
 import { AxiosError, AxiosResponse } from 'axios';
 
 export function useDelBoardPosts(): UseMutationResult<
-  AxiosResponse<any>,
+  AxiosResponse,
   AxiosError,
   { boardCode: string; postId: number; fileurl: string[] }
 > {
@@ -12,7 +12,7 @@ export function useDelBoardPosts(): UseMutationResult<
     mutationFn: ({ boardCode, postId, fileurl }) => delBoardPosts(boardCode, postId, fileurl),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['getPetitionTopLiked'] });
-      queryClient.invalidateQueries({ queryKey: ['get-board-boardCode-posts'] });
+      queryClient.invalidateQueries({ queryKey: ['get-board-boardCode-posts-search'] });
     },
   });
 }
diff --git a/src/hooks/usePatchBoardPosts.ts b/src/hooks/usePatchBoardPosts.ts
@@ -9,7 +9,7 @@ export const usePatchBoardPosts = () => {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['getPetitionTopLiked'] });
       queryClient.invalidateQueries({ queryKey: ['get-board-boardCode-posts'] });
-      queryClient.invalidateQueries({ queryKey: ['get-board-boardCode-posts-postId'] });
+      queryClient.refetchQueries({ queryKey: ['get-board-boardCode-posts-postId'] });
     },
   });
 };
diff --git a/src/hooks/usePostBoardPosts.ts b/src/hooks/usePostBoardPosts.ts
@@ -9,7 +9,7 @@ export function usePostBoardPosts(): UseMutationResult<PostBoardPostsResponse, A
     mutationFn: postBoardPosts,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['getPetitionTopLiked'] });
-      queryClient.invalidateQueries({ queryKey: ['get-board-boardCode-posts'] });
+      queryClient.invalidateQueries({ queryKey: ['get-board-boardCode-posts-search'] });
     },
   });
 }
diff --git a/src/pages/audit/auditDetail/container/auditDetailEditSection.tsx b/src/pages/audit/auditDetail/container/auditDetailEditSection.tsx
@@ -9,7 +9,7 @@ interface AuditDetailEditProps {
   imageUrls: string[];
   content: string;
   title: string;
-  authority: string[];
+  authority?: string[];
   isAuthor: boolean;
   baseUrl?: string;
   noticeUrl?: string;
@@ -22,7 +22,6 @@ export function AuditDetailEditSection({
   imageUrls,
   baseUrl = `/`,
   noticeUrl = `/`,
-  authority,
   isAuthor,
 }: AuditDetailEditProps) {
   const navigate = useNavigate();
@@ -38,9 +37,11 @@ export function AuditDetailEditSection({
   return (
     <div className="flex w-full justify-end py-[60px] sm:py-[40px]">
       <div className="flex items-end justify-between gap-4 xs:h-[150px] xs:flex-col">
-        {authority.includes('DELETE') ? <DeleteButton onClick={handleDelete} /> : null}
         {isAuthor ? (
-          <EditButton onClick={() => navigate(`${baseUrl}/${postId}/patch`, { state: { postId: postId } })} />
+          <>
+            <DeleteButton onClick={handleDelete} />
+            <EditButton onClick={() => navigate(`${baseUrl}/${postId}/patch`, { state: { postId: postId } })} />
+          </>
         ) : null}
         <ListButton onClick={() => navigate(noticeUrl)} />
       </div>

diff --git a/src/pages/audit/auditDetail/page.tsx b/src/pages/audit/auditDetail/page.tsx
@@ -6,14 +6,22 @@ import { useGetBoardDetail } from '@/hooks/useGetBoardDetail';
 import AuditDetailLoading from './container/auditDetailLoading';
 import { items } from '../const/data';
 import { AuditDetailFileSection } from './auditDetailFileSection';
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
 
 export function AuditDetailPage() {
   const location = useLocation();
   const postId: number = location.state?.postId;
   const boardCode: string = '감사기구게시판';
 
-  const { data: resp, isLoading, isError } = useGetBoardDetail({ boardCode, postId });
+  const queryClient = useQueryClient();
+  const { data: resp, isLoading, isError, refetch } = useGetBoardDetail({ boardCode, postId });
 
+  useEffect(() => {
+    if (!queryClient.getQueryData(['get-board-boardCode-posts-postId'])) {
+      refetch();
+    }
+  }, [queryClient, refetch]);
   const postDetail = resp?.data.postDetailResDto;
 
   if (!postDetail || isError) {

diff --git a/src/pages/audit/hooks/useAuditBoard.ts b/src/pages/audit/hooks/useAuditBoard.ts
@@ -1,13 +1,12 @@
-import { useGetBoardPosts } from '@/hooks/useGetBoardPosts';
 import { useGetBoardPostSearch } from '@/hooks/useGetBoardPostSearch';
 import { useResponseBoard } from '@/hooks/useResponseBoard';
 import { useCurrentPage } from '@/hooks/useCurrentPage';
 import { useCategory } from './useCategory';
 import { categoryMap } from '../const/data';
-import { Post } from '@/types/apis/get';
 import { useRecoilValue } from 'recoil';
 import { SearchState } from '@/recoil/atoms/atom';
 import { useEffect } from 'react';
+import { AuditResponse } from '../types';
 
 export function useAuditBoard(boardCode: string) {
   const { itemsPerPage } = useResponseBoard();
@@ -21,28 +20,21 @@ export function useAuditBoard(boardCode: string) {
 
   useEffect(() => {
     handlePageChange(1);
-  }, [categoryParam]);
+  }, [categoryParam, handlePageChange]);
 
-  const { data, isLoading, isError } = searchQuery
-    ? useGetBoardPostSearch<any>({
-        boardCode,
-        take: itemsPerPage,
-        page: currentPage - 1,
-        category: selectedCategory ?? undefined,
-        q: searchQuery,
-      })
-    : useGetBoardPosts<any>({
-        boardCode,
-        take: itemsPerPage,
-        page: currentPage - 1,
-        category: selectedCategory ?? undefined,
-      });
+  const { data, isLoading, isError } = useGetBoardPostSearch<AuditResponse>({
+    boardCode,
+    take: itemsPerPage,
+    page: currentPage - 1,
+    category: selectedCategory ?? undefined,
+    q: searchQuery,
+  });
 
-  const posts: Post[] = data?.data?.postListResDto || [];
-  const totalPages: number = data?.data?.pageInfo?.totalPages || 1;
+  // const posts: Post[] = data.data?.postListResDto || [];
+  const totalPages: number = data?.data?.pageInfo?.totalPages ?? 0;
 
   return {
-    posts,
+    data,
     totalPages,
     currentPage,
     handlePageChange,

diff --git a/src/pages/audit/page.tsx b/src/pages/audit/page.tsx
@@ -9,8 +9,9 @@ import { useNavigate } from 'react-router-dom';
 
 export function AuditPage() {
   const boardCode = '감사기구게시판';
-  const { posts, totalPages, currentPage, handlePageChange, categoryParam, subcategories, isLoading } =
+  const { data, totalPages, currentPage, handlePageChange, categoryParam, subcategories, isLoading } =
     useAuditBoard(boardCode);
+
   const navigate = useNavigate();
 
   return (
@@ -43,14 +44,15 @@ export function AuditPage() {
             }}
           />
         }
-        children={<AuditContent initPosts={posts} isLoading={isLoading} />}
+        children={<AuditContent initPosts={data?.data.postListResDto} isLoading={isLoading} />}
         totalPages={totalPages}
         currentPage={currentPage}
         onPageChange={handlePageChange}
         onWriteClick={() => {
           navigate(`/audit/edit`);
         }}
         className="pt-[32px]"
+        authority={data?.data.allowedAuthorities}
       />
     </>
   );

diff --git a/src/pages/audit/types/index.ts b/src/pages/audit/types/index.ts
@@ -0,0 +1,23 @@
+import { PageInforamtion } from '@/types/getPetitionTopLiked';
+
+export interface AuditContentResponse {
+  category: string;
+  content: string;
+  date: string;
+  postId: number;
+  status: string;
+  thumbNail: string;
+  title: string;
+}
+
+export interface AuditResponse {
+  code: string;
+  message: string;
+  data: {
+    postListResDto: AuditContentResponse[];
+    allowedAuthorities?: string[];
+    deniedAuthorities?: string[];
+    pageInfo: PageInforamtion;
+  };
+  isSuccess: boolean;
+}
diff --git a/src/pages/kakao/containers/RegisterButtonSection.tsx b/src/pages/kakao/containers/RegisterButtonSection.tsx
@@ -5,7 +5,7 @@ const rest_api_key = import.meta.env.VITE_REST_API_KEY;
 const redirect_uri = import.meta.env.VITE_REDIRECT_URI;
 const TAG = ['ussum_001', 'ussum_002', 'ussum_003'];
 
-const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${rest_api_key}&redirect_uri=${redirect_uri}&service_terms=${TAG}`;
+const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${rest_api_key}&redirect_uri=${redirect_uri}&service_terms=${TAG}&prompt=login`;
 
 const handleLogin = () => {
   window.location.href = KAKAO_AUTH_URL;

diff --git a/src/pages/lost-article/hook/useLostBoard.tsx b/src/pages/lost-article/hook/useLostBoard.tsx
@@ -39,7 +39,7 @@ export function useLostBoard(boardCode: string) {
   }, [queryClient, refetch]);
 
   // const posts: LostArticleContentResponse[] = data?.data?.postListResDto || [];
-  const totalPages: number = data?.data?.pageInfo?.totalPages || 1;
+  const totalPages: number = data?.data?.pageInfo?.totalPages ?? 0;
 
   return {
     data,

diff --git a/src/pages/main/containers/NoticeSection.tsx b/src/pages/main/containers/NoticeSection.tsx
@@ -19,11 +19,11 @@ const NoticeSection = () => {
 
   useEffect(() => {
     if (width >= 1440) {
-      setTake(3);
+      setTake(4);
     } else if (width >= 1080) {
-      setTake(2);
+      setTake(3);
     } else if (width >= 720 || width >= 390) {
-      setTake(4);
+      setTake(2);
     }
   }, [width]);
 
@@ -54,7 +54,7 @@ const NoticeSection = () => {
       <Spacing size={width > 390 ? 32 : 22} direction="vertical" />
       <div className="flex flex-col md:items-center lg:items-center xl:items-center xxl:items-center">
         {noticeCount ? (
-          <div className="flex w-[calc(100dvw-3.125rem)] items-start justify-start gap-[1.063rem] overflow-x-scroll pl-0 pr-[1.063rem] scrollbar-hide lg:px-[11.0rem] xl:px-[11.0rem] xxl:px-[11.0rem]">
+          <div className="flex w-[calc(100dvw-3.125rem)] items-start justify-start gap-[1.063rem] overflow-x-scroll pl-0 pr-[1.063rem] pt-[10px] scrollbar-hide lg:px-[11.0rem] xl:px-[11.0rem] xxl:px-[11.0rem]">
             {data?.data.postListResDto.map((notice) => (
               <PostCardNotice
                 key={notice.postId}

diff --git a/src/pages/main/hook/useNoticePost.tsx b/src/pages/main/hook/useNoticePost.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { useGetBoardPosts } from '@/hooks/useGetBoardPosts';
 import { GetNoticeBoardPostsResponse } from '@/types/getBoardPosts';
+import { useGetBoardPostSearch } from '@/hooks/useGetBoardPostSearch';
 
 interface UseNoticePostProps {
   boardCode: string;
@@ -12,7 +12,7 @@ interface UseNoticePostProps {
 export const useNoticePost = ({ boardCode, groupCode, memberCode, take }: UseNoticePostProps) => {
   const [page] = useState(0);
 
-  const { data, isLoading } = useGetBoardPosts<GetNoticeBoardPostsResponse>({
+  const { data, isLoading } = useGetBoardPostSearch<GetNoticeBoardPostsResponse>({
     boardCode,
     take,
     page,

diff --git a/src/pages/notice/hooks/useNoticeBoard.ts b/src/pages/notice/hooks/useNoticeBoard.ts
@@ -39,7 +39,7 @@ export function useNoticeBoard(boardCode: string) {
   });
 
   // const posts: Post[] = data?.data?.postListResDto || [];
-  const totalPages: number = data?.data?.pageInfo?.totalPages || 1;
+  const totalPages: number = data?.data?.pageInfo?.totalPages ?? 0;
 
   return {
     data,

diff --git a/src/pages/notice/page.tsx b/src/pages/notice/page.tsx
@@ -13,7 +13,6 @@ export function NoticePage() {
   const boardCode = '공지사항게시판';
 
   const { data, totalPages, currentPage, handlePageChange, isLoading, subcategories } = useNoticeBoard(boardCode);
-
   const { todayPostCount, isLoading: isPostsLoading } = useTodayPosts(boardCode);
 
   return (

diff --git a/src/pages/petition-notice/[id]/containers/PostPetitionDetailPostSection.tsx b/src/pages/petition-notice/[id]/containers/PostPetitionDetailPostSection.tsx
@@ -8,10 +8,10 @@ import { Logo } from '@/components/Logo/Logo';
 import Breadcrumb from '@/components/Breadcrumb';
 import { PostHead } from '@/components/PostHead';
 import { useGetBoardDetail } from '@/hooks/useGetBoardDetail';
-import { delBoardPosts } from '@/apis/delBoardPosts';
 import { usePostPostReaction } from '@/hooks/usePostPostReaction';
 import { useEffect, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
+import { useDelBoardPosts } from '@/hooks/useDelBoardPosts';
 
 type ParamsType = {
   id: string;
@@ -45,23 +45,23 @@ export function PostPetitionDetailPostSection() {
   const replaceSN = (student_number: string | null, chracter: string) => {
     return student_number!.substring(0, 2) + chracter.repeat(4) + student_number!.substring(6);
   };
-
+  const { mutate } = useDelBoardPosts();
   const handleDeleteContent = async () => {
     const deleteCheck = window.confirm('게시글을 삭제하시겠습니까?');
     if (deleteCheck) {
-      await delBoardPosts(
-        '청원게시판',
-        data?.data.postDetailResDto.postId || null,
-        data?.data.postDetailResDto.imageList || null
-      );
+      mutate({
+        boardCode: '청원게시판',
+        postId: data?.data.postDetailResDto.postId as number,
+        fileurl: data?.data.postDetailResDto.imageList ?? [],
+      });
       navigate('/petition-notice');
     } else {
       return;
     }
   };
 
   const handleEditContent = () => {
-    localStorage.setItem('edit-post', JSON.stringify(data?.data.postDetailResDto.postId));
+    localStorage.setItem('oldContent', JSON.stringify(data?.data));
     navigate('/petition-notice/edit');
   };