fix: 버그 수정5

src/pages/consume/ConsumeEdit.tsx

@@ -6,7 +6,7 @@ import { CategoryEditItem } from '../../components/molecules/CategoryEditItem';
 import { Button } from '../../components/ui/Button';
 import { useNavigate } from 'react-router-dom';
 import { BudgetReqType } from '../../types/budget';
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { ApiClient } from '../../apis/apiClient';
 
 type BudgetEditType = {
@@ -31,6 +31,7 @@ const CategoryConvert = {
 
 export const ConsumeEdit = () => {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
 
   const { data: spendData, isSuccess: successSpend } = useQuery({
     queryKey: ['spend3'],

src/pages/consume/ConsumePattern.tsx

@@ -5,7 +5,7 @@ import { RiPencilFill } from 'react-icons/ri';
 import { useNavigate } from 'react-router-dom';
 import { CategoryItem } from '../../components/molecules/CategoryItem';
 import { CategorySpendCard } from '../../components/organisms/CategorySpendCard';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { ApiClient } from '../../apis/apiClient';
 import { SpendType } from '../../types/spend';
 
@@ -24,12 +24,14 @@ const Category = {
 
 export const ConsumePattern = () => {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
 
   const [year, setYear] = useState<number>(dateYear);
   const [month, setMonth] = useState<number>(dateMonth);
   const [spend, setSpend] = useState<number>(0);
   const [budget, setBudget] = useState<number>(0);
   const [percent, setPercent] = useState<number>(0);
+  const [patch, setPatch] = useState<boolean>(false);
 
   const spendQuery = useQuery({
     queryKey: ['category', year, month],
@@ -40,8 +42,8 @@ export const ConsumePattern = () => {
     staleTime: 100,
   });
 
-  const { data: budgetData, isSuccess: successBudget } = useQuery({
-    queryKey: ['budget'],
+  const budgetQuery = useQuery({
+    queryKey: ['budget', patch],
     queryFn: () => {
       const res = ApiClient.getInstance().getTotalBudget();
       return res;
@@ -67,25 +69,36 @@ export const ConsumePattern = () => {
   }, [spendQuery.data]);
 
   useEffect(() => {
-    if (spendQuery.isSuccess && successBudget) {
+    if (spendQuery.isSuccess && budgetQuery) {
       try {
         ApiClient.getInstance()
           .getSpendList(dateYear, dateMonth)
           .then((res) => {
             setSpend(res.sum);
             setPercent(Math.round((res.sum / budget) * 100));
+            console.log();
           });
       } catch (e) {
         console.log(e);
       }
     }
-  }, [spendQuery.isSuccess, successBudget]);
+  }, [spendQuery, budgetQuery]);
 
   useEffect(() => {
-    if (successBudget) {
-      setBudget(budgetData.sum);
+    if (budgetQuery.isSuccess) {
+      setBudget(budgetQuery.data.sum);
     }
-  }, [successBudget]);
+  }, [budgetQuery.isSuccess]);
+
+  useEffect(() => {
+    if (budgetQuery.data) {
+      console.log(budgetQuery.data.sum);
+    }
+  }, [budgetQuery.data]);
+
+  useEffect(() => {
+    queryClient.invalidateQueries({ queryKey: ['budget'] });
+  }, []);
 
   const onClickButton = () => {
     navigate('/consumeEdit');
@@ -118,7 +131,7 @@ export const ConsumePattern = () => {
             <p className='flex items-center font-hanaBold text-3xl'>예산</p>
             <div className='flex flex-row gap-3 items-center'>
               <p className='font-hanaMedium text-3xl'>
-                {budget.toLocaleString()}원
+                {budgetQuery.data?.sum.toLocaleString()}원
               </p>
               <RiPencilFill
                 size={20}
@@ -131,10 +144,12 @@ export const ConsumePattern = () => {
           {/* 프로그래스바 */}
           <div className='flex flex-row h-8 w-full my-6'>
             <div
-              className={`bg-hanaGreen w-[${percent}%] h-full rounded-l-lg`}
+              className={`bg-hanaGreen h-full rounded-l-lg`}
+              style={{ width: `${percent}%` }}
             ></div>
             <div
-              className={`bg-gray-200 w-[${100 - percent}%] h-full rounded-r-lg border-2 flex items-center`}
+              className={`bg-gray-200 h-full rounded-r-lg border-2 flex items-center`}
+              style={{ width: `${100 - percent}%` }}
             >
               <p className='ml-1 font-hanaMedium text-xl'>{percent}%</p>
             </div>

src/pages/main/MyPage.tsx

@@ -2,12 +2,14 @@ import { FaChevronRight } from 'react-icons/fa';
 import { AccountSummaryItem } from '../../components/molecules/AccountSummaryItem';
 import { getCookie, removeCookie } from '../../utils/cookie';
 import { AccountType } from '../../types/account';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { ApiClient } from '../../apis/apiClient';
 import { useNavigate } from 'react-router-dom';
+import { useEffect } from 'react';
 
 export const MyPage = () => {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
   const name = getCookie('name');
 
   const logout = () => {
@@ -38,6 +40,10 @@ export const MyPage = () => {
     },
   });
 
+  useEffect(() => {
+    queryClient.invalidateQueries({ queryKey: ['accounts'] });
+  }, []);
+
   return (
     <>
       <div className='pt-20 w-11/12 flex items-center m-auto mb-12'>

tailwind.config.js

@@ -209,8 +209,8 @@ export default {
     },
     minHeight: {
       'real-screen': 'calc(100vh - 100px)',
-      'real-screen2': 'calc(100vh - 82.5px)',
-      'real-screen3': 'calc(100vh - 182.5px)',
+      'real-screen2': 'calc(100vh - 50px)',
+      'real-screen3': 'calc(100vh - 150px)',
     },
     backgroundImage: {
       roadmap4: "url('/images/roadmap.svg')",