✨ feat(#170): anonymousSendLetterCode 관련 로컬스토리지 함수 추가

Author: yyypearl

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: '',

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() {

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,

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}

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");