diff --git a/src/components/MobComponent/MobMyPage/CategoryAmountComponent.js b/src/components/MobComponent/MobMyPage/CategoryAmountComponent.js index c4dfb8a..fcaefcd 100644 --- a/src/components/MobComponent/MobMyPage/CategoryAmountComponent.js +++ b/src/components/MobComponent/MobMyPage/CategoryAmountComponent.js @@ -74,6 +74,7 @@ function CategoryAmountComponent({ setIsMinimumCategory, isLast, handleAddBtnClick, + monthIncome, }) { const [category, setCategory] = useState(null); const [price, setPrice] = useState(convertStringNum(null)); @@ -120,6 +121,27 @@ function CategoryAmountComponent({ const onlyNumber = value.replace(/[^0-9]/g, ""); const formattedNumber = new Intl.NumberFormat().format(onlyNumber); setPrice(formattedNumber); + + const arr = amount.map((itm) => + itm.category === category ? { ...itm, amount: formattedNumber } : itm + ); + const sum = arr.reduce( + (acc, itm) => + itm.category === "기타" ? acc : acc + convertToInt(itm.amount), + 0 + ); + + const newArr = arr.map((itm) => + itm.category === "기타" + ? { + ...itm, + amount: convertStringNum(monthIncome - sum), + } + : itm + ); + + setAmount(newArr); + setAmount((prev) => prev.map((itm) => itm.category === data.category @@ -167,3 +189,9 @@ function convertStringNum(onlyNumber) { const formattedNumber = new Intl.NumberFormat().format(onlyNumber); return formattedNumber; } + +function convertToInt(numberString) { + const numberWithoutCommas = numberString.replace(/,/g, ""); + const number = parseInt(numberWithoutCommas, 10); + return number; +} diff --git a/src/components/MobComponent/MobMyPage/IncomeComponent.js b/src/components/MobComponent/MobMyPage/IncomeComponent.js index 7cd9c9f..5d16be3 100644 --- a/src/components/MobComponent/MobMyPage/IncomeComponent.js +++ b/src/components/MobComponent/MobMyPage/IncomeComponent.js @@ -55,7 +55,7 @@ const InputBtnWrapper = styled.div` position: relative; `; -function IncomeComponent({ isUpdating, isClick, setIsClick }) { +function IncomeComponent({ isUpdating, isClick, setIsClick, setMonthIncome }) { const userInfo = useRecoilValue(userData); const [income, setIncome] = useState(null); const userToken = useRecoilValue(tokenState); @@ -101,10 +101,12 @@ function IncomeComponent({ isUpdating, isClick, setIsClick }) { response.data.income ); setIncome(formattedNumber); + setMonthIncome(response.data.income); }) .catch((error) => { console.log(error); }); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [isUpdating, userToken]); useEffect(() => { @@ -112,6 +114,7 @@ function IncomeComponent({ isUpdating, isClick, setIsClick }) { const newArr = { income: convertToInt(income) }; const apiUrl = process.env.REACT_APP_BASE_URL + "/user/monthly/income"; console.log(newArr); + setMonthIncome(convertToInt(income)); axios .post(apiUrl, newArr, { headers: { diff --git a/src/components/MobComponent/MobMyPage/ProfileComponent.js b/src/components/MobComponent/MobMyPage/ProfileComponent.js index 9be73c5..13173ca 100644 --- a/src/components/MobComponent/MobMyPage/ProfileComponent.js +++ b/src/components/MobComponent/MobMyPage/ProfileComponent.js @@ -30,10 +30,12 @@ const InfoWrapper = styled.div` } > .logout { font-family: "SUITLight"; - font-size: 16px; + font-size: 10px; color: gray; cursor: pointer; - border-bottom: 1px solid gray; + border: none; + margin-top: -10px; + margin-right: -40px; } } `; diff --git a/src/pages/Mob/MobMyPage.js b/src/pages/Mob/MobMyPage.js index ecafcb9..4dfcb7e 100644 --- a/src/pages/Mob/MobMyPage.js +++ b/src/pages/Mob/MobMyPage.js @@ -69,13 +69,21 @@ const AmountUpdateBtn = styled.button` transform: translateX(120%); `; +const ErrorMessage = styled.p` + color: red; + text-align: center; + font-family: "SUITLight"; + font-size: 16px; +`; + function MobMyPage() { const userToken = useRecoilValue(tokenState); const [amount, setAmount] = useState([]); const [isUpdating, setIsUpdating] = useState(false); const [isClick, setIsClick] = useState(false); - // eslint-disable-next-line no-unused-vars const [isMinimumCategory, setIsMinimumCategory] = useState(false); + const [monthIncome, setMonthIncome] = useState(""); + const [isIncludeZero, setIsIncludeZero] = useState(false); function handleAddBtnClick() { const data = [ @@ -89,6 +97,7 @@ function MobMyPage() { { category: "", amount: 0, isLast: true }, ]); setIsMinimumCategory(false); + setIsIncludeZero(false); } function handleAmountBtnClick() { @@ -97,6 +106,21 @@ function MobMyPage() { function handleLoadBtnClick() { setIsClick(true); + + const checkData = amount.map((itm) => { + if (itm.amount === 0 || itm.amount === "0") { + return true; + } else { + return false; + } + }); + + if (checkData.includes(true)) { + setIsIncludeZero(true); + return; + } + setIsIncludeZero(false); + const apiUrl = process.env.REACT_APP_BASE_URL + "/category/monthly/TargetAmount"; @@ -177,6 +201,7 @@ function MobMyPage() { isUpdating={isUpdating} isClick={isClick} setIsClick={setIsClick} + setMonthIncome={setMonthIncome} /> 카테고리별 목표금액 @@ -196,6 +221,7 @@ function MobMyPage() { isLast={itm.isLast} setIsMinimumCategory={setIsMinimumCategory} handleAddBtnClick={handleAddBtnClick} + monthIncome={monthIncome} /> ))} @@ -211,6 +237,12 @@ function MobMyPage() { )} + {isMinimumCategory && ( + 카테고리는 최소 2개 이상 있어야합니다 + )} + {isIncludeZero && ( + 목표금액은 0원일 수 없습니다 + )} );