From 4ee6929439256924a9e73ec179ccce06fbaa04f3 Mon Sep 17 00:00:00 2001
From: kiyeong <kjr07145@gmail.com>
Date: Thu, 8 Aug 2024 10:38:49 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Mypage=20=EC=83=81=EB=8B=A8=EB=B0=94=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Layout/UpperImage.tsx |  2 +-
 src/pages/MyPage/index.tsx           | 46 ++++++++++++++++++++--------
 2 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/components/Layout/UpperImage.tsx b/src/components/Layout/UpperImage.tsx
index 1a58aa3..8819861 100644
--- a/src/components/Layout/UpperImage.tsx
+++ b/src/components/Layout/UpperImage.tsx
@@ -39,7 +39,7 @@ export const UpperImage = () => {
       }, 10000); // 비행기 애니메이션 시간이 지나면 제거
     };
 
-    const interval = setInterval(createAirplane, Math.random() * 3000 + 7000); // 7초에서 10초 사이의 랜덤 시간
+    const interval = setInterval(createAirplane, Math.random() * 5000 + 10000); // 10초에서 15초 사이의 랜덤 시간
 
     return () => clearInterval(interval);
   }, []);
diff --git a/src/pages/MyPage/index.tsx b/src/pages/MyPage/index.tsx
index 4e20075..691e5a4 100644
--- a/src/pages/MyPage/index.tsx
+++ b/src/pages/MyPage/index.tsx
@@ -38,8 +38,9 @@ export const MyPage = () => {
   };
 
   return (
-    <StyledWrapper>
-        <Grid h="100%" templateColumns="0.5fr 1fr" gap={20} bg="gray.50" borderRadius="lg" p={10}>
+    <Wrapper>
+      <LogoWrapper>
+        <Grid h="100%" templateColumns="1fr 3fr" gap={20} bg="gray.50" borderRadius="lg" p={10}>
           <GridItem bg="white" p={6} borderRadius="md" boxShadow="md">
             <VStack align="start" spacing={4}>
               <Heading size="md">사용자 정보</Heading>
@@ -51,12 +52,14 @@ export const MyPage = () => {
           <GridItem bg="white" p={6} borderRadius="md" boxShadow="md">
             <VStack align="start" spacing={6} w="100%">
               <Heading size="md">메일 내역</Heading>
-              <Button onClick={() => setIsJob('univ')} disabled={isJob === 'univ'}>
-                대학생
-              </Button>
-              <Button onClick={() => setIsJob('business')} disabled={isJob === 'business'}>
-                직장인
-              </Button>
+              <HStack w="100%" justify="center" borderBottom="1px solid #e2e8f0">
+                <TabButton active={isJob === 'univ'} onClick={() => setIsJob('univ')}>
+                  대학생
+                </TabButton>
+                <TabButton active={isJob === 'business'} onClick={() => setIsJob('business')}>
+                  직장인
+                </TabButton>
+              </HStack>
 
               {mailLoading ? (
                 <Spinner />
@@ -91,14 +94,33 @@ export const MyPage = () => {
             </VStack>
           </GridItem>
         </Grid>
-    </StyledWrapper>
+      </LogoWrapper>
+    </Wrapper>
   );
 };
 
-const StyledWrapper = styled(Box)`
-  width: 100%;
-  background: #e5f3ff;
+const Wrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
 `;
+
+const LogoWrapper = styled.div`
+  width: 100%;
+  height: 100vh;
+  max-width: 1200px;
+  text-align: center;
+`;
+
+const TabButton = styled(Button)<{ active: boolean }>`
+  background: none;
+  border: none;
+  padding: 16px;
+  font-size: 16px;
+  font-weight: ${props => (props.active ? 'bold' : 'normal')};
+  border-bottom: 2px solid ${props => (props.active ? '#4299e1' : 'transparent')};
+  cursor: pointer;
+  &:hover {
+    border-bottom: 2px solid #4299e1;
+  }
+`;