From 065cb977e2286e089d469acbe4cb389b4e6d8624 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 5 Jun 2025 17:14:59 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=84=A4=EB=AC=B8=20=EA=B2=B0=EA=B3=BC?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=8A=A4=EC=BC=88=EB=A0=88?=
 =?UTF-8?q?=ED=86=A4=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/survey/ui/user-survey-result.tsx    | 152 ++++++++++--------
 1 file changed, 81 insertions(+), 71 deletions(-)

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 }) {
             </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>
   );