From edf9218adf4a73f99a4f9b55c8dcfbd823b32049 Mon Sep 17 00:00:00 2001
From: SeojinSeojin <1106laura@naver.com>
Date: Sun, 26 Nov 2023 15:45:28 +0900
Subject: [PATCH 1/2] fix: give delay to blur update in recruit button

---
 src/views/MainPage/components/Banner/RecruitButton/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/views/MainPage/components/Banner/RecruitButton/index.tsx b/src/views/MainPage/components/Banner/RecruitButton/index.tsx
index e355058b..04b93ee7 100644
--- a/src/views/MainPage/components/Banner/RecruitButton/index.tsx
+++ b/src/views/MainPage/components/Banner/RecruitButton/index.tsx
@@ -9,7 +9,10 @@ export default function RecruitButton({ children }: PropsWithChildren<object>) {
     const rect = event.currentTarget.getBoundingClientRect();
     const x = event.clientX - rect.left;
     const y = event.clientY - rect.top;
-    setBlurPosition({ x, y });
+    setBlurPosition((prev) => ({
+      x: (9 * prev.x + x) / 10,
+      y: (9 * prev.y + y) / 10,
+    }));
   };
 
   return (

From 56774728d6d128c706efce0700320b904a41df9d Mon Sep 17 00:00:00 2001
From: SeojinSeojin <1106laura@naver.com>
Date: Sun, 26 Nov 2023 17:35:08 +0900
Subject: [PATCH 2/2] fix: apply yoon's direction

---
 .../components/Banner/RecruitButton/index.tsx |  7 +--
 .../components/Banner/RecruitButton/style.ts  | 47 ++++++++++++++++---
 2 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/src/views/MainPage/components/Banner/RecruitButton/index.tsx b/src/views/MainPage/components/Banner/RecruitButton/index.tsx
index 04b93ee7..091e54bb 100644
--- a/src/views/MainPage/components/Banner/RecruitButton/index.tsx
+++ b/src/views/MainPage/components/Banner/RecruitButton/index.tsx
@@ -9,17 +9,14 @@ export default function RecruitButton({ children }: PropsWithChildren<object>) {
     const rect = event.currentTarget.getBoundingClientRect();
     const x = event.clientX - rect.left;
     const y = event.clientY - rect.top;
-    setBlurPosition((prev) => ({
-      x: (9 * prev.x + x) / 10,
-      y: (9 * prev.y + y) / 10,
-    }));
+    setBlurPosition({ x, y });
   };
 
   return (
     <Link href="/recruit">
       <S.RecruitButtonWrapper>
         <S.MouseTrackerWrapper onMouseMove={handleMouseMove} x={blurPosition.x} y={blurPosition.y}>
-          {children}
+          <div>{children}</div>
         </S.MouseTrackerWrapper>
       </S.RecruitButtonWrapper>
     </Link>
diff --git a/src/views/MainPage/components/Banner/RecruitButton/style.ts b/src/views/MainPage/components/Banner/RecruitButton/style.ts
index 23dc42b7..52a5268c 100644
--- a/src/views/MainPage/components/Banner/RecruitButton/style.ts
+++ b/src/views/MainPage/components/Banner/RecruitButton/style.ts
@@ -45,11 +45,46 @@ export const MouseTrackerWrapper = styled.div<{ x: number; y: number }>`
   cursor: pointer;
   height: 60px;
   padding: 15px 28px;
-  &:hover {
-    background-image: ${({ x, y }) =>
-      `radial-gradient(circle 36px at ${x}px ${y}px, #3E5E7D90, transparent),
-       radial-gradient(circle 80px at ${x}px ${y}px, #3E5E7D50, transparent),
-       radial-gradient(circle 108px at ${x}px ${y}px, #3E5E7D50, transparent)`};
+  background: transparent;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: radial-gradient(
+        circle 36px at ${(props) => props.x}px ${(props) => props.y}px,
+        #3e5e7d90,
+        transparent
+      ),
+      radial-gradient(
+        circle 80px at ${(props) => props.x}px ${(props) => props.y}px,
+        #3e5e7d50,
+        transparent
+      ),
+      radial-gradient(
+        circle 108px at ${(props) => props.x}px ${(props) => props.y}px,
+        #3e5e7d50,
+        transparent
+      );
+    opacity: 0;
+    transition-duration: 0.4s;
+    transition-delay: 0.2s;
+  }
+
+  &:hover::before {
+    opacity: 1;
+  }
+
+  > * {
+    transition: transform 0.2s;
+  }
+
+  &:hover > * {
+    transform: scale(0.96);
   }
-  transition: background 300ms ease;
 `;