Merge branch 'TASK-139' into deploy

packages/admin/src/components/table/ResultTable.tsx

@@ -17,9 +17,8 @@ interface ResultTableProps {
 
 function ResultTable({ headers, rows }: ResultTableProps) {
 	const isBeforeDraw = rows.length === 0;
-
 	return isBeforeDraw ? (
-		<div className="flex h-full flex-col items-center justify-center">
+		<div className="flex h-[535px] flex-col items-center justify-center">
 			아직 당첨자 추첨이 이루어지지 않았습니다.
 		</div>
 	) : (
@@ -34,8 +33,8 @@ function ResultTable({ headers, rows }: ResultTableProps) {
 				</TableRow>
 			</TableHeader>
 			<TableBody>
-				{rows.map((row) => (
-					<TableRow key={`row-${row.join()}`}>
+				{rows.map((row, rowIndex) => (
+					<TableRow key={rowIndex}>
 						{row.map((item, colIndex) => (
 							<TableCell className="font-medium" key={colIndex}>
 								{item}

packages/admin/src/constants/api.ts

@@ -14,6 +14,7 @@ export const enum API {
 	COMMON_EVENT = '/common-event',
 	QUIZ_LIST = '/quiz-list',
 	QUIZ = '/quiz',
+	QUIZ_WINNER = '/quiz-winner',
 	RACING_WINNERS = '/racing-winners',
 	PERSONALITY_TEST_LIST = '/personality-test-list',
 	PERSONALITY_TEST = '/personality-test',

packages/admin/src/hooks/useEvent.tsx

@@ -92,13 +92,6 @@ const useEvent = () => {
 				payload: winnerSettings,
 			});
 			return response;
-			// response
-			// openAlert(await response.text(), 'alert');
-			// if (response.status === 200) {
-			// 	openAlert('추첨이 완료되었습니다.', 'alert');
-			// 	const result = await response.json();
-			// 	return result;
-			// }
 		},
 		onSuccess: () => {
 			racingWinnerQuery.refetch();
@@ -109,6 +102,17 @@ const useEvent = () => {
 		racingWinnerMutation.mutate(winnerSettings);
 	};
 
+	const quizWinnerQuery = useQuery<Response[API.QUIZ_WINNER][METHOD.GET]>({
+		queryFn: async () => {
+			const response = await fetchData({
+				path: API.QUIZ_WINNER,
+				method: METHOD.GET,
+			});
+			return response;
+		},
+		queryKey: [API.QUIZ_WINNER],
+	});
+
 	const personalityTestListQuery = useQuery<Response[API.PERSONALITY_TEST_LIST][METHOD.GET]>({
 		queryFn: async () => {
 			const response = await fetchData({
@@ -142,12 +146,17 @@ const useEvent = () => {
 		commonEvent: commonEventQuery.data,
 		updateCommonEvent,
 		refechCommonEvent: commonEventQuery.refetch,
+
 		quizEvent: quizEventQuery.data,
 		updateQuizEvent,
 		refechQuizEvent: quizEventQuery.refetch,
+
 		racingWinners: racingWinnerQuery.data,
 		refetchRacingWinners: racingWinnerQuery.refetch,
 		updateRacingWinner,
+
+		quizWinners: quizWinnerQuery.data,
+
 		personalityTestList: personalityTestListQuery.data,
 		updatePersonalityTest,
 		refetchPersonalityTestList: personalityTestListQuery.refetch,

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

@@ -4,7 +4,7 @@ import Tab from 'src/components/common/Tab.tsx';
 import ResultTable from 'src/components/table/ResultTable.tsx';
 import { Button } from 'src/components/ui/button.tsx';
 import useEvent from 'src/hooks/useEvent.tsx';
-import { RacingWinner } from 'src/services/api/types/apiType.ts';
+import { QuizWinner, RacingWinner } from 'src/services/api/types/apiType.ts';
 import excelDownload from 'src/utils/xlsx.ts';
 
 const TabName = {
@@ -26,18 +26,20 @@ const quizHeaders = [
 	{ text: '당첨 날짜 ', width: '33%' },
 ];
 
-const getRows = (pageIndex: number, rawList: RacingWinner[]) => {
+const getRows = (pageIndex: number, rawList: RacingWinner[] | QuizWinner[]) => {
 	const rows = rawList
 		.slice(pageIndex * 10, pageIndex * 10 + 10)
 		.map((racingWinner) => Object.values(racingWinner));
-	while (rows.length < 10) {
-		rows.push(['ㅤ']);
+	if (rows.length !== 0) {
+		while (rows.length < 10) {
+			rows.push(['ㅤ']);
+		}
 	}
 	return rows;
 };
 
 function WinnerResult() {
-	const { racingWinners, refetchRacingWinners } = useEvent();
+	const { racingWinners, refetchRacingWinners, quizWinners } = useEvent();
 
 	useLayoutEffect(() => {
 		refetchRacingWinners();
@@ -49,18 +51,34 @@ function WinnerResult() {
 	const [rows, setRows] = useState<string[][]>([]);
 	const [headers, setHeaders] = useState<{ text: string; width: string }[]>([]);
 
+	const handleInvalidData = () => {
+		setTotal(0);
+		setRows(getRows(pageIndex, []));
+	};
+
+	const handleValidData = (data: RacingWinner[] | QuizWinner[]) => {
+		setTotal(data.length);
+		setRows(getRows(pageIndex, data));
+	};
+
 	useEffect(() => {
-		if (tabName === TabName.QUIZ && racingWinners !== undefined) {
-			setTotal(racingWinners.length);
-			setRows(getRows(pageIndex, racingWinners));
+		if (tabName === TabName.QUIZ) {
 			setHeaders(quizHeaders);
+			if (quizWinners !== undefined) {
+				handleValidData(quizWinners);
+			} else {
+				handleInvalidData();
+			}
 		}
-		if (tabName === TabName.RACE && racingWinners !== undefined) {
-			setTotal(racingWinners.length);
-			setRows(getRows(pageIndex, racingWinners));
+		if (tabName === TabName.RACE) {
 			setHeaders(racingHeaders);
+			if (racingWinners !== undefined) {
+				handleValidData(racingWinners);
+			} else {
+				handleInvalidData();
+			}
 		}
-	}, [racingWinners, pageIndex, tabName]);
+	}, [quizWinners, racingWinners, pageIndex, tabName]);
 
 	useEffect(() => {
 		setPageIndex(0);

packages/admin/src/services/api/types/apiType.ts

@@ -30,6 +30,12 @@ export interface RacingWinner {
 	team: string;
 }
 
+export interface QuizWinner {
+    name: string;
+    phoneNumber: string;
+    postDate: string;
+  }
+
 export interface PersonalityScore {
 	type: string;
 	value: number;
@@ -69,6 +75,9 @@ export interface Payload {
         [METHOD.GET]: Record<string, never>;
         [METHOD.POST]: WinnerSetting[];
     };
+    [API.QUIZ_WINNER]: {
+        [METHOD.GET]: Record<string, never>;
+    };
     [API.PERSONALITY_TEST_LIST]: {
         [METHOD.GET]: Record<string, never>;
     };
@@ -95,6 +104,9 @@ export interface Response {
         [METHOD.GET]: RacingWinner[];
         [METHOD.POST]: string;
     };
+    [API.QUIZ_WINNER]: {
+        [METHOD.GET]: QuizWinner[];
+    };
     [API.PERSONALITY_TEST_LIST]: {
         [METHOD.GET]: PersonalityTest[];
     };