diff --git a/package-lock.json b/package-lock.json index 37ed523..6f0b26e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20366,6 +20366,11 @@ "@xtuc/long": "4.2.2" } }, + "@wojtekmaj/date-utils": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@wojtekmaj/date-utils/-/date-utils-1.0.3.tgz", + "integrity": "sha512-1VPkkTBk07gMR1fjpBtse4G+oJqpmE+0gUFB0dg3VIL7qJmUVaBoD/vlzMm/jNeOPfvlmerl1lpnsZyBUFIRuw==" + }, "@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -23303,6 +23308,14 @@ "get-intrinsic": "^1.1.1" } }, + "get-user-locale": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/get-user-locale/-/get-user-locale-1.4.0.tgz", + "integrity": "sha512-gQo03lP1OArHLKlnoglqrGGl7b04u2EP9Xutmp72cMdtrrSD7ZgIsCsUKZynYWLDkVJW33Cj3pliP7uP0UonHQ==", + "requires": { + "lodash.once": "^4.1.1" + } + }, "glob": { "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", @@ -25665,6 +25678,11 @@ "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==" }, + "lodash.once": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz", + "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==" + }, "lodash.sortby": { "version": "4.7.0", "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", @@ -25760,6 +25778,11 @@ "fs-monkey": "^1.0.3" } }, + "merge-class-names": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/merge-class-names/-/merge-class-names-1.4.2.tgz", + "integrity": "sha512-bOl98VzwCGi25Gcn3xKxnR5p/WrhWFQB59MS/aGENcmUc6iSm96yrFDF0XSNurX9qN4LbJm0R9kfvsQ17i8zCw==" + }, "merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -25872,6 +25895,11 @@ "minimist": "^1.2.6" } }, + "moment": { + "version": "2.29.4", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==" + }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -27239,6 +27267,17 @@ "whatwg-fetch": "^3.6.2" } }, + "react-calendar": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/react-calendar/-/react-calendar-3.7.0.tgz", + "integrity": "sha512-zkK95zWLWLC6w3O7p3SHx/FJXEyyD2UMd4jr3CrKD+G73N+G5vEwrXxYQCNivIPoFNBjqoyYYGlkHA+TBDPLCw==", + "requires": { + "@wojtekmaj/date-utils": "^1.0.2", + "get-user-locale": "^1.2.0", + "merge-class-names": "^1.1.1", + "prop-types": "^15.6.0" + } + }, "react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", diff --git a/package.json b/package.json index e10eabd..936bc6a 100644 --- a/package.json +++ b/package.json @@ -9,8 +9,10 @@ "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", "axios": "^0.27.2", + "moment": "^2.29.4", "prop-types": "^15.8.1", "react": "^18.2.0", + "react-calendar": "^3.7.0", "react-dom": "^18.2.0", "react-redux": "^8.0.2", "react-router-dom": "^6.3.0", diff --git a/src/AppRouter.js b/src/AppRouter.js index 9d79545..4c52a07 100644 --- a/src/AppRouter.js +++ b/src/AppRouter.js @@ -1,7 +1,7 @@ /* eslint-disable import/no-unresolved */ import React from 'react'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; -import { Login, Main, Save, Vote, MyPage } from 'pages'; +import { Login, Main, Save, Vote, MyPage, SaveRecord } from 'pages'; function AppRouter() { return ( @@ -16,6 +16,7 @@ function AppRouter() { } /> } /> } /> + } /> } /> diff --git a/src/assets/Arrow/WhiteLeft.svg b/src/assets/Arrow/WhiteLeft.svg new file mode 100644 index 0000000..294bb91 --- /dev/null +++ b/src/assets/Arrow/WhiteLeft.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/Tmp/SaveBear.svg b/src/assets/Tmp/SaveBear.svg new file mode 100644 index 0000000..6f6c95e --- /dev/null +++ b/src/assets/Tmp/SaveBear.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/Tmp/WeatherInfo.svg b/src/assets/Tmp/WeatherInfo.svg new file mode 100644 index 0000000..4b26b4c --- /dev/null +++ b/src/assets/Tmp/WeatherInfo.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/assets/index.js b/src/assets/index.js index 991012b..e33c480 100644 --- a/src/assets/index.js +++ b/src/assets/index.js @@ -24,6 +24,7 @@ export { default as BoxLeft } from './Arrow/BoxLeft.svg'; export { default as BoxRight } from './Arrow/BoxRight.svg'; export { default as NormalLeft } from './Arrow/NormalLeft.svg'; export { default as NormalRight } from './Arrow/NormalRight.svg'; +export { default as WhiteLeft } from './Arrow/WhiteLeft.svg'; /* Weather / Calender */ export { default as CalCloud } from './Weather/Calender/Cloud.svg'; export { default as CalDoubleCloud } from './Weather/Calender/DoubleCloud.svg'; @@ -73,3 +74,6 @@ export { default as LoginBear } from './Bear/LoginBear.svg'; export { default as MainBear } from './Bear/MainBear.svg'; /* Login Button Google Logo */ export { default as GoogleBtn } from './Icon/Google.svg'; +/* Save Page tmp icon - Bear / WeatherInfo */ +export { default as SaveBear } from './Tmp/SaveBear.svg'; +export { default as WeatherInfo } from './Tmp/WeatherInfo.svg'; diff --git a/src/components/CustomCalendar/index.js b/src/components/CustomCalendar/index.js new file mode 100644 index 0000000..02b88fd --- /dev/null +++ b/src/components/CustomCalendar/index.js @@ -0,0 +1,60 @@ +/* eslint-disable import/no-unresolved */ +import React, { useState } from 'react'; +import { NavLink } from 'react-router-dom'; +import Calendar from 'react-calendar'; +import moment from 'moment'; +import { CalMoonCloud } from 'assets'; +import { StyledRoot, CalendarContainer, Image } from './style'; + +function CustomCalendar() { + const [value, onChange] = useState(new Date()); + const mark = ['2022-07-07', '2022-07-10']; + return ( + + + date.toLocaleString('en', { day: 'numeric' })} + showNeighboringMonth={false} + next2Label={null} + prev2Label={null} + tileClassName={({ date }) => { + if (mark.find(x => x === moment(date).format('YYYY-MM-DD'))) { + return 'highlight'; + } + return null; + }} + /* eslint-disable */ + tileContent={({ date, view }) => { + const html = []; + if (mark.find(x => x === moment(date).format('YYYY-MM-DD'))) { + html.push( + + record + , + ); + } + return ( +
+ {html} +
+ ); + }} + /> + + + ); +} + +export default CustomCalendar; diff --git a/src/components/CustomCalendar/style.js b/src/components/CustomCalendar/style.js new file mode 100644 index 0000000..91a3790 --- /dev/null +++ b/src/components/CustomCalendar/style.js @@ -0,0 +1,86 @@ +/* eslint-disable import/no-unresolved */ +import styled from 'styled-components'; +import { applyMediaQuery } from 'styles/mediaQuery'; + +const StyledRoot = styled.div` + background-color: ${({ theme: { color } }) => color.greenDarker}; +`; + +const CalendarContainer = styled.div` + width: 70vw; + ${applyMediaQuery('mobile')} { + width: 80vw; + } + margin: auto; + padding: 0 3rem; + ${applyMediaQuery('mobile')} { + padding: 0 1rem; + } + border-radius: 1rem; + background-color: ${({ theme: { color } }) => color.white}; + .react-calendar__navigation { + display: flex; + .react-calendar__navigation__label { + font-family: 'Cafe24Ssurround'; + font-size: ${({ theme: { font } }) => font.size.small}; + font-weight: ${({ theme: { font } }) => font.weight.bold}; + color: ${({ theme: { color } }) => color.greenDarker}; + } + .react-calendar__navigation__arrow { + flex-grow: 0.01; + color: ${({ theme: { color } }) => color.greenDarker}; + font-size: ${({ theme: { font } }) => font.size.medium}; + } + } + .react-calendar__month-view__weekdays { + padding: 1rem 0; + border-radius: 1rem; + text-align: center; + background-color: ${({ theme: { color } }) => color.greenLightest}; + color: ${({ theme: { color } }) => color.greyDarkest}; + font-family: 'Noto Sans'; + font-size: ${({ theme: { font } }) => font.size.micro}; + font-weight: ${({ theme: { font } }) => font.weight.bold}; + } + .react-calendar__month-view__weekdays__weekday abbr { + font-family: 'Noto Sans'; + text-decoration: none; + } + .react-calendar__month-view__days__day abbr { + font-family: 'Noto Sans'; + } + .react-calendar__tile--now { + font-family: 'Noto Sans'; + color: ${({ theme: { color } }) => color.greenDarker}; + } + .react-calendar__tile--active abbr { + font-family: 'Noto Sans'; + background-color: ${({ theme: { color } }) => color.greenDarker}; + color: ${({ theme: { color } }) => color.greenLightest}; + border-radius: 50%; + display: inline-block; + width: 2rem; + height: 2rem; + line-height: 2rem; + text-align: center; + } + button { + background-color: ${({ theme: { color } }) => color.white}; + height: 7rem; + border: 0; + } +`; + +const Image = styled.img` + width: 2.5rem; + height: 2.5rem; +`; + +const Text = styled.p` + color: ${({ theme: { color } }) => color.white}; + font-family: 'Noto Sans'; + font-size: ${({ theme: { font } }) => font.size.micro}; + font-weight: ${({ theme: { font } }) => font.weight.bold}; +`; + +export { StyledRoot, CalendarContainer, Image, Text }; diff --git a/src/components/index.js b/src/components/index.js index 6833285..5d4495c 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -3,3 +3,4 @@ export { default as HeaderIcon } from './Common/HeaderIcon'; export { default as PublicButton } from './Common/PublicButton'; export { default as WeatherReport } from './WeatherReport'; export { default as TempReport } from './TempReport'; +export { default as CustomCalendar } from './CustomCalendar'; \ No newline at end of file diff --git a/src/pages/Main/Vote/index.jsx b/src/pages/Main/Vote/index.jsx index 74efbe9..420075c 100644 --- a/src/pages/Main/Vote/index.jsx +++ b/src/pages/Main/Vote/index.jsx @@ -4,7 +4,6 @@ import React from 'react'; import { StyledRoot, Button } from './style'; import { Title, TitleSection, ContentSection } from '../style'; - function handleBtnClick() { console.log('Vote handleBtnclick'); } diff --git a/src/pages/Main/Weather/style.js b/src/pages/Main/Weather/style.js index 2d6467b..9a98d2b 100644 --- a/src/pages/Main/Weather/style.js +++ b/src/pages/Main/Weather/style.js @@ -12,10 +12,10 @@ const StyledRoot = styled.article` } `; const BearSection = styled.section` -img{ - width: 32rem; - height: 32rem; -} + img { + width: 32rem; + height: 32rem; + } // margin-right: 3rem; ${applyMediaQuery('mobile')} { margin-right: 0; diff --git a/src/pages/MyPage/index.jsx b/src/pages/MyPage/index.jsx index 9c7766c..b52b1f9 100644 --- a/src/pages/MyPage/index.jsx +++ b/src/pages/MyPage/index.jsx @@ -1,14 +1,50 @@ /* eslint-disable import/no-unresolved */ import React from 'react'; -import { HeaderIcon, PublicButton } from 'components'; -import { StyledRoot, Text } from './style'; +import { useNavigate } from 'react-router-dom'; +import { CustomCalendar } from 'components'; +import { User, WhiteLeft } from 'assets'; +import { + StyledRoot, + DesktopHeader, + LogoutButton, + MobileHeader, + BackButton, + UserWrapper, + UserTextWrapper, + UserIcon, + NameText, + EmailText, + MobileFooter, +} from './style'; function MyPage() { + const navigate = useNavigate(); return ( - - MyPage - {}} isDisabled={0} /> + + 로그아웃 + + + + + + + + 이름 + 이메일 + + + + + 로그아웃 + ); } diff --git a/src/pages/MyPage/style.js b/src/pages/MyPage/style.js index 8707014..690d911 100644 --- a/src/pages/MyPage/style.js +++ b/src/pages/MyPage/style.js @@ -3,17 +3,116 @@ import styled from 'styled-components'; import { applyMediaQuery } from 'styles/mediaQuery'; const StyledRoot = styled.div` - padding: 5rem; + min-height: 100vh; + padding: 5rem 15vw; + ${applyMediaQuery('mobile')} { + padding: 5rem 10vw; + } + background-color: ${({ theme: { color } }) => color.greenDarker}; +`; + +const DesktopHeader = styled.div` + width: 100%; + display: flex; + ${applyMediaQuery('mobile')} { + display: none; + } + justify-content: flex-end; +`; + +const LogoutButton = styled.button` + background-color: ${({ theme: { color } }) => color.white}; + height: 3rem; + padding: 0 1.5rem; + border-radius: 2rem; + font-size: ${({ theme: { font } }) => font.size.micro}; + font-weight: ${({ theme: { font } }) => font.weight.bold}; + ${applyMediaQuery('mobile')} { + width: 80vw; + height: 5rem; + border-radius: 0.5rem; + margin-top: 20rem; + color: ${({ theme: { color } }) => color.greenDarker}; + font-size: ${({ theme: { font } }) => font.size.small}; + font-family: 'Noto Sans'; + } +`; + +const MobileHeader = styled.div` + width: 100%; + display: flex; + ${applyMediaQuery('desktop')} { + display: none; + } +`; + +const BackButton = styled.img` + width: 3rem; + height: 3rem; `; -const Text = styled.p` - color: ${({ theme: { color } }) => color.red}; +const UserWrapper = styled.div` + height: 5rem; + display: flex; + flex-direction: row; + margin: 3rem 0; + ${applyMediaQuery('mobile')} { + margin: 5rem 0; + } +`; + +const UserTextWrapper = styled.div` + height: 5rem; + display: flex; + flex-direction: column; + justify-content: space-around; + margin-left: 1.5rem; +`; + +const UserIcon = styled.img` + width: 5rem; + height: 5rem; +`; + +const NameText = styled.p` + color: ${({ theme: { color } }) => color.white}; + font-family: 'Cafe24Ssurround'; + font-size: ${({ theme: { font } }) => font.size.small}; + ${applyMediaQuery('mobile')} { + font-size: ${({ theme: { font } }) => font.size.semiMedium}; + } + font-weight: ${({ theme: { font } }) => font.weight.medium}; +`; + +const EmailText = styled.p` + color: ${({ theme: { color } }) => color.white}; font-family: 'Noto Sans'; - font-size: ${({ theme: { font } }) => font.size.large}; - font-weight: ${({ theme: { font } }) => font.weight.light}; + font-size: ${({ theme: { font } }) => font.size.micro}; ${applyMediaQuery('mobile')} { - color: ${({ theme: { color } }) => color.greenDarkest}; + font-size: ${({ theme: { font } }) => font.size.small}; + } + font-weight: ${({ theme: { font } }) => font.weight.medium}; +`; + +const MobileFooter = styled.div` + width: 100%; + display: flex; + ${applyMediaQuery('desktop')} { + display: none; } + justify-content: center; `; -export { StyledRoot, Text }; +export { + StyledRoot, + DesktopHeader, + LogoutButton, + MobileHeader, + BackButton, + UserWrapper, + UserTextWrapper, + UserIcon, + NameText, + EmailText, + MobileFooter, +}; diff --git a/src/pages/Save/index.js b/src/pages/Save/index.js index 26195ca..6511d35 100644 --- a/src/pages/Save/index.js +++ b/src/pages/Save/index.js @@ -1,13 +1,86 @@ /* eslint-disable import/no-unresolved */ import React from 'react'; -import { RecSun } from 'assets'; -import { StyledRoot, Text } from './style'; +import { useNavigate } from 'react-router-dom'; +import { WhiteLeft, SaveBear, RecSun } from 'assets'; +import { HeaderIcon, PublicButton } from 'components'; +import { + StyledRoot, + HeaderIconBox, + SubText, + MainText, + BackButton, + Text, + MainBox, + DateText, + HorizonLine, + HorizonLineBottom, + DeskTopWeatherBox, + MobileWeatherBox, + ContentBox, + RecordBox, + ButtonBox, + TemBox, + Temperature, + VerticalLine, +} from './style'; function Save() { + const navigate = useNavigate(); return ( - Save - RecSunny + + + + + + 내년의 나를 위해 남기는 + 하루 날씨 기록 + + + 2022년 7월 16일 + + + + WeatherIcon + + 20 + °C + + +
+ 최고: 24° / 최저: 25° + 강수확률: 0% +
+ + SaveBear + + + WeatherIcon + + 20 + °C + + + 최고: 24° / 최저: 25° + 강수확률: 0% + + +