diff --git a/public/images/developing.svg b/public/images/developing.svg
new file mode 100644
index 0000000..91951ee
--- /dev/null
+++ b/public/images/developing.svg
@@ -0,0 +1,14 @@
+
diff --git a/src/components/MyPage/Main.tsx b/src/components/MyPage/Main.tsx
index 17e1919..259e2a0 100644
--- a/src/components/MyPage/Main.tsx
+++ b/src/components/MyPage/Main.tsx
@@ -1,6 +1,7 @@
import styled from "@emotion/styled";
import { Grid, GridItem } from "@chakra-ui/react";
import { StageSelection } from "./StageSelection";
+import { UnderSection } from "./UnderSection";
export const Main = () => (
@@ -16,7 +17,7 @@ export const Main = () => (
- 아랫 부분
+
diff --git a/src/components/MyPage/MypageSection.tsx b/src/components/MyPage/MypageSection.tsx
new file mode 100644
index 0000000..d2903cc
--- /dev/null
+++ b/src/components/MyPage/MypageSection.tsx
@@ -0,0 +1,54 @@
+import styled from "@emotion/styled";
+import { Img, Box, Text } from "@chakra-ui/react";
+
+const MypageSection = () => {
+ return (
+
+
+ 
+ Mypage
+
+
+ 내정보 수정 >
+ 닉네임 변경, 멤버십 변경 등 계정 관련 기능들이 있어요 😎
+
+
+ );
+};
+
+const SectionWrapper = styled(Box)`
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+`;
+
+const Header = styled(Box)`
+ display: flex;
+ align-items: center;
+ gap: 10px;
+`;
+
+const Title = styled(Text)`
+ font-size: 40px;
+ font-weight: bold;
+`;
+
+const ContentBox = styled(Box)`
+ background-color: #e0f7fa;
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+`;
+
+const ContentTitle = styled(Text)`
+ font-size: 24px;
+ font-weight: bold;
+ margin-bottom: 10px;
+`;
+
+const ContentText = styled(Text)`
+ font-size: 16px;
+`;
+
+export default MypageSection;
diff --git a/src/components/MyPage/ReviewSection.tsx b/src/components/MyPage/ReviewSection.tsx
new file mode 100644
index 0000000..3112367
--- /dev/null
+++ b/src/components/MyPage/ReviewSection.tsx
@@ -0,0 +1,58 @@
+import styled from "@emotion/styled";
+import { Img, Box, Text } from "@chakra-ui/react";
+
+const ReviewSection = () => {
+ return (
+
+
+
+ Review
+
+
+ 복습하러 가기 >
+ 틀린 문제들과 이전에 풀었던 문제들을 복습해 볼 수 있어요 🔥
+
+
+ );
+};
+
+const SectionWrapper = styled(Box)`
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+`;
+
+const Header = styled(Box)`
+ display: flex;
+ align-items: center;
+ gap: 10px;
+`;
+
+const SpeechBubble = styled.img`
+ height: 20px;
+`;
+
+const Title = styled(Text)`
+ font-size: 40px;
+ font-weight: bold;
+`;
+
+const ContentBox = styled(Box)`
+ background-color: #e0f7fa;
+ padding: 20px;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+`;
+
+const ContentTitle = styled(Text)`
+ font-size: 24px;
+ font-weight: bold;
+ margin-bottom: 10px;
+`;
+
+const ContentText = styled(Text)`
+ font-size: 16px;
+`;
+
+export default ReviewSection;
diff --git a/src/components/MyPage/StageSelection.tsx b/src/components/MyPage/StageSelection.tsx
index 094e955..6dffbce 100644
--- a/src/components/MyPage/StageSelection.tsx
+++ b/src/components/MyPage/StageSelection.tsx
@@ -1,5 +1,5 @@
import styled from "@emotion/styled";
-import { Box, Text, Flex, Grid, GridItem } from "@chakra-ui/react";
+import { Text, Flex, Grid, GridItem } from "@chakra-ui/react";
import { useNavigate } from "react-router-dom";
const stages = Array.from({ length: 16 }, (_, i) => i + 1);
@@ -43,8 +43,8 @@ const LogoWrapper = styled.div`
`;
const Header = styled(Flex)`
- margin-top: 20px;x
- align-items: baseline;
+ margin-top: 20px;
+ align-items: flex-end; /* 아랫 라인 일치 */
margin-bottom: 20px;
`;
@@ -52,18 +52,21 @@ const StageTitle = styled(Text)`
font-size: 40px;
font-weight: bold;
color: #000;
+ line-height: 1; /* 추가된 스타일 */
`;
const Subtitle = styled(Text)`
- font-size: 20px;
+ font-size: 24px;
color: #c927f6;
margin-left: 10px;
+ line-height: 1.2; /* 추가된 스타일 */
`;
const CardContainer = styled(Grid)`
background-color: #fff;
padding: 20px;
border-radius: 10px;
+ border: 1px solid #a2e1db;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
grid-template-columns: repeat(8, 1fr);
gap: 20px;
@@ -72,7 +75,6 @@ const CardContainer = styled(Grid)`
const StageCard = styled(GridItem)`
background: linear-gradient(180deg, #55cbcd 0%, #a2e1db 100%);
border-radius: 10px;
- border: 1px solid #a2e1db;
display: flex;
align-items: center;
justify-content: center;
diff --git a/src/components/MyPage/UnderSection.tsx b/src/components/MyPage/UnderSection.tsx
new file mode 100644
index 0000000..aaa4a02
--- /dev/null
+++ b/src/components/MyPage/UnderSection.tsx
@@ -0,0 +1,60 @@
+import styled from "@emotion/styled";
+import { Box, Flex } from "@chakra-ui/react";
+import ReviewSection from "./ReviewSection";
+import MypageSection from "./MypageSection";
+
+export const UnderSection = () => {
+ return (
+
+
+
+
+
+
+
+ 광고 배너
+
+
+
+ );
+};
+
+const Wrapper = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+`;
+
+const LogoWrapper = styled.div`
+ width: 100%;
+ max-width: 1200px;
+ text-align: center;
+`;
+
+const LeftSection = styled(Box)`
+ flex: 2;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+`;
+
+const RightSection = styled(Box)`
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+`;
+
+const AdBanner = styled(Box)`
+ width: 80%;
+ height: 80%;
+ background-color: #f5f5f5;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 24px;
+ border-radius: 10px;
+ border: 1px solid #e0e0e0;
+`;
+
+export default UnderSection;