[Feat] 캐스퍼 쇼케이스에서 공유 링크 구현

client/src/features/CasperCustom/Battery.tsx

@@ -12,7 +12,6 @@ export function Battery({ applyCount }: BatteryProps) {
     const [batteryApplyArray, setBatteryApplyArray] = useState<boolean[]>(batteryArray);
 
     useEffect(() => {
-        // TODO: 응모 횟수 받아와야함
         const newBatteryApplyArray = batteryApplyArray.map((_, index) => index < applyCount);
         setBatteryApplyArray(newBatteryApplyArray);
     }, [applyCount]);

client/src/features/CasperCustom/CasperCustomFinish.tsx

@@ -13,8 +13,10 @@ import useCasperCustomStateContext from "@/hooks/useCasperCustomStateContext";
 import useFetch from "@/hooks/useFetch";
 import useToast from "@/hooks/useToast";
 import { CASPER_ACTION } from "@/types/casperCustom";
+import { GetShareLinkResponse } from "@/types/linkApi";
 import { GetApplyCountResponse } from "@/types/lotteryApi";
 import { saveDomImage } from "@/utils/saveDomImage";
+import { writeClipboard } from "@/utils/writeClipboard";
 import { SCROLL_MOTION } from "../../constants/animation";
 import { Battery } from "./Battery";
 import { MyCasperCardFront } from "./MyCasperCardFront";
@@ -30,17 +32,41 @@ export function CasperCustomFinish({
     unblockNavigation,
 }: CasperCustomFinishProps) {
     const [cookies] = useCookies([COOKIE_KEY.ACCESS_TOKEN]);
-    const { showToast, ToastComponent } = useToast("링크가 복사되었어요!");
 
     const { data: applyCountData, fetchData: getApplyCount } = useFetch<GetApplyCountResponse>(() =>
         LotteryAPI.getApplyCount(cookies[COOKIE_KEY.ACCESS_TOKEN])
     );
 
+    const {
+        data: shareLink,
+        isSuccess: isSuccessGetShareLink,
+        isError: isErrorGetShareLink,
+        fetchData: getShareLink,
+    } = useFetch<GetShareLinkResponse>(
+        () => LinkAPI.getShareLink(cookies[COOKIE_KEY.ACCESS_TOKEN]),
+        false
+    );
+
+    const { showToast, ToastComponent } = useToast(
+        isErrorGetShareLink
+            ? "공유 링크 생성에 실패했습니다! 캐스퍼 봇 생성 후 다시 시도해주세요."
+            : "링크가 복사되었어요!"
+    );
+
     const dispatch = useCasperCustomDispatchContext();
     const { casperName } = useCasperCustomStateContext();
 
     const casperCustomRef = useRef<HTMLDivElement>(null);
 
+    useEffect(() => {
+        if (shareLink && isSuccessGetShareLink) {
+            writeClipboard(shareLink.shortenUrl, showToast);
+            return;
+        }
+        if (isErrorGetShareLink) {
+            showToast();
+        }
+    }, [shareLink, isSuccessGetShareLink]);
     useEffect(() => {
         if (!cookies[COOKIE_KEY.ACCESS_TOKEN]) {
             return;
@@ -63,15 +89,8 @@ export function CasperCustomFinish({
         dispatch({ type: CASPER_ACTION.RESET_CUSTOM });
     };
 
-    const handleClickShareButton = async () => {
-        const link = await LinkAPI.getShareLink(cookies[COOKIE_KEY.ACCESS_TOKEN]);
-
-        try {
-            await navigator.clipboard.writeText(link.shortenUrl);
-            showToast();
-        } catch (err) {
-            console.error("Failed to copy: ", err);
-        }
+    const handleClickShareButton = () => {
+        getShareLink();
     };
 
     return (

client/src/hooks/useFetch.ts

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useErrorBoundary } from "react-error-boundary";
 
-export default function useFetch<T, P = void>(fetch: (params: P) => Promise<T>) {
+export default function useFetch<T, P = void>(fetch: (params: P) => Promise<T>, showError = true) {
     const [data, setData] = useState<T | null>(null);
     const [isSuccess, setIsSuccess] = useState<boolean>(false);
     const [isError, setIsError] = useState<boolean>(false);
@@ -17,9 +17,11 @@ export default function useFetch<T, P = void>(fetch: (params: P) => Promise<T>)
             setData(data);
             setIsSuccess(!!data);
         } catch (error) {
-            showBoundary(error);
             setIsError(true);
             console.error(error);
+            if (showError) {
+                showBoundary(error);
+            }
         }
     };
 

client/src/pages/CasperShowCase/index.tsx

@@ -1,12 +1,20 @@
+import { useEffect } from "react";
 import { motion } from "framer-motion";
+import { useCookies } from "react-cookie";
 import { useLoaderData } from "react-router-dom";
+import { LinkAPI } from "@/apis/linkAPI";
 import CTAButton from "@/components/CTAButton";
 import { CUSTOM_OPTION } from "@/constants/CasperCustom/casper";
 import { CASPER_SHOWCASE_SECTIONS } from "@/constants/PageSections/sections";
 import { ASCEND, DISSOLVE, SCROLL_MOTION } from "@/constants/animation";
+import { COOKIE_KEY } from "@/constants/cookie";
 import { CasperCards } from "@/features/CasperShowCase";
+import useFetch from "@/hooks/useFetch";
 import useHeaderStyleObserver from "@/hooks/useHeaderStyleObserver";
+import useToast from "@/hooks/useToast";
+import { GetShareLinkResponse } from "@/types/linkApi";
 import { GetCasperListResponse } from "@/types/lotteryApi";
+import { writeClipboard } from "@/utils/writeClipboard";
 
 function getCardListData(cardList: GetCasperListResponse) {
     return cardList.map((card) => {
@@ -30,11 +38,39 @@ export default function CasperShowCase() {
         darkSections: [CASPER_SHOWCASE_SECTIONS.SHOWCASE],
     });
 
+    const [cookies] = useCookies([COOKIE_KEY.ACCESS_TOKEN]);
+
+    const {
+        data: shareLink,
+        isSuccess: isSuccessGetShareLink,
+        isError: isErrorGetShareLink,
+        fetchData: getShareLink,
+    } = useFetch<GetShareLinkResponse>(
+        () => LinkAPI.getShareLink(cookies[COOKIE_KEY.ACCESS_TOKEN]),
+        false
+    );
+
+    const { showToast, ToastComponent } = useToast(
+        isErrorGetShareLink
+            ? "공유 링크 생성에 실패했습니다! 캐스퍼 봇 생성 후 다시 시도해주세요."
+            : "링크가 복사되었어요!"
+    );
+
     const casperList = useLoaderData() as GetCasperListResponse;
     const cardListData = getCardListData(casperList);
 
-    const handleClickShare = () => {
-        // TODO: 이벤트 링크 공유 로직
+    useEffect(() => {
+        if (shareLink && isSuccessGetShareLink) {
+            writeClipboard(shareLink.shortenUrl, showToast);
+            return;
+        }
+        if (isErrorGetShareLink) {
+            showToast();
+        }
+    }, [shareLink, isSuccessGetShareLink, isErrorGetShareLink]);
+
+    const handleClickShareButton = () => {
+        getShareLink();
     };
 
     return (
@@ -55,10 +91,12 @@ export default function CasperShowCase() {
                 </motion.div>
 
                 <motion.div className="flex gap-500" {...SCROLL_MOTION(ASCEND)}>
-                    <CTAButton label="이벤트 링크 공유" onClick={handleClickShare} />
+                    <CTAButton label="이벤트 링크 공유" onClick={handleClickShareButton} />
                     <CTAButton label="메인으로 돌아가기" url="/" color="white" />
                 </motion.div>
             </section>
+
+            {ToastComponent}
         </div>
     );
 }

client/src/utils/writeClipboard.ts

@@ -0,0 +1,13 @@
+export async function writeClipboard(
+    text: string,
+    successCallback?: () => void,
+    errorCallback?: () => void
+) {
+    try {
+        await navigator.clipboard.writeText(text);
+        successCallback && successCallback();
+    } catch (err) {
+        console.error("Failed to copy: ", err);
+        errorCallback && errorCallback();
+    }
+}