diff --git a/src/pages/Share/Share.jsx b/src/pages/Share/Share.jsx index 730fa477..254b0c6a 100644 --- 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 ; } - return ( -
-
+
+
{/* 캡처할 내용 */} @@ -74,26 +86,28 @@ const SharePage = () => {
루틴 완료 달성!
-
- - -
- 이미지 저장하고 공유하기 - -
-
- -
-
+ { +
+ + +
+ 이미지 저장하고 공유하기 + +
+
+ +
+
+ }
diff --git a/src/pages/User/style.js b/src/pages/User/style.js index 9657b11f..1844c667 100644 --- 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 index 8e4dabba..bcc7259a 100644 --- 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"; + } };