Merge pull request #212 from SV-Winter-BootCamp-Team-C/fe/fix/#208

fix: 분석 페이지 디자인 수정
SV-Winter-BootCamp-Team-C · Jan 30, 2024 · c3e070b · c3e070b
2 parents 38369f5 + 9ad934e
commit c3e070b
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 32 deletions.
diff --git a/frontend/src/components/staticresponse/StaticCheckBox.tsx b/frontend/src/components/staticresponse/StaticCheckBox.tsx
@@ -63,6 +63,7 @@ function StaticCheckBox({ question, color, buttonStyle, index }: StaticCheckBoxP
                   id={`checkbox-${choice.choiceId}`}
                   className="absolute opacity-0"
                   checked={(question.objContent ?? []).includes(choice.choiceId)}
+                  readOnly
                 />
                 {(question.objContent ?? []).includes(choice.choiceId) && (
                   <img src={checkIcon} alt="Checked" className="w-4 h-4" />

diff --git a/frontend/src/components/survey/SurveyCoverMenu.tsx b/frontend/src/components/survey/SurveyCoverMenu.tsx
@@ -11,7 +11,6 @@ import menuDel from '../../assets/menuDel.svg';
 import { useAuthStore } from '../../store/AuthStore';
 import ShareMailModal from '../common/ShareMailModal';
 import { deleteSurveyAPI } from '../../api/deleteSurvey';
-import { getClient } from '../../queryClient';
 import Alert from '../common/Alert';
 import { ApiResponseError } from '../../types/apiResponseError';
 
@@ -100,12 +99,7 @@ function SurveyCoverMenu({ surveyId, open, attendCount, isDropdownOpen, setIsDro
   const { mutate, isError: deleteError } = useMutation({
     mutationFn: () => deleteSurveyAPI(surveyId, myId),
     onSuccess: () => {
-      getClient.invalidateQueries({ queryKey: ['allSurveys'] });
-      getClient.refetchQueries({ queryKey: ['allSurveys'] });
-      getClient.invalidateQueries({ queryKey: ['myForm', myId] });
-      getClient.refetchQueries({ queryKey: ['myForm', myId] });
-      getClient.invalidateQueries({ queryKey: ['myResponse', myId] });
-      getClient.refetchQueries({ queryKey: ['myResponse', myId] });
+      window.location.reload();
       setShowDeleteAlert(true);
     },
     onError: (error: AxiosError) => {

diff --git a/frontend/src/components/surveyResult/Question/PieChart.tsx b/frontend/src/components/surveyResult/Question/PieChart.tsx
@@ -24,20 +24,26 @@ function PieChart({ index, question }: PieChartProps) {
   const chartOptions = {
     chart: {
       type: 'donut',
-      width: 300,
-      height: 180.7,
       background: 'transparent',
     },
     labels: question.choices?.map((choice) => choice.option),
     legend: {
       show: true,
-      position: 'right',
-      horizontalAlign: 'center',
+      position: 'left',
+      floating: true,
+      horizontalAlign: 'right',
       fontSize: '14px',
       fontWeight: 'medium',
       itemMargin: {
-        horizontal: 2,
-        vertical: 1,
+        vertical: 2,
+      },
+      offsetX: -30,
+      offsetY: 0,
+      formatter(val: string) {
+        if (val.length > 10) {
+          return `${val.slice(0, 10)}...`;
+        }
+        return val;
       },
     },
     dataLabels: {
@@ -50,16 +56,13 @@ function PieChart({ index, question }: PieChartProps) {
     },
     plotOptions: {
       pie: {
-        donut: {
-          size: '65%',
-        },
         stroke: {
           width: 0,
           curve: 'smooth',
         },
       },
     },
-    colors: ['#66629F', '#918DCA', '#BFBBFF', '#E5E4FF'],
+    colors: ['#66629F', '#918DCA', '#BFBBFF', '#c5c4eb'],
   };
 
   return (
@@ -81,7 +84,7 @@ function PieChart({ index, question }: PieChartProps) {
           <span className="text-[2rem] font-semibold text-center text-black -translate-y-4">Q{index}.</span>
         </div>
 
-        <div className="flex justify-center items-center w-[14.375rem] max-w-[50rem] h-8 ">
+        <div className="flex justify-center items-center w-[37.5rem] h-8 ">
           <p className="text-base text-black">{question.content}</p>
         </div>
 
@@ -97,15 +100,16 @@ function PieChart({ index, question }: PieChartProps) {
 
         <div className="py-6">
           {chartSeries && total > 0 && chartSeries.length > 0 ? (
-            <Chart
-              options={chartOptions as any}
-              series={chartSeries as number[]}
-              type="donut"
-              width={300}
-              height={180.7}
-              key={`chart-${index}`}
-              className="flex items-center justify-center w-[18.75rem] h-[180.7px]"
-            />
+            <div className="flex items-center justify-center min-w-[18.75rem] h-[180.7px]">
+              <Chart
+                key={`chart-${index}`}
+                options={chartOptions as any}
+                series={chartSeries as number[]}
+                type="donut"
+                width={500}
+                height={180.7}
+              />
+            </div>
           ) : (
             <p className="text-base text-gray">설문 결과가 없습니다.</p>
           )}

diff --git a/frontend/src/components/surveyResult/Question/SubjectQuestion.tsx b/frontend/src/components/surveyResult/Question/SubjectQuestion.tsx
@@ -28,7 +28,7 @@ function SubjectQuestion({ index, question }: SubjectQuestionProps) {
           <span className="text-[2rem] font-semibold text-center text-black -translate-y-4">Q{index}.</span>
         </div>
 
-        <div className="flex justify-center items-center w-[14.375rem] max-w-[50rem] h-8 ">
+        <div className="flex justify-center items-center w-[37.5rem] h-8 ">
           <p className="text-base text-black">{question.content}</p>
         </div>
 

diff --git a/frontend/src/hooks/usePaginationSurveyList.ts b/frontend/src/hooks/usePaginationSurveyList.ts
@@ -35,7 +35,7 @@ const usePaginationSurveyList = (path: PathType) => {
 
   const queryFn = QUERY_FN_MAP[path];
 
-  const { data, isError, isPending } = useQuery<SurveyCoverType, AxiosError>({
+  const { data, isError, isPending, refetch } = useQuery<SurveyCoverType, AxiosError>({
     queryKey: [path, currentPage, userId, searchTerm, sort], // 검색어를 쿼리 키에 추가
     queryFn: () => queryFn({ userId: userId as number, currentPage, title: searchTerm, sort }), // API 호출 시 검색어 전달
     select: (responseData) => {
@@ -58,6 +58,7 @@ const usePaginationSurveyList = (path: PathType) => {
     setSearchTerm,
     // sort,
     handleSortChange,
+    refetch,
   };
 };
 

diff --git a/frontend/src/pages/AllForm.tsx b/frontend/src/pages/AllForm.tsx
@@ -1,13 +1,18 @@
 import { useNavigate } from 'react-router-dom';
+import { useEffect } from 'react';
 import SurveyForm from '../components/survey/SurveyForm';
 import usePaginationSurveyList from '../hooks/usePaginationSurveyList';
 
 function AllForm() {
   const navigate = useNavigate();
 
-  const { data, currentPage, handlePageChange, searchTerm, setSearchTerm, handleSortChange } =
+  const { data, currentPage, handlePageChange, searchTerm, setSearchTerm, handleSortChange, refetch } =
     usePaginationSurveyList('allForm');
 
+  useEffect(() => {
+    refetch();
+  }, [refetch]);
+
   return (
     <SurveyForm
       surveyData={data || { surveys: [], totalPages: 0 }}

diff --git a/frontend/src/pages/MyForm.tsx b/frontend/src/pages/MyForm.tsx
@@ -1,13 +1,18 @@
 import { useNavigate } from 'react-router-dom';
+import { useEffect } from 'react';
 import SurveyForm from '../components/survey/SurveyForm';
 import usePaginationSurveyList from '../hooks/usePaginationSurveyList';
 
 function MyForm() {
   const navigate = useNavigate();
 
-  const { data, currentPage, handlePageChange, searchTerm, setSearchTerm, handleSortChange } =
+  const { data, currentPage, handlePageChange, searchTerm, setSearchTerm, handleSortChange, refetch } =
     usePaginationSurveyList('myForm');
 
+  useEffect(() => {
+    refetch();
+  }, [refetch]);
+
   return (
     <SurveyForm
       surveyData={data || { surveys: [], totalPages: 0 }}

diff --git a/frontend/src/pages/MyResponse.tsx b/frontend/src/pages/MyResponse.tsx
@@ -1,10 +1,15 @@
+import { useEffect } from 'react';
 import SurveyForm from '../components/survey/SurveyForm';
 import usePaginationSurveyList from '../hooks/usePaginationSurveyList';
 
 function MyResponse() {
-  const { data, currentPage, handlePageChange, searchTerm, setSearchTerm, handleSortChange } =
+  const { data, currentPage, handlePageChange, searchTerm, setSearchTerm, handleSortChange, refetch } =
     usePaginationSurveyList('myResponse');
 
+  useEffect(() => {
+    refetch();
+  }, [refetch]);
+
   return (
     <SurveyForm
       surveyData={data || { surveys: [], totalPages: 0 }}