Skip to content

Commit f04c391

Browse files
AAminhaAAminha
committed
fix: 데이터 변경 후 캐싱 초기화 하는 조건 수정
1 parent fd985fb commit f04c391

File tree

4 files changed

+61
-42
lines changed

4 files changed

+61
-42
lines changed

‎src/components/ConfirmModal.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ const ConfirmModal = ({
2222
onCancel,
2323
onConfirm,
2424
}: ConfirmModalProps) => {
25-
// TODO: 전역 상태로 관리해야하는지 고민
2625
return (
2726
<ModalOverlay>
2827
<div className="w-73">

‎src/pages/Admin/RollingPaper.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@ export default function AdminRollingPaper() {
2828

2929
return (
3030
<>
31-
{activeModal && <AddRollingPaperModal onClose={() => setActiveModal(false)} />}
31+
{activeModal && (
32+
<AddRollingPaperModal currentPage={currentPage} onClose={() => setActiveModal(false)} />
33+
)}
3234
<PageTitle>게시판 관리 / 롤링 페이퍼 설정</PageTitle>
3335
<WrapperFrame>
3436
<section className="flex items-center">
@@ -56,7 +58,11 @@ export default function AdminRollingPaper() {
5658
</thead>
5759
<tbody>
5860
{data.content.map((rollingPaper) => (
59-
<RollingPaperItem key={rollingPaper.eventPostId} information={rollingPaper} />
61+
<RollingPaperItem
62+
key={rollingPaper.eventPostId}
63+
information={rollingPaper}
64+
currentPage={currentPage}
65+
/>
6066
))}
6167
</tbody>
6268
</table>

‎src/pages/Admin/components/AddRollingPaperModal.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ import { postNewRollingPaper } from '@/apis/rolling';
55
import ModalOverlay from '@/components/ModalOverlay';
66

77
interface AddRollingPaperModalProps {
8+
currentPage: number | string;
89
onClose: () => void;
910
}
1011

11-
export default function AddRollingPaperModal({ onClose }: AddRollingPaperModalProps) {
12+
export default function AddRollingPaperModal({ currentPage, onClose }: AddRollingPaperModalProps) {
1213
const [title, setTitle] = useState('');
1314
const [error, setError] = useState('');
1415
const queryClient = useQueryClient();
@@ -19,8 +20,7 @@ export default function AddRollingPaperModal({ onClose }: AddRollingPaperModalPr
1920
setTitle('');
2021
setError('');
2122
onClose();
22-
// TODO: 페이지네이션 적용 후, 현재 page에 대한 캐싱 날리는 방식으로 변경
23-
queryClient.invalidateQueries({ queryKey: ['admin-rolling-paper'] });
23+
queryClient.invalidateQueries({ queryKey: ['admin-rolling-paper', currentPage] });
2424
},
2525
onError: () => {
2626
setError('편지 작성에 실패했어요. 다시 시도해주세요.');

‎src/pages/Admin/components/RollingPaperItem.tsx‎

Lines changed: 50 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,22 @@ import { AxiosError } from 'axios';
33

44
import { deleteRollingPaper, patchRollingPaper } from '@/apis/rolling';
55
import { DeleteIcon } from '@/assets/icons';
6+
import { useState } from 'react';
7+
import ConfirmModal from '@/components/ConfirmModal';
68

79
interface RollingPaperItemProps {
810
information: AdminRollingPaperInformation;
11+
currentPage: string | number;
912
}
1013

11-
export default function RollingPaperItem({ information }: RollingPaperItemProps) {
14+
export default function RollingPaperItem({ information, currentPage }: RollingPaperItemProps) {
15+
const [activeDeleteModal, setActiveDeleteModal] = useState(false);
1216
const queryClient = useQueryClient();
1317

1418
const { mutate: deleteMutate } = useMutation({
1519
mutationFn: () => deleteRollingPaper(information.eventPostId),
1620
onSuccess: () => {
17-
// TODO: 페이지네이션 적용 후, 현재 page에 대한 캐싱 날리는 방식으로 변경
18-
queryClient.invalidateQueries({ queryKey: ['admin-rolling-paper'] });
21+
queryClient.invalidateQueries({ queryKey: ['admin-rolling-paper', currentPage] });
1922
},
2023
onError: (err) => {
2124
console.error(err);
@@ -25,9 +28,7 @@ export default function RollingPaperItem({ information }: RollingPaperItemProps)
2528
const { mutate: toggleStatus } = useMutation({
2629
mutationFn: () => patchRollingPaper(information.eventPostId),
2730
onSuccess: () => {
28-
// TODO: 기존 데이터 수정하는 방식으로 ㄱㄱㄱㄱㄱㄱㄱ
29-
// 일단 임시로 캐싱 날리기
30-
queryClient.invalidateQueries({ queryKey: ['admin-rolling-paper'] });
31+
queryClient.invalidateQueries({ queryKey: ['admin-rolling-paper', currentPage] });
3132
},
3233
onError: (err: AxiosError<{ code: string; message: string }>) => {
3334
if (err.response?.data.code === 'EVENT-004') {
@@ -37,40 +38,53 @@ export default function RollingPaperItem({ information }: RollingPaperItemProps)
3738
},
3839
});
3940

40-
// TODO: 진짜 삭제하겠냐고 물어보기
4141
return (
42-
<tr className="border-gray-40 h-14 border-b">
43-
<td className="w-14 text-center">{information.eventPostId}</td>
44-
<td className="text-left">
45-
<div>
46-
{information.used && (
47-
<span className="mr-2 rounded-full border border-amber-500 bg-amber-100/70 px-3 py-0.5 whitespace-nowrap text-amber-500">
48-
진행 중
49-
</span>
50-
)}
51-
{information.title}
52-
</div>
53-
</td>
54-
<td className="text-center">
55-
<button
56-
type="button"
57-
className="hover:bg-gray-10 text-gray-60 rounded-md px-3 py-1 hover:text-black"
58-
onClick={() => toggleStatus()}
59-
>
60-
{information.used ? '중단하기' : '진행하기'}
61-
</button>
62-
</td>
63-
<td className="w-6">
64-
{!information.used && (
42+
<>
43+
{activeDeleteModal && (
44+
<ConfirmModal
45+
title="정말 롤링페이퍼를 삭제하시겠어요?"
46+
description="롤링페이퍼를 삭제하는 경우 복구가 불가능합니다!"
47+
cancelText="되돌아가기"
48+
confirmText="삭제하기"
49+
onCancel={() => {
50+
setActiveDeleteModal(false);
51+
}}
52+
onConfirm={deleteMutate}
53+
/>
54+
)}
55+
<tr className="border-gray-40 h-14 border-b">
56+
<td className="w-14 text-center">{information.eventPostId}</td>
57+
<td className="text-left">
58+
<div>
59+
{information.used && (
60+
<span className="mr-2 rounded-full border border-amber-500 bg-amber-100/70 px-3 py-0.5 whitespace-nowrap text-amber-500">
61+
진행 중
62+
</span>
63+
)}
64+
{information.title}
65+
</div>
66+
</td>
67+
<td className="text-center">
6568
<button
6669
type="button"
67-
className="text-gray-60 flex items-center justify-center p-1 hover:text-black"
68-
onClick={() => deleteMutate()}
70+
className="hover:bg-gray-10 text-gray-60 rounded-md px-3 py-1 hover:text-black"
71+
onClick={() => toggleStatus()}
6972
>
70-
<DeleteIcon className="h-5 w-5" />
73+
{information.used ? '중단하기' : '진행하기'}
7174
</button>
72-
)}
73-
</td>
74-
</tr>
75+
</td>
76+
<td className="w-6">
77+
{!information.used && (
78+
<button
79+
type="button"
80+
className="text-gray-60 flex items-center justify-center p-1 hover:text-black"
81+
onClick={() => setActiveDeleteModal(true)}
82+
>
83+
<DeleteIcon className="h-5 w-5" />
84+
</button>
85+
)}
86+
</td>
87+
</tr>
88+
</>
7589
);
7690
}

0 commit comments

Comments
 (0)