Merge pull request #108 from softeerbootcamp4th/TASK-42

[Feature][Task-42]  8.21일 QA 수정

packages/admin/src/components/chat/Chat.tsx

@@ -1,4 +1,4 @@
-import { BlockedChat, ChatProps, Message, Notice } from '@softeer/common/components';
+import { ChatProps, Message, Notice } from '@softeer/common/components';
 import { FunctionComponent, useCallback } from 'react';
 import { Button } from '../ui/button.js';
 
@@ -15,7 +15,17 @@ export default function Chat({ type, team, sender, content, id, onBlock }: Admin
 			case 'n':
 				return <Notice>{content}</Notice>;
 			case 'b':
-				return <BlockedChat />;
+				return (
+					<Message
+						sender={sender!}
+						team={team!}
+						isMyMessage={false}
+					>
+						<div className="flex flex-row flex-1 w-full justify-between">
+							<div className="text-orange-500 flex mi-w-fit flex-1">블록된 채팅: {content}</div>
+						</div>
+					</Message>
+				);
 			case 'm':
 			default:
 				return (

packages/admin/src/components/chat/RealTimeChatting.tsx

@@ -36,7 +36,7 @@ function RealTimeChatting({
 			<div className="rounded-4 mb-4 w-full border-2 border-yellow-900 p-6">
 				공지사항 : {notice}
 			</div>
-			<div className="h-[1000px] w-full overflow-y-auto rounded-[10px] bg-neutral-800 py-10">
+			<div className="h-[1000px] w-full overflow-y-auto rounded-[10px] bg-yellow-300 py-10">
 				<ChatList>
 					{messages.map((message) => (
 						<Chat onBlock={onBlock} key={message.id} {...message} />

packages/admin/src/components/error/CommonErrorBoundary.tsx

@@ -0,0 +1,44 @@
+import { ACCESS_TOKEN_KEY } from '@softeer/common/constants';
+import { Cookie } from '@softeer/common/utils';
+import { PropsWithChildren, useEffect } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '../ui/button.tsx';
+
+export function CommonErrorFallback({
+	error,
+	resetErrorBoundary,
+	}: {
+		error: Error,
+		resetErrorBoundary: () => void
+	}) {
+		const navigate = useNavigate();
+		useEffect(() => {
+			switch (error.message) {
+				case '관리자 로그인을 먼저 진행해주세요':
+				case '로그인이 만료 되었습니다':
+					Cookie.clearCookie(ACCESS_TOKEN_KEY);
+					navigate('/');
+					break;
+				default:
+			}
+		}, []);
+
+    return (
+		<div className="min-w-screen min-h-screen flex justify-center items-center flex-col gap-4 bg-skyblue-500 ">
+			<Button onClick={resetErrorBoundary}>다시 시도하기</Button>{error.message}
+		</div>
+	);
+}
+
+function CommonErrorBoundary({ children }: PropsWithChildren) {
+    return (
+        <ErrorBoundary
+			FallbackComponent={CommonErrorFallback}
+			onReset={() => { window.location.reload(); }}
+        >
+            {children}
+        </ErrorBoundary>
+    );
+}
+export default CommonErrorBoundary;

packages/admin/src/hooks/socket/useChatSocket.ts

@@ -55,9 +55,11 @@ export default function useChatSocket() {
 		[chatMessages],
 	);
 
-	const handleIncomingMessageHistory: SocketSubscribeCallbackType = useCallback(
+	const handleIncomingHistory: SocketSubscribeCallbackType = useCallback(
 		(data: unknown) => {
 			const parsedDataList = data as Omit<ChatProps, 'id'>[];
+			const tmpNotice = parsedDataList.pop();
+			setNotice(tmpNotice?.content ?? '');
 			setChatMessages((prevMessages) => [...parsedDataList, ...prevMessages] as ChatProps[]);
 		},
 		[chatMessages],
@@ -105,11 +107,11 @@ export default function useChatSocket() {
 		[socketClient],
 	);
 
-	const handleRequestMessageHistory = useCallback(() => {
+	const handleRequestHistory = useCallback(() => {
 		try {
 			if (socketClient) {
 				socketClient.sendMessages({
-					destination: CHAT_SOCKET_ENDPOINTS.PUBLISH_MESSAGE_HISTORY,
+					destination: CHAT_SOCKET_ENDPOINTS.PUBLISH_HISTORY,
 					body: {},
 				});
 			} else {
@@ -125,10 +127,10 @@ export default function useChatSocket() {
 		onReceiveMessage: handleIncomingMessage,
 		onReceiveBlock: handleIncomintBlock,
 		onReceiveNotice: handleIncomingNotice,
-		onReceiveMessageHistory: handleIncomingMessageHistory,
+		onReceiveMessageHistory: handleIncomingHistory,
 		onBlock: handleBlock,
 		onNotice: handleSendNotice,
-		onRequestMessageHistory: handleRequestMessageHistory,
+		onRequestMessageHistory: handleRequestHistory,
 		messages: chatMessages,
 		notice,
 		isValid,

packages/admin/src/hooks/useEvent.tsx

@@ -1,5 +1,7 @@
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
 import { API, METHOD } from 'src/constants/api.ts';
+import RoutePaths from 'src/constants/routePath.ts';
 import {
 	CommonEvent,
 	PersonalityTest,
@@ -12,8 +14,9 @@ import fetchData from 'src/utils/fetchData.ts';
 
 const useEvent = () => {
 	const { openAlert } = useAlert();
+	const navigate = useNavigate();
 
-	const commonEventQuery = useQuery<Response[API.COMMON_EVENT][METHOD.GET]>({
+	const commonEventQuery = useSuspenseQuery<Response[API.COMMON_EVENT][METHOD.GET]>({
 		queryFn: async () => {
 			const response = await fetchData({
 				path: API.COMMON_EVENT,
@@ -42,7 +45,7 @@ const useEvent = () => {
 		commonEventMutation.mutate(commonEvent);
 	};
 
-	const quizEventQuery = useQuery<Response[API.QUIZ_LIST][METHOD.GET]>({
+	const quizEventQuery = useSuspenseQuery<Response[API.QUIZ_LIST][METHOD.GET]>({
 		queryFn: async () => {
 			const response = await fetchData({
 				path: API.QUIZ_LIST,
@@ -53,7 +56,7 @@ const useEvent = () => {
 		queryKey: [API.QUIZ_LIST],
 	});
 
-	const quizWinnerQuery = useQuery<Response[API.QUIZ_WINNER][METHOD.GET]>({
+	const quizWinnerQuery = useSuspenseQuery<Response[API.QUIZ_WINNER][METHOD.GET]>({
 		queryFn: async () => {
 			const response = await fetchData({
 				path: API.QUIZ_WINNER,
@@ -88,7 +91,7 @@ const useEvent = () => {
 		quizEventMutation.mutate(quizEvent);
 	};
 
-	const racingWinnerQuery = useQuery<Response[API.RACING_WINNERS][METHOD.GET]>({
+	const racingWinnerQuery = useSuspenseQuery<Response[API.RACING_WINNERS][METHOD.GET]>({
 		queryFn: async () => {
 			const response = await fetchData({
 				path: API.RACING_WINNERS,
@@ -100,14 +103,16 @@ const useEvent = () => {
 	});
 
 	const racingWinnerMutation = useMutation({
-		mutationFn: async (winnerSettings: WinnerSetting[]) =>
-			fetchData({
+		mutationFn: async (winnerSettings: WinnerSetting[]) => {
+			const response = await fetchData({
 				path: API.RACING_WINNERS,
 				method: METHOD.POST,
 				payload: winnerSettings,
-			}),
-		onSuccess: () => {
-			racingWinnerQuery.refetch();
+			});
+			return response;
+		},
+		onSettled: () => {
+			navigate(RoutePaths.WINNER_RESULT);
 		},
 		onError: async (error) => {
 			if (error.name !== 'SyntaxError') {
@@ -120,7 +125,9 @@ const useEvent = () => {
 		racingWinnerMutation.mutate(winnerSettings);
 	};
 
-	const personalityTestListQuery = useQuery<Response[API.PERSONALITY_TEST_LIST][METHOD.GET]>({
+	const personalityTestListQuery = useSuspenseQuery<
+		Response[API.PERSONALITY_TEST_LIST][METHOD.GET]
+	>({
 		queryFn: async () => {
 			const response = await fetchData({
 				path: API.PERSONALITY_TEST_LIST,

packages/admin/src/layouts/appLayout.tsx

@@ -5,6 +5,7 @@ import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import Header from 'src/components/appLayout/Header.tsx';
 import SideBarContainer from 'src/components/appLayout/SideBarContainer.tsx';
 import SystemContainer from 'src/components/appLayout/System.tsx';
+import CommonErrorBoundary from 'src/components/error/CommonErrorBoundary.tsx';
 import { ErrorMessage } from 'src/constants/message.ts';
 import RoutePaths from 'src/constants/routePath.ts';
 import useHeader from 'src/hooks/useHeader.tsx';
@@ -32,15 +33,17 @@ export default function AppLayout() {
 	}, [location.pathname]);
 
 	return (
-		<div className="mx-auto flex min-h-screen w-screen min-w-[1200px]">
-			{accessToken && <SideBarContainer />}
-			<div className="mx-auto flex h-full min-h-screen w-full max-w-[1200px] gap-10">
-				<SystemContainer />
-				<div className="flex w-full flex-col p-4 pb-8 pt-8">
-					<Header headerTitle={headerTitle} />
-					<Outlet />
+		<CommonErrorBoundary>
+			<div className="mx-auto flex min-h-screen w-screen min-w-[1200px]">
+				{accessToken && <SideBarContainer />}
+				<div className="mx-auto flex h-full min-h-screen w-full max-w-[1200px] gap-10">
+					<SystemContainer />
+					<div className="flex w-full flex-col p-4 pb-8 pt-8">
+						<Header headerTitle={headerTitle} />
+						<Outlet />
+					</div>
 				</div>
 			</div>
-		</div>
+		</CommonErrorBoundary>
 	);
 }

packages/admin/src/libs/index.tsx

@@ -7,7 +7,9 @@ export default function AppProviders({ children }: PropsWithChildren) {
 	return (
 		<AlertProvider>
 			<ModalProvider>
-				<QueryProvider>{children}</QueryProvider>
+					<QueryProvider>
+						{children}
+					</QueryProvider>
 			</ModalProvider>
 		</AlertProvider>
 	);

packages/admin/src/pages/winner/WinnerResult.tsx

@@ -16,14 +16,14 @@ const TabName = {
 const racingHeaders = [
 	{ text: '당첨 등수', width: '20%' },
 	{ text: '유저 이름', width: '20%' },
-	{ text: '유저 전화번호', width: '20%' },
+	{ text: '유저 이메일', width: '20%' },
 	{ text: '공유 링크 접속 ', width: '20%' },
 	{ text: '유형카드 ', width: '20%' },
 ];
 
 const quizHeaders = [
 	{ text: '유저 이름', width: '33%' },
-	{ text: '유저 전화번호', width: '33%' },
+	{ text: '유저 이메일', width: '33%' },
 	{ text: '당첨 날짜 ', width: '33%' },
 ];
 
@@ -38,7 +38,7 @@ const getRows = (pageIndex: number, rawList: RacingWinner[] | QuizWinner[]) => {
 };
 
 function WinnerResult() {
-	const { racingWinners, quizWinner } = useEvent();
+	const { racingWinners, quizWinner, refechQuizEvent, refetchRacingWinners } = useEvent();
 	const { openAlert } = useAlert();
 
 	const [pageIndex, setPageIndex] = useState(0);
@@ -52,6 +52,14 @@ function WinnerResult() {
 		setRows(getRows(0, []));
 	};
 
+	useEffect(() => {
+		if (tabName === TabName.QUIZ) {
+			refechQuizEvent();
+		} else {
+			refetchRacingWinners();
+		}
+	}, [tabName]);
+
 	useEffect(() => {
 		if (tabName === TabName.QUIZ) {
 			setHeaders(quizHeaders);

packages/admin/src/services/socket.ts

@@ -100,7 +100,7 @@ class SocketManager {
 
 			if (this.onReceiveMessageHistory) {
 				this.socketClient.subscribe({
-					destination: CHAT_SOCKET_ENDPOINTS.SUBSCRIBE_MESSAGE_HISTORY,
+					destination: CHAT_SOCKET_ENDPOINTS.SUBSCRIB_HISTORY,
 					callback: this.onReceiveMessageHistory,
 				});
 			}

packages/common/src/constants/socket.ts

@@ -7,8 +7,8 @@ export const CHAT_SOCKET_ENDPOINTS = {
 	PUBLISH_BLOCK: '/app/chat.sendBlock',
 	SUBSCRIBE_NOTICE: '/topic/notice',
 	PUBLISH_NOTICE: '/app/chat.sendNotice',
-	SUBSCRIBE_MESSAGE_HISTORY: '/user/queue/chatHistory',
-	PUBLISH_MESSAGE_HISTORY: '/app/chat.getHistory',
+	SUBSCRIB_HISTORY: '/user/queue/chatHistory',
+	PUBLISH_HISTORY: '/app/chat.getHistory',
 	SUBSCRIBE_ERROR: '/user/queue/errors',
 } as const;
 

packages/user/src/services/socket.ts

@@ -76,11 +76,11 @@ class SocketManager {
 
 			if (this.onReceiveChatList) {
 				await this.socketClient.subscribe({
-					destination: CHAT_SOCKET_ENDPOINTS.SUBSCRIBE_MESSAGE_HISTORY,
+					destination: CHAT_SOCKET_ENDPOINTS.SUBSCRIB_HISTORY,
 					callback: this.onReceiveChatList,
 				});
 				this.socketClient.sendMessages({
-					destination: CHAT_SOCKET_ENDPOINTS.PUBLISH_MESSAGE_HISTORY,
+					destination: CHAT_SOCKET_ENDPOINTS.PUBLISH_HISTORY,
 					body: {},
 					requiresAuth: false,
 				});