[Fix]LikeLion-at-DGU#27 - 충돌 수정

src/boothdata/Boothdata.js

@@ -1,4 +1,3 @@
-// 데이터 잘 들어가는지 더미데이터 만든것 추후 삭제 !
 import IMAGE1 from "../../src/assets/img/park1.png";
 import IMAGE2 from "../../src/assets/img/park2.jpeg";
 import IMAGE3 from "../../src/assets/img/park3.jpeg";
@@ -16,9 +15,11 @@ const BoothData = [
     menu: "핫도그, 버거",
     image: IMAGE1,
     instagram: "https://instagram.com/booth_a",
+    latitude: 37.5585, // 동국대학교 만해광장
+    longitude: 127.0027,
     filters: {
       time: "낮",
-      type: "푸드트럭",
+      type: "주점",
       location: "팔정도"
     }
   },
@@ -33,6 +34,8 @@ const BoothData = [
     menu: "칵테일, 맥주",
     image: IMAGE2,
     instagram: "https://instagram.com/booth_b",
+    latitude: 37.5591, // 동국대학교 팔정도
+    longitude: 127.0016,
     filters: {
       time: "밤",
       type: "주점",
@@ -50,6 +53,8 @@ const BoothData = [
     menu: "스낵, 음료",
     image: IMAGE3,
     instagram: "https://instagram.com/booth_c",
+    latitude: 37.5581, // 동국대학교 명진관
+    longitude: 127.0021,
     filters: {
       time: "낮",
       type: "기타",
@@ -67,6 +72,8 @@ const BoothData = [
     menu: "피자, 음료",
     image: IMAGE4,
     instagram: "https://instagram.com/booth_d",
+    latitude: 37.5589, // 동국대학교 혜화관
+    longitude: 127.0005,
     filters: {
       time: "밤",
       type: "기타",

src/components/bottomNavBar/BottomNavBar.jsx

@@ -0,0 +1,3 @@
+import * as S from "./BottomNavBar.styled";
+
+export const BottomNavBar = () => {};

src/components/bottomNavBar/BottomNavBar.styled.js

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const BottomNavBarWrapper = styled.section`
+  display: flex;
+  align-items: center;
+  width: 100%;
+`;

src/components/topBar/TopBar.jsx

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from "react";
+import * as S from "./styled";
+import Mainicon from "../../assets/images/Mainicon.png";
+import Leaf1 from "../../assets/images/leaf/leaf1.png";
+import Leaf2 from "../../assets/images/leaf/leaf2.png";
+import Leaf3 from "../../assets/images/leaf/leaf3.png";
+
+export const TopBar = () => {
+  const [leaves, setLeaves] = useState([]);
+
+  // 랜덤한 Leaf 이미지를 생성하는 함수
+  const generateRandomLeaves = () => {
+    const leafTypes = [Leaf1, Leaf2, Leaf3];
+    const randomLeaves = [];
+
+    leafTypes.forEach((leaf, index) => {
+      const leafCount = Math.floor(Math.random() * 5) + 1;
+      for (let i = 0; i < leafCount; i++) {
+        const size = Math.floor(Math.random() * 11) + 15;
+        const left = Math.floor(Math.random() * 100);
+        const duration = Math.random() * 3 + 5;
+        const delay = Math.random() * 2;
+
+        randomLeaves.push({
+          src: leaf,
+          size: size,
+          left: `${left}%`,
+          duration: `${duration}s`,
+          delay: `${delay}s`,
+          key: `${index}-${i}`,
+        });
+      }
+    });
+
+    return randomLeaves;
+  };
+
+  useEffect(() => {
+    setLeaves(generateRandomLeaves());
+  }, []);
+
+  return (
+    <S.Background>
+      <S.MainText>동국대학교 가을축제 부스사이트</S.MainText>
+      <S.MainLogo src={Mainicon} />
+
+      {/* 랜덤으로 생성된 Leaves 출력 */}
+      {leaves.map((leaf) => (
+        <S.Leaves
+          key={leaf.key}
+          src={leaf.src}
+          size={leaf.size}
+          left={leaf.left}
+          duration={leaf.duration}
+          delay={leaf.delay}
+        />
+      ))}
+    </S.Background>
+  );
+};

src/components/topBar/styled.js

@@ -0,0 +1,77 @@
+import styled, { keyframes } from "styled-components";
+
+// 낙엽이 좌우로 크게 흔들리며 자연스럽게 아래로 떨어지는 애니메이션 정의
+const fallAnimation = keyframes`
+  0% {
+    transform: translateX(0px) translateY(0px) rotate(0deg);
+  }
+  10% {
+    transform: translateX(5px) translateY(20px) rotate(10deg);
+  }
+  20% {
+    transform: translateX(-10px) translateY(50px) rotate(-20deg);
+  }
+  30% {
+    transform: translateX(7px) translateY(80px) rotate(30deg);
+  }
+  40% {
+    transform: translateX(-5px) translateY(110px) rotate(-40deg);
+  }
+  50% {
+    transform: translateX(10px) translateY(130px) rotate(50deg);
+  }
+  60% {
+    transform: translateX(-7px) translateY(150px) rotate(-60deg);
+  }
+  70% {
+    transform: translateX(5px) translateY(170px) rotate(40deg);
+  }
+  80% {
+    transform: translateX(-3px) translateY(185px) rotate(-20deg);
+  }
+  90% {
+    transform: translateX(2px) translateY(195px) rotate(10deg);
+  }
+  100% {
+    transform: translateX(0px) translateY(200px) rotate(0deg);
+    opacity: 0;
+  }
+`;
+
+export const MainLogo = styled.img`
+  width: 75px;
+  cursor: pointer;
+`;
+
+export const Background = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 120px;
+  height: 100%;
+  gap: 10px;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(180deg, #FFEFE3 0%, #FFF 100%);
+`;
+
+export const MainText = styled.div`
+  color: #FFBA85;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+`;
+
+export const Leaves = styled.img`
+  position: absolute;
+  top: -50px;
+  left: ${(props) => props.left};
+  width: ${(props) => props.size}px;
+  height: auto;
+  opacity: 1;
+
+  animation: ${fallAnimation} ${(props) => props.duration} ease-in-out ${(props) => props.delay} infinite;
+`;