Merge pull request #70 from prgrms-web-devcourse-final-project/27-des…

…ign/my-and-setting-page

[Design] #20 마이페이지 디자인

src/App.tsx

@@ -48,6 +48,7 @@ const MobileWrapper = styled.div`
   background-color: ${({ theme }) => theme.colors.brand.lighten_3}; /* 배경색 (GC_4) */
   min-width: 340px;
   max-width: 430px;
+  /* width: 375px; */
   min-height: calc(var(--vh, 1vh) * 100);
   margin: auto;
   position: relative;

src/pages/MyPage/index.tsx

@@ -1,14 +1,70 @@
 import * as S from './styles'
 import { Helmet } from 'react-helmet-async'
+import { IoSettingsOutline } from 'react-icons/io5'
+import ProfileImage from 'assets/masterprofile.svg'
+import { Typo13, Typo15, Typo24 } from '~components/Typo'
+import ToggleBox from '~components/ToggleBox'
+import { useTheme } from 'styled-components'
 
 export default function MyPage() {
+  const theme = useTheme()
   return (
     <S.MyPage>
       <Helmet>
-        <title>DDang | 마이페이지</title>
+        <title>DDang | 마페</title>
         <meta name='description' content='나의 반려견 정보와 산책 기록을 관리하세요.' />
       </Helmet>
-      MyPage
+      <S.HeaderContainer>
+        마이페이지
+        <S.SettingIcon>
+          <IoSettingsOutline cursor='pointer' size={28} />
+        </S.SettingIcon>
+      </S.HeaderContainer>
+
+      <S.MainContainer>
+        <S.ProfileSection>
+          <S.ProfileArea>
+            <img src={ProfileImage} />
+          </S.ProfileArea>
+          <S.ProfileText>
+            <Typo24 weight='800'>닉네임</Typo24>
+            <Typo15 weight='400' style={{ color: theme.colors.grayscale.font_2 }}>
+              용산구 남영구 거주
+            </Typo15>
+            <S.TypoWrap>
+              <Typo13 weight='700'>남자</Typo13>
+              <Typo13 weight='700'>할아버지</Typo13>
+            </S.TypoWrap>
+          </S.ProfileText>
+        </S.ProfileSection>
+
+        <S.CountSectioin>
+          <S.CountArea>
+            <S.CountWrapperBig>23회</S.CountWrapperBig>
+            <S.CountWrapperSmall>누적 산책 횟수</S.CountWrapperSmall>
+          </S.CountArea>
+
+          <S.CountArea>
+            <S.CountWrapperBig>32km</S.CountWrapperBig>
+            <S.CountWrapperSmall>총 산책거리</S.CountWrapperSmall>
+          </S.CountArea>
+
+          <S.CountArea>
+            <S.CountWrapperBig>16회</S.CountWrapperBig>
+            <S.CountWrapperSmall>강번따 횟수</S.CountWrapperSmall>
+          </S.CountArea>
+        </S.CountSectioin>
+
+        <S.GangbunttaArea>
+          <ToggleBox type='md' setting='gangbuntta' />
+        </S.GangbunttaArea>
+
+        <S.ButtonArea>
+          <S.CustomActionButton $type='semiRoundedRect' $bgColor='font_1'>
+            로그아웃
+          </S.CustomActionButton>
+        </S.ButtonArea>
+      </S.MainContainer>
     </S.MyPage>
   )
 }

src/pages/MyPage/styles.ts

@@ -1,3 +1,131 @@
 import { styled } from 'styled-components'
+import { ActionButton } from '~components/Button/ActionButton'
 
-export const MyPage = styled.div``
+export const MyPage = styled.div`
+  width: 375px;
+  height: 698px;
+  overflow: hidden;
+  position: relative;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  /* border: 1px solid blue; */
+`
+
+export const MainContainer = styled.div`
+  display: flex;
+  padding: 0 20px;
+  height: calc(100% - 56px);
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow-y: auto;
+`
+
+export const ButtonArea = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: auto;
+  align-items: center;
+  width: 100%;
+`
+
+export const CustomActionButton = styled(ActionButton)`
+  width: 100%;
+`
+
+export const HeaderContainer = styled.div`
+  width: 100%;
+  height: 56px;
+  flex-shrink: 0;
+  /* border: 1px solid red; */
+  color: ${({ theme }) => theme.colors.grayscale.font_1};
+  font-size: ${({ theme }) => theme.typography._17};
+  text-align: center;
+  font-weight: 700;
+  line-height: 150%;
+  padding: 15px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  box-sizing: border-box;
+`
+
+export const SettingIcon = styled.div`
+  position: absolute;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  top: 50%;
+  transform: translateY(-50%);
+`
+
+export const ProfileSection = styled.div`
+  width: 100%;
+  height: 285px;
+  flex-shrink: 0;
+  background-color: white;
+  border-radius: 16px;
+  box-sizing: border-box;
+  padding: 0 20px;
+`
+//프로필정보
+export const ProfileArea = styled.div`
+  width: 140px;
+  height: 140px;
+  flex-shrink: 0;
+  margin: 24px auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+export const ProfileText = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(-10px);
+  gap: 3.5px;
+`
+
+export const TypoWrap = styled.div`
+  display: flex;
+  gap: 10px;
+`
+//횟수 정보
+export const CountArea = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+  width: 100px;
+  height: 72px;
+  flex-shrink: 0;
+  /* border: 1px solid red; */
+`
+export const CountSectioin = styled(ProfileSection)`
+  width: 100%;
+  height: 96px;
+  flex-shrink: 0;
+  margin-top: 12px;
+  display: flex;
+  padding: 12px 16px;
+`
+
+export const CountWrapperBig = styled.div`
+  font-size: ${({ theme }) => theme.typography._20};
+  font-weight: 800;
+  color: ${({ theme }) => theme.colors.grayscale.font_1};
+  padding-top: 8px;
+`
+
+export const CountWrapperSmall = styled.div`
+  font-size: ${({ theme }) => theme.typography._13};
+  color: ${({ theme }) => theme.colors.grayscale.font_1};
+  font-weight: 500;
+`
+export const GangbunttaArea = styled.div`
+  padding-top: 12px;
+  width: 100%;
+`