From a2c62c6b380f66f6f72b09b8123c64274032d80c Mon Sep 17 00:00:00 2001
From: sujikim <sujikim@student.42seoul.kr>
Date: Wed, 16 Aug 2023 19:35:59 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A9=94=EC=9D=B8=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=8A=A4=ED=81=AC=EB=A1=A4=EC=9D=84=20=EB=82=B4?=
 =?UTF-8?q?=EB=A0=A4=EC=A3=BC=EC=84=B8=EC=9A=94=20=EC=95=A0=EB=8B=88?=
 =?UTF-8?q?=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

png 이미지 대신 css로 마우스형태 구현, 동작 추가
---
 src/asset/css/MainBanner.css      | 26 +++++++++++++++++++++++++-
 src/asset/img/scroll-icon.svg     |  9 ---------
 src/component/main/MainBanner.tsx |  8 +-------
 3 files changed, 26 insertions(+), 17 deletions(-)
 delete mode 100644 src/asset/img/scroll-icon.svg

diff --git a/src/asset/css/MainBanner.css b/src/asset/css/MainBanner.css
index 82daab55..885c5ead 100644
--- a/src/asset/css/MainBanner.css
+++ b/src/asset/css/MainBanner.css
@@ -63,8 +63,32 @@
   font-size: 1.2rem;
 }
 
-.main-banner__scroll_icon {
+.main-banner__mouse {
   margin-top: 1.6rem;
+  width: 2rem;
+  height: 3.4rem;
+  border: 0.2rem solid rgba(255, 255, 255, 0.5);
+  border-radius: 6rem;
+  position: relative;
+  &::before {
+    content: "";
+    width: 0.6rem;
+    height: 0.6rem;
+    position: absolute;
+    top: 0.3rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: white;
+    border-radius: 50%;
+    animation: wheel 3s infinite;
+  }
+}
+
+@keyframes wheel {
+  to {
+    opacity: 0;
+    top: 2.4rem;
+  }
 }
 
 @media screen and (max-width: 1199px) {
diff --git a/src/asset/img/scroll-icon.svg b/src/asset/img/scroll-icon.svg
deleted file mode 100644
index 251d3b75..00000000
--- a/src/asset/img/scroll-icon.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="36">
-    <g data-name="scroll_icon" transform="translate(-944.243 -950.365)" style="opacity:.8">
-        <g data-name="사각형 3" transform="translate(944.243 950.365)" style="stroke:#d5d5d5;stroke-width:2px;fill:none">
-            <rect width="24" height="36" rx="12" style="stroke:none"/>
-            <rect x="1" y="1" width="22" height="34" rx="11" style="fill:none"/>
-        </g>
-        <circle data-name="타원 2" cx="3" cy="3" r="3" transform="translate(953.243 957.365)" style="fill:#d5d5d5"/>
-    </g>
-</svg>
diff --git a/src/component/main/MainBanner.tsx b/src/component/main/MainBanner.tsx
index d58481bc..b840f8e1 100644
--- a/src/component/main/MainBanner.tsx
+++ b/src/component/main/MainBanner.tsx
@@ -1,6 +1,4 @@
-import Image from "../utils/Image";
 import SearchBar from "../utils/SearchBar";
-import ScrollIcon from "../../asset/img/scroll-icon.svg";
 import "../../asset/css/Banner.css";
 import "../../asset/css/MainBanner.css";
 
@@ -24,11 +22,7 @@ const MainBanner = () => {
         </div>
         <div className="main-banner__scroll">
           <p className="font-12 color-d5">스크롤을 내려주세요</p>
-          <Image
-            src={ScrollIcon}
-            className="main-banner__scroll_icon"
-            alt="scroll-icon"
-          />
+          <div className="main-banner__mouse" />
         </div>
       </div>
     </section>