Design: 블러이미지 추가

LikeLion-at-DGU · Aug 6, 2024 · 4ef64d6 · 4ef64d6
1 parent f7f1ccc
commit 4ef64d6
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/src/assets/blur.svg b/src/assets/blur.svg
diff --git 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
@@ -23,21 +23,25 @@ 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;
   flex-direction: column;
 
   bottom: 70px;
   left: 10px;
-  z-index: 2;
+  z-index: 3;
   font-size: 1.8rem;
   color: white;
   font-weight: 600;