Merge pull request #92 from Beside-Potenday/kiyeong

feat: 비행기 애니메이션 추가

src/components/HomePage/Contents.tsx

@@ -5,9 +5,9 @@ import { TestersBox } from './TestersBox';
 export const Contents = () => {
   return (
     <Grid
-      h={{ base: '1500px', md: '1700px' }}
+      h={{ base: '1500px', md: '1750px' }}
       w="100%"
-      templateRows={{ base: 'auto auto', md: ' 1fr 500px' }} // 'md' 이상일 때 '1fr 1fr 600px', 작을 때 'repeat(3, 1fr)'
+      templateRows={{ base: 'auto auto', md: ' 1fr 600px' }} // 'md' 이상일 때 '1fr 1fr 600px', 작을 때 'repeat(3, 1fr)'
       templateColumns={{ base: 'auto', md: 'repeat(1, 1fr)' }} // 'md' 이상일 때 'repeat(1, 1fr)', 작을 때 '1fr'
       gap={{ base: 50, md: 0 }} // 'md' 이상일 때 100, 작을 때 50
     >

src/components/Layout/UpperImage.tsx

@@ -1,6 +1,13 @@
+import { useState, useEffect } from 'react';
 import { Image, Box, Text, VStack, keyframes, chakra } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
+interface AirplaneType {
+  size: number;
+  left: number;
+  bottom: number;
+}
+
 export const UpperImage = () => {
   const scrollDown = () => {
     const scrollAmount = window.innerHeight - window.scrollY;
@@ -10,6 +17,37 @@ export const UpperImage = () => {
     });
   };
 
+  const [airplanes, setAirplanes] = useState<(AirplaneType & { id: number })[]>([]);
+
+  useEffect(() => {
+    const createAirplane = () => {
+      const size = Math.random() * 150 + 100; // 비행기 크기 (100px ~ 300px)
+      const left = Math.random() * (window.innerWidth / 2 - size); // 화면의 왼쪽 절반에서 랜덤 위치
+      const bottom = Math.random() * (window.innerHeight / 2 - size); // 화면의 아래쪽 절반에서 랜덤 위치
+
+      const airplane = {
+        id: Date.now(),
+        size,
+        left,
+        bottom,
+      };
+
+      setAirplanes((prev) => [...prev, airplane]);
+
+      setTimeout(() => {
+        setAirplanes((prev) => prev.filter((ap) => ap.id !== airplane.id));
+      }, 10000); // 비행기 애니메이션 시간이 지나면 제거
+    };
+
+    const interval = setInterval(createAirplane, Math.random() * 5000 + 5000); // 5초에서 10초 사이의 랜덤 시간
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const handleAnimationEnd = (id: number) => {
+    setAirplanes((prev) => prev.filter((ap) => ap.id !== id));
+  };
+
   return (
     <StyledWrapper>
       <TransparentOverlay />
@@ -36,14 +74,53 @@ export const UpperImage = () => {
           </RightBubble>
         </VStack>
       </ImageContainer>
+      {airplanes.map((airplane) => (
+        <Airplane
+          key={airplane.id}
+          size={airplane.size}
+          left={airplane.left}
+          bottom={airplane.bottom}
+          src="/images/airplane.svg"
+          alt="비행기"
+          onAnimationEnd={() => handleAnimationEnd(airplane.id)}
+        />
+      ))}
       <ArrowContainer onClick={scrollDown}>
         <ArrowIcon src="/images/downArrow.svg" alt="아래로 이동" />
       </ArrowContainer>
     </StyledWrapper>
   );
 };
 
-// 스타일 정의 부분
+// 비행기 애니메이션 키프레임
+const fly = keyframes`
+  0% {
+    transform: translateY(0) translateX(0) rotate(0deg);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-100vh) translateX(calc(100vw - 100%)) rotate(15deg);
+    opacity: 0;
+  }
+`;
+
+interface AirplaneProps extends AirplaneType {
+  onAnimationEnd: () => void;
+}
+
+// 비행기 컴포넌트 스타일링
+const Airplane = styled(Image)<AirplaneProps>`
+  position: absolute;
+  width: ${({ size }) => `${size}px`};
+  height: auto;
+  left: ${({ left }) => `${left}px`};
+  bottom: ${({ bottom }) => `${bottom}px`};
+  animation: ${fly} 10s linear;
+`;
+
 const StyledWrapper = styled(Box)`
   width: 100%;
   height: 100%;
@@ -57,6 +134,7 @@ const StyledWrapper = styled(Box)`
   align-items: center;
   justify-content: center;
   position: relative;
+  overflow: hidden; /* 수평 스크롤을 방지 */
 `;
 
 const TransparentOverlay = styled(Box)`

src/components/Layout/index.tsx

@@ -3,13 +3,10 @@ import { Outlet } from 'react-router-dom';
 import { Footer } from './Footer';
 import { HEADER_HEIGHT, MainHeader } from './Header/MainHeader';
 import { UpperImage } from './UpperImage';
-import { Box } from '@chakra-ui/react';
 
 export const Layout = () => {
   return (
     <Wrapper>
-      <TransparentOverlay />
-      <HeaderPadding />
       <UpperImageWrapper>
         <UpperImage />
       </UpperImageWrapper>
@@ -29,25 +26,10 @@ const Wrapper = styled.div`
   position: relative;
 `;
 
-const TransparentOverlay = styled(Box)`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: ${HEADER_HEIGHT};
-  background: rgba(255, 255, 255, 0.3);
-  z-index: 1;
-`;
-
-const HeaderPadding = styled.div`
-  width: 100%;
-  height: ${HEADER_HEIGHT};
-  background-color: #e5efff;
-`;
 
 const UpperImageWrapper = styled.div`
   width: 100%;
-  height: calc(100vh - ${HEADER_HEIGHT});
+  height: calc(100vh + ${HEADER_HEIGHT} - 80px);
 `;
 
 const HeaderWrapper = styled.div`