Merge pull request #432 from Chaem03/feature/#349

🎨 Design: 블러이미지 추가
LikeLion-at-DGU · Aug 6, 2024 · 6a53066 · 6a53066
2 parents a420db9 + 2fb58d8
commit 6a53066
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/src/pages/Share/Share.jsx b/src/pages/Share/Share.jsx
@@ -51,8 +51,7 @@ const SharePage = ({ onBack }) => {
     setIsButtonVisible(false);
     setTimeout(async () => {
       const canvas = await html2canvas(captureRef.current, { useCORS: true });
-      const ctx = canvas.getContext("2d");
-      ctx.filter = "blur(10px)";
+
       await captureScreenshot(canvas);
       setIsButtonVisible(true);
     }, 100);
@@ -84,11 +83,12 @@ const SharePage = ({ onBack }) => {
               alt={starData.name}
               onLoad={() => setIsImageReady(true)}
             />
-            <S.BlurImage className="blur" src={blur} />
+
             <S.BannerTitle>
               <div>{starData.name}</div>
               <div className="profession">{starData.profession}</div>
             </S.BannerTitle>
+            <S.BlurImage className="blur" src={blur} />
           </S.Header>
           <div className="Container">
             <S.ClearCantainr>

diff --git a/src/pages/Share/styled.js b/src/pages/Share/styled.js
@@ -29,10 +29,11 @@ export const BannerImage = styled.img`
 
 export const BlurImage = styled.img`
   position: absolute;
-  z-index: 2;
-  bottom: 10px;
+  z-index: 5;
+  bottom: 2px;
   left: 0;
   width: 100%;
+  height: 90px;
 `;
 export const BannerTitle = styled.div`
   position: absolute;
@@ -108,7 +109,7 @@ export const ClearMain = styled.div`
     font-weight: bold;
     text-align: center;
     color: white;
-    font-size: 1.2rem;
+    font-size: 1.5rem;
     transform: translate(-50%, -50%);
   }