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

#82 sungyu 모바일스타일적용
LikeLionHGU · Aug 5, 2024 · 891ea72 · 891ea72
2 parents 1923c8c + f2e9c41
commit 891ea72
Show file tree

Hide file tree

Showing 16 changed files with 142 additions and 114 deletions.
diff --git a/src/components/MobComponent/LandingPage/Block1Component.js b/src/components/MobComponent/LandingPage/Block1Component.js
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Vertical, Horizontal } from "../../../styles/CommunalStyle";
+import { Vertical } from "../../../styles/CommunalStyle";
 
 const Text1 = styled.p`
   color: ${(props) => props.theme.colors.COLORBlack};

diff --git a/src/components/MobComponent/MobCreatePage/ConsumptionComponent.js b/src/components/MobComponent/MobCreatePage/ConsumptionComponent.js
@@ -51,6 +51,7 @@ function ConsumptionComponent(props) {
       .catch((error) => {
         console.log(error);
       });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [userToken]);
   return (
     <div>

diff --git a/src/components/MobComponent/MobMainPage/DayStatisticsComponent.js b/src/components/MobComponent/MobMainPage/DayStatisticsComponent.js
@@ -2,7 +2,6 @@ import styled from "styled-components";
 import { Horizontal } from "../../../styles/CommunalStyle";
 import { useRecoilValue } from "recoil";
 import { userData } from "../../../store/atom";
-import { useEffect } from "react";
 
 const Title = styled.p`
   color: ${(props) => props.theme.colors.COLORBlack};

diff --git a/src/components/MobComponent/MobMyPage/IncomeComponent.js b/src/components/MobComponent/MobMyPage/IncomeComponent.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import { NoCenterVertical, Vertical } from "../../../styles/CommunalStyle";
+import { NoCenterVertical } from "../../../styles/CommunalStyle";
 import styled from "styled-components";
 import axios from "axios";
 import { tokenState, userData } from "../../../store/atom";
@@ -22,22 +22,22 @@ const Title = styled.p`
   font-size: 18px;
 `;
 
-const UpdateBtn = styled.button`
-  display: inline-flex;
-  padding: 12px 14px;
-  justify-content: center;
-  align-items: center;
-  gap: 14px;
-  background: #2aa663;
-  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2);
-  border: none;
-  border-radius: 24px;
-  font-family: "SUITLight";
-  font-size: 17px;
-  color: white;
-  margin-left: 28px;
-  cursor: pointer;
-`;
+// const UpdateBtn = styled.button`
+//   display: inline-flex;
+//   padding: 12px 14px;
+//   justify-content: center;
+//   align-items: center;
+//   gap: 14px;
+//   background: #2aa663;
+//   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2);
+//   border: none;
+//   border-radius: 24px;
+//   font-family: "SUITLight";
+//   font-size: 17px;
+//   color: white;
+//   margin-left: 28px;
+//   cursor: pointer;
+// `;
 
 const Unit = styled.span`
   font-family: "SUITLight";
@@ -62,6 +62,7 @@ function IncomeComponent() {
   const userToken = useRecoilValue(tokenState);
   const incomeRef = useRef("");
 
+  // eslint-disable-next-line no-unused-vars
   function handleSubmitBtnClick() {
     const newArr = { income: convertToInt(income) };
     const apiUrl = process.env.REACT_APP_BASE_URL + "/user/monthly/income";

diff --git a/src/components/MobComponent/MobOverConsumptionPage/CheckComponent.js b/src/components/MobComponent/MobOverConsumptionPage/CheckComponent.js
@@ -4,7 +4,7 @@ import { Horizontal } from "../../../styles/CommunalStyle";
 import CheckOverImg from "../../../imgs/CheckOver.svg";
 import NoCheckOverImg from "../../../imgs/NoCheckOver.svg";
 import { consumptionIndexState } from "../../../store/atom";
-import { useRecoilState } from "recoil";
+import { useSetRecoilState } from "recoil";
 
 const CategoryInput = styled.input`
   &:focus {
@@ -45,8 +45,7 @@ const StyledBtn = styled.button`
 `;
 
 function CheckComponent({ category, consumption, targetAmount }) {
-  // eslint-disable-next-line no-unused-vars
-  const [consumptions, setConsumptions] = useRecoilState(consumptionIndexState);
+  const setConsumptions = useSetRecoilState(consumptionIndexState);
   const [inputCheck, setInputCheck] = useState(true);
   function handleCheckBox(e) {
     setInputCheck((prev) => !prev);
@@ -59,11 +58,13 @@ function CheckComponent({ category, consumption, targetAmount }) {
     );
   }
   useEffect(() => {
-    consumption > targetAmount ? setInputCheck(true) : setInputCheck(false);
+    consumption > targetAmount / 30
+      ? setInputCheck(true)
+      : setInputCheck(false);
     setConsumptions((prev) =>
       prev.map((itm) => {
         if (itm.category === category) {
-          if (consumption > targetAmount) {
+          if (consumption > targetAmount / 30) {
             return { ...itm, isOverConsumption: true };
           } else {
             return { ...itm, isOverConsumption: false };

diff --git a/src/components/MyPage/AlarmComponent.js b/src/components/MyPage/AlarmComponent.js
@@ -3,12 +3,15 @@ import axios from "axios";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import { tokenState, userData } from "../../store/atom";
 import styled from "styled-components";
-import ModalComponent from "./ModalComponent";
+import ModalComponent from "../IncomePage/ModalComponent";
 import AlarmImg from "../../imgs/alarmCheck.png";
 import {
   NoCenterHorizontal,
   NoCenterVertical,
 } from "../../styles/CommunalStyle";
+import TermOfUseComponent from "../IncomePage/TermOfUseComponent";
+import CompletePhoneComponent from "./CompletePhoneComponent";
+import CancelPhone from "./CancelPhone";
 
 const Wrapper = styled.div`
   display: flex;
@@ -105,6 +108,12 @@ const InputField = styled.input`
   width: 200px;
   margin-top: 6px;
 `;
+const InfoModal = styled.span`
+  margin-left: 93px;
+  color: gray;
+  border-bottom: 0.5px solid gray;
+  cursor: pointer;
+`;
 
 function AlarmComponent({ userInfo }) {
   const setUserInfo = useSetRecoilState(userData);
@@ -118,6 +127,7 @@ function AlarmComponent({ userInfo }) {
     terms2: false,
   });
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isInfoModalOpen, setIsInfoModalOpen] = useState(false);
   const openModal = () => {
     setIsModalOpen(true);
   };
@@ -246,13 +256,19 @@ function AlarmComponent({ userInfo }) {
                     onClick={() => handleCheckBoxClick("terms1")}
                   />{" "}
                   (필수) 이용약관
+                  <InfoModal onClick={() => setIsInfoModalOpen(true)}>
+                    보기
+                  </InfoModal>
                 </NoCenterHorizontal>
                 <NoCenterHorizontal style={{ marginBottom: "50px" }}>
                   <CheckBox
                     checked={checks.terms2}
                     onClick={() => handleCheckBoxClick("terms2")}
                   />{" "}
                   (필수) 이용약관
+                  <InfoModal onClick={() => setIsInfoModalOpen(true)}>
+                    보기
+                  </InfoModal>
                 </NoCenterHorizontal>
 
                 <NoCenterVertical
@@ -311,12 +327,17 @@ function AlarmComponent({ userInfo }) {
       {isModalOpen && (
         <ModalComponent closeModal={closeModal}>
           {alarm ? (
-            <p>알림톡 신청이 취소되었어요!</p>
+            <CancelPhone closeModal={closeModal} />
           ) : (
-            <p>알림톡 신청이 완료되었어요!</p>
+            <CompletePhoneComponent closeModal={closeModal} />
           )}
         </ModalComponent>
       )}
+      {isInfoModalOpen && (
+        <ModalComponent closeModal={() => setIsInfoModalOpen(false)}>
+          <TermOfUseComponent />
+        </ModalComponent>
+      )}
     </Wrapper>
   );
 }

diff --git a/src/components/MyPage/CancelPhone.js b/src/components/MyPage/CancelPhone.js
@@ -0,0 +1,36 @@
+import React from "react";
+import styled from "styled-components";
+import { Vertical } from "../../styles/CommunalStyle";
+import CompleteImg from "../../imgs/Saly-37.png";
+
+const Title = styled.p`
+  font-family: "SUITLight";
+  font-size: 30px;
+  margin-bottom: 80px;
+`;
+
+const StyledBtn = styled.button`
+  width: 408px;
+  height: 70px;
+  flex-shrink: 0;
+  border-radius: 16px;
+  background: var(--70, #3fc87e);
+  font-family: "SUITLight";
+  font-size: 24px;
+  text-align: center;
+  color: white;
+  border: none;
+  cursor: pointer;
+  margin-top: 47px;
+`;
+function CancelPhone(props) {
+  return (
+    <Vertical>
+      <Title>알림톡 취소신청이 완료되었어요</Title>
+      <img src={CompleteImg} alt="completeImg" />
+      <StyledBtn onClick={props.closeModal}>계속하기</StyledBtn>
+    </Vertical>
+  );
+}
+
+export default CancelPhone;
diff --git a/src/components/MyPage/CompletePhoneComponent.js b/src/components/MyPage/CompletePhoneComponent.js
@@ -0,0 +1,36 @@
+import React from "react";
+import styled from "styled-components";
+import { Vertical } from "../../styles/CommunalStyle";
+import CompleteImg from "../../imgs/Saly-26.png";
+
+const Title = styled.p`
+  font-family: "SUITLight";
+  font-size: 30px;
+  margin-bottom: 80px;
+`;
+
+const StyledBtn = styled.button`
+  width: 408px;
+  height: 70px;
+  flex-shrink: 0;
+  border-radius: 16px;
+  background: var(--70, #3fc87e);
+  font-family: "SUITLight";
+  font-size: 24px;
+  text-align: center;
+  color: white;
+  border: none;
+  cursor: pointer;
+  margin-top: 47px;
+`;
+function CompletePhoneComponent(props) {
+  return (
+    <Vertical>
+      <Title>알림톡 신청이 완료되었어요</Title>
+      <img src={CompleteImg} alt="completeImg" />
+      <StyledBtn onClick={props.closeModal}>계속하기</StyledBtn>
+    </Vertical>
+  );
+}
+
+export default CompletePhoneComponent;
diff --git a/src/components/MyPage/ModalComponent.js b/src/components/MyPage/ModalComponent.js