diff --git a/src/api/send/send.tsx b/src/api/send/send.tsx index 8e051c9d..49f40ba8 100644 --- a/src/api/send/send.tsx +++ b/src/api/send/send.tsx @@ -25,17 +25,20 @@ export const postSendLetter = async ({ // 비회원 편지 쓰기 export const postAnonymousSendLetter = async ({ + senderName, receiverName, content, images, templateType }: { + senderName: string; receiverName: string; content: string; images: string[]; templateType: number; }) => { return await client.post(`/api/v1/letters/anonymous/send`, { + senderName, receiverName, content, images, diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 72c777f2..2f5a808d 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -21,6 +21,7 @@ export default function Login() { clearAnonymousSendLetterCode(); setSendState({ draftId: null, + senderName: null, receiverName: '', content: '', images: [] as string[], diff --git a/src/app/planet/page.tsx b/src/app/planet/page.tsx index 966366dd..64740d80 100644 --- a/src/app/planet/page.tsx +++ b/src/app/planet/page.tsx @@ -76,6 +76,7 @@ const PlanetPage = () => { }); setSendState({ draftId: null, + senderName: '', receiverName: '', content: '', images: [] as string[], diff --git a/src/app/send/(process)/content/page.tsx b/src/app/send/(process)/content/page.tsx index 1672bf32..1ab03709 100644 --- a/src/app/send/(process)/content/page.tsx +++ b/src/app/send/(process)/content/page.tsx @@ -267,7 +267,7 @@ const SendContentPage = () => { previewImages: previewImages })); - router.push(`/send/template${isGuest ? '?guest=true' : ''}`); + router.push(`${isGuest ? '/send/sender?guest=true' : '/send/template'}`); }; /* 임시 저장 삭제 핸들러 */ @@ -294,7 +294,8 @@ const SendContentPage = () => { console.log('임시 저장 조회 성공', response.data); console.log('상태 변경됨'); - setLetterState({ + setLetterState((prev) => ({ + ...prev, draftId: response.data.draftKey, receiverName: response.data.receiverName, content: response.data.content, @@ -302,7 +303,7 @@ const SendContentPage = () => { previewImages: response.data.images, templateType: 0, letterId: null - }); + })); // 각 input 상태 업데이트 setDraftId(response.data.draftKey); diff --git a/src/app/send/(process)/layout.tsx b/src/app/send/(process)/layout.tsx index 1f56894b..1822ec1e 100644 --- a/src/app/send/(process)/layout.tsx +++ b/src/app/send/(process)/layout.tsx @@ -1,10 +1,11 @@ 'use client'; +import Loader, { LoaderContainer } from '@/components/common/Loader'; import NavigatorBar from '@/components/common/NavigatorBar'; import ProgressBar from '@/components/common/ProgressBar'; import { theme } from '@/styles/theme'; -import { usePathname } from 'next/navigation'; -import React from 'react'; +import { usePathname, useSearchParams } from 'next/navigation'; +import React, { Suspense } from 'react'; import styled from 'styled-components'; interface SendLayoutProps { @@ -13,12 +14,20 @@ interface SendLayoutProps { const SendLayout = ({ children }: SendLayoutProps) => { const pathname = usePathname(); + const searchParams = useSearchParams(); + const isGuest = searchParams.get('guest') === 'true'; const current = pathname === '/send/receiver' ? 1 : pathname === '/send/content' ? 2 + : isGuest + ? pathname === '/send/sender' + ? 3 + : pathname === '/send/template' + ? 4 + : null : pathname === '/send/template' ? 3 : null; @@ -30,7 +39,7 @@ const SendLayout = ({ children }: SendLayoutProps) => { {current && ( - + )} {children} @@ -38,7 +47,19 @@ const SendLayout = ({ children }: SendLayoutProps) => { ); }; -export default SendLayout; +export default function SendLayouting({ children }: SendLayoutProps) { + return ( + + + + } + > + {children} + + ); +} const Container = styled.div` width: 100%; diff --git a/src/app/send/(process)/preview/page.tsx b/src/app/send/(process)/preview/page.tsx index b65c8920..b28e8648 100644 --- a/src/app/send/(process)/preview/page.tsx +++ b/src/app/send/(process)/preview/page.tsx @@ -21,8 +21,15 @@ const SendPreviewPage = () => { const searchParams = useSearchParams(); const isKakaoLoaded = useKakaoSDK(); const [letterState, setLetterState] = useRecoilState(sendLetterState); - const { draftId, receiverName, content, images, templateType, letterId } = - useRecoilValue(sendLetterState); + const { + draftId, + senderName, + receiverName, + content, + images, + templateType, + letterId + } = useRecoilValue(sendLetterState); const { name } = useRecoilValue(userState); const [isImage, setIsImage] = useState(false); const [letterCode, setLetterCode] = useState(''); @@ -86,6 +93,7 @@ const SendPreviewPage = () => { if (isGuest) { // 비회원 편지 저장 API 연동 const response = await postAnonymousSendLetter({ + senderName, receiverName, content, images, @@ -120,7 +128,7 @@ const SendPreviewPage = () => { requestUrl: location.origin + location.pathname, templateId: 112798, templateArgs: { - senderName: isGuest ? receiverName + ' 님께' : name + ' 님으로부터', + senderName: `${isGuest ? senderName : name}`, id: letterCode }, serverCallbackArgs: { @@ -204,7 +212,11 @@ const SendPreviewPage = () => { buttonType="primary" text="카카오로 편지 보내기" onClick={handleSendLetterAndShare} - disabled={!receiverName || !content || isLoading} + disabled={ + isGuest + ? !receiverName || !content || !senderName || isLoading + : !receiverName || !content || isLoading + } > { console.log('임시 저장 조회 성공', response.data); console.log('상태 변경됨'); - setLetterState({ + setLetterState((prev) => ({ + ...prev, draftId: response.data.draftKey, receiverName: response.data.receiverName, content: response.data.content, @@ -220,7 +221,7 @@ const SendReceiverPage = () => { previewImages: response.data.images, templateType: 0, letterId: null - }); + })); // 각 input 상태 업데이트 setDraftId(response.data.draftKey); @@ -250,7 +251,7 @@ const SendReceiverPage = () => { )} - + { + const router = useRouter(); + const searchParams = useSearchParams(); + const { showToast } = useToast(); + const [draftId, setDraftId] = useState(null); + const [sender, setSender] = useState(''); + const [receiver, setReceiver] = useState(''); + const [content, setContent] = useState(''); + const [images, setImages] = useState([]); // 서버 전송용 + const [previewImages, setPreviewImages] = useState([]); // 미리보기용 + + const isGuest = searchParams.get('guest') === 'true'; + const [letterState, setLetterState] = useRecoilState(sendLetterState); + + useEffect(() => { + if (letterState) { + setDraftId(letterState.draftId); + setSender(letterState.senderName); + setReceiver(letterState.receiverName); + setContent(letterState.content); + setImages(letterState.images); + setPreviewImages(letterState.images); + } + }, [letterState]); + + const handleSenderChange = (newValue: string) => { + setSender(newValue); + setLetterState((prevState) => ({ + ...prevState, + senderName: newValue + })); + }; + + const handleAddNext = async () => { + /* 다음 페이지 */ + setLetterState((prevState) => ({ + ...prevState, + draftId: draftId, + receiverName: receiver, + content: content, + images: images, + previewImages: previewImages + })); + + router.push(`/send/template${isGuest ? '?guest=true' : ''}`); + }; + + return ( + <> + + + + + + + +