From 4ef64d6b8a4416da5e828c093305908e2ad5e92c Mon Sep 17 00:00:00 2001
From: chaem03 <hcm0309@naver.com>
Date: Tue, 6 Aug 2024 13:47:55 +0900
Subject: [PATCH] =?UTF-8?q?Design:=20=EB=B8=94=EB=9F=AC=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/blur.svg       |  9 +++++++++
 src/pages/Share/Share.jsx |  2 ++
 src/pages/Share/styled.js | 16 ++++++++++------
 3 files changed, 21 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/blur.svg

diff --git a/src/assets/blur.svg b/src/assets/blur.svg
new file mode 100644
index 00000000..eba8d2f3
--- /dev/null
+++ b/src/assets/blur.svg
@@ -0,0 +1,9 @@
+<svg width="320" height="92" viewBox="0 0 320 92" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="320" height="91.2353" transform="translate(0 0.764709)" fill="url(#paint0_linear_796_2301)"/>
+<defs>
+<linearGradient id="paint0_linear_796_2301" x1="160" y1="0" x2="160" y2="45.2354" gradientUnits="userSpaceOnUse">
+<stop stop-color="#78A1B5" stop-opacity="0"/>
+<stop offset="1" stop-color="#9DBCCB"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/pages/Share/Share.jsx b/src/pages/Share/Share.jsx
index 8c7b2e73..9a48271c 100644
--- a/src/pages/Share/Share.jsx
+++ b/src/pages/Share/Share.jsx
@@ -6,6 +6,7 @@ import { useMoveonStarP } from "@/hooks/useStar";
 import shareIcon from "@/assets/shareIcon.svg";
 import ClearStarPIcon1 from "@/assets/starclearPicon1.svg";
 import ClearStarPIcon2 from "@/assets/starclearPicon2.svg";
+import blur from "@/assets/blur.svg";
 
 const SharePage = ({ onBack }) => {
   const { starP } = useMoveonStarP();
@@ -83,6 +84,7 @@ const SharePage = ({ onBack }) => {
               alt={starData.name}
               onLoad={() => setIsImageReady(true)}
             />
+            <S.BlurImage className="blur" />
             <S.BannerTitle>
               <div>{starData.name}</div>
               <div className="profession">{starData.profession}</div>
diff --git a/src/pages/Share/styled.js b/src/pages/Share/styled.js
index dd566a8e..7856b4b6 100644
--- a/src/pages/Share/styled.js
+++ b/src/pages/Share/styled.js
@@ -23,13 +23,17 @@ export const BannerImage = styled.img`
   width: 100%;
   height: 282px;
   object-fit: cover;
-  mask-image: linear-gradient(
-    to bottom,
-    rgba(0, 0, 0, 1) 60%,
-    rgba(0, 0, 0, 0) 100%
-  );
+
   position: relative;
 `;
+
+export const BlurImage = styled.img`
+  position: absolute;
+  z-index: 2;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+`;
 export const BannerTitle = styled.div`
   position: absolute;
   display: flex;
@@ -37,7 +41,7 @@ export const BannerTitle = styled.div`
 
   bottom: 70px;
   left: 10px;
-  z-index: 2;
+  z-index: 3;
   font-size: 1.8rem;
   color: white;
   font-weight: 600;