Merge pull request #11 from EFUB-TEAM4/issue-5

#5 : [Save] PC, Mobile UI

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",

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() {
         <Route path="/save" element={<Save />} />
         <Route path="/vote" element={<Vote />} />
         <Route path="/mypage" element={<MyPage />} />
+        <Route path="/mypage/save/:date" element={<SaveRecord />} />
         <Route path="/" element={<Main />} />
       </Routes>
     </BrowserRouter>

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';
@@ -72,3 +73,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';

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 (
+    <StyledRoot>
+      <CalendarContainer>
+        <Calendar
+          onChange={onChange}
+          value={value}
+          formatDay={(
+            view, // eslint-disable-line no-unused-vars
+            date,
+          ) => 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(
+                <NavLink key={0} to={`/MyPage/save/${date}`}>
+                  <Image src={CalMoonCloud} alt="record" />
+                </NavLink>,
+              );
+            }
+            return (
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  height: '40px',
+                }}
+              >
+                {html}
+              </div>
+            );
+          }}
+        />
+      </CalendarContainer>
+    </StyledRoot>
+  );
+}
+
+export default CustomCalendar;

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 };

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';

src/pages/MyPage/index.js

@@ -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 (
     <StyledRoot>
-      <HeaderIcon />
-      <Text>MyPage</Text>
-      <PublicButton text="투표 만들기" onClick={() => {}} isDisabled={0} />
+      <DesktopHeader>
+        <LogoutButton>로그아웃</LogoutButton>
+      </DesktopHeader>
+      <MobileHeader>
+        <button
+          type="button"
+          onClick={() => {
+            navigate(-1);
+          }}
+        >
+          <BackButton src={WhiteLeft} alt="BackButton" />
+        </button>
+      </MobileHeader>
+      <UserWrapper>
+        <UserIcon src={User} alt="UserIcon" />
+        <UserTextWrapper>
+          <NameText>이름</NameText>
+          <EmailText>이메일</EmailText>
+        </UserTextWrapper>
+      </UserWrapper>
+      <CustomCalendar />
+      <MobileFooter>
+        <LogoutButton>로그아웃</LogoutButton>
+      </MobileFooter>
     </StyledRoot>
   );
 }