Merge pull request #479 from LikeLion-at-DGU/dev

🚀 Deploy
LikeLion-at-DGU · Aug 6, 2024 · 4cddb33 · 4cddb33
2 parents 0154269 + fc52164
commit 4cddb33
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 29 deletions.
diff --git a/src/pages/Share/Share.jsx b/src/pages/Share/Share.jsx
@@ -3,24 +3,25 @@ import html2canvas from "html2canvas";
 import { captureScreenshot } from "@/utils/share";
 import { getStarContent } from "@/apis/starP";
 import * as S from "./styled";
-import shareIcon from "@/assets/shareIconWhite.svg";
+import shareIcon from "@/assets/shareIcon.svg";
 import ClearStarPIcon1 from "@/assets/starclearPicon1.svg";
 import ClearStarPIcon2 from "@/assets/starclearPicon2.svg";
 import blur from "@/assets/blur.svg";
 import { useParams } from "react-router-dom";
 import { Loading } from "../Loading/Loading";
-import { useNavigate } from "react-router-dom";
 
-const SharePage = () => {
-  const navigate = useNavigate();
+const SharePage = ({ onBack }) => {
   const captureRef = useRef();
   const [isButtonVisible, setIsButtonVisible] = useState(true);
   const [starP, setStarP] = useState(null);
   const { starid } = useParams();
+  console.log(starid);
 
   const fetchStarData = async () => {
+    console.log(starid);
     try {
       const res = await getStarContent(starid);
+      console.log(res);
       setStarP(res);
     } catch (error) {
       console.log("..");
@@ -33,23 +34,34 @@ const SharePage = () => {
 
   const handleCapture = async () => {
     setIsButtonVisible(false);
-    try {
+    setTimeout(async () => {
       const canvas = await html2canvas(captureRef.current, { useCORS: true });
       await captureScreenshot(canvas);
+
     } catch (error) {
     } finally {
+
       setIsButtonVisible(true);
-    }
+    }, 100);
   };
 
   const starData = starP && starP.data ? starP.data : null;
   if (!starData) {
     return <Loading />;
   }
-
   return (
-    <div style={{ width: "100%" }}>
-      <div style={{ width: "100%", minHeight: "100%" }} ref={captureRef}>
+    <div
+      style={{
+        width: "100%",
+      }}
+    >
+      <div
+        style={{
+          width: "100%",
+          minHeight: "100%",
+        }}
+        ref={captureRef}
+      >
         {/* 캡처할 내용 */}
         <S.Wrapper>
           <S.Header>
@@ -74,26 +86,28 @@ const SharePage = () => {
                 <div className="text">루틴 완료 달성!</div>
               </S.ClearMain>
             </S.ClearCantainr>
-            <div
-              id="share-button"
-              style={{
-                visibility: isButtonVisible ? "visible" : "hidden",
-                width: "100%",
-                height: "100%",
-              }}
-            >
-              <S.shareContainr>
-                <S.shareBtn onClick={handleCapture}>
-                  <div className="ImgSave">
-                    이미지 저장하고 공유하기
-                    <img src={shareIcon} />
-                  </div>
-                </S.shareBtn>
-                <button className="backBtn" onClick={() => navigate(-1)}>
-                  뒤로가기
-                </button>
-              </S.shareContainr>
-            </div>
+            {
+              <div
+                id="share-button"
+                style={{
+                  visibility: isButtonVisible ? "visible" : "hidden",
+                  width: "100%",
+                  height: "100%",
+                }}
+              >
+                <S.shareContainr>
+                  <S.shareBtn onClick={handleCapture}>
+                    <div className="ImgSave">
+                      이미지 저장하고 공유하기
+                      <img src={shareIcon} />
+                    </div>
+                  </S.shareBtn>
+                  <button className="backBtn" onClick={onBack}>
+                    뒤로가기
+                  </button>
+                </S.shareContainr>
+              </div>
+            }
           </div>
         </S.Wrapper>
       </div>

diff --git a/src/pages/User/style.js b/src/pages/User/style.js
@@ -133,6 +133,7 @@ export const CategoryWrapper = styled.div`
 export const CategoryView = styled.div`
   display: flex;
   flex-wrap: wrap;
+  width: 270px;
   gap: 1rem;
   justify-content: center;
 `;

diff --git a/src/utils/share.js b/src/utils/share.js
@@ -9,6 +9,7 @@ export const captureScreenshot = async (canvas) => {
     const dataUrl = canvas.toDataURL("image/png");
     const blob = await fetch(dataUrl).then((res) => res.blob());
 
+
     // Use Web Share API if available
     if (navigator.share) {
       await navigator.share({
@@ -26,5 +27,6 @@ export const captureScreenshot = async (canvas) => {
   } finally {
     // Show the share button again after sharing
     if (shareButton) shareButton.style.display = "block";
+
   }
 };