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 ( + + 알림톡 취소신청이 완료되었어요 + completeImg + 계속하기 + + ); +} + +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 ( + + 알림톡 신청이 완료되었어요 + completeImg + 계속하기 + + ); +} + +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()}> - - closeModal - - {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 ( - + - check + check + {showModal && ( - + navigate("/ssobbi")}> navigate("/ssobbi")} /> )}