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

✅ Test: test

src/hooks/useStar.js

@@ -1,10 +1,13 @@
 import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
 import { getStarContent } from "../apis/starP";
+import { useSetRecoilState } from "recoil";
+import { isLoading } from "@/stores/loading";
 
 export const useMoveonStarP = () => {
   const [starP, setStarP] = useState(null);
   const { id } = useParams();
+  const setLoading = useSetRecoilState(isLoading);
 
   const fetchStarData = async () => {
     setLoading(true);

src/pages/Share/Share.jsx

@@ -2,17 +2,33 @@ import React, { useRef, useState } from "react";
 import html2canvas from "html2canvas";
 import { captureScreenshot } from "@/utils/share";
 import * as S from "./styled";
-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();
   const captureRef = useRef();
   const [isButtonVisible, setIsButtonVisible] = useState(true);
 
+  const [starP, setStarP] = useState(null);
+  const { id } = useParams();
+
+  const fetchStarData = async () => {
+    try {
+      const res = await getStarContent(id);
+      setStarP(res);
+    } catch (error) {
+      console.error("Error fetching star data:", error);
+    }
+  };
+
+  useEffect(() => {
+    if (id) {
+      fetchStarData();
+    }
+  }, [id]);
+
   const handleCapture = async () => {
     setIsButtonVisible(false);
     setTimeout(async () => {

src/pages/Share/styled.js

@@ -34,6 +34,7 @@ export const BlurImage = styled.img`
   left: 0;
   width: 100%;
   height: 90px;
+  object-fit: cover;
 `;
 export const BannerTitle = styled.div`
   position: absolute;