- state.toastObjects);
+
+ if (toastObjects.length <= 0) return;
+ return (
+ <>
+ {toastObjects.map((toastObj, index) => (
+ (null);
+
+ const setToastActive = useToastStore((state) => state.setToastActive);
+
+ useEffect(() => {
+ if (!accessToken) {
+ console.log('로그인 정보 확인불가');
+ return;
+ }
+
+ const connectSSE = () => {
+ try {
+ console.log('구독 시작');
+ sourceRef.current = new EventSourcePolyfill(
+ `${import.meta.env.VITE_API_URL}/api/notifications/sub`,
+ {
+ headers: {
+ Authorization: `Bearer ${accessToken}`,
+ },
+ },
+ );
+
+ sourceRef.current.onmessage = (event) => {
+ console.log(event);
+ console.log('알림 수신');
+ setToastActive({
+ toastType: 'Info',
+ title: '새 알림이 도착했어요!',
+ position: 'Top',
+ time: 5,
+ onClick: () => navigate('/mypage/notifications'),
+ });
+ };
+
+ sourceRef.current.onerror = (error) => {
+ console.log(error);
+ console.log('에러 발생함');
+ closeSSE();
+ // 재연결 로직 추가 가능
+ setTimeout(connectSSE, 5000); // 5초 후 재연결 시도
+ };
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ connectSSE();
+
+ return () => {
+ console.log('컴포넌트 언마운트로 인한 구독해제');
+ closeSSE();
+ };
+ }, [accessToken]);
+
+ const closeSSE = () => {
+ sourceRef.current?.close();
+ sourceRef.current = null;
+ };
+
+ // return { closeSSE };
+};
diff --git a/src/layouts/PrivateRoute.tsx b/src/layouts/PrivateRoute.tsx
index bc78b4a..a607485 100644
--- a/src/layouts/PrivateRoute.tsx
+++ b/src/layouts/PrivateRoute.tsx
@@ -2,8 +2,11 @@ import { useEffect, useState } from 'react';
import { useNavigate, Outlet } from 'react-router';
import useAuthStore from '@/stores/authStore';
+import { useServerSentEvents } from '@/hooks/useServerSentEvents';
+import Toast from '@/components/Toast';
export default function PrivateRoute() {
+ useServerSentEvents();
const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
const navigate = useNavigate();
const [shouldRender, setShouldRender] = useState(false);
@@ -20,5 +23,10 @@ export default function PrivateRoute() {
return null;
}
- return (null);
const [selectedReportId, setSelectedReportId] = useState(null);
- // const [allReports, setAllReports] = useState();
-
const [reportQueryString, setReportQueryString] = useState({
reportType: null,
status: 'PENDING',
page: '1',
- size: '3',
+ size: '1',
});
+
const handleGetReports = async (reportQueryString: ReportQueryString) => {
const res = await getReports(reportQueryString);
if (res?.status === 200) {
- console.log(res.data.data.content);
- setReports(res.data.data.content);
+ const data = res.data.data;
+ setReports(data.content);
setReportPages(() => ({
- currentPage: res.data.data.currentPage,
- totalPages: res.data.data.totalPages,
+ currentPage: data.currentPage,
+ totalPages: data.totalPages,
}));
}
};
+
+ const handleNowPage = (page: string) => {
+ setReportQueryString((cur) => ({ ...cur, page: page }));
+ };
+
+ const handleStatus = (status: Status) => {
+ setReportQueryString((cur) => ({ ...cur, status: status }));
+ };
+
useEffect(() => {
handleGetReports(reportQueryString);
}, [reportQueryString]);
@@ -48,7 +58,19 @@ export default function ReportManage() {
<>
검열 관리 / 신고 편지 목록
-
@@ -68,39 +90,11 @@ export default function ReportManage() {
setSelectReport={setSelectReport}
/>
))}
-
{detailModalOpen && (
('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)} />
+ )}
게시판 관리 / 롤링 페이퍼 설정
@@ -26,55 +44,40 @@ export default function AdminRollingPaper() {
롤링페이퍼 생성
-
-
-
+ {isLoading &&
+
+
+ {data.content.length === 0 && (
+
+ 아직 생성된 롤링페이퍼가 없어요
+
+ )}
+
+ )}
+
);
diff --git a/src/pages/Admin/components/AddInputButton.tsx b/src/pages/Admin/components/AddInputButton.tsx
index 8b04232..72ac896 100644
--- a/src/pages/Admin/components/AddInputButton.tsx
+++ b/src/pages/Admin/components/AddInputButton.tsx
@@ -19,12 +19,13 @@ export default function AddInputButton({
target.style.width = `${target.scrollWidth}px`;
};
- const handlePostBadWords = () => {
+ const handlePostBadWords = async () => {
if (inputText.word === '') return setAddInputShow(false);
- postBadWords(inputText, () => {
+ const res = await postBadWords(inputText);
+ if (res?.status === 200) {
setBadWords((cur) => [...cur, inputText]);
setAddInputShow(false);
- });
+ }
};
useEffect(() => {
diff --git a/src/pages/Admin/components/AddRollingPaperModal.tsx b/src/pages/Admin/components/AddRollingPaperModal.tsx
index 2df17c3..e6f86bc 100644
--- a/src/pages/Admin/components/AddRollingPaperModal.tsx
+++ b/src/pages/Admin/components/AddRollingPaperModal.tsx
@@ -1,14 +1,31 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
import { ChangeEvent, FormEvent, useState } from 'react';
+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();
+
+ const { mutate } = useMutation({
+ mutationFn: () => postNewRollingPaper(title),
+ onSuccess: () => {
+ setTitle('');
+ setError('');
+ onClose();
+ queryClient.invalidateQueries({ queryKey: ['admin-rolling-paper', currentPage] });
+ },
+ onError: () => {
+ setError('편지 작성에 실패했어요. 다시 시도해주세요.');
+ },
+ });
const handleChange = (e: ChangeEvent) => {
setTitle(e.target.value);
@@ -21,7 +38,7 @@ export default function AddRollingPaperModal({ onClose }: AddRollingPaperModalPr
return;
}
- console.log(title);
+ mutate();
};
return (
diff --git a/src/pages/Admin/components/PagenationNavigation.tsx b/src/pages/Admin/components/PagenationNavigation.tsx
new file mode 100644
index 0000000..44a86a4
--- /dev/null
+++ b/src/pages/Admin/components/PagenationNavigation.tsx
@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+interface PagenationNavigation {
+ totalPage: number;
+ buttonLength: number;
+ handlePageNumberButtonClick: (page: string) => void;
+}
+export default function PagenationNavigation({
+ totalPage,
+ buttonLength,
+ handlePageNumberButtonClick,
+}: PagenationNavigation) {
+ const totalSection = Math.ceil(totalPage / buttonLength) - 1;
+ const [nowSection, setNowSection] = useState(0);
+ const [nowPageNumberAt, setNowPageNumberAt] = useState(1);
+
+ // 네비게이션 시작점, 끝점
+ const navigationRange = {
+ start: nowSection * buttonLength + 1,
+ end: nowSection * buttonLength + buttonLength,
+ };
+
+ // 페이지 버튼 배열
+ const pageNumberButtonArray = Array.from(
+ { length: navigationRange.end - navigationRange.start + 1 },
+ (_, index) => navigationRange.start + index,
+ );
+
+ // 페이지 버튼 클릭시 해당 번호값이 파라미터에 담김
+ const handlePageButtonClick = (page: number) => {
+ const pageString = page.toString();
+ handlePageNumberButtonClick(pageString);
+ setNowPageNumberAt(page);
+ };
+
+ const handlePrevButtonClick = () => {
+ if (nowSection > 0) {
+ const prev = (nowSection - 1) * buttonLength + buttonLength;
+ setNowSection((cur) => cur - 1);
+ handlePageButtonClick(prev);
+ }
+ };
+
+ const handleNextButtonClick = () => {
+ if (nowSection < totalSection) {
+ const next = (nowSection + 1) * buttonLength + 1;
+ setNowSection((cur) => cur + 1);
+ handlePageButtonClick(next);
+ }
+ };
+
+ const buttonStyle =
+ 'rounded-full bg-white w-8 h-8 disabled:bg-gray-20 disabled:text-white disabled:cursor-auto';
+
+ return (
+ {
+ setActiveDeleteModal(false);
+ }}
+ onConfirm={deleteMutate}
+ />
+ )}
+
+ {information.eventPostId}
+
+
+
+
+
+
+ {!information.used && (
+
+ )}
+
+
+
+ );
+}
diff --git a/src/pages/Auth/index.tsx b/src/pages/Auth/index.tsx
index 0596a77..cd892d5 100644
--- a/src/pages/Auth/index.tsx
+++ b/src/pages/Auth/index.tsx
@@ -7,6 +7,7 @@ import useAuthStore from '@/stores/authStore';
const AuthCallbackPage = () => {
const stateToken = new URLSearchParams(window.location.search).get('state');
const redirectURL = new URLSearchParams(window.location.search).get('redirect');
+ const error = new URLSearchParams(window.location.search).get('error');
const login = useAuthStore((state) => state.login);
const logout = useAuthStore((state) => state.logout);
@@ -32,6 +33,8 @@ const AuthCallbackPage = () => {
login();
if (userInfo.accessToken) setAccessToken(userInfo.accessToken);
+ console.log(redirectURL);
+
switch (redirectURL) {
case 'home':
{
@@ -67,6 +70,9 @@ const AuthCallbackPage = () => {
useEffect(() => {
if (!stateToken) {
navigate('/notFound');
+ if (error === 'deleted_member') {
+ alert('탈퇴한 회원입니다.');
+ }
return;
}
diff --git a/src/pages/Home/components/RandomCheer.tsx b/src/pages/Home/components/RandomCheer.tsx
index 83e96c6..5d3ac5a 100644
--- a/src/pages/Home/components/RandomCheer.tsx
+++ b/src/pages/Home/components/RandomCheer.tsx
@@ -25,6 +25,7 @@ const RandomCheer = () => {
src={randomCheerBird}
alt="random cheer bird"
className="h-[26.5px] w-[21px] opacity-80"
+ onClick={() => setRandomCheer(getRandomCheer())}
/>
);
diff --git a/src/pages/Home/components/ShowDraftModal.tsx b/src/pages/Home/components/ShowDraftModal.tsx
index 3cb9060..5cbb5bc 100644
--- a/src/pages/Home/components/ShowDraftModal.tsx
+++ b/src/pages/Home/components/ShowDraftModal.tsx
@@ -1,8 +1,8 @@
import DeleteOutlineRoundedIcon from '@mui/icons-material/DeleteOutlineRounded';
import React, { useEffect, useState } from 'react';
-// import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router';
-import { DraftLetter, getDraftLetters } from '@/apis/draftLetters';
+import { DraftLetter, getDraftLetters, deleteDraftLetters } from '@/apis/draftLetters';
import ModalBackgroundWrapper from '@/components/ModalBackgroundWrapper';
import ModalOverlay from '@/components/ModalOverlay';
@@ -14,15 +14,15 @@ interface ShowDraftModalProps {
const ShowDraftModal = ({ onClose }: ShowDraftModalProps) => {
const [draftLetters, setDraftLetters] = useState{noticeText}
+
+
diff --git a/src/components/ReportModal.tsx b/src/components/ReportModal.tsx
index be47d81..41ce17f 100644
--- a/src/components/ReportModal.tsx
+++ b/src/components/ReportModal.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
import { twMerge } from 'tailwind-merge';
import { postReports } from '@/apis/admin';
@@ -8,7 +8,7 @@ import TextareaField from './TextareaField';
interface ReportModalProps {
reportType: ReportType;
- letterId: number | null;
+ letterId: number;
onClose: () => void;
}
@@ -42,6 +42,7 @@ const ReportModal = ({ reportType, letterId, onClose }: ReportModalProps) => {
const res = await postReports(postReportRequest);
if (res?.status === 200) {
alert('신고 처리되었습니다.');
+ console.log(res);
onClose();
} else if (res?.status === 409) {
alert('신고한 이력이 있습니다.');
@@ -49,13 +50,6 @@ const ReportModal = ({ reportType, letterId, onClose }: ReportModalProps) => {
}
};
- useEffect(() => {
- if (!postReportRequest.letterId) {
- alert('신고 모달을 여는 과정에서 오류가 발생했습니다. 새로고침을 눌러주세요');
- onClose();
- }
- });
-
return (
+ {noticeText} +
{
+ setToastUnActive(index);
+ if (toastObj.onClick) toastObj.onClick();
+ }}
+ >
+ {`${TOAST_DESIGN[toastObj.toastType].imoji} ${toastObj.title} ${TOAST_DESIGN[toastObj.toastType].imoji}`}
+
+ );
+}
diff --git a/src/hooks/useServerSentEvents.tsx b/src/hooks/useServerSentEvents.tsx
new file mode 100644
index 0000000..1ad9850
--- /dev/null
+++ b/src/hooks/useServerSentEvents.tsx
@@ -0,0 +1,72 @@
+import { EventSourcePolyfill } from 'event-source-polyfill';
+import { useEffect, useRef } from 'react';
+
+import useAuthStore from '@/stores/authStore';
+import useToastStore from '@/stores/toastStore';
+import { useNavigate } from 'react-router';
+
+export const useServerSentEvents = () => {
+ const navigate = useNavigate();
+
+ const accessToken = useAuthStore((state) => state.accessToken);
+ const sourceRef = useRef
+
-
+
-
-
- {reportPages.currentPage}/{reportPages.totalPages}
-
-
-
- | ID | -제목 | -쌓인 편지 수 | -상태 | -- |
|---|---|---|---|---|
| 1 | -- 침수 피해를 복구중인 포스코 임직원 분들에게 응원의 메시지를 보내주세요! - | -12 | -- - 진행 중 - - | -- |
| 2 | -- 침수 피해를 복구중인 포스코 임직원 분들에게 응원의 메시지를 보내주세요! - | -12 | -- - | -- - | -
Loading...
} + {isSuccess && ( + <> +| ID | +제목 | +상태 | ++ |
|---|
+
+ );
+}
diff --git a/src/pages/Admin/components/RollingPaperItem.tsx b/src/pages/Admin/components/RollingPaperItem.tsx
new file mode 100644
index 0000000..58cdfc2
--- /dev/null
+++ b/src/pages/Admin/components/RollingPaperItem.tsx
@@ -0,0 +1,90 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+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, currentPage }: RollingPaperItemProps) {
+ const [activeDeleteModal, setActiveDeleteModal] = useState(false);
+ const queryClient = useQueryClient();
+
+ const { mutate: deleteMutate } = useMutation({
+ mutationFn: () => deleteRollingPaper(information.eventPostId),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['admin-rolling-paper', currentPage] });
+ },
+ onError: (err) => {
+ console.error(err);
+ },
+ });
+
+ const { mutate: toggleStatus } = useMutation({
+ mutationFn: () => patchRollingPaper(information.eventPostId),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['admin-rolling-paper', currentPage] });
+ },
+ onError: (err: AxiosError<{ code: string; message: string }>) => {
+ if (err.response?.data.code === 'EVENT-004') {
+ alert(err.response.data.message);
+ }
+ console.error(err);
+ },
+ });
+
+ return (
+ <>
+ {activeDeleteModal && (
+
+
+ {pageNumberButtonArray.map((num) => {
+ if (totalPage < num) return null;
+ return (
+
+ );
+ })}
+
+
+
+ {information.used && (
+
+ 진행 중
+
+ )}
+ {information.title}
+
+ 임시저장 편지
-로그아웃 시 임시 저장된 편지는 사라집니다
- {draftLetters.map((draft) => (
-
diff --git a/src/pages/Home/components/ShowIncomingLettersModal.tsx b/src/pages/Home/components/ShowIncomingLettersModal.tsx
index 219015b..27513c9 100644
--- a/src/pages/Home/components/ShowIncomingLettersModal.tsx
+++ b/src/pages/Home/components/ShowIncomingLettersModal.tsx
@@ -29,15 +29,19 @@ const ShowIncomingLettersModal = ({ onClose }: ShowIncomingLettersModalProps) =>
handleNavigation(draft.letterId)}
- >
-
{draft.title}
-
-
- ))}
+ ))
+ ) : (
+ handleNavigation(draft)}
+ >
+
- {draft.title}
+ {
+ e.stopPropagation();
+ handleDeleteDraftLetters(draft.letterId);
+ }}
+ >
+
작성 중인 편지가 없어요
+ )}시간은 실제 시간을 기반으로 책정됩니다.