diff --git a/src/components/MainCarousel/index.tsx b/src/components/MainCarousel/index.tsx index 64bc2475..9f8019b0 100644 --- 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 }) => ( @@ -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(!!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 (
diff --git a/src/hooks/useDelBoardPosts.ts b/src/hooks/useDelBoardPosts.ts index 64259e2c..7e8d4974 100644 --- 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, + 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 index 9a0f1613..b2925870 100644 --- 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 index 9febfb21..1255605e 100644 --- a/src/hooks/usePostBoardPosts.ts +++ b/src/hooks/usePostBoardPosts.ts @@ -9,7 +9,7 @@ export function usePostBoardPosts(): UseMutationResult { 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 index a6a63ec8..e680e0ce 100644 --- 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 (
- {authority.includes('DELETE') ? : null} {isAuthor ? ( - navigate(`${baseUrl}/${postId}/patch`, { state: { postId: postId } })} /> + <> + + navigate(`${baseUrl}/${postId}/patch`, { state: { postId: postId } })} /> + ) : null} navigate(noticeUrl)} />
diff --git a/src/pages/audit/auditDetail/page.tsx b/src/pages/audit/auditDetail/page.tsx index 79114744..49052cb6 100644 --- 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 index 500962eb..212f03af 100644 --- 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({ - boardCode, - take: itemsPerPage, - page: currentPage - 1, - category: selectedCategory ?? undefined, - q: searchQuery, - }) - : useGetBoardPosts({ - boardCode, - take: itemsPerPage, - page: currentPage - 1, - category: selectedCategory ?? undefined, - }); + const { data, isLoading, isError } = useGetBoardPostSearch({ + 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 index b4166e9c..677ee296 100644 --- 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,7 +44,7 @@ export function AuditPage() { }} /> } - children={} + children={} totalPages={totalPages} currentPage={currentPage} onPageChange={handlePageChange} @@ -51,6 +52,7 @@ export function AuditPage() { 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 new file mode 100644 index 00000000..bab1118d --- /dev/null +++ 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 index 8c751327..318f917e 100644 --- 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 index dcf8eded..bf756ec9 100644 --- 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 index c6692859..d203ba6e 100644 --- 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 = () => { 390 ? 32 : 22} direction="vertical" />
{noticeCount ? ( -
+
{data?.data.postListResDto.map((notice) => ( { const [page] = useState(0); - const { data, isLoading } = useGetBoardPosts({ + const { data, isLoading } = useGetBoardPostSearch({ boardCode, take, page, diff --git a/src/pages/notice/hooks/useNoticeBoard.ts b/src/pages/notice/hooks/useNoticeBoard.ts index abd5d097..5c53e91d 100644 --- 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 index 85a95817..ea52352d 100644 --- 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 index 84db06a4..4273c99e 100644 --- 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,15 +45,15 @@ 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; @@ -61,7 +61,7 @@ export function PostPetitionDetailPostSection() { }; const handleEditContent = () => { - localStorage.setItem('edit-post', JSON.stringify(data?.data.postDetailResDto.postId)); + localStorage.setItem('oldContent', JSON.stringify(data?.data)); navigate('/petition-notice/edit'); }; diff --git a/src/pages/petition-notice/containers/PostSection/PetitionPostSection.tsx b/src/pages/petition-notice/containers/PostSection/PetitionPostSection.tsx index 666add04..b2da87de 100644 --- a/src/pages/petition-notice/containers/PostSection/PetitionPostSection.tsx +++ b/src/pages/petition-notice/containers/PostSection/PetitionPostSection.tsx @@ -35,7 +35,7 @@ export function PetitionPostSection() { useEffect(() => { if (location.state?.cleanupEditPost) { - localStorage.removeItem('edit-post'); + localStorage.removeItem('oldContent'); } }, [location]); @@ -51,7 +51,7 @@ export function PetitionPostSection() { : data?.data.postListResDto.filter((item) => item.onGoingStatus === selectedSubcategories); const handleWriteBtnClick = () => { - if (localStorage.getItem('kakaoData')) { + if (localStorage.getItem('accessToken')) { navigate('/petition-notice/edit'); } else { window.alert('청원 글 작성은 로그인 후 이용이 가능합니다!'); @@ -75,7 +75,7 @@ export function PetitionPostSection() { ) : ( - {data?.data && data.data.postListResDto.length > 0 ? ( + {filteredData && filteredData.length > 0 ? ( <> {' '} diff --git a/src/pages/petition-notice/edit/containers/PetitionNoticeEditorSection.tsx b/src/pages/petition-notice/edit/containers/PetitionNoticeEditorSection.tsx index ed1375de..73b66213 100644 --- a/src/pages/petition-notice/edit/containers/PetitionNoticeEditorSection.tsx +++ b/src/pages/petition-notice/edit/containers/PetitionNoticeEditorSection.tsx @@ -11,7 +11,7 @@ import { GuideMessage } from '../components/GuidMessage'; import { usePatchBoardPosts } from '@/hooks/usePatchBoardPosts'; import history from '@/hooks/useHistory'; import { usePostBoardPosts } from '@/hooks/usePostBoardPosts'; -import { useGetBoardDetail } from '@/hooks/useGetBoardDetail'; +import { GUIDE_LINE } from '../components/GuideLine'; type HookMap = { addImageBlobHook?: (blob: File, callback: HookCallback) => void; @@ -22,29 +22,29 @@ type HookCallback = (url: string, text?: string) => void; export function PetitionNoticeEditorSection() { const titleRef = useRef(null); const editorRef = useRef(null); - const [initialContent, setInitialContent] = useState(''); + const [initialContent, setInitialContent] = useState(GUIDE_LINE); const [initialTitle, setInitialTitle] = useState(''); const [initialCategoryName, setInitialCategoryName] = useState(''); const [isEditing, setIsEditing] = useState(false); const [imageId, setImageId] = useState(); + const [loading, setLoading] = useState(true); const navigate = useNavigate(); - const postID = localStorage.getItem('edit-post'); - - const { data, isLoading } = useGetBoardDetail({ - boardCode: '청원게시판', - postId: Number(postID), - }); + const oldContent = localStorage.getItem('oldContent')!; + const parsedContent = JSON.parse(oldContent); useEffect(() => { - if (data !== undefined) { - const postDetailResDto = data?.data.postDetailResDto; + if (oldContent) { + const postDetailResDto = parsedContent.postDetailResDto; + setInitialTitle(postDetailResDto.title); setInitialContent(JSON.parse(postDetailResDto.content)); setInitialCategoryName(postDetailResDto.categoryName); setIsEditing(true); } - }, [data]); + + setLoading(false); + }, [oldContent, parsedContent]); const handleTitleChange = (e: React.ChangeEvent) => { if (e.target.value.length <= 50) { @@ -99,7 +99,7 @@ export function PetitionNoticeEditorSection() { const postFileList = imageId ? [imageId!] : []; const patch_posts = { boardCode: '청원게시판', - postId: Number(postID), + postId: Number(parsedContent.postDetailResDto.postId), posts: { title: title, content: JSON.stringify(content), @@ -109,17 +109,13 @@ export function PetitionNoticeEditorSection() { }, }; try { - console.log(patch_posts); - await patchPostMutation.mutateAsync(patch_posts); const check = window.confirm('편집하시겠습니까?'); if (check) { + await patchPostMutation.mutateAsync(patch_posts); navigate('/petition-notice', { replace: true, state: { cleanupEditPost: true }, }); - // 이미지 수정 시 원본 컨텐츠와 비교하여 바뀐 이미지는 삭제하는 로직 필요 - // console.log(initialContent); - // console.log(JSON.stringify(content)); } else { return; } @@ -179,8 +175,9 @@ export function PetitionNoticeEditorSection() { }); }, [locationKeys]); - if (isLoading) { - return
로딩 중..
; + // 로딩 중이면 로딩 메시지 표시 + if (loading) { + return
Loading...
; } return ( diff --git a/src/template/BodyLayout.tsx b/src/template/BodyLayout.tsx index ac998ab3..2fa4e44d 100644 --- a/src/template/BodyLayout.tsx +++ b/src/template/BodyLayout.tsx @@ -24,9 +24,11 @@ export function BodyLayout({
-
- -
+ {totalPages ? ( +
+ +
+ ) : null}
{authority?.includes('WRITE') ? : null} diff --git a/yarn.lock b/yarn.lock index 28b0b1a1..cf54e1ed 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3071,6 +3071,7 @@ string-convert@^0.2.0: integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A== "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0: + name string-width-cjs version "4.2.3" resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==