ASAP-Lettering · hyo-4 · Jan 7, 2025 · Jan 5, 2025 · Jan 5, 2025 · Jan 5, 2025
diff --git a/src/api/letter/share.tsx b/src/api/letter/share.tsx
@@ -0,0 +1,23 @@
+import { authClient } from "../client";
+
+export const getLetterShareStatus = async (
+  letterCode: string
+): Promise<ShareStatusData> => {
+  const response = await authClient.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";
+
+export type ShareStatusData = {
+  isShared: boolean;
+  letterId: string;
+  shareTarget: shareStatusType;
+};
diff --git a/src/app/mypage/send/[id]/page.tsx b/src/app/mypage/send/[id]/page.tsx
@@ -6,6 +6,7 @@ import KakaoShareButton from "@/components/common/KakaoShareButton";
 import Loader from "@/components/common/Loader";
 import NavigatorBar from "@/components/common/NavigatorBar";
 import Letter from "@/components/letter/Letter";
+import { theme } from "@/styles/theme";
 import { SentDetailLetterType } from "@/types/letter";
 import { getAccessToken } from "@/utils/storage";
 import { useParams, useRouter } from "next/navigation";
@@ -17,7 +18,6 @@ const SendDetailPage = () => {
   const { id } = useParams();
   const letterId = Array.isArray(id) ? id[0] : id;
   const [key, setKey] = useState(1);
-  //const searchParams = useSearchParams();
   const [letterData, setLetterData] = useState<SentDetailLetterType>();
   const [isImage, setIsImage] = useState(false);
   const accessToken = getAccessToken();
@@ -57,31 +57,22 @@ const SendDetailPage = () => {
               ` · 사진 ${letterData.images.length}장`}
           </LetterCount>
         </Header>
-        {isImage ? (
-          <Letter
-            showType="send"
-            key={key}
-            id={letterId}
-            templateType={letterData.templateType}
-            name={letterData.receiverName}
-            images={letterData.images}
-            date={letterData.sendDate}
-            readOnly={true}
-            isImage={true}
-          />
-        ) : (
+        <LetterContainer>
           <Letter
             showType="send"
             key={key}
             id={letterId}
             templateType={letterData.templateType}
             name={letterData.receiverName}
             content={letterData.content}
+            images={letterData.images}
             date={letterData.sendDate}
             readOnly={true}
-            isImage={false}
+            isImage={isImage}
+            width="100%"
+            height="100%"
           />
-        )}
+        </LetterContainer>
         <WhiteSpace />
         {letterData.images.length > 0 ? (
           <ChangeButtonWrapper onClick={changeImageorContent}>
@@ -125,7 +116,7 @@ const Container = styled.div`
   min-height: 100%;
   max-height: 100%;
   justify-content: space-between;
-  color: white;
+  color: ${theme.colors.white};
   background: ${(props) => props.theme.colors.bg};
 `;
 
@@ -155,10 +146,54 @@ const MainWrapper = styled.div`
 const Header = styled.div`
   display: flex;
   flex-direction: row;
-  padding: 10px;
+  padding-bottom: 15px;
   width: 100%;
 `;
 
+const LetterContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  max-width: 345px;
+  min-height: 398px;
+  max-height: 398px;
+
+  @media (max-height: 824px) {
+    max-width: 320px;
+    min-height: 350px;
+  }
+
+  @media (max-height: 780px) {
+    max-width: 300px;
+    min-height: 330px;
+    max-height: 330px;
+  }
+
+  @media (max-height: 680px) {
+    max-width: 300px;
+    min-height: 330px;
+    max-height: 330px;
+  }
+
+  @media (max-height: 630px) {
+    max-width: 300px;
+    min-height: 280px;
+    max-height: 280px;
+  }
+
+  @media (max-height: 580px) {
+    max-width: 250px;
+    min-height: 250px;
+    max-height: 250px;
+  }
+
+  @media (max-height: 550px) {
+    max-width: 250px;
+    min-height: 250px;
+    max-height: 250px;
+  }
+`;
+
 const LetterCount = styled.div`
   display: flex;
   ${(props) => props.theme.fonts.caption03};
@@ -202,11 +237,24 @@ const ChangeButtonWrapper = styled.div`
   color: ${(props) => props.theme.colors.gray400};
   gap: 4px;
   padding: 16px;
+  white-space: nowrap;
   img {
     width: 20px;
     height: 20px;
     flex-shrink: 0;
   }
+
+  @media (max-height: 730px) {
+    flex-direction: row;
+    gap: 10px;
+    padding-top: 15px;
+  }
+
+  @media (max-height: 628px) {
+    flex-direction: row;
+    gap: 6px;
+    ${theme.fonts.body12};
+  }
 `;
 
 const WhiteSpace = styled.div`
@@ -218,19 +266,3 @@ const Wrapper = styled.div`
   width: 100%;
   padding: 24px;
 `;
-
-const ReShareBtnWrapper = styled.button`
-  display: flex;
-  width: 45%;
-  box-sizing: border-box;
-  padding: 12px;
-  gap: 10px;
-  border-radius: 20px;
-  text-align: center;
-  justify-content: center;
-  min-width: 151px;
-  flex-direction: row;
-  color: ${(props) => props.theme.colors.gray100};
-  background-color: ${(props) => props.theme.colors.gray800};
-  ${(props) => props.theme.fonts.caption01};
-`;
diff --git a/src/app/mypage/send/page.tsx b/src/app/mypage/send/page.tsx
@@ -29,7 +29,9 @@ const SendedLetter = () => {
   }, []);
 
   const selectAllItem = () => {
-    if (senderArray) {
+    if (selectedId.length === senderArray?.length) {
+      setSelectedId([]);
+    } else if (senderArray) {
       const allIds = senderArray.map((sender) => sender.letterId);
       setSelectedId(allIds);
     }
@@ -109,9 +111,9 @@ const SendedLetter = () => {
           onCancel={cancelItems}
         />
       )}
-      <Wrapper>
+      <NavigatorBarWrapper>
         <NavigatorBar title="보낸 편지함" cancel={false} />
-      </Wrapper>
+      </NavigatorBarWrapper>
       <MainWrapper>
         <Header>
           {!isSelecting ? (
@@ -141,28 +143,26 @@ const SendedLetter = () => {
           ))}
         </LetterGrid>
       </MainWrapper>
-      <ButtonWrapper>
-        {isSelecting && (
-          <>
-            <Button
-              buttonType="secondary"
-              size="default"
-              text="취소"
-              onClick={cancelItems}
-            />
-            <Button
-              buttonType="primary"
-              size="large"
-              text="삭제하기"
-              onClick={() => {
-                if (selectedId.length > 0) {
-                  setIsPopup(true);
-                }
-              }}
-            />
-          </>
-        )}
-      </ButtonWrapper>
+      {isSelecting && (
+        <ButtonWrapper>
+          <Button
+            buttonType="secondary"
+            size="default"
+            text="취소"
+            onClick={cancelItems}
+          />
+          <Button
+            buttonType="primary"
+            size="large"
+            text="삭제하기"
+            onClick={() => {
+              if (selectedId.length > 0) {
+                setIsPopup(true);
+              }
+            }}
+          />
+        </ButtonWrapper>
+      )}
     </Container>
   );
 };
@@ -250,10 +250,10 @@ const LetterGrid = styled.div`
   place-items: center;
 `;
 
-const Wrapper = styled.div`
+const NavigatorBarWrapper = styled.div`
   display: flex;
   width: 100%;
-  padding: 24px;
+  padding: 18px 18px 9px 18px;
 `;
 
 const ButtonWrapper = styled.div`

diff --git a/src/app/send/complete/page.tsx b/src/app/send/complete/page.tsx
@@ -7,13 +7,13 @@ import { theme } from "@/styles/theme";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import React from "react";
-import { useRecoilValue, useResetRecoilState } from "recoil";
+import { useRecoilValue } from "recoil";
 import styled from "styled-components";
 
 const SendCompletePage = () => {
   const router = useRouter();
 
-  const { receiverName, letterId } = useRecoilValue(sendLetterState);
+  const { receiverName } = useRecoilValue(sendLetterState);
 
   return (
     <Layout>
@@ -36,11 +36,6 @@ const SendCompletePage = () => {
             router.push("/planet");
           }}
         />
-        <KakaoShareButton
-          type="reshare"
-          letterId={letterId || ""}
-          width="90px"
-        />
       </ButtonWrapper>
     </Layout>
   );

diff --git a/src/app/send/preview/page.tsx b/src/app/send/preview/page.tsx
@@ -13,6 +13,7 @@ import { postSendLtter } from "@/api/send/send";
 import { sendLetterState } from "@/recoil/letterStore";
 import useKakaoSDK from "@/hooks/useKakaoSDK";
 import { userState } from "@/recoil/userStore";
+import { getLetterShareStatus } from "@/api/letter/share";
 
 const SendPreviewPage = () => {
   const router = useRouter();
@@ -61,18 +62,39 @@ const SendPreviewPage = () => {
                 senderName: name,
                 id: response.data.letterCode,
               },
+              serverCallbackArgs: {
+                requestType: "SHARE",
+                requestId: response.data.letterCode,
+              },
             });
           }, 1000);
-          setTimeout(() => {
-            router.push("/send/complete");
-          }, 8000);
         }
       }
     } catch (error) {
       console.log("편지 전송 또는 카카오 공유 실패:", error);
     }
   };
 
+  // 3. 공유 완료 상태 폴링
+  useEffect(() => {
+    if (letterState.letterId && letterState.letterId?.length > 0) {
+      const interval = setInterval(async () => {
+        try {
+          const status = await getLetterShareStatus(letterState.letterId || "");
+          console.log(status);
+          if (status.isShared) {
+            router.push("/send/complete");
+            clearInterval(interval); // 폴링 중단
+          }
+        } catch (error) {
+          console.error("공유 상태 조회 실패:", error);
+        }
+      }, 3000);
+
+      return () => clearInterval(interval);
+    }
+  }, [letterState.letterId]);
+
   return (
     <Layout>
       <NavigatorBar title="편지 보내기" cancel={false} />