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

🚀 Deploy

src/hooks/useStar.js

@@ -6,7 +6,7 @@ import { isLoading } from "@/stores/loading";
 
 export const useMoveonStarP = () => {
   const [starP, setStarP] = useState(null);
-  const { id } = useParams();
+  let { id } = useParams();
   const setLoading = useSetRecoilState(isLoading);
 
   const fetchStarData = async () => {

src/pages/Share/Share.jsx

@@ -1,33 +1,37 @@
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import html2canvas from "html2canvas";
 import { captureScreenshot } from "@/utils/share";
+import { getStarContent } from "@/apis/starP";
 import * as S from "./styled";
 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";
 
 const SharePage = ({ onBack }) => {
   const captureRef = useRef();
   const [isButtonVisible, setIsButtonVisible] = useState(true);
-
   const [starP, setStarP] = useState(null);
-  const { id } = useParams();
+  const { starid } = useParams();
+  console.log(starid);
 
   const fetchStarData = async () => {
+    console.log(starid);
     try {
-      const res = await getStarContent(id);
+      const res = await getStarContent(starid);
+      console.log(res);
       setStarP(res);
     } catch (error) {
       console.error("Error fetching star data:", error);
     }
   };
 
   useEffect(() => {
-    if (id) {
-      fetchStarData();
-    }
-  }, [id]);
+    fetchStarData();
+  }, []);
 
   const handleCapture = async () => {
     setIsButtonVisible(false);
@@ -39,7 +43,9 @@ const SharePage = ({ onBack }) => {
   };
 
   const starData = starP && starP.data ? starP.data : null;
-
+  if (!starData) {
+    return <Loading />;
+  }
   return (
     <div
       style={{

src/pages/Share/styled.js

@@ -7,10 +7,11 @@ export const Wrapper = styled.div`
   min-height: 100vh;
   background-size: cover;
   flex-direction: column;
-  background-image: url(${Back});
   background-size: cover;
   margin-bottom: 7.3rem;
   .Container {
+    background-image: url(${Back});
+
     min-height: 100%;
   }
 `;
@@ -30,7 +31,7 @@ export const BannerImage = styled.img`
 export const BlurImage = styled.img`
   position: absolute;
   z-index: 5;
-  bottom: 0.1px;
+  bottom: 0;
   left: 0;
   width: 100%;
   height: 90px;