-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #95 from LikeLionHGU/#93_sungyu_기타카테고리적용
#93 sungyu 기타카테고리적용
- Loading branch information
Showing
9 changed files
with
222 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
80 changes: 80 additions & 0 deletions
80
src/components/MobComponent/MobIncomePage/TermOfUseComponent2.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import React from "react"; | ||
| import styled from "styled-components"; | ||
| import { Vertical } from "../../../styles/CommunalStyle"; | ||
|
|
||
| const Title = styled.p` | ||
| color: var(--Black, #0c0c0c); | ||
| text-align: center; | ||
| font-family: "SUITLight"; | ||
| font-size: 18px; | ||
| font-style: normal; | ||
| font-weight: 500; | ||
| line-height: normal; | ||
| letter-spacing: 1.2px; | ||
| `; | ||
|
|
||
| const InfoWrapper = styled.div` | ||
| width: 90%; | ||
| height: 150px; | ||
| padding: 10px 30px; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 10px; | ||
| flex-shrink: 0; | ||
| font-family: "SUITLight"; | ||
| overflow: scroll; | ||
| border-radius: 14px; | ||
| background: #f2f6f4; | ||
| text-align: left; | ||
| overflow: scroll; | ||
| `; | ||
| function TermOfUseComponent2() { | ||
| return ( | ||
| <Vertical> | ||
| <Title>SSOBBI 개인정보약관</Title> | ||
| <InfoWrapper> | ||
| <p>{info1}</p> | ||
| <p>{info2}</p> | ||
| <p>{info3}</p> | ||
| <p>{info4}</p> | ||
| <p>{info5}</p> | ||
| <p>{info6}</p> | ||
| <p>{info7}</p> | ||
| <p>{info8}</p> | ||
| <p>{info9}</p> | ||
| <p>{info10}</p> | ||
| <p>{info11}</p> | ||
| <p>{info12}</p> | ||
| <p>{info13}</p> | ||
| <p>{info14}</p> | ||
| <p>{info15}</p> | ||
| <p>{info16}</p> | ||
| </InfoWrapper> | ||
| </Vertical> | ||
| ); | ||
| } | ||
|
|
||
| export default TermOfUseComponent2; | ||
| const info1 = "1. **개인정보의 수집 및 이용 목적**"; | ||
| const info2 = " - 알림톡 서비스 제공 및 관리"; | ||
| const info3 = "2. **수집하는 개인정보의 항목**"; | ||
| const info4 = "- 필수항목: 전화번호, 서비스 이용기록"; | ||
| const info5 = "**개인정보의 보유 및 이용 기간**"; | ||
| const info6 = | ||
| " - 이용자의 개인정보는 서비스 제공 기간 동안 보유하며, 이용자가 동의를 철회하거나 목적이 달성된 후에는 해당 정보를 지체 없이 파기합니다."; | ||
| const info7 = | ||
| " - 단, 법령에 따라 보관해야 하는 경우 해당 기간 동안 보관합니다."; | ||
| const info8 = "4. **개인정보의 제3자 제공**."; | ||
| const info9 = | ||
| "- 회사는 이용자의 동의 없이 개인정보를 제3자에게 제공하지 않습니다."; | ||
| const info10 = "- 다만, 법령에 따라 요구되는 경우는 예외로 합니다."; | ||
| const info11 = "5. **개인정보의 파기 절차 및 방법**"; | ||
| const info12 = | ||
| "- 이용자의 개인정보는 보유 기간이 경과하거나 처리 목적이 달성된 후 지체 없이 파기됩니다."; | ||
| const info13 = | ||
| " - 전자적 파일 형태의 정보는 기술적 방법을 사용하여 복구할 수 없도록 영구 삭제합니다."; | ||
| const info14 = "6. **이용자의 권리와 의무**"; | ||
| const info15 = | ||
| "- 이용자는 언제든지 자신의 개인정보를 조회하거나 수정할 수 있으며, 수집 및 이용에 대한 동의를 철회할 수 있습니다."; | ||
| const info16 = | ||
| " - 이용자는 자신의 개인정보를 최신 상태로 유지해야 하며, 부정확한 정보 제공으로 발생하는 문제에 대해 회사는 책임을 지지 않습니다."; |
116 changes: 116 additions & 0 deletions
116
src/components/OverConsumptionPage/CalenderComponent.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| import React, { useEffect, useState } from "react"; | ||
| import Calendar from "react-calendar"; | ||
| import "../../styles/Calender.css"; | ||
| import moment from "moment"; | ||
| import styled from "styled-components"; | ||
| import { format } from "date-fns"; | ||
| import axios from "axios"; | ||
| import { tokenState } from "../../store/atom"; | ||
| import { useRecoilValue } from "recoil"; | ||
|
|
||
| const StyledDot = styled.div` | ||
| background-color: #2aa663; | ||
| border-radius: 50%; | ||
| width: 0.3rem; | ||
| height: 0.3rem; | ||
| position: absolute; | ||
| top: 60%; | ||
| left: 50%; | ||
| transform: translateX(-50%); | ||
| `; | ||
|
|
||
| const StyledToday = styled.div` | ||
| background-color: #3fc87e; | ||
| width: 20px; | ||
| height: 20px; | ||
| border-radius: 50%; | ||
| position: absolute; | ||
| top: 12%; | ||
| left: 50%; | ||
| transform: translateX(-50%); | ||
| color: white; | ||
| `; | ||
|
|
||
| const CalenderWrapper = styled.div` | ||
| height: 83vh; | ||
| background-color: #f2f6f4; | ||
| border-top-left-radius: 20px; | ||
| border-top-right-radius: 20px; | ||
| `; | ||
|
|
||
| function Calender({ setSelectDate }) { | ||
| const today = new Date(); | ||
| const todayDate = ("0" + today.getDate()).slice(-2); | ||
| const [month, setMonth] = useState(moment(today).format("YYYY-MM")); | ||
| const [attendDay, setAttendDay] = useState(); | ||
| const userToken = useRecoilValue(tokenState); | ||
| const handleDateChange = (e) => { | ||
| setSelectDate(moment(e).format("YYYY-MM-DD")); | ||
| }; | ||
| const shortWeekdayFormat = (locale, date) => { | ||
| return format(date, "EEE", { locale }); | ||
| }; // 캘린더 요일 형식 영어로 바꾸기 | ||
| function handleMonthChange({ activeStartDate }) { | ||
| setMonth(moment(activeStartDate).format("YYYY-MM")); | ||
| } | ||
| useEffect(() => { | ||
| const apiUrl = | ||
| process.env.REACT_APP_BASE_URL + | ||
| `/records/monthly/${month}/recorded-dates`; | ||
| axios | ||
| .get(apiUrl, { | ||
| headers: { | ||
| Authorization: "Bearer " + userToken, | ||
| }, | ||
| }) | ||
| .then((response) => { | ||
| const data = response.data.recordedDates; | ||
| const formattedData = data.map((itm) => ({ date: itm })); | ||
| setAttendDay(formattedData); | ||
| }) | ||
| .catch((error) => { | ||
| console.log(error); | ||
| }); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [month]); | ||
| return ( | ||
| <CalenderWrapper> | ||
| <Calendar | ||
| formatShortWeekday={shortWeekdayFormat} | ||
| onActiveStartDateChange={handleMonthChange} | ||
| onChange={handleDateChange} | ||
| formatDay={(locale, date) => moment(date).format("DD")} // 일 제거 숫자만 보이게 | ||
| formatYear={(locale, date) => moment(date).format("YYYY")} // 네비게이션 눌렀을때 숫자 년도만 보이게 | ||
| formatMonthYear={(locale, date) => moment(date).format("MM")} // 네비게이션에서 2023. 12 이렇게 보이도록 설정 | ||
| calendarType="gregory" // 일요일 부터 시작 | ||
| next2Label={null} // +1년 & +10년 이동 버튼 숨기기 | ||
| prev2Label={null} // -1년 & -10년 이동 버튼 숨기기 | ||
| minDetail="year" // 10년단위 년도 숨기기 | ||
| tileDisabled={({ date, view }) => view === "month" && date > today} | ||
| tileContent={({ date, view }) => { | ||
| let html = []; | ||
| if ( | ||
| view === "month" && | ||
| date.getMonth() === today.getMonth() && | ||
| date.getDate() === today.getDate() | ||
| ) { | ||
| html.push(<StyledToday key={"today"}>{todayDate}</StyledToday>); | ||
| } | ||
| if (attendDay) { | ||
| if ( | ||
| attendDay.find( | ||
| (x) => x.date === moment(date).format("YYYY-MM-DD") | ||
| ) | ||
| ) { | ||
| html.push(<StyledDot key={moment(date).format("YYYY-MM-DD")} />); | ||
| } | ||
| } | ||
| return <>{html}</>; | ||
| }} | ||
| /> | ||
| {/* <p>카테고리 출력 : {data}</p> */} | ||
| </CalenderWrapper> | ||
| ); | ||
| } | ||
|
|
||
| export default Calender; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters