diff --git a/src/api/letter/share.tsx b/src/api/letter/share.tsx new file mode 100644 index 00000000..351635fd --- /dev/null +++ b/src/api/letter/share.tsx @@ -0,0 +1,23 @@ +import { authClient } from "../client"; + +export const getLetterShareStatus = async ( + letterCode: string +): Promise => { + 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 index 6ec9d0d7..482ebfeb 100644 --- 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(); const [isImage, setIsImage] = useState(false); const accessToken = getAccessToken(); @@ -57,19 +57,7 @@ const SendDetailPage = () => { ` · 사진 ${letterData.images.length}장`} - {isImage ? ( - - ) : ( + { 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%" /> - )} + {letterData.images.length > 0 ? ( @@ -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 index 37dd684c..66a8d7da 100644 --- 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} /> )} - + - +
{!isSelecting ? ( @@ -141,28 +143,26 @@ const SendedLetter = () => { ))} - - {isSelecting && ( - <> -