From 3cba0be430d6b2b0e9f1d4060e81b1c005a48720 Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Sun, 18 May 2025 07:17:28 +0900
Subject: [PATCH 01/16] =?UTF-8?q?=E2=9C=A8=20feat(#170):=20=EB=B9=84?=
 =?UTF-8?q?=ED=9A=8C=EC=9B=90=20=ED=8E=B8=EC=A7=80=20=EC=A0=84=EC=86=A1=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC=20=EB=B0=8F=20UI=20=EB=B3=80=EA=B2=BD=20-=20?=
 =?UTF-8?q?isGuest=EB=A1=9C=20=EB=B9=84=ED=9A=8C=EC=9B=90=20Params=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC=20-=20UX=20=EB=9D=BC=EC=9D=B4=ED=8C=85=20con?=
 =?UTF-8?q?stants=EB=A1=9C=20=EA=B4=80=EB=A6=AC=20=EB=A6=AC=ED=8C=A9?=
 =?UTF-8?q?=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/login/page.tsx                   | 15 ++++----
 src/app/send/(process)/content/page.tsx  | 27 ++++++++------
 src/app/send/(process)/preview/page.tsx  | 45 ++++++++++++++----------
 src/app/send/(process)/receiver/page.tsx | 26 ++++++++------
 src/app/send/(process)/template/page.tsx | 10 ++++--
 src/app/send/complete/page.tsx           | 45 +++++++++++++++---------
 src/constants/send/message.ts            |  5 +++
 src/lib/.gitkeep                         |  0
 8 files changed, 109 insertions(+), 64 deletions(-)
 create mode 100644 src/constants/send/message.ts
 delete mode 100644 src/lib/.gitkeep

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 760717e3..f525a4e6 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -5,14 +5,17 @@ import OauthButton from '@/components/signup/OauthButton';
 import { OAUTH } from '@/constants/oauth';
 import { theme } from '@/styles/theme';
 import { OAuthType } from '@/types/login';
+import { useRouter } from 'next/navigation';
 import { Suspense } from 'react';
 import styled from 'styled-components';
 
-const notReady = () => {
-  alert('준비 중입니다.');
-};
-
 export default function Login() {
+  const router = useRouter();
+
+  const handleGuestLetterStart = () => {
+    router.push('/send/receiver?guest=true');
+  };
+
   return (
     <Container>
       <ImageWrapper>
@@ -38,8 +41,8 @@ export default function Login() {
             ))}
           </Suspense>
         </OauthWrapper>
-        <LetterBtnText onClick={notReady}>
-          로그인 없이 편지 작성해보기
+        <LetterBtnText onClick={handleGuestLetterStart}>
+          로그인 없이 편지 보내기
         </LetterBtnText>
       </ImageWrapper>
     </Container>
diff --git a/src/app/send/(process)/content/page.tsx b/src/app/send/(process)/content/page.tsx
index 486129c5..77eec3d0 100644
--- a/src/app/send/(process)/content/page.tsx
+++ b/src/app/send/(process)/content/page.tsx
@@ -5,7 +5,7 @@ import styled, { css } from 'styled-components';
 import { theme } from '@/styles/theme';
 import Input from '@/components/common/Input';
 import Button from '@/components/common/Button';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import Image from 'next/image';
 
 import {
@@ -22,11 +22,11 @@ import { useToast } from '@/hooks/useToast';
 import { postImage } from '@/api/image/image';
 import ConfirmModal from '@/components/common/ConfirmModal';
 import { draftModalState } from '@/recoil/draftStore';
-import imageCompression from 'browser-image-compression';
 import DraftButton from '@/components/draft/DraftButton';
 
 const SendContentPage = () => {
   const router = useRouter();
+  const searchParams = useSearchParams();
   const { showToast } = useToast();
   const [draftId, setDraftId] = useState<string | null>(null);
   const [receiver, setReceiver] = useState<string>('');
@@ -39,6 +39,8 @@ const SendContentPage = () => {
   const [isImageUploadLoading, setImageUploadLoading] =
     useState<boolean>(false); // 서버 이미지 업로드 상태
 
+  const isGuest = searchParams.get('guest') === 'true';
+
   const [draftModal, setDraftModal] = useRecoilState(draftModalState);
   const [letterState, setLetterState] = useRecoilState(sendLetterState);
   const [tempCount, setTempCount] = useState<number>(3);
@@ -81,7 +83,7 @@ const SendContentPage = () => {
       }
     };
 
-    fetchGetDraftCount();
+    if (!isGuest) fetchGetDraftCount();
 
     if (draftKey) {
       fetchGetDraft();
@@ -263,7 +265,8 @@ const SendContentPage = () => {
       images: images,
       previewImages: previewImages
     }));
-    router.push('/send/template');
+
+    router.push(`/send/template${isGuest ? '?guest=true' : ''}`);
   };
 
   /* 임시 저장 삭제 핸들러 */
@@ -317,13 +320,15 @@ const SendContentPage = () => {
 
   return (
     <>
-      <DraftButton
-        handleSaveLetter={handleSaveLetter}
-        handleDraftBottom={handleDraftBottom}
-        isDraftDisabled={isDraftDisabled}
-        isImageUploadLoading={isImageUploadLoading}
-        tempCount={tempCount}
-      />
+      {!isGuest && (
+        <DraftButton
+          handleSaveLetter={handleSaveLetter}
+          handleDraftBottom={handleDraftBottom}
+          isDraftDisabled={isDraftDisabled}
+          isImageUploadLoading={isImageUploadLoading}
+          tempCount={tempCount}
+        />
+      )}
       <Container>
         <div>
           <Label>
diff --git a/src/app/send/(process)/preview/page.tsx b/src/app/send/(process)/preview/page.tsx
index a285be9d..17abd001 100644
--- a/src/app/send/(process)/preview/page.tsx
+++ b/src/app/send/(process)/preview/page.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { theme } from '@/styles/theme';
 import Button from '@/components/common/Button';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import Image from 'next/image';
 import Letter from '@/components/letter/Letter';
 import { useRecoilState, useRecoilValue } from 'recoil';
@@ -16,6 +16,7 @@ import { getLetterShareStatus } from '@/api/letter/share';
 
 const SendPreviewPage = () => {
   const router = useRouter();
+  const searchParams = useSearchParams();
   const isKakaoLoaded = useKakaoSDK();
   const [letterState, setLetterState] = useRecoilState(sendLetterState);
   const { draftId, receiverName, content, images, templateType, letterId } =
@@ -28,6 +29,8 @@ const SendPreviewPage = () => {
   const [maxLinesPerPage, setMaxLinesPerPage] = useState(12);
   const [fontSize, setFontSize] = useState<string>('16px');
 
+  const isGuest = searchParams.get('guest') === 'true';
+
   useEffect(() => {
     setIsImage(!!!(content.length > 0));
   }, []);
@@ -76,33 +79,39 @@ const SendPreviewPage = () => {
     }
 
     try {
+      let letterCode = '';
       // 1. 편지 전송 API 요청
-      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);
+      if (isGuest) {
+        // 비회원 편지 저장 API 연동
+      } else {
+        const response = await postSendLtter({
+          draftId,
+          receiverName,
+          content,
+          images,
+          templateType
+        });
+        console.log('편지 쓰기 성공');
+        setLetterState((prevState) => ({
+          ...prevState,
+          letterId: response.data.letterCode
+        }));
+        letterCode = response.data.letterCode;
+        setLetterCode(response.data.letterCode);
+        console.log(response.data.letterCode);
+      }
 
       // 2. 카카오 공유 로직 실행 (letterId 상태와 무관하게 항상 실행)
       Kakao.Share.sendScrap({
         requestUrl: location.origin + location.pathname,
         templateId: 112798,
         templateArgs: {
-          senderName: name,
-          id: response.data.letterCode
+          senderName: isGuest ? receiverName + ' 님께' : name + ' 님으로부터',
+          id: letterCode
         },
         serverCallbackArgs: {
           requestType: 'SHARE',
-          requestId: response.data.letterCode
+          requestId: letterCode
         },
         // 카카오톡 미설치 시 카카오톡 설치 경로이동
         installTalk: true
diff --git a/src/app/send/(process)/receiver/page.tsx b/src/app/send/(process)/receiver/page.tsx
index 8ed92c89..98a90c9e 100644
--- a/src/app/send/(process)/receiver/page.tsx
+++ b/src/app/send/(process)/receiver/page.tsx
@@ -5,7 +5,7 @@ import styled, { css } from 'styled-components';
 import { theme } from '@/styles/theme';
 import Input from '@/components/common/Input';
 import Button from '@/components/common/Button';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 
 import {
   deleteDraftLetter,
@@ -26,6 +26,7 @@ import DraftButton from '@/components/draft/DraftButton';
 
 const SendReceiverPage = () => {
   const router = useRouter();
+  const searchParams = useSearchParams();
   const { showToast } = useToast();
   const [draftId, setDraftId] = useState<string | null>(null);
   const [receiver, setReceiver] = useState<string>('');
@@ -36,6 +37,8 @@ const SendReceiverPage = () => {
   const [isImageUploadLoading, setImageUploadLoading] =
     useState<boolean>(false); // 서버 이미지 업로드 상태
 
+  const isGuest = searchParams.get('guest') === 'true';
+
   const [draftModal, setDraftModal] = useRecoilState(draftModalState);
   const [letterState, setLetterState] = useRecoilState(sendLetterState);
   const [tempCount, setTempCount] = useState<number>(0);
@@ -81,7 +84,7 @@ const SendReceiverPage = () => {
       }
     };
 
-    fetchGetDraftCount();
+    if (!isGuest) fetchGetDraftCount();
 
     if (draftKey) {
       fetchGetDraft();
@@ -180,7 +183,8 @@ const SendReceiverPage = () => {
       images: images,
       previewImages: previewImages
     }));
-    router.push('/send/content');
+
+    router.push(`/send/content${isGuest ? '?guest=true' : ''}`);
   };
 
   /* 임시 저장 삭제 핸들러 */
@@ -234,13 +238,15 @@ const SendReceiverPage = () => {
 
   return (
     <>
-      <DraftButton
-        handleSaveLetter={handleSaveLetter}
-        handleDraftBottom={handleDraftBottom}
-        isDraftDisabled={isDraftDisabled}
-        isImageUploadLoading={isImageUploadLoading}
-        tempCount={tempCount}
-      />
+      {!isGuest && (
+        <DraftButton
+          handleSaveLetter={handleSaveLetter}
+          handleDraftBottom={handleDraftBottom}
+          isDraftDisabled={isDraftDisabled}
+          isImageUploadLoading={isImageUploadLoading}
+          tempCount={tempCount}
+        />
+      )}
       <Container>
         <Column>
           <Label>편지를 받는 사람</Label>
diff --git a/src/app/send/(process)/template/page.tsx b/src/app/send/(process)/template/page.tsx
index 2d3e00f3..e551af4f 100644
--- a/src/app/send/(process)/template/page.tsx
+++ b/src/app/send/(process)/template/page.tsx
@@ -1,10 +1,10 @@
 '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 Button from '@/components/common/Button';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import Letter from '@/components/letter/Letter';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { sendLetterState, useSsrComplectedState } from '@/recoil/letterStore';
@@ -13,6 +13,7 @@ import { ALL_TEMPLATES } from '@/constants/templates';
 
 const SendTemplatePage = () => {
   const router = useRouter();
+  const searchParams = useSearchParams();
   const { receiverName, content, images, templateType } =
     useRecoilValue(sendLetterState);
   const setSendLetterState = useSetRecoilState(sendLetterState);
@@ -23,6 +24,8 @@ const SendTemplatePage = () => {
     templateType || ALL_TEMPLATES[0]
   );
 
+  const isGuest = searchParams.get('guest') === 'true';
+
   /* SSR 완료 시 상태 업데이트 */
   const setSsrCompleted = useSsrComplectedState();
 
@@ -70,7 +73,8 @@ const SendTemplatePage = () => {
       ...prevState,
       templateType: template
     }));
-    router.push('/send/preview');
+
+    router.push(`/send/preview${isGuest ? '?guest=true' : ''}`);
   };
 
   return (
diff --git a/src/app/send/complete/page.tsx b/src/app/send/complete/page.tsx
index 99c8a03b..e0063ae0 100644
--- a/src/app/send/complete/page.tsx
+++ b/src/app/send/complete/page.tsx
@@ -1,19 +1,32 @@
-"use client";
+'use client';
 
-import Button from "@/components/common/Button";
-import { sendLetterState } from "@/recoil/letterStore";
-import { theme } from "@/styles/theme";
-import Image from "next/image";
-import { useRouter } from "next/navigation";
-import React from "react";
-import { useRecoilValue } from "recoil";
-import styled from "styled-components";
+import Button from '@/components/common/Button';
+import { SEND_COMPLETE_SUBTEXT } from '@/constants/send/message';
+import { sendLetterState } from '@/recoil/letterStore';
+import { theme } from '@/styles/theme';
+import Image from 'next/image';
+import { useRouter, useSearchParams } from 'next/navigation';
+import React, { useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import styled from 'styled-components';
 
 const SendCompletePage = () => {
   const router = useRouter();
-
+  const searchParams = useSearchParams();
+  const isGuest = searchParams.get('guest') === 'true';
   const { receiverName } = useRecoilValue(sendLetterState);
 
+  const subText = isGuest
+    ? SEND_COMPLETE_SUBTEXT.guest
+    : SEND_COMPLETE_SUBTEXT.member;
+
+  const handleComplete = () => {
+    if (isGuest) {
+    } else {
+      router.push('/planet');
+    }
+  };
+
   return (
     <Layout>
       <Container>
@@ -21,7 +34,7 @@ const SendCompletePage = () => {
           {receiverName}에게
           <br />
           편지를 전달했어요!
-          <Sub>레터링으로 편지에 담긴 진심을 수놓았어요</Sub>
+          <Sub>{subText}</Sub>
         </Title>
         <ImageWrapper>
           <Image src="/assets/send/send_complete.png" fill alt="편지" />
@@ -30,10 +43,10 @@ const SendCompletePage = () => {
       <ButtonWrapper>
         <Button
           buttonType="primary"
-          text="홈으로 돌아가기"
-          onClick={() => {
-            router.push("/planet");
-          }}
+          text={
+            isGuest ? '회원가입하고 더 많은 기능 이용하기' : '홈으로 돌아가기'
+          }
+          onClick={handleComplete}
         />
       </ButtonWrapper>
     </Layout>
@@ -53,7 +66,7 @@ const Layout = styled.div`
   overflow-x: hidden;
   padding-bottom: 40px;
   background: ${(props) => props.theme.colors.bg};
-  background-image: url("/assets/send/img_send_background.png");
+  background-image: url('/assets/send/img_send_background.png');
   background-size: cover;
   background-position: bottom 80px center;
   background-repeat: no-repeat;
diff --git a/src/constants/send/message.ts b/src/constants/send/message.ts
new file mode 100644
index 00000000..9ab923eb
--- /dev/null
+++ b/src/constants/send/message.ts
@@ -0,0 +1,5 @@
+export const SEND_COMPLETE_SUBTEXT = {
+  guest:
+    '레터링에 가입하면 편지를 보낼 뿐만 아니라\n받은 편지들도 나의 스페이스에 보관할 수 있어요',
+  member: '레터링으로 편지에 담긴 진심을 수놓았어요'
+};
\ No newline at end of file
diff --git a/src/lib/.gitkeep b/src/lib/.gitkeep
deleted file mode 100644
index e69de29b..00000000

From ec39eb03fd4ad80be338dff12ffc57a9e92bf612 Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Sun, 18 May 2025 09:46:39 +0900
Subject: [PATCH 02/16] =?UTF-8?q?=F0=9F=92=84=20design(#170):=20=ED=9A=8C?=
 =?UTF-8?q?=EC=9B=90=EA=B0=80=EC=9E=85=20BottomSheet=20UI=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20-=20=ED=8E=B8=EC=A7=80=20=EC=A0=84=EC=86=A1=20?=
 =?UTF-8?q?=ED=9B=84=20=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=EC=9C=A0?=
 =?UTF-8?q?=EB=8F=84=20BottomSheet=20=EC=B6=94=EA=B0=80=20-=20OauthButton?=
 =?UTF-8?q?=20shape=20props=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20list=20?=
 =?UTF-8?q?=EB=B2=84=EC=A0=84=20=EB=B2=84=ED=8A=BC=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/send/complete/page.tsx        | 129 ++++++++++++++++++++------
 src/components/signup/OauthButton.tsx |  50 +++++++---
 src/constants/oauth.ts                |  10 +-
 3 files changed, 146 insertions(+), 43 deletions(-)

diff --git a/src/app/send/complete/page.tsx b/src/app/send/complete/page.tsx
index e0063ae0..a744f14d 100644
--- a/src/app/send/complete/page.tsx
+++ b/src/app/send/complete/page.tsx
@@ -1,12 +1,16 @@
 'use client';
 
+import BottomSheet from '@/components/common/BottomSheet';
 import Button from '@/components/common/Button';
+import OauthButton from '@/components/signup/OauthButton';
+import { OAUTH } from '@/constants/oauth';
 import { SEND_COMPLETE_SUBTEXT } from '@/constants/send/message';
 import { sendLetterState } from '@/recoil/letterStore';
 import { theme } from '@/styles/theme';
+import { OAuthType } from '@/types/login';
 import Image from 'next/image';
 import { useRouter, useSearchParams } from 'next/navigation';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
 
@@ -15,41 +19,84 @@ const SendCompletePage = () => {
   const searchParams = useSearchParams();
   const isGuest = searchParams.get('guest') === 'true';
   const { receiverName } = useRecoilValue(sendLetterState);
+  const [isDisplayed, setIsDisplayed] = useState<boolean>(false);
+  const [isBottomUp, setIsBottomUp] = useState<boolean>(false);
 
   const subText = isGuest
     ? SEND_COMPLETE_SUBTEXT.guest
     : SEND_COMPLETE_SUBTEXT.member;
 
+  const handleBottomUpChange = (state: boolean) => {
+    setIsBottomUp(state);
+  };
+
+  useEffect(() => {
+    if (isBottomUp) {
+      setIsDisplayed(true);
+    } else {
+      setTimeout(() => {
+        setIsDisplayed(false);
+      }, 490);
+    }
+  }, [isBottomUp]);
+
   const handleComplete = () => {
     if (isGuest) {
+      setIsBottomUp(true);
     } else {
       router.push('/planet');
     }
   };
 
   return (
-    <Layout>
-      <Container>
-        <Title>
-          {receiverName}에게
-          <br />
-          편지를 전달했어요!
-          <Sub>{subText}</Sub>
-        </Title>
-        <ImageWrapper>
-          <Image src="/assets/send/send_complete.png" fill alt="편지" />
-        </ImageWrapper>
-      </Container>
-      <ButtonWrapper>
-        <Button
-          buttonType="primary"
-          text={
-            isGuest ? '회원가입하고 더 많은 기능 이용하기' : '홈으로 돌아가기'
-          }
-          onClick={handleComplete}
-        />
-      </ButtonWrapper>
-    </Layout>
+    <>
+      <Layout>
+        <Container>
+          <Title>
+            {receiverName}에게
+            <br />
+            편지를 전달했어요!
+            <Sub>{subText}</Sub>
+          </Title>
+          <ImageWrapper>
+            <Image src="/assets/send/send_complete.png" fill alt="편지" />
+          </ImageWrapper>
+        </Container>
+        <ButtonWrapper>
+          <Button
+            buttonType="primary"
+            text={
+              isGuest ? '회원가입하고 더 많은 기능 이용하기' : '홈으로 돌아가기'
+            }
+            onClick={handleComplete}
+          />
+        </ButtonWrapper>
+        {isDisplayed && (
+          <BottomSheet
+            height={290}
+            isOpen={isBottomUp}
+            handleOpen={handleBottomUpChange}
+          >
+            <BottomWrapper>
+              <SocialTitle>소셜로그인 선택</SocialTitle>
+              <LoginList>
+                {OAUTH.map((item) => (
+                  <OauthButton
+                    key={item.key}
+                    shape="list"
+                    loginType={item.key as OAuthType}
+                    bgColor={item.bgColor}
+                    icon={item.icon}
+                    size={item.miniSize}
+                    label={item.label}
+                  />
+                ))}
+              </LoginList>
+            </BottomWrapper>
+          </BottomSheet>
+        )}
+      </Layout>
+    </>
   );
 };
 
@@ -62,21 +109,23 @@ const Layout = styled.div`
   width: 100%;
   height: 100%;
   color: ${theme.colors.white};
-  padding: 76px 24px 54px 24px;
   overflow-x: hidden;
-  padding-bottom: 40px;
+  overflow-y: hidden;
   background: ${(props) => props.theme.colors.bg};
   background-image: url('/assets/send/img_send_background.png');
   background-size: cover;
   background-position: bottom 80px center;
   background-repeat: no-repeat;
   position: relative;
+  z-index: 0;
 `;
 
 const Container = styled.div`
   width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
+  padding: 76px 24px 54px 24px;
   gap: 80px;
 `;
 
@@ -105,16 +154,22 @@ const ImageWrapper = styled.div`
   align-items: center;
   justify-content: center;
 
+  @media (max-height: 680px) {
+    width: 400px;
+    height: 380px;
+    top: 55%;
+  }
+
   @media (max-height: 580px) {
     width: 350px;
     height: 340px;
-    top: 55%;
+    top: 58%;
   }
 
   @media (max-height: 550px) {
     width: 300px;
     height: 290px;
-    top: 55%;
+    top: 58%;
   }
 `;
 
@@ -128,3 +183,23 @@ const ButtonWrapper = styled.div`
   bottom: 54px;
   left: 0;
 `;
+
+const BottomWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 26px;
+`;
+
+const SocialTitle = styled.p`
+  color: ${theme.colors.gray100};
+  ${theme.fonts.title02};
+`;
+
+const LoginList = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0 14px;
+  gap: 24px;
+`;
diff --git a/src/components/signup/OauthButton.tsx b/src/components/signup/OauthButton.tsx
index d327a28d..fabd4c12 100644
--- a/src/components/signup/OauthButton.tsx
+++ b/src/components/signup/OauthButton.tsx
@@ -9,12 +9,14 @@ import { float } from '@/styles/animation';
 
 interface OauthButtonProps {
   loginType: OAuthType;
+  shape?: 'circle' | 'list';
   bgColor: string;
   icon: string;
   size: number;
+  label?: string;
 }
 const OauthButton = (props: OauthButtonProps) => {
-  const { loginType, bgColor, icon, size } = props;
+  const { loginType, shape = 'circle', bgColor, icon, size, label } = props;
 
   const searchParams = useSearchParams();
   const url = searchParams.get('url');
@@ -87,10 +89,21 @@ const OauthButton = (props: OauthButtonProps) => {
 
   return (
     <Wrapper>
-      {recentLogin === loginType && <Bubble>최근에 로그인했어요</Bubble>}
-      <SocialButton $bgColor={bgColor} onClick={handleLogin}>
-        <SocialIcon src={icon} width={size} height={size} alt={loginType} />
-      </SocialButton>
+      {shape === 'circle' && recentLogin === loginType && (
+        <Bubble>최근에 로그인했어요</Bubble>
+      )}
+      <Box onClick={handleLogin}>
+        <SocialButton $bgColor={bgColor} $shape={shape}>
+          <SocialIcon
+            src={icon}
+            width={size}
+            height={size}
+            $size={size}
+            alt={loginType}
+          />
+        </SocialButton>
+        {shape === 'list' && <ButtonLabel>{label}</ButtonLabel>}
+      </Box>
     </Wrapper>
   );
 };
@@ -98,17 +111,21 @@ const OauthButton = (props: OauthButtonProps) => {
 export default OauthButton;
 
 const Wrapper = styled.div`
-  width: 69px;
-  height: 69px;
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
 `;
 
-const SocialButton = styled.button<{ $bgColor: string }>`
-  width: 69px;
-  height: 69px;
+const Box = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 20px;
+`;
+
+const SocialButton = styled.div<{ $bgColor: string; $shape?: string }>`
+  width: ${({ $shape }) => ($shape === 'list' ? '31px' : '69px')};
+  height: ${({ $shape }) => ($shape === 'list' ? '31px' : '69px')};
   display: flex;
   justify-content: center;
   align-items: center;
@@ -119,10 +136,9 @@ const SocialButton = styled.button<{ $bgColor: string }>`
   transition: background-color 0.3s;
 `;
 
-const SocialIcon = styled(Image)`
-  width: 100%;
-  height: 100%;
-  padding: 0 16px;
+const SocialIcon = styled(Image)<{ $size: number }>`
+  width: ${({ $size }) => $size}px;
+  height: ${({ $size }) => $size}px;
   object-fit: contain;
 `;
 
@@ -153,3 +169,9 @@ const Bubble = styled.div`
     border-color: ${theme.colors.blue} transparent transparent transparent;
   }
 `;
+
+const ButtonLabel = styled.span`
+  margin-left: 12px;
+  color: ${theme.colors.white};
+  ${theme.fonts.body02};
+`;
diff --git a/src/constants/oauth.ts b/src/constants/oauth.ts
index dbbd033f..329d3517 100644
--- a/src/constants/oauth.ts
+++ b/src/constants/oauth.ts
@@ -4,20 +4,26 @@ export const OAUTH = [
     bgColor: '#03CF5D',
     icon: '/assets/icons/ic_naver.svg',
     size: 26,
-    profile: "/assets/icons/ic_naver.svg"
+    miniSize: 13,
+    profile: '/assets/icons/ic_naver.svg',
+    label: '네이버로 시작하기'
   },
   {
     key: 'google',
     bgColor: '#FFFFFF',
     icon: '/assets/icons/ic_google.svg',
     size: 32,
-    profile: "/assets/icons/ic_googler.svg"
+    miniSize: 16,
+    profile: '/assets/icons/ic_googler.svg',
+    label: '구글로 시작하기'
   },
   {
     key: 'kakao',
     bgColor: '#FEE500',
     icon: '/assets/icons/ic_kakaotalk.svg',
     size: 38,
+    miniSize: 18,
     profile: '/assets/icons/ic_kakao_profile.svg',
+    label: '카카오로 시작하기'
   }
 ];
\ No newline at end of file

From a35cf8714844a406d63ce98d47953f4e4b20a339 Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Sun, 18 May 2025 09:54:32 +0900
Subject: [PATCH 03/16] =?UTF-8?q?=F0=9F=92=84=20design(#170):=20=ED=8E=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=A0=84=EB=8B=AC=20=EC=99=84=EB=A3=8C=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=B9=84=ED=9A=8C=EC=9B=90=20=EB=82=98?=
 =?UTF-8?q?=EA=B0=80=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/assets/icons/ic_x.svg   |  6 ++++++
 src/app/send/complete/page.tsx | 18 ++++++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 public/assets/icons/ic_x.svg

diff --git a/public/assets/icons/ic_x.svg b/public/assets/icons/ic_x.svg
new file mode 100644
index 00000000..19337c66
--- /dev/null
+++ b/public/assets/icons/ic_x.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="fi:x">
+<path id="Vector" d="M18 6L6 18" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M6 6L18 18" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/src/app/send/complete/page.tsx b/src/app/send/complete/page.tsx
index a744f14d..85b8272b 100644
--- a/src/app/send/complete/page.tsx
+++ b/src/app/send/complete/page.tsx
@@ -51,6 +51,16 @@ const SendCompletePage = () => {
   return (
     <>
       <Layout>
+        {isGuest && (
+          <button onClick={() => router.push('/login')}>
+            <CloseIcon
+              src="/assets/icons/ic_x.svg"
+              width={24}
+              height={24}
+              alt="나가기"
+            />
+          </button>
+        )}
         <Container>
           <Title>
             {receiverName}에게
@@ -120,6 +130,14 @@ const Layout = styled.div`
   z-index: 0;
 `;
 
+const CloseIcon = styled(Image)`
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  top: 10px;
+  right: 17px;
+`;
+
 const Container = styled.div`
   width: 100%;
   height: 100%;

From 15367aa76e37780c793ca672d4e9928a44f35371 Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Sun, 18 May 2025 10:00:16 +0900
Subject: [PATCH 04/16] =?UTF-8?q?=F0=9F=92=84=20design(#170):=20=ED=8E=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=A0=84=EB=8B=AC=20=EC=99=84=EB=A3=8C=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20float=20=EC=95=A0=EB=8B=88=EB=A9=94?=
 =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/send/complete/page.tsx |  2 ++
 src/styles/animation.ts        | 12 ++++++++++++
 2 files changed, 14 insertions(+)

diff --git a/src/app/send/complete/page.tsx b/src/app/send/complete/page.tsx
index 85b8272b..3599ea9e 100644
--- a/src/app/send/complete/page.tsx
+++ b/src/app/send/complete/page.tsx
@@ -6,6 +6,7 @@ import OauthButton from '@/components/signup/OauthButton';
 import { OAUTH } from '@/constants/oauth';
 import { SEND_COMPLETE_SUBTEXT } from '@/constants/send/message';
 import { sendLetterState } from '@/recoil/letterStore';
+import { float, letterFloat } from '@/styles/animation';
 import { theme } from '@/styles/theme';
 import { OAuthType } from '@/types/login';
 import Image from 'next/image';
@@ -171,6 +172,7 @@ const ImageWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+  animation: ${letterFloat} 2s ease-in-out infinite;
 
   @media (max-height: 680px) {
     width: 400px;
diff --git a/src/styles/animation.ts b/src/styles/animation.ts
index e6800433..6a923a71 100644
--- a/src/styles/animation.ts
+++ b/src/styles/animation.ts
@@ -22,4 +22,16 @@ export const float = keyframes`
   100% {
     transform: translate(-50%, 0);
   }
+`;
+
+export const letterFloat = keyframes`
+   0% {
+      transform: translate(-50%, -48%);
+    }
+    50% {
+      transform: translate(-50%, -52%);
+    }
+    100% {
+      transform: translate(-50%, -48%);
+    }
 `;
\ No newline at end of file

From 4eca67d3a7e2170cf676ba782cdb9eeff4246a99 Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Sun, 18 May 2025 10:06:36 +0900
Subject: [PATCH 05/16] =?UTF-8?q?=E2=9C=A8=20feat(#170):=20/=20=EB=A3=A8?=
 =?UTF-8?q?=ED=8A=B8=20=EA=B2=BD=EB=A1=9C=20=EB=A1=9C=EB=94=A9=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/page.tsx | 52 ++++++++++--------------------------------------
 1 file changed, 11 insertions(+), 41 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2864ffb4..4672611e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,19 +1,10 @@
-"use client";
+'use client';
 
-import { getAllSpaceName, getNewTokens } from "@/api/login/user";
-import Button from "@/components/common/Button";
-import KakaoShareButton from "@/components/common/KakaoShareButton";
-import Loader from "@/components/common/Loader";
-import {
-  clearInitUserToast,
-  clearTokens,
-  getAccessToken,
-  getCookie,
-  setCookie,
-} from "@/utils/storage";
-import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import styled from "styled-components";
+import Loader, { LoaderContainer } from '@/components/common/Loader';
+import { getAccessToken } from '@/utils/storage';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
 
 export default function Home() {
   const router = useRouter();
@@ -21,22 +12,17 @@ export default function Home() {
 
   useEffect(() => {
     if (!accessToken) {
-      router.push("/login");
+      router.push('/login');
     } else {
-      router.push("/planet");
+      router.push('/planet');
     }
   }, []);
 
   return (
     <Container>
-      {/* <ButtonContainer>
-        <Button
-          buttonType="primary"
-          text="로그아웃하기"
-          onClick={handleLogout}
-        ></Button>
-        <KakaoShareButton letterId="aa" />
-      </ButtonContainer> */}
+      <LoaderContainer>
+        <Loader />
+      </LoaderContainer>
     </Container>
   );
 }
@@ -49,19 +35,3 @@ const Container = styled.div`
   padding: 25px;
   background: ${(props) => props.theme.colors.bg};
 `;
-
-const LoaderContainer = styled.div`
-  width: 100%;
-  height: 100%;
-  min-height: 600px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const ButtonContainer = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-`;

From 828e761f0e09daa14476ecf8ac445921460a3c2e Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Sun, 18 May 2025 10:07:06 +0900
Subject: [PATCH 06/16] =?UTF-8?q?=E2=9C=A8=20feat(#170):=20=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=ED=8E=B8=EC=A7=80=20=EC=A0=84=EC=86=A1=20store=20?=
 =?UTF-8?q?=EC=B4=88=EA=B8=B0=ED=99=94=20(=EB=B9=84=ED=9A=8C=EC=9B=90?=
 =?UTF-8?q?=EC=9A=A9)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/login/page.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index f525a4e6..6057c892 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -3,14 +3,30 @@
 import Loader, { LoaderContainer } from '@/components/common/Loader';
 import OauthButton from '@/components/signup/OauthButton';
 import { OAUTH } from '@/constants/oauth';
+import { sendLetterState } from '@/recoil/letterStore';
 import { theme } from '@/styles/theme';
 import { OAuthType } from '@/types/login';
 import { useRouter } from 'next/navigation';
-import { Suspense } from 'react';
+import { Suspense, useEffect } from 'react';
+import { useRecoilState } from 'recoil';
 import styled from 'styled-components';
 
 export default function Login() {
   const router = useRouter();
+  const [, setSendState] = useRecoilState(sendLetterState);
+
+  /* 로그인 페이지에서 편지 쓰기 store 초기화 */
+  useEffect(() => {
+    setSendState({
+      draftId: null,
+      receiverName: '',
+      content: '',
+      images: [] as string[],
+      previewImages: [] as string[],
+      templateType: 0,
+      letterId: null
+    });
+  }, []);
 
   const handleGuestLetterStart = () => {
     router.push('/send/receiver?guest=true');

From ef40d782610846ab626d7c4d902bed16aba19913 Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Sun, 18 May 2025 10:20:07 +0900
Subject: [PATCH 07/16] =?UTF-8?q?=F0=9F=90=9B=20fix(#170):=20=ED=8E=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=A0=84=EC=86=A1=20=EB=8B=A8=EA=B3=84=20Suspense?=
 =?UTF-8?q?=EB=A1=9C=20=EB=A1=9C=EB=94=A9=20=EC=83=81=ED=83=9C=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B3=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/send/(process)/content/page.tsx  | 17 +++++++++++++++--
 src/app/send/(process)/preview/page.tsx  | 17 +++++++++++++++--
 src/app/send/(process)/receiver/page.tsx | 17 +++++++++++++++--
 src/app/send/(process)/template/page.tsx | 17 +++++++++++++++--
 src/app/send/complete/page.tsx           | 17 +++++++++++++++--
 5 files changed, 75 insertions(+), 10 deletions(-)

diff --git a/src/app/send/(process)/content/page.tsx b/src/app/send/(process)/content/page.tsx
index 77eec3d0..1672bf32 100644
--- a/src/app/send/(process)/content/page.tsx
+++ b/src/app/send/(process)/content/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { theme } from '@/styles/theme';
 import Input from '@/components/common/Input';
@@ -23,6 +23,7 @@ import { postImage } from '@/api/image/image';
 import ConfirmModal from '@/components/common/ConfirmModal';
 import { draftModalState } from '@/recoil/draftStore';
 import DraftButton from '@/components/draft/DraftButton';
+import Loader, { LoaderContainer } from '@/components/common/Loader';
 
 const SendContentPage = () => {
   const router = useRouter();
@@ -425,7 +426,19 @@ const SendContentPage = () => {
   );
 };
 
-export default SendContentPage;
+export default function SendContentPaging() {
+  return (
+    <Suspense
+      fallback={
+        <LoaderContainer>
+          <Loader />
+        </LoaderContainer>
+      }
+    >
+      <SendContentPage />
+    </Suspense>
+  );
+}
 
 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 17abd001..a953f607 100644
--- a/src/app/send/(process)/preview/page.tsx
+++ b/src/app/send/(process)/preview/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { theme } from '@/styles/theme';
 import Button from '@/components/common/Button';
@@ -13,6 +13,7 @@ import { sendLetterState } from '@/recoil/letterStore';
 import useKakaoSDK from '@/hooks/useKakaoSDK';
 import { userState } from '@/recoil/userStore';
 import { getLetterShareStatus } from '@/api/letter/share';
+import Loader, { LoaderContainer } from '@/components/common/Loader';
 
 const SendPreviewPage = () => {
   const router = useRouter();
@@ -205,7 +206,19 @@ const SendPreviewPage = () => {
   );
 };
 
-export default SendPreviewPage;
+export default function SendPreviewPaging() {
+  return (
+    <Suspense
+      fallback={
+        <LoaderContainer>
+          <Loader />
+        </LoaderContainer>
+      }
+    >
+      <SendPreviewPage />
+    </Suspense>
+  );
+}
 
 const Container = styled.div`
   width: 100%;
diff --git a/src/app/send/(process)/receiver/page.tsx b/src/app/send/(process)/receiver/page.tsx
index 98a90c9e..ab54e8d5 100644
--- a/src/app/send/(process)/receiver/page.tsx
+++ b/src/app/send/(process)/receiver/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { theme } from '@/styles/theme';
 import Input from '@/components/common/Input';
@@ -23,6 +23,7 @@ import { draftModalState } from '@/recoil/draftStore';
 import BottomSheet from '@/components/common/BottomSheet';
 import { checkKorean } from '@/utils/checkKorean';
 import DraftButton from '@/components/draft/DraftButton';
+import Loader, { LoaderContainer } from '@/components/common/Loader';
 
 const SendReceiverPage = () => {
   const router = useRouter();
@@ -307,7 +308,19 @@ const SendReceiverPage = () => {
   );
 };
 
-export default SendReceiverPage;
+export default function SendReceiverPaging() {
+  return (
+    <Suspense
+      fallback={
+        <LoaderContainer>
+          <Loader />
+        </LoaderContainer>
+      }
+    >
+      <SendReceiverPage />
+    </Suspense>
+  );
+}
 
 const Container = styled.div`
   width: 100%;
diff --git a/src/app/send/(process)/template/page.tsx b/src/app/send/(process)/template/page.tsx
index e551af4f..19962703 100644
--- a/src/app/send/(process)/template/page.tsx
+++ b/src/app/send/(process)/template/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { theme } from '@/styles/theme';
 import Button from '@/components/common/Button';
@@ -10,6 +10,7 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { sendLetterState, useSsrComplectedState } from '@/recoil/letterStore';
 import LetterTemplateList from '@/components/letter/LetterTemplateList';
 import { ALL_TEMPLATES } from '@/constants/templates';
+import Loader, { LoaderContainer } from '@/components/common/Loader';
 
 const SendTemplatePage = () => {
   const router = useRouter();
@@ -123,7 +124,19 @@ const SendTemplatePage = () => {
   );
 };
 
-export default SendTemplatePage;
+export default function SendTemplatePaging() {
+  return (
+    <Suspense
+      fallback={
+        <LoaderContainer>
+          <Loader />
+        </LoaderContainer>
+      }
+    >
+      <SendTemplatePage />
+    </Suspense>
+  );
+}
 
 const Container = styled.div`
   width: 100%;
diff --git a/src/app/send/complete/page.tsx b/src/app/send/complete/page.tsx
index 3599ea9e..cc7e13ef 100644
--- a/src/app/send/complete/page.tsx
+++ b/src/app/send/complete/page.tsx
@@ -2,6 +2,7 @@
 
 import BottomSheet from '@/components/common/BottomSheet';
 import Button from '@/components/common/Button';
+import Loader, { LoaderContainer } from '@/components/common/Loader';
 import OauthButton from '@/components/signup/OauthButton';
 import { OAUTH } from '@/constants/oauth';
 import { SEND_COMPLETE_SUBTEXT } from '@/constants/send/message';
@@ -11,7 +12,7 @@ import { theme } from '@/styles/theme';
 import { OAuthType } from '@/types/login';
 import Image from 'next/image';
 import { useRouter, useSearchParams } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
 
@@ -111,7 +112,19 @@ const SendCompletePage = () => {
   );
 };
 
-export default SendCompletePage;
+export default function SendCompletePaging() {
+  return (
+    <Suspense
+      fallback={
+        <LoaderContainer>
+          <Loader />
+        </LoaderContainer>
+      }
+    >
+      <SendCompletePage />
+    </Suspense>
+  );
+}
 
 const Layout = styled.div`
   display: flex;

From 15d879bc32b435fc13c842789189d511be981be8 Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Sun, 18 May 2025 21:24:32 +0900
Subject: [PATCH 08/16] =?UTF-8?q?=E2=9C=A8=20feat(#170):=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=97=85=EB=A1=9C=EB=93=9C=20API=EC=97=90?=
 =?UTF-8?q?=20=EB=B9=84=EC=9D=B8=EC=A6=9D=20=EC=9A=94=EC=B2=AD=20=ED=97=88?=
 =?UTF-8?q?=EC=9A=A9=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/image/image.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/api/image/image.tsx b/src/api/image/image.tsx
index c19f84c1..52482927 100644
--- a/src/api/image/image.tsx
+++ b/src/api/image/image.tsx
@@ -1,12 +1,12 @@
-import { authClient } from "../client";
+import client from '../client';
 
 export const postImage = async (imageFile: File) => {
   const formData = new FormData();
-  formData.append("image", imageFile);
+  formData.append('image', imageFile);
 
-  return await authClient.post("/api/v1/images", formData, {
+  return await client.post('/api/v1/images', formData, {
     headers: {
-      "Content-Type": "multipart/form-data",
-    },
+      'Content-Type': 'multipart/form-data'
+    }
   });
 };

From 624d9f493db85cf0ed241f179a6002e626548635 Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Sun, 18 May 2025 21:25:24 +0900
Subject: [PATCH 09/16] =?UTF-8?q?=E2=9C=A8=20feat(#170):=20=EB=B9=84?=
 =?UTF-8?q?=ED=9A=8C=EC=9B=90=20=ED=8E=B8=EC=A7=80=20=EC=93=B0=EA=B8=B0=20?=
 =?UTF-8?q?API=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/send/send.tsx                   | 24 ++++++++++++++++++++++--
 src/app/send/(process)/preview/page.tsx | 17 ++++++++++++++---
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/api/send/send.tsx b/src/api/send/send.tsx
index da3b3a0b..8e051c9d 100644
--- a/src/api/send/send.tsx
+++ b/src/api/send/send.tsx
@@ -1,7 +1,7 @@
-import { authClient } from '@/api/client';
+import client, { authClient } from '@/api/client';
 
 // 편지 쓰기
-export const postSendLtter = async ({
+export const postSendLetter = async ({
   receiverName,
   content,
   images,
@@ -22,3 +22,23 @@ export const postSendLtter = async ({
     draftId
   });
 };
+
+// 비회원 편지 쓰기
+export const postAnonymousSendLetter = async ({
+  receiverName,
+  content,
+  images,
+  templateType
+}: {
+  receiverName: string;
+  content: string;
+  images: string[];
+  templateType: number;
+}) => {
+  return await client.post(`/api/v1/letters/anonymous/send`, {
+    receiverName,
+    content,
+    images,
+    templateType
+  });
+};
diff --git a/src/app/send/(process)/preview/page.tsx b/src/app/send/(process)/preview/page.tsx
index a953f607..23405b89 100644
--- a/src/app/send/(process)/preview/page.tsx
+++ b/src/app/send/(process)/preview/page.tsx
@@ -8,7 +8,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import Image from 'next/image';
 import Letter from '@/components/letter/Letter';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { postSendLtter } from '@/api/send/send';
+import { postAnonymousSendLetter, postSendLetter } from '@/api/send/send';
 import { sendLetterState } from '@/recoil/letterStore';
 import useKakaoSDK from '@/hooks/useKakaoSDK';
 import { userState } from '@/recoil/userStore';
@@ -84,8 +84,20 @@ const SendPreviewPage = () => {
       // 1. 편지 전송 API 요청
       if (isGuest) {
         // 비회원 편지 저장 API 연동
+        const response = await postAnonymousSendLetter({
+          receiverName,
+          content,
+          images,
+          templateType
+        });
+        setLetterState((prevState) => ({
+          ...prevState,
+          letterId: response.data.letterCode
+        }));
+        letterCode = response.data.letterCode;
+        setLetterCode(response.data.letterCode);
       } else {
-        const response = await postSendLtter({
+        const response = await postSendLetter({
           draftId,
           receiverName,
           content,
@@ -99,7 +111,6 @@ const SendPreviewPage = () => {
         }));
         letterCode = response.data.letterCode;
         setLetterCode(response.data.letterCode);
-        console.log(response.data.letterCode);
       }
 
       // 2. 카카오 공유 로직 실행 (letterId 상태와 무관하게 항상 실행)

From 844b20a2cf0759a78ffa4086d2124167f0be7765 Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Sun, 18 May 2025 21:52:36 +0900
Subject: [PATCH 10/16] =?UTF-8?q?=E2=9C=A8=20feat(#170):=20=ED=9A=8C?=
 =?UTF-8?q?=EC=9B=90=EA=B0=80=EC=9E=85=20API=EC=97=90=20letterCode=20?=
 =?UTF-8?q?=EC=A0=84=EB=8B=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/login/user.tsx        |  6 ++++--
 src/app/signup/step2/page.tsx | 10 ++++++++--
 src/types/user.tsx            |  1 +
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/api/login/user.tsx b/src/api/login/user.tsx
index b8788c4e..685fed77 100644
--- a/src/api/login/user.tsx
+++ b/src/api/login/user.tsx
@@ -15,14 +15,16 @@ export const signup = async ({
   servicePermission,
   privatePermission,
   marketingPermission,
-  realName
+  realName,
+  anonymousSendLetterCode
 }: RegisterDataType) => {
   return await client.post(`/api/v1/users`, {
     registerToken: registerToken,
     servicePermission: servicePermission,
     privatePermission: privatePermission,
     marketingPermission: marketingPermission,
-    realName: realName
+    realName: realName,
+    anonymousSendLetterCode: anonymousSendLetterCode
   });
 };
 
diff --git a/src/app/signup/step2/page.tsx b/src/app/signup/step2/page.tsx
index 0f5c1c90..2c7fe08f 100644
--- a/src/app/signup/step2/page.tsx
+++ b/src/app/signup/step2/page.tsx
@@ -13,7 +13,11 @@ import { Suspense, useState } from 'react';
 import Loader, { LoaderContainer } from '@/components/common/Loader';
 import { signupState, userInfo } from '@/recoil/signupStore';
 import { signup } from '@/api/login/user';
-import { setTokens } from '@/utils/storage';
+import {
+  clearAnonymousSendLetterCode,
+  getAnonymousSendLetterCode,
+  setTokens
+} from '@/utils/storage';
 import { useToast } from '@/hooks/useToast';
 import { checkKorean } from '@/utils/checkKorean';
 
@@ -59,11 +63,13 @@ const SignupStep2 = () => {
       privatePermission: user.privatePermission,
       servicePermission: user.servicePermission,
       marketingPermission: user.marketingPermission,
-      realName: name
+      realName: name,
+      anonymousSendLetterCode: getAnonymousSendLetterCode() || null
     })
       .then((res) => {
         console.log('accessToken', res.data.accessToken);
         setTokens(res.data.accessToken, res.data.refreshToken);
+        clearAnonymousSendLetterCode();
         if (url) {
           router.push(`/signup/complete?url=${url}`);
         } else {
diff --git a/src/types/user.tsx b/src/types/user.tsx
index 4f99444f..5ad41369 100644
--- a/src/types/user.tsx
+++ b/src/types/user.tsx
@@ -4,4 +4,5 @@ export interface RegisterDataType {
   privatePermission: boolean;
   marketingPermission: boolean;
   realName: string;
+  anonymousSendLetterCode: string | null;
 }

From 37ef5ea2f85154070b9a1897f9f531d8c5e5e35d Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Sun, 18 May 2025 21:53:22 +0900
Subject: [PATCH 11/16] =?UTF-8?q?=E2=9C=A8=20feat(#170):=20anonymousSendLe?=
 =?UTF-8?q?tterCode=20=EA=B4=80=EB=A0=A8=20=EB=A1=9C=EC=BB=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=86=A0=EB=A6=AC=EC=A7=80=20=ED=95=A8=EC=88=98=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/login/page.tsx                  |  2 ++
 src/app/page.tsx                        |  2 +-
 src/app/send/(process)/preview/page.tsx |  2 ++
 src/app/send/complete/page.tsx          | 10 ++++++++--
 src/utils/storage.ts                    | 18 ++++++++++++++++++
 5 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 6057c892..72c777f2 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -6,6 +6,7 @@ import { OAUTH } from '@/constants/oauth';
 import { sendLetterState } from '@/recoil/letterStore';
 import { theme } from '@/styles/theme';
 import { OAuthType } from '@/types/login';
+import { clearAnonymousSendLetterCode } from '@/utils/storage';
 import { useRouter } from 'next/navigation';
 import { Suspense, useEffect } from 'react';
 import { useRecoilState } from 'recoil';
@@ -17,6 +18,7 @@ export default function Login() {
 
   /* 로그인 페이지에서 편지 쓰기 store 초기화 */
   useEffect(() => {
+    clearAnonymousSendLetterCode();
     setSendState({
       draftId: null,
       receiverName: '',
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4672611e..6e09152e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,7 +3,7 @@
 import Loader, { LoaderContainer } from '@/components/common/Loader';
 import { getAccessToken } from '@/utils/storage';
 import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import styled from 'styled-components';
 
 export default function Home() {
diff --git a/src/app/send/(process)/preview/page.tsx b/src/app/send/(process)/preview/page.tsx
index 23405b89..bca587fb 100644
--- a/src/app/send/(process)/preview/page.tsx
+++ b/src/app/send/(process)/preview/page.tsx
@@ -14,6 +14,7 @@ import useKakaoSDK from '@/hooks/useKakaoSDK';
 import { userState } from '@/recoil/userStore';
 import { getLetterShareStatus } from '@/api/letter/share';
 import Loader, { LoaderContainer } from '@/components/common/Loader';
+import { setAnonymousSendLetterCode } from '@/utils/storage';
 
 const SendPreviewPage = () => {
   const router = useRouter();
@@ -96,6 +97,7 @@ const SendPreviewPage = () => {
         }));
         letterCode = response.data.letterCode;
         setLetterCode(response.data.letterCode);
+        setAnonymousSendLetterCode(response.data.letterCode);
       } else {
         const response = await postSendLetter({
           draftId,
diff --git a/src/app/send/complete/page.tsx b/src/app/send/complete/page.tsx
index cc7e13ef..14660514 100644
--- a/src/app/send/complete/page.tsx
+++ b/src/app/send/complete/page.tsx
@@ -7,9 +7,10 @@ import OauthButton from '@/components/signup/OauthButton';
 import { OAUTH } from '@/constants/oauth';
 import { SEND_COMPLETE_SUBTEXT } from '@/constants/send/message';
 import { sendLetterState } from '@/recoil/letterStore';
-import { float, letterFloat } from '@/styles/animation';
+import { letterFloat } from '@/styles/animation';
 import { theme } from '@/styles/theme';
 import { OAuthType } from '@/types/login';
+import { clearAnonymousSendLetterCode } from '@/utils/storage';
 import Image from 'next/image';
 import { useRouter, useSearchParams } from 'next/navigation';
 import React, { Suspense, useEffect, useState } from 'react';
@@ -50,11 +51,16 @@ const SendCompletePage = () => {
     }
   };
 
+  const handleExit = () => {
+    router.push('/login');
+    clearAnonymousSendLetterCode();
+  };
+
   return (
     <>
       <Layout>
         {isGuest && (
-          <button onClick={() => router.push('/login')}>
+          <button onClick={handleExit}>
             <CloseIcon
               src="/assets/icons/ic_x.svg"
               width={24}
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
index 7324835a..7909c69b 100644
--- a/src/utils/storage.ts
+++ b/src/utils/storage.ts
@@ -116,6 +116,24 @@ export const setInitUserToast = () => {
   }
 };
 
+/* anonymousSendLetterCode */
+export const setAnonymousSendLetterCode = (anonymousSendLetterCode: string) => {
+  if (typeof window !== 'undefined') {
+    localStorage.setItem('letterCode', anonymousSendLetterCode);
+  }
+};
+
+export const getAnonymousSendLetterCode = () => {
+  if (typeof window !== 'undefined') {
+    return localStorage.getItem('anonymousSendLetterCode');
+  }
+  return null;
+};
+
+export const clearAnonymousSendLetterCode = () => {
+  localStorage.removeItem('anonymousSendLetterCode');
+};
+
 export const getInitUserToast = (): string | null => {
   if (typeof window !== "undefined") {
     return sessionStorage.getItem("initUserToast");

From bc4e3ef8f021ae38b9221362999eca57c851b077 Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Sun, 18 May 2025 21:53:44 +0900
Subject: [PATCH 12/16] =?UTF-8?q?=E2=9C=A8=20feat(#170):=20=ED=8E=B8?=
 =?UTF-8?q?=EC=A7=80=20=EA=B3=B5=EC=9C=A0=20=EC=83=81=ED=83=9C=20=EC=A1=B0?=
 =?UTF-8?q?=ED=9A=8C=20API=EC=97=90=20=EB=B9=84=EC=9D=B8=EC=A6=9D=20?=
 =?UTF-8?q?=EC=9A=94=EC=B2=AD=20=ED=97=88=EC=9A=A9=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/letter/share.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/api/letter/share.tsx b/src/api/letter/share.tsx
index 351635fd..58f653cc 100644
--- a/src/api/letter/share.tsx
+++ b/src/api/letter/share.tsx
@@ -1,20 +1,20 @@
-import { authClient } from "../client";
+import client, { authClient } from '../client';
 
 export const getLetterShareStatus = async (
   letterCode: string
 ): Promise<ShareStatusData> => {
-  const response = await authClient.get(
+  const response = await client.get(
     `/api/v1/letters/logs/share/status?letterCode=${letterCode}`
   );
   return response.data;
 };
 
 export type shareStatusType =
-  | "MEMO_CHAT"
-  | "DIRECT_CHAT"
-  | "MULTI_CHAT"
-  | "OPEN_DIRECT_CHAT"
-  | "OPEN_MULTI_CHAT";
+  | 'MEMO_CHAT'
+  | 'DIRECT_CHAT'
+  | 'MULTI_CHAT'
+  | 'OPEN_DIRECT_CHAT'
+  | 'OPEN_MULTI_CHAT';
 
 export type ShareStatusData = {
   isShared: boolean;

From c753bc8fae25678c0228169033cecc1946116a32 Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Mon, 19 May 2025 00:35:28 +0900
Subject: [PATCH 13/16] =?UTF-8?q?=F0=9F=90=9B=20fix(#170):=20=EA=B5=AC?=
 =?UTF-8?q?=EA=B8=80=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=98=A4=ED=83=80=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=B0=8F=20localStorage=20=EB=B3=80?=
 =?UTF-8?q?=EC=88=98=EB=AA=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/oauth.ts | 2 +-
 src/utils/storage.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/constants/oauth.ts b/src/constants/oauth.ts
index 329d3517..12c292c4 100644
--- a/src/constants/oauth.ts
+++ b/src/constants/oauth.ts
@@ -14,7 +14,7 @@ export const OAUTH = [
     icon: '/assets/icons/ic_google.svg',
     size: 32,
     miniSize: 16,
-    profile: '/assets/icons/ic_googler.svg',
+    profile: '/assets/icons/ic_google.svg',
     label: '구글로 시작하기'
   },
   {
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
index 7909c69b..4ce8745f 100644
--- a/src/utils/storage.ts
+++ b/src/utils/storage.ts
@@ -119,7 +119,7 @@ export const setInitUserToast = () => {
 /* anonymousSendLetterCode */
 export const setAnonymousSendLetterCode = (anonymousSendLetterCode: string) => {
   if (typeof window !== 'undefined') {
-    localStorage.setItem('letterCode', anonymousSendLetterCode);
+    localStorage.setItem('anonymousSendLetterCode', anonymousSendLetterCode);
   }
 };
 

From 6cdcae78b8d24cb6275b7302b67c5c509f026035 Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Mon, 19 May 2025 00:36:10 +0900
Subject: [PATCH 14/16] =?UTF-8?q?=F0=9F=90=9B=20fix(#170):=20=ED=8E=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=A0=84=EC=86=A1=20=EC=99=84=EB=A3=8C=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EB=9D=BC=EC=9A=B0=ED=84=B0=20?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=99=20=EC=8B=9C=20isGuest=20=EC=97=AC=EB=B6=80?=
 =?UTF-8?q?=20params=20=EC=A0=84=EB=8B=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/send/(process)/preview/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/send/(process)/preview/page.tsx b/src/app/send/(process)/preview/page.tsx
index bca587fb..b65c8920 100644
--- a/src/app/send/(process)/preview/page.tsx
+++ b/src/app/send/(process)/preview/page.tsx
@@ -148,7 +148,7 @@ const SendPreviewPage = () => {
           console.log(status);
           if (status.isShared) {
             console.log('완료');
-            router.push('/send/complete');
+            router.push(`/send/complete${isGuest ? '?guest=true' : ''}`);
             clearInterval(interval); // 폴링 중단
           }
         } catch (error) {

From 6d9e21939d67f6aa3674909bf1f7ee6ac78e8647 Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Mon, 19 May 2025 00:37:01 +0900
Subject: [PATCH 15/16] =?UTF-8?q?=F0=9F=90=9B=20fix(#170):=20useEffect=20?=
 =?UTF-8?q?=EC=95=88=EC=97=90=EC=84=9C=20letterCode=20=EA=B0=92=20?=
 =?UTF-8?q?=EA=B0=80=EC=A0=B8=EC=98=A4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/signup/step2/page.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/app/signup/step2/page.tsx b/src/app/signup/step2/page.tsx
index 2c7fe08f..1617fbd9 100644
--- a/src/app/signup/step2/page.tsx
+++ b/src/app/signup/step2/page.tsx
@@ -34,6 +34,13 @@ const SignupStep2 = () => {
   const searchParams = useSearchParams();
   const url = searchParams.get('url');
 
+  const [anonymousCode, setAnonymousCode] = useState<string | null>(null);
+
+  useEffect(() => {
+    const code = getAnonymousSendLetterCode();
+    setAnonymousCode(code);
+  }, []);
+
   const handleButtonClick = () => {
     if (canSignin()) {
       setIsBottomUp(true);
@@ -64,7 +71,7 @@ const SignupStep2 = () => {
       servicePermission: user.servicePermission,
       marketingPermission: user.marketingPermission,
       realName: name,
-      anonymousSendLetterCode: getAnonymousSendLetterCode() || null
+      anonymousSendLetterCode: anonymousCode
     })
       .then((res) => {
         console.log('accessToken', res.data.accessToken);

From f10adf11ec4591b0beb07d61abf51ebcfaaa3776 Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Mon, 19 May 2025 00:45:15 +0900
Subject: [PATCH 16/16] =?UTF-8?q?=F0=9F=90=9B=20fix(#170):=20=ED=8E=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=97=B4=EB=9E=8C=20=EC=9C=84=ED=95=B4=20=ED=9A=8C?=
 =?UTF-8?q?=EC=9B=90=EA=B0=80=EC=9E=85=ED=95=98=EB=8A=94=20=EA=B2=BD?=
 =?UTF-8?q?=EC=9A=B0=20anonymousSendLetterCode=20=EA=B0=92=20null=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/verify/page.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/verify/page.tsx b/src/app/verify/page.tsx
index 66106900..b451483c 100644
--- a/src/app/verify/page.tsx
+++ b/src/app/verify/page.tsx
@@ -26,7 +26,8 @@ const Verify = () => {
       privatePermission: user.privatePermission,
       servicePermission: user.servicePermission,
       marketingPermission: user.marketingPermission,
-      realName: name
+      realName: name,
+      anonymousSendLetterCode: null
     })
       .then((res) => {
         console.log('accessToken', res.data.accessToken);