mypage Menu

src/components/Mypage/MypageMenu.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import Text from '../common/Text';
+import styled from 'styled-components';
+import { theme } from '../../styles/theme';
+
+const MypageMenu = () => {
+  return (
+    <MypageWrapper>
+      <TextWrapper>
+        <Text font={'body2'} color={theme.colors.black}>
+          레드 커넥트와 연동하기
+        </Text>
+      </TextWrapper>
+      <TextWrapper>
+        {' '}
+        <Text font={'body2'} color={theme.colors.black}>
+          회원 정보 수정
+        </Text>
+      </TextWrapper>
+      <TextWrapper>
+        {' '}
+        <Text font={'body2'} color={theme.colors.black}>
+          공지사항
+        </Text>
+      </TextWrapper>
+      <TextWrapper>
+        {' '}
+        <Text font={'body2'} color={theme.colors.black}>
+          고객센터
+        </Text>
+      </TextWrapper>
+    </MypageWrapper>
+  );
+};
+
+const MypageWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  justify-content: space-between;
+  margin-top: 2.4rem;
+
+  width: 33.5rem;
+  height: 13.6rem;
+`;
+
+const TextWrapper = styled.div``;
+
+export default MypageMenu;

src/pages/Mypage.tsx

@@ -1,16 +1,28 @@
+import Line from '../components/common/Line';
+import MypageFeature from '../components/Mypage/MypageFeature';
 import MypageHeader from '../components/Mypage/MypageHeader';
+import MypageMenu from '../components/Mypage/MypageMenu';
 import styled from 'styled-components';
 
 const Mypage = () => {
   return (
     <MypageWrapper>
       <MypageHeader></MypageHeader>
+      <MypageFeature></MypageFeature>
+      <LineWrapper></LineWrapper>
+      <Line></Line>
+      <MypageMenu></MypageMenu>
     </MypageWrapper>
   );
 };
 
 const MypageWrapper = styled.div`
   display: flex;
   flex-direction: column;
+  align-items: center;
+`;
+
+const LineWrapper = styled.div`
+  margin-top: 6.4rem;
 `;
 export default Mypage;