diff --git a/src/apis/rolling.ts b/src/apis/rolling.ts index a8cb25d..0e60b6e 100644 --- a/src/apis/rolling.ts +++ b/src/apis/rolling.ts @@ -9,10 +9,18 @@ export const getCurrentRollingPaper = async (): Promise export const getRollingPaperDetail = async ( rollingPaperId: string | number, + page: number, + size: number, ): Promise => { const { data: { data }, - } = await client.get(`/api/event-posts/${rollingPaperId}`); + } = await client.get(`/api/event-posts/${rollingPaperId}`, { + params: { + page, + size, + }, + }); + console.log(data); return data; }; @@ -49,11 +57,19 @@ export const postNewRollingPaper = async (title: string) => { } }; -export const getRollingPaperList = async (): Promise => { +export const getRollingPaperList = async ( + page: string | number, + size: number, +): Promise => { try { const { data: { data }, - } = await client.get('/api/admin/event-posts'); + } = await client.get('/api/admin/event-posts', { + params: { + page, + size, + }, + }); return data; } catch (error) { console.error(error); diff --git a/src/components/BackgroundBottom.tsx b/src/components/BackgroundBottom.tsx index 88389fd..6f8e830 100644 --- a/src/components/BackgroundBottom.tsx +++ b/src/components/BackgroundBottom.tsx @@ -6,7 +6,7 @@ const BackgroundBottom = () => { return ( ); diff --git a/src/components/ConfirmModal.tsx b/src/components/ConfirmModal.tsx index 2b4f8aa..194a6f5 100644 --- a/src/components/ConfirmModal.tsx +++ b/src/components/ConfirmModal.tsx @@ -22,7 +22,6 @@ const ConfirmModal = ({ onCancel, onConfirm, }: ConfirmModalProps) => { - // TODO: 전역 상태로 관리해야하는지 고민 return (
diff --git a/src/pages/Admin/RollingPaper.tsx b/src/pages/Admin/RollingPaper.tsx index 6feb8ff..0c99dec 100644 --- a/src/pages/Admin/RollingPaper.tsx +++ b/src/pages/Admin/RollingPaper.tsx @@ -9,17 +9,28 @@ import PageTitle from './components/AdminPageTitle'; import RollingPaperItem from './components/RollingPaperItem'; import WrapperFrame from './components/WrapperFrame'; import WrapperTitle from './components/WrapperTitle'; +import PagenationNavigation from './components/PagenationNavigation'; + +const SIZE = 10; export default function AdminRollingPaper() { const [activeModal, setActiveModal] = useState(false); - const { data, isLoading, isSuccess } = useQuery({ - queryKey: ['admin-rolling-paper'], - queryFn: getRollingPaperList, + const [currentPage, setCurrentPage] = useState('1'); + const { data, isLoading, isSuccess, refetch } = useQuery({ + queryKey: ['admin-rolling-paper', currentPage], + queryFn: () => getRollingPaperList(currentPage ?? 1, SIZE), }); + const handleNowPage = (page: string) => { + setCurrentPage(page); + refetch(); + }; + return ( <> - {activeModal && setActiveModal(false)} />} + {activeModal && ( + setActiveModal(false)} /> + )} 게시판 관리 / 롤링 페이퍼 설정
@@ -47,7 +58,11 @@ export default function AdminRollingPaper() { {data.content.map((rollingPaper) => ( - + ))} @@ -58,7 +73,11 @@ export default function AdminRollingPaper() { )} )} - {/* TODO: 페이지네이션 적용 */} + ); diff --git a/src/pages/Admin/components/AddRollingPaperModal.tsx b/src/pages/Admin/components/AddRollingPaperModal.tsx index 0e336be..e6f86bc 100644 --- a/src/pages/Admin/components/AddRollingPaperModal.tsx +++ b/src/pages/Admin/components/AddRollingPaperModal.tsx @@ -5,10 +5,11 @@ import { postNewRollingPaper } from '@/apis/rolling'; import ModalOverlay from '@/components/ModalOverlay'; interface AddRollingPaperModalProps { + currentPage: number | string; onClose: () => void; } -export default function AddRollingPaperModal({ onClose }: AddRollingPaperModalProps) { +export default function AddRollingPaperModal({ currentPage, onClose }: AddRollingPaperModalProps) { const [title, setTitle] = useState(''); const [error, setError] = useState(''); const queryClient = useQueryClient(); @@ -19,8 +20,7 @@ export default function AddRollingPaperModal({ onClose }: AddRollingPaperModalPr setTitle(''); setError(''); onClose(); - // TODO: 페이지네이션 적용 후, 현재 page에 대한 캐싱 날리는 방식으로 변경 - queryClient.invalidateQueries({ queryKey: ['admin-rolling-paper'] }); + queryClient.invalidateQueries({ queryKey: ['admin-rolling-paper', currentPage] }); }, onError: () => { setError('편지 작성에 실패했어요. 다시 시도해주세요.'); diff --git a/src/pages/Admin/components/PagenationNavigation.tsx b/src/pages/Admin/components/PagenationNavigation.tsx index 350ffdd..1bfa810 100644 --- a/src/pages/Admin/components/PagenationNavigation.tsx +++ b/src/pages/Admin/components/PagenationNavigation.tsx @@ -50,13 +50,13 @@ export default function PagenationNavigation({ } }; - const buttonStyle = 'border bg-white px-2 py-1 disabled:bg-gray-20'; + const buttonStyle = 'rounded-full bg-white w-8 h-8 disabled:bg-gray-20'; return (
-
+
- - - {!information.used && ( + <> + {activeDeleteModal && ( + { + setActiveDeleteModal(false); + }} + onConfirm={deleteMutate} + /> + )} + + {information.eventPostId} + +
+ {information.used && ( + + 진행 중 + + )} + {information.title} +
+ + - )} - - + + + {!information.used && ( + + )} + + + ); } diff --git a/src/pages/LetterBoard/index.tsx b/src/pages/LetterBoard/index.tsx index 33a53d5..a3e26ab 100644 --- a/src/pages/LetterBoard/index.tsx +++ b/src/pages/LetterBoard/index.tsx @@ -56,7 +56,7 @@ const LetterBoardPage = () => { return ( <> -
+
<> 게시판 diff --git a/src/pages/MyPage/components/MyBoardPage.tsx b/src/pages/MyPage/components/MyBoardPage.tsx index 9b14431..d55cc9b 100644 --- a/src/pages/MyPage/components/MyBoardPage.tsx +++ b/src/pages/MyPage/components/MyBoardPage.tsx @@ -39,7 +39,7 @@ const MyBoardPage = () => { } return ( <> -
+
내가 올린 게시물 {isLoading ? (

loading

diff --git a/src/pages/RollingPaper/components/WriteCommentButton.tsx b/src/pages/RollingPaper/components/WriteCommentButton.tsx index 201037f..21cc29c 100644 --- a/src/pages/RollingPaper/components/WriteCommentButton.tsx +++ b/src/pages/RollingPaper/components/WriteCommentButton.tsx @@ -4,8 +4,7 @@ import { useState } from 'react'; import { postRollingPaperComment } from '@/apis/rolling'; import EnvelopeImg from '@/assets/images/closed-letter.png'; import MessageModal from '@/components/MessageModal'; - -const DUMMY_USER_ZIP_CODE = '1DR41'; +import useAuthStore from '@/stores/authStore'; interface WriteCommentButtonProps { rollingPaperId: string; @@ -15,12 +14,12 @@ const WriteCommentButton = ({ rollingPaperId }: WriteCommentButtonProps) => { const [activeMessageModal, setActiveMessageModal] = useState(false); const [newMessage, setNewMessage] = useState(''); const [error, setError] = useState(null); + const zipCode = useAuthStore((props) => props.zipCode); const queryClient = useQueryClient(); const { mutate } = useMutation({ mutationFn: (content: string) => postRollingPaperComment(rollingPaperId, content), - onSuccess: (data) => { - console.log(data); + onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['rolling-paper', rollingPaperId] }); setNewMessage(''); setError(null); @@ -37,7 +36,6 @@ const WriteCommentButton = ({ rollingPaperId }: WriteCommentButtonProps) => { const handleAddComment = () => { console.log(rollingPaperId); - // 추가 가능한지 조건 확인 if (newMessage.trim() === '') { setError('편지를 작성해주세요.'); return; @@ -59,12 +57,12 @@ const WriteCommentButton = ({ rollingPaperId }: WriteCommentButtonProps) => { onComplete={handleAddComment} >

{error}

-

From. {DUMMY_USER_ZIP_CODE}

+

From. {zipCode}

)}