diff --git a/src/components/MobComponent/LandingPage/Block1Component.js b/src/components/MobComponent/LandingPage/Block1Component.js
index f753625..b84526d 100644
--- 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
index 3679de5..f97e7a7 100644
--- 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 (
diff --git a/src/components/MobComponent/MobMainPage/DayStatisticsComponent.js b/src/components/MobComponent/MobMainPage/DayStatisticsComponent.js
index 4761a1a..14f5642 100644
--- 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
index 38e746c..8316130 100644
--- 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
index 5c8c37c..3a21852 100644
--- 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
index 94a4ca2..fed8135 100644
--- 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,6 +256,9 @@ function AlarmComponent({ userInfo }) {
onClick={() => handleCheckBoxClick("terms1")}
/>{" "}
(필수) 이용약관
+
setIsInfoModalOpen(true)}>
+ 보기
+
handleCheckBoxClick("terms2")}
/>{" "}
(필수) 이용약관
+ setIsInfoModalOpen(true)}>
+ 보기
+
{alarm ? (
- 알림톡 신청이 취소되었어요!
+
) : (
- 알림톡 신청이 완료되었어요!
+
)}
)}
+ {isInfoModalOpen && (
+ setIsInfoModalOpen(false)}>
+
+
+ )}
);
}
diff --git a/src/components/MyPage/CancelPhone.js b/src/components/MyPage/CancelPhone.js
new file mode 100644
index 0000000..a8eb49e
--- /dev/null
+++ 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 (
+
+ 알림톡 취소신청이 완료되었어요
+
+ 계속하기
+
+ );
+}
+
+export default CancelPhone;
diff --git a/src/components/MyPage/CompletePhoneComponent.js b/src/components/MyPage/CompletePhoneComponent.js
new file mode 100644
index 0000000..5601123
--- /dev/null
+++ 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 (
+
+ 알림톡 신청이 완료되었어요
+
+ 계속하기
+
+ );
+}
+
+export default CompletePhoneComponent;
diff --git a/src/components/MyPage/ModalComponent.js b/src/components/MyPage/ModalComponent.js
deleted file mode 100644
index 49b58bb..0000000
--- a/src/components/MyPage/ModalComponent.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, { useEffect } from "react";
-import styled from "styled-components";
-import CloseModalImg from "../../imgs/CloseModal.svg";
-
-/* modal창 외부화면 */
-const ModalWrapper = styled.div`
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.4);
- display: flex;
- justify-content: center;
- align-items: center;
-`;
-
-const Modal = styled.div`
- position: absolute;
- width: 928px;
- height: 524px;
- padding: 40px;
- text-align: center;
- background-color: rgb(255, 255, 255);
- border-radius: 40px;
- box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
-`;
-
-const CloseBtn = styled.button`
- border: none;
- background-color: white;
- position: absolute;
- top: 44px;
- right: 44px;
- cursor: pointer;
-`;
-const CheckBTn = styled.button`
- border: none;
- border-radius: 16px;
- font-family: "SUITLight";
- color: white;
- font-size: 24px;
- background-color: #3fc87e;
- width: 210px;
- height: 70px;
- cursor: pointer;
-`;
-
-function ModalComponent(props) {
- function closeModal() {
- props.closeModal();
- }
- useEffect(() => {
- document.body.style = `overflow: hidden`; //hidden : 스크롤 방지
- return () => (document.body.style = `overflow: auto`);
- }, []);
-
- return (
-
- e.stopPropagation()}>
-
-
-
- {props.children}
- 확인
-
-
- );
-}
-
-export default ModalComponent;
diff --git a/src/components/OverConsumptionPage/CheckComponent.js b/src/components/OverConsumptionPage/CheckComponent.js
index a5a1fb1..32a091d 100644
--- a/src/components/OverConsumptionPage/CheckComponent.js
+++ b/src/components/OverConsumptionPage/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 {
@@ -14,10 +14,10 @@ const CategoryInput = styled.input`
height: 60px;
text-align: center;
border-radius: 10px;
- border: none;
box-shadow: 0px 12px 34px 0px rgba(0, 0, 0, 0.08),
0px 1.503px 32.312px 0px rgba(0, 0, 0, 0.01);
- border: ${(props) => (props.checked === true ? "1px solid red" : "none")};
+ border: none;
+ outline: ${(props) => (props.checked === true ? "1px solid red" : "none")};
margin-left: 16px;
margin-right: 16px;
font-family: "SUITLight";
@@ -44,15 +44,16 @@ const StyledBtn = styled.button`
width: 60px;
height: 60px;
background: ${(props) => (props.checked === true ? "red" : "#FFFFFF")};
- border: ${(props) => (props.checked === true ? "none" : "1px solid black")};
+ outline: ${(props) => (props.checked === true ? "none" : "1px solid black")};
border-radius: 20px;
+ border: none;
`;
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) {
+
+ function handleCheckBox() {
setInputCheck((prev) => !prev);
setConsumptions((prev) =>
prev.map((itm) =>
@@ -63,11 +64,15 @@ function CheckComponent({ category, consumption, targetAmount }) {
);
}
useEffect(() => {
- consumption > targetAmount ? setInputCheck(true) : setInputCheck(false);
+ if (consumption > targetAmount / 30) {
+ setInputCheck(true);
+ } else {
+ 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 };
@@ -79,12 +84,9 @@ function CheckComponent({ category, consumption, targetAmount }) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
-
+
-
+
+
{showModal && (
-
+ navigate("/ssobbi")}>
navigate("/ssobbi")} />
)}