diff --git a/apps/cs/src/pages/survey/ui/user-survey-result.tsx b/apps/cs/src/pages/survey/ui/user-survey-result.tsx
index cbaf9a99f..1b19f9657 100644
--- a/apps/cs/src/pages/survey/ui/user-survey-result.tsx
+++ b/apps/cs/src/pages/survey/ui/user-survey-result.tsx
@@ -6,13 +6,14 @@ import { Fragment, useState } from "react";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import {
Button,
- getCssVariableValue,
+ Skeleton,
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
+ getCssVariableValue,
} from "@common/components";
import { SiteSelect } from "@/entities/site";
import { ENDPOINT } from "@/shared/config";
@@ -48,7 +49,7 @@ function UserSurveyResult({ srvySn }: { srvySn: string }) {
siteId: "ALL",
});
- const { data } = useQuery({
+ const { data, isLoading } = useQuery({
queryKey: [ENDPOINT.CMS_SERVICE.SURVEY, srvySn, params.siteId],
queryFn: () => SurveyApi.getUserSurveyResult(parseInt(srvySn), params),
placeholderData: keepPreviousData,
@@ -74,76 +75,85 @@ function UserSurveyResult({ srvySn }: { srvySn: string }) {
-
-
- 응답자 통계
-
-
- ( 총 응답자 수: {data?.totalRspdnt}명 / 설문 기간:{" "}
- {data?.srvyPeriodFrTo} )
-
-
-
-
-
-
- 구분
- 성별
- 직업
- 나이
-
-
- 남성
- 여성
- 학생
- 대학생
- 회사원
- 공단직원
- 공무원
- 기타
- 20대
- 30대
- 40대
- 50대
- 60대 이상
-
-
-
- {data?.srvyRspntStatList.map((item) => (
-
- {item.구분}
- {item.mf남성}
- {item.mf여성}
- {item.job학생}
- {item.job대학생}
- {item.job회사원}
- {item.job공단직원}
- {item.job공무원}
- {item.job기타}
- {item.ageN20대}
- {item.ageN30대}
- {item.ageN40대}
- {item.ageN50대}
- {item.ageN60대이상}
+ {isLoading ? (
+
+
+
+
+
+
+ ) : (
+
+
+ 응답자 통계
+
+
+ ( 총 응답자 수: {data?.totalRspdnt}명 / 설문
+ 기간: {data?.srvyPeriodFrTo} )
+
+
+
+
+
+
+ 구분
+ 성별
+ 직업
+ 나이
- ))}
-
-
-
- {data?.qitems.map((item, index) => (
-
- {item.qstnTypeCd === "RADIO" && (
-
- )}
- {item.qstnTypeCd === "CHECK" && (
-
- )}
- {item.qstnTypeCd === "INPUT" && (
-
- )}
-
- ))}
-
+
+ 남성
+ 여성
+ 학생
+ 대학생
+ 회사원
+ 공단직원
+ 공무원
+ 기타
+ 20대
+ 30대
+ 40대
+ 50대
+ 60대 이상
+
+
+
+ {data?.srvyRspntStatList.map((item) => (
+
+ {item.구분}
+ {item.mf남성}
+ {item.mf여성}
+ {item.job학생}
+ {item.job대학생}
+ {item.job회사원}
+ {item.job공단직원}
+ {item.job공무원}
+ {item.job기타}
+ {item.ageN20대}
+ {item.ageN30대}
+ {item.ageN40대}
+ {item.ageN50대}
+ {item.ageN60대이상}
+
+ ))}
+
+
+
+ {data?.qitems.map((item, index) => (
+
+ {item.qstnTypeCd === "RADIO" && (
+
+ )}
+ {item.qstnTypeCd === "CHECK" && (
+
+ )}
+ {item.qstnTypeCd === "INPUT" && (
+
+ )}
+
+ ))}
+
+ )}
);