feat: mypage ui 생성

src/components/commons/BottomNavigation/BottomNavigation.tsx

@@ -69,7 +69,7 @@ const BottomNavigation = () => {
             </>
           )}
         </StyledNavLink>
-        <StyledNavLink to={'/profile'}>
+        <StyledNavLink to={'/mypage'}>
           {({ isActive }) => (
             <>
               <ProfileIcon

src/routes/MyPage/MyPage.styles.tsx

@@ -0,0 +1,39 @@
+import { styled } from 'styled-components';
+
+import { colors } from '@styles/theme';
+
+export const Container = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+  padding: 50px 20px 0;
+  background-color: ${(props) => props.theme.colors.navy};
+`;
+
+export const BackButton = styled.button`
+  width: 24px;
+  height: 24px;
+  padding: 3.6px 7.8px;
+`;
+
+export const MyInfoUpdateButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 3.33px 6.33px 3.33px 7px;
+`;
+
+export const Divider = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 1px;
+  background-color: rgb(255 255 255 / 10%);
+`;

src/routes/MyPage/MyPage.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { Col, Row } from '@components/commons/Flex/Flex';
+import Layout from '@components/commons/Layout/Layout';
+import ProfileImg from '@components/commons/ProfileImg/ProfileImg';
+import Text from '@components/commons/Text/Text';
+
+import { colors } from '@styles/theme';
+
+import { RightChevronIcon } from '@icons/index';
+
+import { BackButton, Container, Divider, MyInfoUpdateButton } from './MyPage.styles';
+
+const MyPage = () => {
+  const navigate = useNavigate();
+
+  return (
+    <Layout
+      hasBottomNavigation={true}
+      HeaderLeft={
+        <BackButton onClick={() => navigate(-1)}>
+          <RightChevronIcon style={{ transform: 'rotate(180deg)' }} stroke={colors.white} />
+        </BackButton>
+      }
+      HeaderCenter={
+        <Text size={20} weight={600} color={colors.white}>
+          MY
+        </Text>
+      }
+    >
+      <Container>
+        <Col gap={100} alignItems="center">
+          <Col gap={30} alignItems="center">
+            <ProfileImg url={null} size={102} rounded={true}></ProfileImg>
+            <Text size={22} weight={600} color={colors.white}>
+              사용자 이름
+            </Text>
+          </Col>
+          <Col gap={32} alignItems="flex-start">
+            <Row padding="0 7px" gap={3} alignItems="center">
+              <Text size={16} weight={400} color={colors.white}>
+                내 정보 수정
+              </Text>
+              <MyInfoUpdateButton>
+                <RightChevronIcon stroke={colors.white_40} />
+              </MyInfoUpdateButton>
+            </Row>
+            <Divider />
+            <Text style={{ padding: '0 7px' }} size={16} weight={400} color={colors.white}>
+              약관
+            </Text>
+            <Row padding="0 7px" gap={10} alignItems="center">
+              <Text size={16} weight={400} color={colors.white}>
+                버전 정보
+              </Text>
+              <Text size={15} weight={400} color={colors.purple}>
+                ver 1.1
+              </Text>
+            </Row>
+            <Divider />
+            <Text style={{ padding: '0 7px' }} size={16} weight={400} color={colors.white_40}>
+              로그아웃
+            </Text>
+          </Col>
+        </Col>
+      </Container>
+    </Layout>
+  );
+};
+
+export default MyPage;

src/routes/index.tsx

@@ -16,6 +16,7 @@ import KakaoLogin from './Auth/kakao/KakaoLogin';
 import Login from './Auth/login/Login';
 import Signup from './Auth/signup/Signup';
 import Home from './Home/Home';
+import MyPage from './MyPage/MyPage';
 import Notification from './Notification/Notification';
 import TopicCreate from './Topic/Create/TopicCreate';
 import TopicSideSelection from './Topic/TopicSideSelection';
@@ -41,6 +42,7 @@ const Router = () => {
             <Route path="create" element={<TopicSideSelection />} />
             <Route path="create/:topicSide" element={<TopicCreate />} />
           </Route>
+          <Route path="mypage" element={<MyPage />} />
           <Route path="notifications" element={<Notification />} />
         </Route>