Merge pull request #171 from ASAP-Lettering/feat/#170

[Feat] 비회원 편지 전송

Author: hyo-4

public/assets/icons/ic_x.svg

@@ -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'
+    }
   });
 };

src/api/image/image.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;

src/api/letter/share.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
   });
 };
 

src/api/login/user.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
+  });
+};

src/api/send/send.tsx

@@ -3,16 +3,37 @@
 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 { Suspense } from 'react';
+import { clearAnonymousSendLetterCode } from '@/utils/storage';
+import { useRouter } from 'next/navigation';
+import { Suspense, useEffect } from 'react';
+import { useRecoilState } from 'recoil';
 import styled from 'styled-components';
 
-const notReady = () => {
-  alert('준비 중입니다.');
-};
-
 export default function Login() {
+  const router = useRouter();
+  const [, setSendState] = useRecoilState(sendLetterState);
+
+  /* 로그인 페이지에서 편지 쓰기 store 초기화 */
+  useEffect(() => {
+    clearAnonymousSendLetterCode();
+    setSendState({
+      draftId: null,
+      receiverName: '',
+      content: '',
+      images: [] as string[],
+      previewImages: [] as string[],
+      templateType: 0,
+      letterId: null
+    });
+  }, []);
+
+  const handleGuestLetterStart = () => {
+    router.push('/send/receiver?guest=true');
+  };
+
   return (
     <Container>
       <ImageWrapper>
@@ -38,8 +59,8 @@ export default function Login() {
             ))}
           </Suspense>
         </OauthWrapper>
-        <LetterBtnText onClick={notReady}>
-          로그인 없이 편지 작성해보기
+        <LetterBtnText onClick={handleGuestLetterStart}>
+          로그인 없이 편지 보내기
         </LetterBtnText>
       </ImageWrapper>
     </Container>

src/app/login/page.tsx

@@ -1,42 +1,28 @@
-"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 } from 'react';
+import styled from 'styled-components';
 
 export default function Home() {
   const router = useRouter();
   const accessToken = getAccessToken();
 
   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;
-`;

src/app/page.tsx

@@ -1,11 +1,11 @@
 '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';
 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,12 @@ 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';
+import Loader, { LoaderContainer } from '@/components/common/Loader';
 
 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 +40,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 +84,7 @@ const SendContentPage = () => {
       }
     };
 
-    fetchGetDraftCount();
+    if (!isGuest) fetchGetDraftCount();
 
     if (draftKey) {
       fetchGetDraft();
@@ -263,7 +266,8 @@ const SendContentPage = () => {
       images: images,
       previewImages: previewImages
     }));
-    router.push('/send/template');
+
+    router.push(`/send/template${isGuest ? '?guest=true' : ''}`);
   };
 
   /* 임시 저장 삭제 핸들러 */
@@ -317,13 +321,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>
@@ -420,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%;