Skip to content

Commit

Permalink
Merge pull request #71 from Hana4Team/fix/#68
Browse files Browse the repository at this point in the history 
[Fix/#68] λ‹€μ–‘ν•œ 버그 μˆ˜μ •
  • Loading branch information
@abcxj123
abcxj123 authored Jun 10, 2024
2 parents 61df1eb + 9952893 commit 86f57f3
Show file tree
Hide file tree
Showing 10 changed files with 437 additions and 352 deletions.
346 changes: 173 additions & 173 deletions src/apis/apiClient.ts
View file

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion src/components/molecules/CategoryEditItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ export const CategoryEditItem: FC<IProps> = ({
};

const onBlur = () => {
inputRef.current!.value = inputRef.current!.value.replace(/[^0-9]/g, '');

if (inputRef.current!.value == '') {
inputRef.current!.value = '0';
}
Expand All @@ -32,7 +34,6 @@ export const CategoryEditItem: FC<IProps> = ({
};

useEffect(() => {
console.log('κ°’λ³€κ²½', balance);
inputRef.current!.value = balance.toString();
}, [balance]);

Expand Down
9 changes: 6 additions & 3 deletions src/components/organisms/BudgetInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useMutation } from '@tanstack/react-query';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { FC, useEffect, useState } from 'react';
import { RiPencilFill } from 'react-icons/ri';
import { ApiClient } from '../../apis/apiClient';
Expand All @@ -16,6 +16,8 @@ export const BudgetInfo: FC<Iprops> = ({
lastSpend,
initialFunc,
}) => {
const queryClient = useQueryClient();

const [isEdit, SetIsEdit] = useState<boolean>(false);
const [value, setValue] = useState(balance?.toLocaleString());

Expand All @@ -29,6 +31,8 @@ export const BudgetInfo: FC<Iprops> = ({
const res = ApiClient.getInstance().updateTotalBudget(sum);
return res;
},
onSettled: () =>
queryClient.invalidateQueries({ queryKey: ['budget', 'userInfo'] }),
});

const valueChangeHandler = (e: any) => {
Expand Down Expand Up @@ -56,7 +60,6 @@ export const BudgetInfo: FC<Iprops> = ({
}, [isSuccessUpdate]);

useEffect(() => {
console.log(balance);
setValue(balance ? balance?.toLocaleString() : '0');
}, [balance]);

Expand Down Expand Up @@ -94,7 +97,7 @@ export const BudgetInfo: FC<Iprops> = ({
</div>
</div>
)}
{lastSpend && (
{lastSpend != undefined && (
<div className='flex flex-row justify-between mt-4 font-hanaLight'>
<p className='text-2xl text-gray-400'>μ§€λ‚œ 달 μ§€μΆœ</p>
<p className='text-2xl'>{lastSpend.toLocaleString()}원</p>
Expand Down
114 changes: 60 additions & 54 deletions src/components/organisms/CategorySpendCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ export const CategorySpendCard: FC<Iprops> = ({
}) => {
const [showAll, setShowAll] = useState<boolean>(false);
const [text, setText] = useState<string>('전체보기');
const [re, setRe] = useState<boolean>(false);

Chart.register(ArcElement);

Expand Down Expand Up @@ -111,61 +110,68 @@ export const CategorySpendCard: FC<Iprops> = ({
/>
)}
</div>
{/* 차트 */}
<div className='flex flex-col w-full justify-center items-center'>
{/* 차트 μ˜μ—­ */}
<div className='z-10'>
<Doughnut
data={data}
options={{
responsive: true,
plugins: {
legend: {
display: true,
position: 'right',
{datas.length == 0 && (
<div className='w-full h-40 flex justify-center items-center font-hanaMedium text-2xl whitespace-pre-wrap'>
<p className='flex flex-col'>μ§€μΆœ 내역이 μ‘΄μž¬ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.</p>
</div>
)}
{datas.length > 1 && (
// 차트
<div className='flex flex-col w-full justify-center items-center'>
{/* 차트 μ˜μ—­ */}
<div className='z-10'>
<Doughnut
data={data}
options={{
responsive: true,
plugins: {
legend: {
display: true,
position: 'right',
},
},
},
}}
style={{
position: 'relative',
right: '0px',
}}
className='mb-6'
/>
}}
style={{
position: 'relative',
right: '0px',
}}
className='mb-6'
/>
</div>
{datas.slice(0, Math.min(datas.length, 4)).map((item, idx) => (
<CategoryItem
key={idx}
color={colors[idx]}
name={item.type}
balance={item.amount}
/>
))}
{extra && (
<>
{!showAll && (
<CategoryItem color={colors[4]} name='기타' balance={extra} />
)}
{showAll &&
datas
.slice(5)
.map((item, idx) => (
<CategoryItem
key={idx}
color={colors[4]}
name={item.type}
balance={item.amount}
/>
))}
<div
className='flex w-full mt-4 h-14 justify-center items-center border font-hanaRegular text-2xl rounded-xl'
onClick={() => onClickButton()}
>
{text}
</div>
</>
)}
</div>
{datas.slice(0, Math.min(datas.length, 4)).map((item, idx) => (
<CategoryItem
key={idx}
color={colors[idx]}
name={item.type}
balance={item.amount}
/>
))}
{extra && (
<>
{!showAll && (
<CategoryItem color={colors[4]} name='기타' balance={extra} />
)}
{showAll &&
datas
.slice(5)
.map((item, idx) => (
<CategoryItem
key={idx}
color={colors[4]}
name={item.type}
balance={item.amount}
/>
))}
<div
className='flex w-full mt-4 h-14 justify-center items-center border font-hanaRegular text-2xl rounded-xl'
onClick={() => onClickButton()}
>
{text}
</div>
</>
)}
</div>
)}
</div>
);
};
10 changes: 5 additions & 5 deletions src/components/ui/MiniButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,18 +26,18 @@ export const MiniButton: FC<IProps> = ({
});

const onClick = () => {
if (step === 1 && userStepStatus === 0) {
if (step === 1 && userStep === 1 && userStepStatus === 0) {
missionStart();
} else if (step === 2 && userStepStatus !== 0) {
} else if (step === 2 && userStep === 2 && userStepStatus !== 0) {
navigate('/moneyBox');
return;
} else if (step === 3 && userStepStatus !== 0) {
} else if (step === 3 && userStep === 3 && userStepStatus !== 0) {
navigate('/savings100Days');
return;
} else if (step === 4 && userStepStatus !== 0) {
} else if (step === 4 && userStep === 4 && userStepStatus !== 0) {
navigate('/roadmap4');
return;
} else if (step === 5 && userStepStatus !== 0) {
} else if (step === 5 && userStep === 5 && userStepStatus !== 0) {
navigate('/roadmap5');
return;
}
Expand Down
106 changes: 71 additions & 35 deletions src/pages/consume/ConsumeEdit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const ConsumeEdit = () => {
const queryClient = useQueryClient();

const { data: spendData, isSuccess: successSpend } = useQuery({
queryKey: ['spend3'],
queryKey: ['spend'],
queryFn: () => {
let lastYear = dateYear;
let lastMonth = dateMonth - 1;
Expand All @@ -53,6 +53,7 @@ export const ConsumeEdit = () => {
const res = ApiClient.getInstance().getCategoryBudget();
return res;
},
staleTime: 100,
});

const { mutate: setBudget } = useMutation({
Expand All @@ -61,6 +62,8 @@ export const ConsumeEdit = () => {
const res = ApiClient.getInstance().updateCategoryBudget(data);
return res;
},
onSettled: () =>
queryClient.invalidateQueries({ queryKey: ['spend', 'budget2'] }),
});

const [initData, setInitData] = useState<BudgetEditType[]>([
Expand Down Expand Up @@ -158,28 +161,15 @@ export const ConsumeEdit = () => {
};

useEffect(() => {
setSum(Object.values(data).reduce((acc, val) => acc + val));
}, [data]);
queryClient.invalidateQueries({ queryKey: ['spend', 'budget2'] });
}, []);

useEffect(() => {
if (budgetQuery.isSuccess) {
setInitData([
{ ...initData[0], balance: budgetQuery.data.shopping },
{ ...initData[1], balance: budgetQuery.data.food },
{ ...initData[2], balance: budgetQuery.data.traffic },
{ ...initData[3], balance: budgetQuery.data.hospital },
{ ...initData[4], balance: budgetQuery.data.fee },
{ ...initData[5], balance: budgetQuery.data.education },
{ ...initData[6], balance: budgetQuery.data.leisure },
{ ...initData[7], balance: budgetQuery.data.society },
{ ...initData[8], balance: budgetQuery.data.daily },
{ ...initData[9], balance: budgetQuery.data.overseas },
]);
}
}, [budgetQuery.isSuccess]);
setSum(Object.values(data).reduce((acc, val) => acc + val));
}, [data]);

useEffect(() => {
if (budgetQuery.isSuccess) {
if (budgetQuery.data) {
setData({
shopping: initData[0].balance,
food: initData[1].balance,
Expand All @@ -193,15 +183,33 @@ export const ConsumeEdit = () => {
overseas: initData[9].balance,
});
}
console.log(initData);
}, [initData]);

useEffect(() => {
budgetQuery.refetch();
}, []);
if (budgetQuery.data) {
console.log(budgetQuery.data);
setInitData([
{
icon: initData[0].icon,
name: initData[0].name,
lastSpend: initData[0].lastSpend,
balance: budgetQuery.data.shopping,
},
{ ...initData[1], balance: budgetQuery.data.food },
{ ...initData[2], balance: budgetQuery.data.traffic },
{ ...initData[3], balance: budgetQuery.data.hospital },
{ ...initData[4], balance: budgetQuery.data.fee },
{ ...initData[5], balance: budgetQuery.data.education },
{ ...initData[6], balance: budgetQuery.data.leisure },
{ ...initData[7], balance: budgetQuery.data.society },
{ ...initData[8], balance: budgetQuery.data.daily },
{ ...initData[9], balance: budgetQuery.data.overseas },
]);
}
}, [budgetQuery.data]);

useEffect(() => {
if (successSpend) {
if (successSpend && budgetQuery.data) {
let tmp = new Array(10);
spendData.spendFindByTypeResList.forEach((data) => {
switch (data.type) {
Expand Down Expand Up @@ -238,23 +246,51 @@ export const ConsumeEdit = () => {
}
});
setInitData([
{ ...initData[0], lastSpend: tmp[0] },
{ ...initData[1], lastSpend: tmp[1] },
{ ...initData[2], lastSpend: tmp[2] },
{ ...initData[3], lastSpend: tmp[3] },
{ ...initData[4], lastSpend: tmp[4] },
{ ...initData[5], lastSpend: tmp[5] },
{ ...initData[6], lastSpend: tmp[6] },
{ ...initData[7], lastSpend: tmp[7] },
{ ...initData[8], lastSpend: tmp[8] },
{ ...initData[9], lastSpend: tmp[9] },
{
...initData[0],
lastSpend: tmp[0],
balance: budgetQuery.data.shopping,
},
{ ...initData[1], lastSpend: tmp[1], balance: budgetQuery.data.food },
{
...initData[2],
lastSpend: tmp[2],
balance: budgetQuery.data.traffic,
},
{
...initData[3],
lastSpend: tmp[3],
balance: budgetQuery.data.hospital,
},
{ ...initData[4], lastSpend: tmp[4], balance: budgetQuery.data.fee },
{
...initData[5],
lastSpend: tmp[5],
balance: budgetQuery.data.education,
},
{
...initData[6],
lastSpend: tmp[6],
balance: budgetQuery.data.leisure,
},
{
...initData[7],
lastSpend: tmp[7],
balance: budgetQuery.data.society,
},
{ ...initData[8], lastSpend: tmp[8], balance: budgetQuery.data.daily },
{
...initData[9],
lastSpend: tmp[9],
balance: budgetQuery.data.overseas,
},
]);
}
}, [successSpend]);
}, [spendData, budgetQuery.data]);

return (
<>
{budgetQuery.isSuccess && successSpend && (
{budgetQuery.data && spendData && (
<>
<Topbar title='이번 달 μ˜ˆμ‚°' />
<div className='flex flex-col gap-6'>
Expand Down
Loading

0 comments on commit 86f57f3

Please sign in to comment.