feat: Mypage 상단바 구현

Beside-Potenday · Aug 8, 2024 · 4ee6929 · 4ee6929
1 parent a36d85a
commit 4ee6929
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 13 deletions.
diff --git 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
@@ -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;
+  }
+`;