From 45a2f3848fdd5a2cab092355aa4beb9b25c237b8 Mon Sep 17 00:00:00 2001 From: zhtmahthgus Date: Sat, 16 Jul 2022 15:05:44 +0900 Subject: [PATCH 1/3] #4 [Feat] Calendar & MyPage design --- package-lock.json | 39 ++++++++ package.json | 2 + src/AppRouter.js | 3 +- src/assets/Arrow/WhiteLeft.svg | 3 + src/assets/index.js | 119 +++++++++++++------------ src/components/CustomCalendar/index.js | 60 +++++++++++++ src/components/CustomCalendar/style.js | 86 ++++++++++++++++++ src/components/index.js | 1 + src/pages/MyPage/index.js | 47 ++++++++-- src/pages/MyPage/style.js | 113 +++++++++++++++++++++-- src/pages/SaveRecord/index.js | 18 ++++ src/pages/SaveRecord/style.js | 19 ++++ src/pages/index.js | 11 +-- 13 files changed, 443 insertions(+), 78 deletions(-) create mode 100644 src/assets/Arrow/WhiteLeft.svg create mode 100644 src/components/CustomCalendar/index.js create mode 100644 src/components/CustomCalendar/style.js create mode 100644 src/pages/SaveRecord/index.js create mode 100644 src/pages/SaveRecord/style.js diff --git a/package-lock.json b/package-lock.json index 1885246..2df46f3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3078,6 +3078,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", @@ -5992,6 +5997,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", @@ -8338,6 +8351,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", @@ -8433,6 +8451,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", @@ -8561,6 +8584,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", @@ -9913,6 +9941,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 4118414..1439fb3 100644 --- a/package.json +++ b/package.json @@ -8,8 +8,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/index.js b/src/assets/index.js index e71d36f..531c4f5 100644 --- a/src/assets/index.js +++ b/src/assets/index.js @@ -1,70 +1,71 @@ /* User */ -export { default as User } from "./User/User.svg"; +export { default as User } from './User/User.svg'; /* Trash */ -export { default as NormalTrash } from "./Trash/NormalTrash.svg"; -export { default as OutlineTrash } from "./Trash/OutlineTrash.svg"; +export { default as NormalTrash } from './Trash/NormalTrash.svg'; +export { default as OutlineTrash } from './Trash/OutlineTrash.svg'; /* Share */ -export { default as Kakao } from "./Share/Kakao.svg"; -export { default as Insta } from "./Share/Insta.svg"; -export { default as Local } from "./Share/Local.svg"; -export { default as Twitter } from "./Share/Twitter.svg"; +export { default as Kakao } from './Share/Kakao.svg'; +export { default as Insta } from './Share/Insta.svg'; +export { default as Local } from './Share/Local.svg'; +export { default as Twitter } from './Share/Twitter.svg'; /* Prefer */ -export { default as DownGreen } from "./Prefer/DownGreen.svg"; -export { default as UpGreen } from "./Prefer/UpGreen.svg"; -export { default as DownWhite } from "./Prefer/DownWhite.svg"; -export { default as UpWhite } from "./Prefer/UpWhite.svg"; +export { default as DownGreen } from './Prefer/DownGreen.svg'; +export { default as UpGreen } from './Prefer/UpGreen.svg'; +export { default as DownWhite } from './Prefer/DownWhite.svg'; +export { default as UpWhite } from './Prefer/UpWhite.svg'; /* Pencil */ -export { default as NormalPencil } from "./Pencil/NormalPencil.svg"; -export { default as OutlinePencil } from "./Pencil/OutlinePencil.svg"; +export { default as NormalPencil } from './Pencil/NormalPencil.svg'; +export { default as OutlinePencil } from './Pencil/OutlinePencil.svg'; /* Close */ -export { default as BlackClose } from "./Close/BlackClose.svg"; -export { default as WhiteClose } from "./Close/WhiteClose.svg"; +export { default as BlackClose } from './Close/BlackClose.svg'; +export { default as WhiteClose } from './Close/WhiteClose.svg'; /* Arrow */ -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 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"; -export { default as CalDoubleRain } from "./Weather/Calender/DoubleRain.svg"; -export { default as CalMoon } from "./Weather/Calender/Moon.svg"; -export { default as CalMoonCloud } from "./Weather/Calender/MoonCloud.svg"; -export { default as CalRain } from "./Weather/Calender/Rain.svg"; -export { default as CalSnow } from "./Weather/Calender/Snow.svg"; -export { default as CalSnowRain } from "./Weather/Calender/SnowRain.svg"; -export { default as CalSun } from "./Weather/Calender/Sun.svg"; -export { default as CalSunCloud } from "./Weather/Calender/SunCloud.svg"; +export { default as CalCloud } from './Weather/Calender/Cloud.svg'; +export { default as CalDoubleCloud } from './Weather/Calender/DoubleCloud.svg'; +export { default as CalDoubleRain } from './Weather/Calender/DoubleRain.svg'; +export { default as CalMoon } from './Weather/Calender/Moon.svg'; +export { default as CalMoonCloud } from './Weather/Calender/MoonCloud.svg'; +export { default as CalRain } from './Weather/Calender/Rain.svg'; +export { default as CalSnow } from './Weather/Calender/Snow.svg'; +export { default as CalSnowRain } from './Weather/Calender/SnowRain.svg'; +export { default as CalSun } from './Weather/Calender/Sun.svg'; +export { default as CalSunCloud } from './Weather/Calender/SunCloud.svg'; /* Weather / Current */ -export { default as CurCloud } from "./Weather/Current/Cloud.svg"; -export { default as CurDoubleCloud } from "./Weather/Current/DoubleCloud.svg"; -export { default as CurDoubleRain } from "./Weather/Current/DoubleRain.svg"; -export { default as CurMoon } from "./Weather/Current/Moon.svg"; -export { default as CurMoonCloud } from "./Weather/Current/MoonCloud.svg"; -export { default as CurRain } from "./Weather/Current/Rain.svg"; -export { default as CurSnow } from "./Weather/Current/Snow.svg"; -export { default as CurSnowRain } from "./Weather/Current/SnowRain.svg"; -export { default as CurSun } from "./Weather/Current/Sun.svg"; -export { default as CurSunCloud } from "./Weather/Current/SunCloud.svg"; +export { default as CurCloud } from './Weather/Current/Cloud.svg'; +export { default as CurDoubleCloud } from './Weather/Current/DoubleCloud.svg'; +export { default as CurDoubleRain } from './Weather/Current/DoubleRain.svg'; +export { default as CurMoon } from './Weather/Current/Moon.svg'; +export { default as CurMoonCloud } from './Weather/Current/MoonCloud.svg'; +export { default as CurRain } from './Weather/Current/Rain.svg'; +export { default as CurSnow } from './Weather/Current/Snow.svg'; +export { default as CurSnowRain } from './Weather/Current/SnowRain.svg'; +export { default as CurSun } from './Weather/Current/Sun.svg'; +export { default as CurSunCloud } from './Weather/Current/SunCloud.svg'; /* Weather / Record */ -export { default as RecCloud } from "./Weather/Record/Cloud.svg"; -export { default as RecDoubleCloud } from "./Weather/Record/DoubleCloud.svg"; -export { default as RecDoubleRain } from "./Weather/Record/DoubleRain.svg"; -export { default as RecMoon } from "./Weather/Record/Moon.svg"; -export { default as RecMoonCloud } from "./Weather/Record/MoonCloud.svg"; -export { default as RecRain } from "./Weather/Record/Rain.svg"; -export { default as RecSnow } from "./Weather/Record/Snow.svg"; -export { default as RecSnowRain } from "./Weather/Record/SnowRain.svg"; -export { default as RecSun } from "./Weather/Record/Sun.svg"; -export { default as RecSunCloud } from "./Weather/Record/SunCloud.svg"; +export { default as RecCloud } from './Weather/Record/Cloud.svg'; +export { default as RecDoubleCloud } from './Weather/Record/DoubleCloud.svg'; +export { default as RecDoubleRain } from './Weather/Record/DoubleRain.svg'; +export { default as RecMoon } from './Weather/Record/Moon.svg'; +export { default as RecMoonCloud } from './Weather/Record/MoonCloud.svg'; +export { default as RecRain } from './Weather/Record/Rain.svg'; +export { default as RecSnow } from './Weather/Record/Snow.svg'; +export { default as RecSnowRain } from './Weather/Record/SnowRain.svg'; +export { default as RecSun } from './Weather/Record/Sun.svg'; +export { default as RecSunCloud } from './Weather/Record/SunCloud.svg'; /* Weather / Time */ -export { default as TCloud } from "./Weather/Time/Cloud.svg"; -export { default as TDoubleCloud } from "./Weather/Time/DoubleCloud.svg"; -export { default as TDoubleRain } from "./Weather/Time/DoubleRain.svg"; -export { default as TMoon } from "./Weather/Time/Moon.svg"; -export { default as TMoonCloud } from "./Weather/Time/MoonCloud.svg"; -export { default as TRain } from "./Weather/Time/Rain.svg"; -export { default as TSnow } from "./Weather/Time/Snow.svg"; -export { default as TSnowRain } from "./Weather/Time/SnowRain.svg"; -export { default as TSun } from "./Weather/Time/Sun.svg"; -export { default as TSunCloud } from "./Weather/Time/SunCloud.svg"; +export { default as TCloud } from './Weather/Time/Cloud.svg'; +export { default as TDoubleCloud } from './Weather/Time/DoubleCloud.svg'; +export { default as TDoubleRain } from './Weather/Time/DoubleRain.svg'; +export { default as TMoon } from './Weather/Time/Moon.svg'; +export { default as TMoonCloud } from './Weather/Time/MoonCloud.svg'; +export { default as TRain } from './Weather/Time/Rain.svg'; +export { default as TSnow } from './Weather/Time/Snow.svg'; +export { default as TSnowRain } from './Weather/Time/SnowRain.svg'; +export { default as TSun } from './Weather/Time/Sun.svg'; +export { default as TSunCloud } from './Weather/Time/SunCloud.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 f65d079..bbaf985 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,3 +1,4 @@ /* 컴포넌트 export 파일 */ export { default as HeaderIcon } from './Common/HeaderIcon'; export { default as PublicButton } from './Common/PublicButton'; +export { default as CustomCalendar } from './CustomCalendar'; diff --git a/src/pages/MyPage/index.js b/src/pages/MyPage/index.js index d72735c..b52b1f9 100644 --- a/src/pages/MyPage/index.js +++ b/src/pages/MyPage/index.js @@ -1,15 +1,50 @@ /* eslint-disable import/no-unresolved */ import React from 'react'; -import { RecSun } from 'assets'; -import { 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 ( - {}} isDisabled={0} /> - MyPage - RecSunny + + 로그아웃 + + + + + + + + 이름 + 이메일 + + + + + 로그아웃 + ); } 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/SaveRecord/index.js b/src/pages/SaveRecord/index.js new file mode 100644 index 0000000..dfc6b45 --- /dev/null +++ b/src/pages/SaveRecord/index.js @@ -0,0 +1,18 @@ +/* eslint-disable import/no-unresolved */ +import React from 'react'; +import { RecSun } from 'assets'; +import { useParams } from 'react-router-dom'; +import { StyledRoot, Text } from './style'; + +function SaveRecord() { + const params = useParams(); + return ( + + SaveRecord + {params.date} + RecSunny + + ); +} + +export default SaveRecord; diff --git a/src/pages/SaveRecord/style.js b/src/pages/SaveRecord/style.js new file mode 100644 index 0000000..8707014 --- /dev/null +++ b/src/pages/SaveRecord/style.js @@ -0,0 +1,19 @@ +/* eslint-disable import/no-unresolved */ +import styled from 'styled-components'; +import { applyMediaQuery } from 'styles/mediaQuery'; + +const StyledRoot = styled.div` + padding: 5rem; +`; + +const Text = styled.p` + color: ${({ theme: { color } }) => color.red}; + font-family: 'Noto Sans'; + font-size: ${({ theme: { font } }) => font.size.large}; + font-weight: ${({ theme: { font } }) => font.weight.light}; + ${applyMediaQuery('mobile')} { + color: ${({ theme: { color } }) => color.greenDarkest}; + } +`; + +export { StyledRoot, Text }; diff --git a/src/pages/index.js b/src/pages/index.js index 77a6cd3..c550721 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,5 +1,6 @@ -export { default as Login } from "./Login"; -export { default as Main } from "./Main"; -export { default as MyPage } from "./MyPage"; -export { default as Save } from "./Save"; -export { default as Vote } from "./Vote"; +export { default as Login } from './Login'; +export { default as Main } from './Main'; +export { default as MyPage } from './MyPage'; +export { default as Save } from './Save'; +export { default as Vote } from './Vote'; +export { default as SaveRecord } from './SaveRecord'; From 45fded982344f79663034fad81768f31fb41ffd8 Mon Sep 17 00:00:00 2001 From: Eunbi Choi Date: Sun, 17 Jul 2022 14:17:22 +0900 Subject: [PATCH 2/3] #5 [Style] Save page PC UI --- src/assets/Tmp/SaveBear.svg | 9 +++ src/assets/Tmp/WeatherInfo.svg | 17 +++++ src/assets/index.js | 3 + src/pages/Login/style.js | 6 +- src/pages/Save/index.js | 36 ++++++++-- src/pages/Save/style.js | 122 +++++++++++++++++++++++++++++++-- 6 files changed, 180 insertions(+), 13 deletions(-) create mode 100644 src/assets/Tmp/SaveBear.svg create mode 100644 src/assets/Tmp/WeatherInfo.svg 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 608ce4f..8f4b28e 100644 --- a/src/assets/index.js +++ b/src/assets/index.js @@ -72,3 +72,6 @@ export { default as TSunCloud } from './Weather/Time/SunCloud.svg'; export { default as LoginBear } from './Bear/LoginBear.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/pages/Login/style.js b/src/pages/Login/style.js index da3c6ce..02fe3c6 100644 --- a/src/pages/Login/style.js +++ b/src/pages/Login/style.js @@ -61,9 +61,9 @@ const LoginBtn = styled.button` font-family: 'Noto Sans'; font-weight: ${({ theme: { font } }) => font.weight.bold}; font-size: ${({ theme: { font } }) => font.size.semiSmall}; -img { - margin-right: 0.5rem; -} + img { + margin-right: 0.5rem; + } ${applyMediaQuery('mobile')} { padding: 1.3rem 6rem; font-weight: ${({ theme: { font } }) => font.weight.semiBold}; diff --git a/src/pages/Save/index.js b/src/pages/Save/index.js index 26195ca..bee8f09 100644 --- a/src/pages/Save/index.js +++ b/src/pages/Save/index.js @@ -1,13 +1,41 @@ /* eslint-disable import/no-unresolved */ import React from 'react'; -import { RecSun } from 'assets'; -import { StyledRoot, Text } from './style'; +import { SaveBear, WeatherInfo } from 'assets'; +import { HeaderIcon } from 'components'; +import { + StyledRoot, + SubText, + MainText, + Text, + MainBox, + HorizonLine, + ContentBox, + RecordBox, +} from './style'; function Save() { return ( - Save - RecSunny + + + 내년의 나를 위해 남기는 + 하루 날씨 기록 + + +

2022년 7월 16일

+ + + + SaveBear + + WeatherInfo + +