From 8a2906be23870f08b60f01946cf4411326d56ca8 Mon Sep 17 00:00:00 2001
From: kiyeong <kjr07145@gmail.com>
Date: Fri, 15 Nov 2024 20:18:11 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4?=
 =?UTF-8?q?=EC=85=98=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                               | 20 -----------
 src/components/Bubble/Bubble.tsx          | 15 --------
 src/components/Bubble/BubbleContainer.tsx |  9 -----
 src/components/Bubble/bubbleRise.ts       | 15 --------
 src/components/Bubble/useBubbles.ts       | 43 -----------------------
 5 files changed, 102 deletions(-)
 delete mode 100644 src/components/Bubble/Bubble.tsx
 delete mode 100644 src/components/Bubble/BubbleContainer.tsx
 delete mode 100644 src/components/Bubble/bubbleRise.ts
 delete mode 100644 src/components/Bubble/useBubbles.ts

diff --git a/src/App.tsx b/src/App.tsx
index 160629f..16ff2ed 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,33 +1,13 @@
 // App.tsx
 import { ChakraProvider } from "@chakra-ui/react";
 import theme from "./styles/theme";
-import { BubbleContainer } from "./components/Bubble/BubbleContainer";
-import { Bubble } from "./components/Bubble/Bubble";
 import { Wrapper } from "./components/Wrapper";
 import { Routes } from "./routes/Routes";
-import { useBubbles } from "./components/Bubble/useBubbles";
 
 const App = () => {
-  const bubbles = useBubbles();
-
   return (
     <ChakraProvider theme={theme}>
       <PageContainer>
-        <BubbleContainer>
-          {bubbles.map((bubble) => (
-            <Bubble
-              key={bubble.id}
-              style={{
-                left: `${bubble.left}%`,
-                bottom: `${bubble.bottom}%`,
-                width: `${bubble.size}px`,
-                height: `${bubble.size}px`,
-                animationDuration: `${bubble.duration}s`,
-                animationDelay: `${bubble.delay}s`,
-              }}
-            />
-          ))}
-        </BubbleContainer>
         <Wrapper>
           <Routes />
         </Wrapper>
diff --git a/src/components/Bubble/Bubble.tsx b/src/components/Bubble/Bubble.tsx
deleted file mode 100644
index 8a87f07..0000000
--- a/src/components/Bubble/Bubble.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-// components/Bubble/Bubble.tsx
-import styled from "@emotion/styled";
-import { bubbleRise } from "./bubbleRise";
-
-export const Bubble = styled.div`
-  position: absolute;
-  border-radius: 50%;
-  background: radial-gradient(
-    circle at 30% 30%,
-    rgba(255, 255, 255, 0.5),
-    rgba(255, 255, 255, 0.2)
-  );
-  animation: ${bubbleRise} linear forwards;
-  pointer-events: none;
-`;
diff --git a/src/components/Bubble/BubbleContainer.tsx b/src/components/Bubble/BubbleContainer.tsx
deleted file mode 100644
index 6260f68..0000000
--- a/src/components/Bubble/BubbleContainer.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-// components/Bubble/BubbleContainer.tsx
-import styled from "@emotion/styled";
-
-export const BubbleContainer = styled.div`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-`;
diff --git a/src/components/Bubble/bubbleRise.ts b/src/components/Bubble/bubbleRise.ts
deleted file mode 100644
index b49e335..0000000
--- a/src/components/Bubble/bubbleRise.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// animations/bubbleRise.ts
-import { keyframes } from "@emotion/react";
-
-export const bubbleRise = keyframes`
-  0% {
-    transform: translateY(0) translateX(0) scale(0.8);
-    opacity: 0.6;
-  }
-  100% {
-    transform: translateY(-120vh) translateX(${
-      Math.random() * 50 - 25
-    }px) scale(1.2);
-    opacity: 0;
-  }
-`;
diff --git a/src/components/Bubble/useBubbles.ts b/src/components/Bubble/useBubbles.ts
deleted file mode 100644
index 1a249a1..0000000
--- a/src/components/Bubble/useBubbles.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-// hooks/useBubbles.ts
-import { useEffect, useState } from "react";
-
-export type BubbleType = {
-  id: number;
-  left: number;
-  bottom: number;
-  size: number;
-  duration: number;
-  delay: number;
-};
-
-export const useBubbles = () => {
-  const [bubbles, setBubbles] = useState<BubbleType[]>([]);
-
-  useEffect(() => {
-    const initialBubbles = Array.from({ length: 15 }, () => ({
-      id: Math.random(),
-      left: Math.random() * 100,
-      bottom: -(Math.random() * 100),
-      size: Math.random() * 15 + 10,
-      duration: Math.random() * 5 + 10,
-      delay: Math.random() * -15,
-    }));
-    setBubbles(initialBubbles);
-
-    const interval = setInterval(() => {
-      const newBubble = {
-        id: Math.random(),
-        left: Math.random() * 100,
-        bottom: -10,
-        size: Math.random() * 15 + 10,
-        duration: Math.random() * 5 + 10,
-        delay: 0,
-      };
-      setBubbles((prev) => [...prev.slice(-14), newBubble]);
-    }, 2000);
-
-    return () => clearInterval(interval);
-  }, []);
-
-  return bubbles;
-};