Merge pull request #92 from LikeLionHGU/#82_sungyu_모바일스타일적용

#82 sungyu 모바일스타일적용
LikeLionHGU · Aug 6, 2024 · 850e6f6 · 850e6f6
2 parents b4a31f6 + 638fbd4
commit 850e6f6
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 4 deletions.
diff --git 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
@@ -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,17 +101,20 @@ 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(() => {
     if (isUpdating && isClick) {
       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
@@ -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
@@ -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}
         />
         <TitleAndInputWrapper>
           <Title2>카테고리별 목표금액</Title2>
@@ -196,6 +221,7 @@ function MobMyPage() {
                 isLast={itm.isLast}
                 setIsMinimumCategory={setIsMinimumCategory}
                 handleAddBtnClick={handleAddBtnClick}
+                monthIncome={monthIncome}
               />
             ))}
           </div>
@@ -211,6 +237,12 @@ function MobMyPage() {
           </AmountUpdateBtn>
         )}
         <MobMenuBarComponent menu={"profile"} />
+        {isMinimumCategory && (
+          <ErrorMessage>카테고리는 최소 2개 이상 있어야합니다</ErrorMessage>
+        )}
+        {isIncludeZero && (
+          <ErrorMessage>목표금액은 0원일 수 없습니다</ErrorMessage>
+        )}
       </Vertical>
     </MobileV>
   );