Merge pull request #173 from ASAP-Lettering/feat/#172

[Feat] 비회원 편지 작성 발신인 이름 작성 추가

Author: yyypearl

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,

src/app/login/page.tsx

@@ -21,6 +21,7 @@ export default function Login() {
     clearAnonymousSendLetterCode();
     setSendState({
       draftId: null,
+      senderName: null,
       receiverName: '',
       content: '',
       images: [] as string[],

src/app/planet/page.tsx

@@ -76,6 +76,7 @@ const PlanetPage = () => {
     });
     setSendState({
       draftId: null,
+      senderName: '',
       receiverName: '',
       content: '',
       images: [] as string[],

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,15 +294,16 @@ const SendContentPage = () => {
       console.log('임시 저장 조회 성공', response.data);
 
       console.log('상태 변경됨');
-      setLetterState({
+      setLetterState((prev) => ({
+        ...prev,
         draftId: response.data.draftKey,
         receiverName: response.data.receiverName,
         content: response.data.content,
         images: response.data.images,
         previewImages: response.data.images,
         templateType: 0,
         letterId: null
-      });
+      }));
 
       // 각 input 상태 업데이트
       setDraftId(response.data.draftKey);

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,15 +39,27 @@ const SendLayout = ({ children }: SendLayoutProps) => {
       </NavigatorBarWrapper>
       {current && (
         <ProgressBarWrapper>
-          <ProgressBar current={current} total={3} />
+          <ProgressBar current={current} total={isGuest ? 4 : 3} />
         </ProgressBarWrapper>
       )}
       {children}
     </Container>
   );
 };
 
-export default SendLayout;
+export default function SendLayouting({ children }: SendLayoutProps) {
+  return (
+    <Suspense
+      fallback={
+        <LoaderContainer>
+          <Loader />
+        </LoaderContainer>
+      }
+    >
+      <SendLayout>{children}</SendLayout>
+    </Suspense>
+  );
+}
 
 const Container = styled.div`
   width: 100%;

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<boolean>(false);
   const [letterCode, setLetterCode] = useState<string>('');
@@ -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
+            }
           >
             <Image
               src="/assets/icons/ic_kakao_talk.svg"

src/app/send/(process)/receiver/page.tsx

@@ -212,15 +212,16 @@ const SendReceiverPage = () => {
       console.log('임시 저장 조회 성공', response.data);
 
       console.log('상태 변경됨');
-      setLetterState({
+      setLetterState((prev) => ({
+        ...prev,
         draftId: response.data.draftKey,
         receiverName: response.data.receiverName,
         content: response.data.content,
         images: response.data.images,
         previewImages: response.data.images,
         templateType: 0,
         letterId: null
-      });
+      }));
 
       // 각 input 상태 업데이트
       setDraftId(response.data.draftKey);
@@ -250,7 +251,7 @@ const SendReceiverPage = () => {
       )}
       <Container>
         <Column>
-          <Label>편지를 받는 사람</Label>
+          <Label>{isGuest && 'To.'} 편지를 받는 사람</Label>
           <Input
             inputType="boxText"
             value={receiver}