feat: 설문 결과 페이지 스켈레톤 적용
This commit is contained in:
@@ -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 }) {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h2 className="mb-2 flex items-center justify-between gap-2 text-[1.3rem] font-bold text-foreground">
|
||||
응답자 통계
|
||||
<div className="text-[1.2rem] font-medium tracking-tighter text-label">
|
||||
<p>
|
||||
( 총 응답자 수: <span>{data?.totalRspdnt}</span>명 / 설문 기간:{" "}
|
||||
<span>{data?.srvyPeriodFrTo}</span> )
|
||||
</p>
|
||||
</div>
|
||||
</h2>
|
||||
<Table variant="secondary" className="text-center">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead rowSpan={2}>구분</TableHead>
|
||||
<TableHead colSpan={2}>성별</TableHead>
|
||||
<TableHead colSpan={6}>직업</TableHead>
|
||||
<TableHead colSpan={5}>나이</TableHead>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableHead>남성</TableHead>
|
||||
<TableHead>여성</TableHead>
|
||||
<TableHead>학생</TableHead>
|
||||
<TableHead>대학생</TableHead>
|
||||
<TableHead>회사원</TableHead>
|
||||
<TableHead>공단직원</TableHead>
|
||||
<TableHead>공무원</TableHead>
|
||||
<TableHead>기타</TableHead>
|
||||
<TableHead>20대</TableHead>
|
||||
<TableHead>30대</TableHead>
|
||||
<TableHead>40대</TableHead>
|
||||
<TableHead>50대</TableHead>
|
||||
<TableHead>60대 이상</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data?.srvyRspntStatList.map((item) => (
|
||||
<TableRow key={item.구분}>
|
||||
<TableHead>{item.구분}</TableHead>
|
||||
<TableCell>{item.mf남성}</TableCell>
|
||||
<TableCell>{item.mf여성}</TableCell>
|
||||
<TableCell>{item.job학생}</TableCell>
|
||||
<TableCell>{item.job대학생}</TableCell>
|
||||
<TableCell>{item.job회사원}</TableCell>
|
||||
<TableCell>{item.job공단직원}</TableCell>
|
||||
<TableCell>{item.job공무원}</TableCell>
|
||||
<TableCell>{item.job기타}</TableCell>
|
||||
<TableCell>{item.ageN20대}</TableCell>
|
||||
<TableCell>{item.ageN30대}</TableCell>
|
||||
<TableCell>{item.ageN40대}</TableCell>
|
||||
<TableCell>{item.ageN50대}</TableCell>
|
||||
<TableCell>{item.ageN60대이상}</TableCell>
|
||||
{isLoading ? (
|
||||
<div className="my-4 flex flex-col gap-4">
|
||||
<Skeleton className="h-[24rem] w-full" />
|
||||
<Skeleton className="h-[32rem] w-full" />
|
||||
<Skeleton className="h-[32rem] w-full" />
|
||||
<Skeleton className="h-[32rem] w-full" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="card">
|
||||
<h2 className="mb-2 flex items-center justify-between gap-2 text-[1.3rem] font-bold text-foreground">
|
||||
응답자 통계
|
||||
<div className="text-[1.2rem] font-medium tracking-tighter text-label">
|
||||
<p>
|
||||
( 총 응답자 수: <span>{data?.totalRspdnt}</span>명 / 설문
|
||||
기간: <span>{data?.srvyPeriodFrTo}</span> )
|
||||
</p>
|
||||
</div>
|
||||
</h2>
|
||||
<Table variant="secondary" className="text-center">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead rowSpan={2}>구분</TableHead>
|
||||
<TableHead colSpan={2}>성별</TableHead>
|
||||
<TableHead colSpan={6}>직업</TableHead>
|
||||
<TableHead colSpan={5}>나이</TableHead>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<hr className="my-8" />
|
||||
{data?.qitems.map((item, index) => (
|
||||
<Fragment key={item.srvyQitemNo}>
|
||||
{item.qstnTypeCd === "RADIO" && (
|
||||
<WithPieChartResult data={item} index={index} />
|
||||
)}
|
||||
{item.qstnTypeCd === "CHECK" && (
|
||||
<WithBarChartResult data={item} index={index} />
|
||||
)}
|
||||
{item.qstnTypeCd === "INPUT" && (
|
||||
<InputResult data={item} index={index} />
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
<TableRow>
|
||||
<TableHead>남성</TableHead>
|
||||
<TableHead>여성</TableHead>
|
||||
<TableHead>학생</TableHead>
|
||||
<TableHead>대학생</TableHead>
|
||||
<TableHead>회사원</TableHead>
|
||||
<TableHead>공단직원</TableHead>
|
||||
<TableHead>공무원</TableHead>
|
||||
<TableHead>기타</TableHead>
|
||||
<TableHead>20대</TableHead>
|
||||
<TableHead>30대</TableHead>
|
||||
<TableHead>40대</TableHead>
|
||||
<TableHead>50대</TableHead>
|
||||
<TableHead>60대 이상</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data?.srvyRspntStatList.map((item) => (
|
||||
<TableRow key={item.구분}>
|
||||
<TableHead>{item.구분}</TableHead>
|
||||
<TableCell>{item.mf남성}</TableCell>
|
||||
<TableCell>{item.mf여성}</TableCell>
|
||||
<TableCell>{item.job학생}</TableCell>
|
||||
<TableCell>{item.job대학생}</TableCell>
|
||||
<TableCell>{item.job회사원}</TableCell>
|
||||
<TableCell>{item.job공단직원}</TableCell>
|
||||
<TableCell>{item.job공무원}</TableCell>
|
||||
<TableCell>{item.job기타}</TableCell>
|
||||
<TableCell>{item.ageN20대}</TableCell>
|
||||
<TableCell>{item.ageN30대}</TableCell>
|
||||
<TableCell>{item.ageN40대}</TableCell>
|
||||
<TableCell>{item.ageN50대}</TableCell>
|
||||
<TableCell>{item.ageN60대이상}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<hr className="my-8" />
|
||||
{data?.qitems.map((item, index) => (
|
||||
<Fragment key={item.srvyQitemNo}>
|
||||
{item.qstnTypeCd === "RADIO" && (
|
||||
<WithPieChartResult data={item} index={index} />
|
||||
)}
|
||||
{item.qstnTypeCd === "CHECK" && (
|
||||
<WithBarChartResult data={item} index={index} />
|
||||
)}
|
||||
{item.qstnTypeCd === "INPUT" && (
|
||||
<InputResult data={item} index={index} />
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user