Bridge/mypage

src/api/memberApi.js

@@ -10,8 +10,20 @@ export const onJoin = joinForm => {
   return requestForAll.post(memberApi, joinForm);
 };
 
-export const onCheckNicknameDuplication = nickname => {
-  return requestForAll.get(memberApi + '/nickname', { params: { nickname } });
+export const onCheckNicknameDuplication = async nickname => {
+  return await requestForAll.get(memberApi + '/nickname', { params: { nickname } });
+};
+
+export const onNicknameChange = updateNicknameRequest => {
+  return requestForAuth.put(memberApi + '/page/me', updateNicknameRequest);
+};
+
+export const onMyPage = async () => {
+  return await requestForAuth.get(memberApi + '/page/me');
+};
+
+export const onMembershipWithdrawal = async () => {
+  return await requestForAuth.delete(memberApi);
 };
 
 export const onChangePasswordWithVerifiedEmailByNoAuthUser = (email, password) => {

src/components/header/HamburgerSideBar.js

@@ -63,6 +63,15 @@ const HamburgerSideBar = ({ onCancle, onLogout, visible }) => {
                 </>
               ) : (
                 <>
+                  <Buttons
+                    onClick={() => {
+                      handlePageButtonClick('/mypage');
+                      onCancle();
+                    }}
+                  >
+                    마이페이지
+                  </Buttons>
+                  <DevideLine space="micro" color="none" />
                   <Buttons
                     colortype={'sub'}
                     onClick={() => {

src/components/header/HeaderBar.js

@@ -97,6 +97,13 @@ const HeaderBar = () => {
             </Navbar.Container>
           ) : (
             <Navbar.Container align="right">
+              <StyledLink
+                className="is-hidden-tablet-only is-hidden-mobile navbar-item"
+                to={'/mypage'}
+                onClick={handleLinkClick}
+              >
+                마이페이지
+              </StyledLink>
               <StyledA
                 className="is-hidden-tablet-only is-hidden-mobile navbar-item"
                 onClick={handleLogoutClick}

src/components/icons/AnimatedIcon.js

@@ -1,5 +1,6 @@
 import ArrowDown from './animated/ArrowDown';
 import Bookmark from './animated/Bookmark';
+import Calendar from './animated/Calendar';
 import CheckMark from './animated/CheckMark';
 import CommonInput from './animated/CommonInput';
 import Email from './animated/Email';
@@ -29,6 +30,7 @@ const AnimatedIcon = {
   SkipForward,
   Bookmark,
   ThumbUp,
+  Calendar,
   Heart,
   Trash,
 };

src/components/icons/animated/Calendar.js

@@ -0,0 +1,24 @@
+import { Colors, IconSize } from '../../../styles';
+
+import UseAnimations from 'react-useanimations';
+import calendar from 'react-useanimations/lib/calendar';
+
+const Calendar = ({ lineColor, fillColor, size, ...props }) => {
+  return (
+    <UseAnimations
+      animation={calendar}
+      size={IconSize[size]}
+      strokeColor={lineColor}
+      fillColor={fillColor}
+      {...props}
+    />
+  );
+};
+
+Calendar.defaultProps = {
+  size: IconSize.normal,
+  lineColor: Colors.formIconFirst,
+  fillColor: '',
+};
+
+export default Calendar;