[Bugfix] 관리자 페이지 막대 차트 수정

Happiness-Meta · Apr 19, 2024 · 00097ec · 00097ec
2 parents af3abb5 + 37807ac
commit 00097ec
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 41 deletions.
diff --git a/src/app/components/adminComponents/AdminBarChart.tsx b/src/app/components/adminComponents/AdminBarChart.tsx
@@ -2,18 +2,17 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 "use client";
 /** @jsxImportSource @emotion/react */
-import React, { SetStateAction } from "react";
+import React, { SetStateAction, useEffect } from "react";
 
 // libraries
 import { BarChart } from "@mui/x-charts/BarChart";
 import { useQuery } from "@tanstack/react-query";
 import { Box } from "@mui/material";
 import { css } from "@emotion/react";
+import userAxiosWithAuth from "@/app/utils/useAxiosWithAuth";
 
 // types
-import { CompanyMockData } from "@/app/types/aboutAdminPage";
-import moment from "moment";
-import userAxiosWithAuth from "@/app/utils/useAxiosWithAuth";
+import { CompanyData, CompanyMockData } from "@/app/types/aboutAdminPage";
 
 interface BarChartType {
   mockSignupData: CompanyMockData[];
@@ -22,6 +21,7 @@ interface BarChartType {
   setMockApprovedData: React.Dispatch<SetStateAction<CompanyMockData[]>>;
   mockNonApprovedData: CompanyMockData[];
   setMockNonApprovedData: React.Dispatch<SetStateAction<CompanyMockData[]>>;
+  companyData: CompanyData[];
 }
 
 const adminBarChart: React.FC<BarChartType> = ({
@@ -31,7 +31,9 @@ const adminBarChart: React.FC<BarChartType> = ({
   setMockApprovedData,
   mockNonApprovedData,
   setMockNonApprovedData,
+  companyData = [],
 }) => {
+  console.log("companyData: ", companyData);
   const getEntireData = useQuery({
     queryKey: ["getUserMockEntireData"],
     queryFn: async () => {
@@ -56,6 +58,10 @@ const adminBarChart: React.FC<BarChartType> = ({
     },
   });
 
+  useEffect(() => {
+    getEntireData.refetch();
+  }, [companyData]);
+
   if (getEntireData.isLoading) return <div>Data Loading...</div>;
   if (getEntireData.error) return <div>{getEntireData.error.toString()}</div>;
 

diff --git a/src/app/components/adminComponents/AdminModal.tsx b/src/app/components/adminComponents/AdminModal.tsx
@@ -3,7 +3,7 @@
 "use client";
 /** @jsxImportSource @emotion/react */
 
-import React, { SetStateAction, useEffect } from "react";
+import React, { SetStateAction } from "react";
 import Image from "next/image";
 
 // styles
@@ -29,7 +29,11 @@ import Telephone from "@/app/assets/svg/phone.svg";
 
 // libraries
 import userAxiosWithAuth from "@/app/utils/useAxiosWithAuth";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  UseQueryResult,
+  useMutation,
+  useQueryClient,
+} from "@tanstack/react-query";
 import { css } from "@emotion/react";
 
 interface ModalType {
@@ -42,36 +46,24 @@ interface ModalType {
   setCompanyData: React.Dispatch<SetStateAction<CompanyData[]>>;
   colorChanged: boolean;
   setColorChanged: React.Dispatch<SetStateAction<boolean>>;
+  getCompanyData: UseQueryResult<CompanyData[]>;
 }
 
 const AdminModal: React.FC<ModalType> = ({
   selectedData,
   isVisible,
   setIsVisible,
   changed,
-  companyData,
   setCompanyData,
   setSelectedData,
+  getCompanyData,
 }) => {
   const queryclient = useQueryClient();
 
   const handleModal = () => {
     setIsVisible(false);
   };
 
-  const { isLoading, error, refetch } = useQuery({
-    queryKey: ["getCompanyData"],
-    queryFn: async () => {
-      const response = await userAxiosWithAuth.get(
-        `${process.env.NEXT_PUBLIC_BASE_URL}/admin/companies`
-      );
-
-      setCompanyData(response.data.data);
-      return response;
-    },
-    enabled: false, // 초기에는 실행하지 않도록 설정
-  });
-
   const approveCompany = useMutation({
     mutationFn: async () => {
       const body = {
@@ -90,7 +82,7 @@ const AdminModal: React.FC<ModalType> = ({
       }
     },
     onSuccess: () => {
-      refetch();
+      getCompanyData.refetch();
     },
     onError: (e) => {
       console.log(e.message);
@@ -115,15 +107,15 @@ const AdminModal: React.FC<ModalType> = ({
       }
     },
     onSuccess: () => {
-      refetch();
+      getCompanyData.refetch();
     },
     onError: (e) => {
       console.log(e.message);
     },
   });
 
-  if (isLoading) return <div>로딩중...</div>;
-  if (error) return <div>{error.message}</div>;
+  if (getCompanyData.isLoading) return <div>로딩중...</div>;
+  if (getCompanyData.error) return <div>{getCompanyData.error.message}</div>;
 
   return (
     <div

diff --git a/src/app/components/adminComponents/AdminSignupCorporation.tsx b/src/app/components/adminComponents/AdminSignupCorporation.tsx
@@ -5,7 +5,7 @@ import React, { SetStateAction, useEffect, useState } from "react";
 
 // libraries
 import { DataGrid, GridToolbar } from "@mui/x-data-grid";
-import { useQuery } from "@tanstack/react-query";
+import { UseQueryResult, useQuery } from "@tanstack/react-query";
 import userAxiosWithAuth from "@/app/utils/useAxiosWithAuth";
 
 // constants
@@ -23,6 +23,7 @@ interface CorporationData {
   setIsVisible: React.Dispatch<SetStateAction<boolean>>;
   changed: number;
   setChanged: (T: number) => void;
+  getCompanyData: UseQueryResult<CompanyData[]>;
 }
 
 const AdminSignupCorporation: React.FC<CorporationData> = ({
@@ -34,21 +35,8 @@ const AdminSignupCorporation: React.FC<CorporationData> = ({
   setIsVisible,
   changed,
   setChanged,
+  getCompanyData,
 }) => {
-  const { isLoading, error, refetch } = useQuery({
-    queryKey: ["getCompanyData"],
-    queryFn: async () => {
-      const response = await userAxiosWithAuth.get(
-        `${process.env.NEXT_PUBLIC_BASE_URL}/admin/companies`
-      );
-      const data = response.data.data;
-      console.log(data);
-
-      setCompanyData(data);
-      return data;
-    },
-  });
-
   const getTableData = (row: CompanyData) => {
     if (row.id !== selectedData?.id) {
       setIsVisible(true);
@@ -67,8 +55,8 @@ const AdminSignupCorporation: React.FC<CorporationData> = ({
     }
   };
 
-  if (isLoading) return <div>로딩중...</div>;
-  if (error) return <div>{error.message}</div>;
+  if (getCompanyData.isLoading) return <div>로딩중...</div>;
+  if (getCompanyData.error) return <div>{getCompanyData.error.message}</div>;
 
   return (
     <div

diff --git a/src/app/pages/adminPage/page.tsx b/src/app/pages/adminPage/page.tsx
@@ -31,6 +31,8 @@ import {
   WeekDate,
   CompanyMockData,
 } from "@/app/types/aboutAdminPage";
+import { useQuery } from "@tanstack/react-query";
+import userAxiosWithAuth from "@/app/utils/useAxiosWithAuth";
 
 const page = () => {
   const [cookies] = useCookies(["role"]);
@@ -98,6 +100,20 @@ const page = () => {
     }
   }, []);
 
+  const getCompanyData = useQuery({
+    queryKey: ["getCompanyData"],
+    queryFn: async () => {
+      const response = await userAxiosWithAuth.get(
+        `${process.env.NEXT_PUBLIC_BASE_URL}/admin/companies`
+      );
+      const data = response.data.data;
+      console.log(data);
+
+      setCompanyData(data);
+      return data;
+    },
+  });
+
   return (
     <div>
       <ColorModeContext.Provider value={colorMode}>
@@ -144,6 +160,7 @@ const page = () => {
                     setIsVisible={setIsVisible}
                     changed={changed}
                     setChanged={setChanged}
+                    getCompanyData={getCompanyData}
                   />
                   {isVisible === true ? (
                     <AdminModal
@@ -156,6 +173,7 @@ const page = () => {
                       setCompanyData={setCompanyData}
                       colorChanged={colorChanged}
                       setColorChanged={setColorChanged}
+                      getCompanyData={getCompanyData}
                     />
                   ) : undefined}
                 </div>
@@ -177,6 +195,7 @@ const page = () => {
                     setMockApprovedData={setMockApprovedData}
                     mockNonApprovedData={mockNonApprovedData}
                     setMockNonApprovedData={setMockNonApprovedData}
+                    companyData={companyData}
                   />
                   <AdminSparkline
                     mockWeekApprovedData={mockWeekApprovedData}