feat: 메인화면 하단 구현

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 = () => (
   <Wrapper>
@@ -16,7 +17,7 @@ export const Main = () => (
         <StageSelection />
       </GridItem>
       <GridItem id="section2" rowSpan={1} backgroundColor={"transparent"}>
-        <p>아랫 부분</p>
+        <UnderSection/>
       </GridItem>
     </Grid>
   </Wrapper>

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 (
+    <SectionWrapper>
+      <Header>
+        <Img src='/images/developing.svg' alt="말풍선" />
+        <Title>Mypage</Title>
+      </Header>
+      <ContentBox>
+        <ContentTitle>내정보 수정 &gt;</ContentTitle>
+        <ContentText>닉네임 변경, 멤버십 변경 등 계정 관련 기능들이 있어요 😎</ContentText>
+      </ContentBox>
+    </SectionWrapper>
+  );
+};
+
+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;

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 (
+    <SectionWrapper>
+      <Header>
+      <Img src='/images/developing.svg' alt="말풍선" />
+        <Title>Review</Title>
+      </Header>
+      <ContentBox>
+        <ContentTitle>복습하러 가기 &gt;</ContentTitle>
+        <ContentText>틀린 문제들과 이전에 풀었던 문제들을 복습해 볼 수 있어요 🔥</ContentText>
+      </ContentBox>
+    </SectionWrapper>
+  );
+};
+
+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;

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,27 +43,30 @@ 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;
 `;
 
 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;

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 (
+    <Wrapper>
+      <LogoWrapper>
+        <LeftSection>
+          <ReviewSection />
+          <MypageSection />
+        </LeftSection>
+        <RightSection>
+          <AdBanner>광고 배너</AdBanner>
+        </RightSection>
+      </LogoWrapper>
+    </Wrapper>
+  );
+};
+
+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;