feat: 롤링페이퍼 추가 기능 구현 (#95)

AAminha · wldnjs990 · web-flow · commit 5b4d4ba83646 · 2025-03-09T17:48:29.000+09:00
* fix: 더미데이터 제거

* feat: 롤링페이퍼 무한 스크롤 적용

* feat: 관리자 페이지 롤링 페이퍼 설정 화면에 페이지네이션 적용

* design: 롤링페이퍼 작성 버튼 위치 수정

* fix: 데이터 변경 후 캐싱 초기화 하는 조건 수정

* design: 하단 언덕 이미지 깨지는 문제 해결

---------

Co-authored-by: wldnjs990 &lt;139528356+wldnjs990@users.noreply.github.com&gt;
diff --git a/src/apis/rolling.ts b/src/apis/rolling.ts
@@ -9,10 +9,18 @@ export const getCurrentRollingPaper = async (): Promise<RollingPaperInformation>
 
 export const getRollingPaperDetail = async (
   rollingPaperId: string | number,
+  page: number,
+  size: number,
 ): Promise<RollingPaper> => {
   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<RollingPaperList> => {
+export const getRollingPaperList = async (
+  page: string | number,
+  size: number,
+): Promise<RollingPaperList> => {
   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
@@ -6,7 +6,7 @@ const BackgroundBottom = () => {
   return (
     <BackgroundImageWrapper
       as="div"
-      className="fixed bottom-[-40px] left-1/2 z-[-10] h-42 w-full -translate-x-1/2 opacity-70"
+      className="fixed bottom-[-40px] left-1/2 h-42 w-full -translate-x-1/2 opacity-70"
       imageUrl={BgItem}
     />
   );
diff --git a/src/components/ConfirmModal.tsx b/src/components/ConfirmModal.tsx
@@ -22,7 +22,6 @@ const ConfirmModal = ({
   onCancel,
   onConfirm,
 }: ConfirmModalProps) => {
-  // TODO: 전역 상태로 관리해야하는지 고민
   return (
     <ModalOverlay>
       <div className="w-73">
diff --git 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<string>('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 && <AddRollingPaperModal onClose={() => setActiveModal(false)} />}
+      {activeModal && (
+        <AddRollingPaperModal currentPage={currentPage} onClose={() => setActiveModal(false)} />
+      )}
       <PageTitle>게시판 관리 / 롤링 페이퍼 설정</PageTitle>
       <WrapperFrame>
         <section className="flex items-center">
@@ -47,7 +58,11 @@ export default function AdminRollingPaper() {
               </thead>
               <tbody>
                 {data.content.map((rollingPaper) => (
-                  <RollingPaperItem key={rollingPaper.eventPostId} information={rollingPaper} />
+                  <RollingPaperItem
+                    key={rollingPaper.eventPostId}
+                    information={rollingPaper}
+                    currentPage={currentPage}
+                  />
                 ))}
               </tbody>
             </table>
@@ -58,7 +73,11 @@ export default function AdminRollingPaper() {
             )}
           </>
         )}
-        {/* TODO: 페이지네이션 적용 */}
+        <PagenationNavigation
+          totalPage={Number(data?.totalPages)}
+          buttonLength={5}
+          handlePageNumberButtonClick={handleNowPage}
+        />
       </WrapperFrame>
     </>
   );
diff --git 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
@@ -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 (
     <div className="mt-5 flex h-10 w-full items-center justify-center">
-      <div className="flex items-center">
+      <div className="flex items-center gap-2">
         <button
-          className={twMerge(buttonStyle)}
+          className={twMerge(buttonStyle, 'w-14')}
           disabled={nowSection <= 0}
           onClick={() => {
             handlePrevButtonClick();
@@ -69,7 +69,7 @@ export default function PagenationNavigation({
           return (
             <button
               key={num}
-              className={twMerge(buttonStyle, nowPageNumberAt === num && 'bg-accent-3')}
+              className={twMerge(buttonStyle, nowPageNumberAt === num && 'bg-primary-2/50')}
               onClick={() => {
                 handlePageButtonClick(num);
               }}
@@ -79,7 +79,7 @@ export default function PagenationNavigation({
           );
         })}
         <button
-          className={twMerge(buttonStyle)}
+          className={twMerge(buttonStyle, 'w-14')}
           disabled={nowSection >= totalSection}
           onClick={() => {
             handleNextButtonClick();
diff --git a/src/pages/Admin/components/RollingPaperItem.tsx b/src/pages/Admin/components/RollingPaperItem.tsx
@@ -3,19 +3,22 @@ import { AxiosError } from 'axios';
 
 import { deleteRollingPaper, patchRollingPaper } from '@/apis/rolling';
 import { DeleteIcon } from '@/assets/icons';
+import { useState } from 'react';
+import ConfirmModal from '@/components/ConfirmModal';
 
 interface RollingPaperItemProps {
   information: AdminRollingPaperInformation;
+  currentPage: string | number;
 }
 
-export default function RollingPaperItem({ information }: RollingPaperItemProps) {
+export default function RollingPaperItem({ information, currentPage }: RollingPaperItemProps) {
+  const [activeDeleteModal, setActiveDeleteModal] = useState(false);
   const queryClient = useQueryClient();
 
   const { mutate: deleteMutate } = useMutation({
     mutationFn: () => deleteRollingPaper(information.eventPostId),
     onSuccess: () => {
-      // TODO: 페이지네이션 적용 후, 현재 page에 대한 캐싱 날리는 방식으로 변경
-      queryClient.invalidateQueries({ queryKey: ['admin-rolling-paper'] });
+      queryClient.invalidateQueries({ queryKey: ['admin-rolling-paper', currentPage] });
     },
     onError: (err) => {
       console.error(err);
@@ -25,9 +28,7 @@ export default function RollingPaperItem({ information }: RollingPaperItemProps)
   const { mutate: toggleStatus } = useMutation({
     mutationFn: () => patchRollingPaper(information.eventPostId),
     onSuccess: () => {
-      // TODO: 기존 데이터 수정하는 방식으로 ㄱㄱㄱㄱㄱㄱㄱ
-      // 일단 임시로 캐싱 날리기
-      queryClient.invalidateQueries({ queryKey: ['admin-rolling-paper'] });
+      queryClient.invalidateQueries({ queryKey: ['admin-rolling-paper', currentPage] });
     },
     onError: (err: AxiosError<{ code: string; message: string }>) => {
       if (err.response?.data.code === 'EVENT-004') {
@@ -37,40 +38,53 @@ export default function RollingPaperItem({ information }: RollingPaperItemProps)
     },
   });
 
-  // TODO: 진짜 삭제하겠냐고 물어보기
   return (
-    <tr className="border-gray-40 h-14 border-b">
-      <td className="w-14 text-center">{information.eventPostId}</td>
-      <td className="text-left">
-        <div>
-          {information.used && (
-            <span className="mr-2 rounded-full border border-amber-500 bg-amber-100/70 px-3 py-0.5 whitespace-nowrap text-amber-500">
-              진행 중
-            </span>
-          )}
-          {information.title}
-        </div>
-      </td>
-      <td className="text-center">
-        <button
-          type="button"
-          className="hover:bg-gray-10 text-gray-60 rounded-md px-3 py-1 hover:text-black"
-          onClick={() => toggleStatus()}
-        >
-          {information.used ? '중단하기' : '진행하기'}
-        </button>
-      </td>
-      <td className="w-6">
-        {!information.used && (
+    <>
+      {activeDeleteModal && (
+        <ConfirmModal
+          title="정말 롤링페이퍼를 삭제하시겠어요?"
+          description="롤링페이퍼를 삭제하는 경우 복구가 불가능합니다!"
+          cancelText="되돌아가기"
+          confirmText="삭제하기"
+          onCancel={() => {
+            setActiveDeleteModal(false);
+          }}
+          onConfirm={deleteMutate}
+        />
+      )}
+      <tr className="border-gray-40 h-14 border-b">
+        <td className="w-14 text-center">{information.eventPostId}</td>
+        <td className="text-left">
+          <div>
+            {information.used && (
+              <span className="mr-2 rounded-full border border-amber-500 bg-amber-100/70 px-3 py-0.5 whitespace-nowrap text-amber-500">
+                진행 중
+              </span>
+            )}
+            {information.title}
+          </div>
+        </td>
+        <td className="text-center">
           <button
             type="button"
-            className="text-gray-60 flex items-center justify-center p-1 hover:text-black"
-            onClick={() => deleteMutate()}
+            className="hover:bg-gray-10 text-gray-60 rounded-md px-3 py-1 hover:text-black"
+            onClick={() => toggleStatus()}
           >
-            <DeleteIcon className="h-5 w-5" />
+            {information.used ? '중단하기' : '진행하기'}
           </button>
-        )}
-      </td>
-    </tr>
+        </td>
+        <td className="w-6">
+          {!information.used && (
+            <button
+              type="button"
+              className="text-gray-60 flex items-center justify-center p-1 hover:text-black"
+              onClick={() => setActiveDeleteModal(true)}
+            >
+              <DeleteIcon className="h-5 w-5" />
+            </button>
+          )}
+        </td>
+      </tr>
+    </>
   );
 }
diff --git a/src/pages/LetterBoard/index.tsx b/src/pages/LetterBoard/index.tsx
@@ -56,7 +56,7 @@ const LetterBoardPage = () => {
 
   return (
     <>
-      <main className="mt-[-25px] flex grow flex-col px-5 pt-20 pb-10">
+      <main className="z-1 mt-[-25px] flex grow flex-col px-5 pt-20 pb-10">
         <>
           <NoticeRollingPaper />
           <PageTitle className="mx-auto mt-4">게시판</PageTitle>
diff --git a/src/pages/MyPage/components/MyBoardPage.tsx b/src/pages/MyPage/components/MyBoardPage.tsx
@@ -39,7 +39,7 @@ const MyBoardPage = () => {
   }
   return (
     <>
-      <main className={twMerge('flex grow flex-col px-5 pt-20 pb-10')}>
+      <main className={twMerge('z-1 flex grow flex-col px-5 pt-20 pb-10')}>
         <PageTitle className="mx-auto mb-11">내가 올린 게시물</PageTitle>
         {isLoading ? (
           <p>loading</p>
diff --git 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<string | null>(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}
         >
           <p className="body-r text-accent-1 mt-1">{error}</p>
-          <p className="body-r mt-5 text-end text-black">From. {DUMMY_USER_ZIP_CODE}</p>
+          <p className="body-r mt-5 text-end text-black">From. {zipCode}</p>
         </MessageModal>
       )}
       <button
         type="button"
-        className="fixed bottom-7.5 left-5 overflow-hidden rounded-sm"
+        className="sticky bottom-8 z-10 mt-4 -mb-4 self-start overflow-hidden rounded-sm"
         onClick={() => setActiveMessageModal(true)}
       >
         <img src={EnvelopeImg} alt="편지지 이미지" className="h-12 w-auto opacity-70" />
diff --git a/src/pages/RollingPaper/index.tsx b/src/pages/RollingPaper/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ const MyBoardPage = () => {`
`39`	`39`	`}`
`40`	`40`	`return (`
`41`	`41`	`<>`
`42`		`- <main className={twMerge('flex grow flex-col px-5 pt-20 pb-10')}>`
	`42`	`+ <main className={twMerge('z-1 flex grow flex-col px-5 pt-20 pb-10')}>`
`43`	`43`	`<PageTitle className="mx-auto mb-11">내가 올린 게시물</PageTitle>`
`44`	`44`	`{isLoading ? (`
`45`	`45`	`<p>loading</p>`