From 0dc6dec905a435e6662af00946548aaf700d53f5 Mon Sep 17 00:00:00 2001 From: yyypearl Date: Sun, 8 Jun 2025 22:42:43 +0900 Subject: [PATCH 1/4] =?UTF-8?q?=E2=9C=A8=20feat(#172):=20=EB=B9=84?= =?UTF-8?q?=ED=9A=8C=EC=9B=90=20=ED=8E=B8=EC=A7=80=20=EC=9E=91=EC=84=B1=20?= =?UTF-8?q?=EB=B0=9C=EC=8B=A0=EC=9D=B8=20=EC=9D=B4=EB=A6=84=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/send/send.tsx | 3 + src/app/login/page.tsx | 1 + src/app/send/(process)/content/page.tsx | 7 +- src/app/send/(process)/layout.tsx | 12 +- src/app/send/(process)/preview/page.tsx | 20 ++- src/app/send/(process)/receiver/page.tsx | 7 +- src/app/send/(process)/sender/page.tsx | 194 +++++++++++++++++++++++ src/recoil/letterStore.tsx | 1 + 8 files changed, 233 insertions(+), 12 deletions(-) create mode 100644 src/app/send/(process)/sender/page.tsx 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/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..afb1a6ec 100644 --- a/src/app/send/(process)/layout.tsx +++ b/src/app/send/(process)/layout.tsx @@ -3,7 +3,7 @@ import NavigatorBar from '@/components/common/NavigatorBar'; import ProgressBar from '@/components/common/ProgressBar'; import { theme } from '@/styles/theme'; -import { usePathname } from 'next/navigation'; +import { usePathname, useSearchParams } from 'next/navigation'; import React from 'react'; import styled from 'styled-components'; @@ -13,12 +13,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 +38,7 @@ const SendLayout = ({ children }: SendLayoutProps) => { {current && ( - + )} {children} 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 ( + <> + + + + + + + +