fix: 충돌 문제 해결

src/app/routes/MANAGEMENT_ROUTES.tsx

@@ -24,7 +24,7 @@ const MANAGEMENT_ROUTES: RouterDOM[] = [
     element: <AssetByCategory />,
   },
   {
-    path: PATH.scheduleManagement,
+    path: PATH.spendingGoal,
     element: <SpendingGoal />,
   },
 ];

src/app/tanstack-query/assetManagement/AssetByCategory/useAssetsByCategory.ts

@@ -22,7 +22,12 @@ const fetchAssetByCategory = async (user_id: string, date: string) => {
     if (!res.ok) {
       return INIT_ASSET_BY_CATEGORY;
     }
-    return res.json();
+
+    const result = await res.json();
+    if (result.data === "no data") {
+      return INIT_ASSET_BY_CATEGORY;
+    }
+    return result;
   });
 };
 

src/app/tanstack-query/assetManagement/RegularAsset/useRegularAssets.ts

@@ -1,17 +1,12 @@
 import { getSessionStorage } from "@utils/storage.ts";
 import { SESSION_STORAGE_KEY_TOKEN } from "@api/keys.ts";
 import { DOMAIN } from "@api/url.ts";
-import {
-  AssetsByCategory,
-  RegularAssets,
-  RegularAssetsRequest,
-} from "@app/types/asset.ts";
+import { RegularAssetsRequest } from "@app/types/asset.ts";
 import { useQuery } from "@tanstack/react-query";
 import {
-  QUERY_KEY_ASSET_BY_CATEGORY,
   QUERY_KEY_REGULAR_ASSET,
+  QUERY_KEY_SCHEDULES,
 } from "@constants/queryKeys.ts";
-import { INIT_ASSET_BY_CATEGORY } from "@app/tanstack-query/assetManagement/AssetByCategory/utils.ts";
 import { Schedule } from "@app/types/schedule.ts";
 
 const fetchRegularAssets = async (query: RegularAssetsRequest) => {
@@ -32,12 +27,7 @@ const fetchRegularAssets = async (query: RegularAssetsRequest) => {
 
 export const useRegularAssets = (data: RegularAssetsRequest) => {
   return useQuery({
-    queryKey: [
-      QUERY_KEY_REGULAR_ASSET,
-      data.user_id,
-      data.start_date,
-      data.end_date,
-    ],
+    queryKey: [QUERY_KEY_REGULAR_ASSET],
     queryFn: () => fetchRegularAssets(data),
   });
 };

src/app/tanstack-query/reports/useCategoryDetail.ts

@@ -10,7 +10,7 @@ import { Schedule } from "@app/types/schedule.ts";
 const fetchCategoryDetail = async (query: CategoryDetailQuery) => {
   const token = getSessionStorage(SESSION_STORAGE_KEY_TOKEN, "");
 
-  return fetch(`${DOMAIN}/report/month/detail`, {
+  return fetch(`${DOMAIN}/report/month/details`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

src/app/tanstack-query/schedules/useCreateSchedule.ts

@@ -1,7 +1,10 @@
 import { SESSION_STORAGE_KEY_TOKEN } from "@api/keys";
 import { DOMAIN } from "@api/url";
 import { getSessionStorage } from "@app/utils/storage";
-import { QUERY_KEY_SCHEDULES } from "@constants/queryKeys";
+import {
+  QUERY_KEY_REGULAR_ASSET,
+  QUERY_KEY_SCHEDULES,
+} from "@constants/queryKeys";
 import { getPriceType } from "@components/ScheduleDrawer/hooks/useScheduleForm";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { RequestSchedule } from "@app/types/schedule.ts";
@@ -33,6 +36,12 @@ export const useCreateSchedule = () => {
       queryClient.invalidateQueries({
         queryKey: [QUERY_KEY_SCHEDULES, date.format("YYYY-MM")],
       });
+
+      if (variables.repeat.kind_type !== "none") {
+        queryClient.invalidateQueries({
+          queryKey: [QUERY_KEY_REGULAR_ASSET],
+        });
+      }
     },
   });
 

src/app/types/report.ts

@@ -1,31 +1,31 @@
 import { Schedule } from "@app/types/schedule.ts";
 
 export interface Report {
-  date: string;
-  totalSpentToday: number | "0"; // 총 지출 금액
-  expenseGoalAmount: number | "0"; // 지출 목표
-  availableAmount: number | "0"; // 사용 가능 금액
-  category_consume_report: CategoryReport[] | "0"; // 카테고리 소비
-  expenditure_this_month: {
-    last_month_Amount: number | "0";
-    "1st_month_Amount": number | "0";
-    goal_amount: number | "0";
-    result_amount: number | "0";
+  current_date: string;
+  // 월별 소비 리포트
+  monthly_report: {
+    current_amount: number; // 이달 소비
+    second_amount: number; // 두달 전 소비
+    previous_amount: number; // 지난 달 소비
+  };
+  first_month_amount: number | "0"; // 현재달의 1일부터 current_date 까지 소비한 값
+  spend_amount: number | "0"; // 지출 목표
+  available_amount: number; // 사용 가능 금액
+  category_consume_list: CategoryReport[] | "?"; // 카테고리 소비
+  expenditure_data: {
+    last_Nmonth_Amount: number | "0";
+    first_Nmonth_Amount: number | "0"; // 1일 ~ 현재 소비
+    spend_amount: number | "0"; // 지출 목표
+    available_Nmonth_amount: number | "0"; // 이용 가능 금액
   };
   Nmonth_fixed: {
-    previous_diff_plus: string; // 수입 차이
-    fixed_deposit: number | "0"; // 고정 입금
-    fixed_withdraw: number | "0"; // 고정 출금
-    previous_diff_minus: string; // 출금 차이
+    diff_plus: string; // 수입 차이
+    current_fixed_plus: number; // 고정 입금
+    current_fixed_Minus: number; // 고정 출금
+    diff_minus: string; // 출금 차이
     current_month: string; // 이달
     previous_month: string; // 전달
   };
-  month_report: {
-    // 월별 소비 리포트
-    current: number | "0"; // 이달 소비
-    second_previous: number | "0"; // 지난 달 소비
-    previous: number | "0"; // 두달 전 소비
-  };
 }
 
 export interface CategoryReport {

src/components/BarChart/BarChart.styles.ts

@@ -42,8 +42,9 @@ export const BarLabelComponent = styled.div<{
 
 export const BarLabelBox = styled.div<{
   $isSelected: boolean;
+  $width: Bar["data"];
 }>`
-  min-width: 24px;
+  width: fit-content;
   margin: 0 auto;
   bottom: 6px;
   padding: 3px 10px;
@@ -58,7 +59,6 @@ export const BarLabelBox = styled.div<{
 export const LabelLine = styled.div<{
   $isSelected: boolean;
 }>`
-  //position: absolute;
   margin: auto;
   height: 6px;
   border: 1px dashed

src/components/BarChart/BarChart.tsx

@@ -42,7 +42,7 @@ function BarChart({
                 $width={data[idx]}
                 onClick={() => setSelected(v)}
               >
-                <BarLabelBox $isSelected={selected === v}>
+                <BarLabelBox $isSelected={selected === v} $width={data[idx]}>
                   {titles[idx]}
                 </BarLabelBox>
                 <LabelLine $isSelected={selected === v} />

src/components/common/RoundedBorderBox.tsx

@@ -3,15 +3,15 @@ import { ReactNode } from "react";
 
 interface RoundedBorderBoxProps {
   children: ReactNode;
-  greyBorder?: Boolean;
+  greyBorder?: boolean;
 }
 
 function RoundedBorderBox({ children, greyBorder }: RoundedBorderBoxProps) {
   return (
     <Box
       sx={{
-        border: "2px solid",
-        borderRadius: 2,
+        border: "1px solid",
+        borderRadius: "4px",
         borderColor: greyBorder ? "#EDF1F7" : "primary.main",
         overflow: "hidden",
       }}

src/components/common/RoundedPaper.tsx

@@ -3,17 +3,17 @@ import React from "react";
 
 interface RoundedPaperProps {
   children: React.ReactNode;
-  my: number;
+  my?: number;
 }
 
 function RoundedPaper({ children, my }: RoundedPaperProps) {
   return (
     <Box
       sx={{
-        marginY: my,
+        marginY: my ?? 0,
         padding: "20px",
         borderRadius: "20px",
-        boxShadow: "0px 0px 12px 0px rgba(0, 0, 0, 0.15)",
+        border: "1px solid #DEE0E3",
       }}
     >
       {children}

src/components/common/TodayButton/TodayButton.styles.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 
-export const TodayButtonConainer = styled.div`
+export const BottomButtonConainer = styled.div`
   width: 100%;
   display: flex;
   position: fixed;

src/components/common/TodayButton/TodayButton.tsx

@@ -1,5 +1,5 @@
 import { Stack, Typography } from "@mui/material";
-import { Button, TodayButtonConainer } from "./TodayButton.styles.ts";
+import { BottomButtonConainer, Button } from "./TodayButton.styles.ts";
 import ArrowForwardIosRoundedIcon from "@mui/icons-material/ArrowForwardIosRounded";
 import { TITLE } from "@components/common/TodayButton/utils.ts";
 
@@ -10,7 +10,7 @@ export interface TodayButtonProps {
 
 function TodayButton({ goToday, type }: TodayButtonProps) {
   return (
-    <TodayButtonConainer onClick={goToday}>
+    <BottomButtonConainer onClick={goToday}>
       <Button>
         <Stack direction="row" spacing={0.5} alignItems="center">
           <Typography variant="h6" lineHeight="22px">
@@ -19,7 +19,7 @@ function TodayButton({ goToday, type }: TodayButtonProps) {
           <ArrowForwardIosRoundedIcon sx={{ fontSize: "12px" }} />
         </Stack>
       </Button>
-    </TodayButtonConainer>
+    </BottomButtonConainer>
   );
 }
 

src/constants/managements.ts

@@ -16,7 +16,7 @@ const assetManagements: ReadonlyArray<AssetManagement> = [
   {
     title: "지출 목표 금액 설정 ",
     color: teal[200],
-    path: PATH.scheduleManagement,
+    path: PATH.spendingGoal,
   },
   {
     title: "카테고리별 지출액 설정",

src/constants/path.ts

@@ -20,5 +20,5 @@ export const PATH = {
   DetailSetting: "/management/regular-assets-setting",
   DetailInformation: "/management/regular-assets-detail-info",
   assetsByCategory: "/management/assets-by-category",
-  scheduleManagement: "/management/schedule-management",
+  spendingGoal: "/management/spending-goal",
 } as const;

src/hooks/assetManagement/useSpendingGoal.ts

@@ -5,17 +5,23 @@ import { useDatePicker } from "@hooks/date-picker/hooks/useDatePicker.tsx";
 import moment from "moment";
 import { setSpendingGoal } from "@app/types/asset.ts";
 import { useSetSpendingGoal } from "@app/tanstack-query/assetManagement/spedingGoal/useSetSpendingGoal.ts";
+import { useReports } from "@app/tanstack-query/reports/useReports.ts";
 
 const useSpendingGoal = () => {
   const [yearMonth, setYearMonth] = useState(moment().format("YYYY-MM"));
   const { openMonthPicker } = useDatePicker();
+  const [year, month] = yearMonth.split("-");
 
   const { data: user } = useUser();
   const {
     data: goal,
     isPending,
     isError,
   } = useSpendingGoals(user?.user_id ?? "", yearMonth);
+  const { data: report } = useReports({
+    user_id: user?.user_id ?? "",
+    date: `${yearMonth}-${moment().format("DD")}`,
+  });
   const { setSpendingGoal } = useSetSpendingGoal();
 
   const onSpendAmount = goal?.OnSpendAmount ?? {
@@ -42,6 +48,9 @@ const useSpendingGoal = () => {
   };
 
   return {
+    userName: user?.name,
+    monthlyReport: report?.monthly_report,
+    month: Number(month),
     offSpendAmount,
     onSpendAmount,
     isPending,

src/hooks/report/useReport.ts

@@ -20,9 +20,7 @@ const useReport = () => {
   const { openMonthPicker } = useDatePicker();
   const { setGoal } = useSetGoal();
   const reportList =
-    report?.category_consume_report === "0"
-      ? []
-      : report?.category_consume_report;
+    report?.category_consume_list === "?" ? [] : report?.category_consume_list;
 
   const maxPercent = Math.max(
     ...(reportList?.map((l) => parseFloat(l.rate)) ?? [])