From 9f3768160f2dfdfb704a57404160137674422408 Mon Sep 17 00:00:00 2001 From: yyypearl Date: Tue, 21 Jan 2025 03:08:13 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=90=9B=20fix(#127):=20=EC=B9=B4?= =?UTF-8?q?=EC=B9=B4=EC=98=A4=20=EA=B3=B5=EC=9C=A0=ED=95=98=EA=B8=B0=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=9E=AC=ED=81=B4=EB=A6=AD=EC=8B=9C=20?= =?UTF-8?q?=EB=8F=99=EC=9E=91=20=EC=95=88=ED=95=98=EB=8A=94=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=EB=B0=8F=20=EB=AA=A8=EB=B0=94=EC=9D=BC=EC=97=90?= =?UTF-8?q?=EC=84=9C=EC=9D=98=20=EC=99=84=EB=A3=8C=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=9D=B4=EB=8F=99=20=EC=98=A4=EB=A5=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/send/preview/page.tsx | 100 ++++++++++++++++++++-------------- 1 file changed, 59 insertions(+), 41 deletions(-) diff --git a/src/app/send/preview/page.tsx b/src/app/send/preview/page.tsx index dd863b0a..2298230f 100644 --- a/src/app/send/preview/page.tsx +++ b/src/app/send/preview/page.tsx @@ -1,7 +1,7 @@ "use client"; import React, { useEffect, useState } from "react"; -import styled, { css } from "styled-components"; +import styled from "styled-components"; import { theme } from "@/styles/theme"; import NavigatorBar from "@/components/common/NavigatorBar"; import Button from "@/components/common/Button"; @@ -17,13 +17,14 @@ import { getLetterShareStatus } from "@/api/letter/share"; const SendPreviewPage = () => { const router = useRouter(); + const isKakaoLoaded = useKakaoSDK(); const [letterState, setLetterState] = useRecoilState(sendLetterState); const { draftId, receiverName, content, images, templateType, letterId } = useRecoilValue(sendLetterState); const { name } = useRecoilValue(userState); const [isImage, setIsImage] = useState(false); - - const isKakaoLoaded = useKakaoSDK(); + const [letterCode, setLetterCode] = useState(""); + const [isLoading, setIsLoading] = useState(false); useEffect(() => { setIsImage(!!!(content.length > 0)); @@ -33,67 +34,84 @@ const SendPreviewPage = () => { setIsImage(!isImage); }; + useEffect(() => { + console.log("letterCodeㅜ", letterCode); + }, [letterCode]); + const handleSendLetterAndShare = async () => { /* 편지 전송 및 카카오 공유 */ + setIsLoading(true); + + const { Kakao, location } = window; + + if (!isKakaoLoaded) { + console.error("Kakao SDK is not loaded yet"); + return; + } + try { // 1. 편지 전송 API 요청 - if (!letterId) { - const response = await postSendLtter({ - draftId, - receiverName, - content, - images, - templateType, + const response = await postSendLtter({ + draftId, + receiverName, + content, + images, + templateType, + }); + console.log("편지 쓰기 성공"); + setLetterState((prevState) => ({ + ...prevState, + letterId: response.data.letterCode, + })); + setLetterCode(response.data.letterCode); + console.log(response.data.letterCode); + + // 2. 카카오 공유 로직 실행 (letterId 상태와 무관하게 항상 실행) + setTimeout(() => { + Kakao.Share.sendScrap({ + requestUrl: location.origin + location.pathname, + templateId: 112798, + templateArgs: { + senderName: name, + id: response.data.letterCode, + }, + serverCallbackArgs: { + requestType: "SHARE", + requestId: response.data.letterCode, + }, + // 카카오톡 미설치 시 카카오톡 설치 경로이동 + installTalk: true, }); - console.log("편지 쓰기 성공"); - setLetterState((prevState) => ({ - ...prevState, - letterId: response.data.letterCode, - })); - - // 2. 카카오 공유 로직 실행 - if (isKakaoLoaded && response.data.letterCode) { - setTimeout(() => { - const { Kakao, location } = window; - Kakao.Share.sendScrap({ - requestUrl: location.origin + location.pathname, - templateId: 112798, - templateArgs: { - senderName: name, - id: response.data.letterCode, - }, - serverCallbackArgs: { - requestType: "SHARE", - requestId: response.data.letterCode, - }, - }); - }, 1000); - } - } + setIsLoading(false); + }, 4000); } catch (error) { console.log("편지 전송 또는 카카오 공유 실패:", error); + setIsLoading(false); } }; // 3. 공유 완료 상태 폴링 useEffect(() => { - if (letterState.letterId && letterState.letterId?.length > 0) { + if (letterCode.length > 0) { + console.log("letterCode", letterCode); + let intervalTime = 300; const interval = setInterval(async () => { try { - const status = await getLetterShareStatus(letterState.letterId || ""); + const status = await getLetterShareStatus(letterCode || ""); console.log(status); if (status.isShared) { + console.log("완료"); router.push("/send/complete"); clearInterval(interval); // 폴링 중단 } } catch (error) { console.error("공유 상태 조회 실패:", error); } - }, 3000); + }, intervalTime); return () => clearInterval(interval); } - }, [letterState.letterId]); + }, [letterCode]); return ( @@ -132,9 +150,9 @@ const SendPreviewPage = () => {