diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx index 8a180a84..fe246504 100644 --- a/src/app/mypage/page.tsx +++ b/src/app/mypage/page.tsx @@ -226,11 +226,7 @@ const ProfileHeader = styled.div` flex-direction: row; justify-content: flex-start; align-items: center; - gap: 25px; - - @media (max-width: 370px) { - gap: 10px; - } + gap: 10px; `; const ProfileImage = styled.img` diff --git a/src/app/mypage/send/[id]/page.tsx b/src/app/mypage/send/[id]/page.tsx index adc76b2d..b14b499d 100644 --- a/src/app/mypage/send/[id]/page.tsx +++ b/src/app/mypage/send/[id]/page.tsx @@ -20,17 +20,25 @@ const SendDetailPage = () => { const [letterCode, setLetterCode] = useState(''); const [maxLinesPerPage, setMaxLinesPerPage] = useState(12); + const [fontSize, setFontSize] = useState('16px'); useEffect(() => { const updateMaxLines = () => { if (window.innerHeight > 780) { - setMaxLinesPerPage(10); - } else if (window.innerHeight > 630) { - setMaxLinesPerPage(7); + setMaxLinesPerPage(11); + setFontSize('16px'); + } else if (window.innerHeight > 660) { + setMaxLinesPerPage(9); + setFontSize('16px'); + } else if (window.innerHeight > 628) { + setMaxLinesPerPage(8); + setFontSize('16px'); } else if (window.innerHeight > 580) { - setMaxLinesPerPage(5); + setMaxLinesPerPage(7); + setFontSize('16px'); } else { - setMaxLinesPerPage(6); + setMaxLinesPerPage(8); + setFontSize('11px'); } }; @@ -71,12 +79,16 @@ const SendDetailPage = () => {
- 편지 정보 | {letterData.content.length}자{' '} + {letterData.sendDate} | {letterData.content.length}자{' '} {letterData.images.length > 0 && ` · 사진 ${letterData.images.length}장`}
- + 0 && letterData.images.length > 0 + } + > { name={letterData.receiverName} content={letterData.content} images={letterData.images} - date={letterData.sendDate} readOnly={true} isImage={isImage} width="100%" height="100%" maxLines={maxLinesPerPage} + fontSize={fontSize} /> @@ -170,48 +182,40 @@ const Header = styled.div` width: 100%; `; -const LetterContainer = styled.div` +const LetterContainer = styled.div<{ $hasChangeButton: boolean }>` display: flex; justify-content: center; width: 100%; max-width: 345px; min-height: 398px; max-height: 398px; + margin-bottom: ${({ $hasChangeButton }) => ($hasChangeButton ? '0' : '80px')}; - @media (max-height: 824px) { - max-width: 320px; - max-height: 350px; + @media (max-height: 780px) { min-height: 350px; + max-height: 350px; } - @media (max-height: 780px) { - max-width: 300px; + @media (max-height: 660px) { min-height: 330px; max-height: 330px; } - @media (max-height: 680px) { - max-width: 300px; - min-height: 330px; - max-height: 330px; + @media (max-height: 628px) { + min-height: 310px; + max-height: 310px; } - @media (max-height: 630px) { - max-width: 300px; + @media (max-height: 580px) { 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; + min-height: 260px; + max-height: 260px; + margin-bottom: ${({ $hasChangeButton }) => + $hasChangeButton ? '0' : '55px'}; } `; diff --git a/src/app/onboarding/page.tsx b/src/app/onboarding/page.tsx index 0763c1a2..f9ce7d26 100644 --- a/src/app/onboarding/page.tsx +++ b/src/app/onboarding/page.tsx @@ -49,20 +49,24 @@ const Onboarding = () => { - 채팅방 속 잠들어 있는 편지를 보관하세요 - - 소중한 사람에게 받은 메신저 편지를 -
레터링에 모아둘 수 있어요 -
+ + 채팅방 속 잠들어 있는 편지를 보관하세요 + + 소중한 사람에게 받은 메신저 편지를 +
레터링에 모아둘 수 있어요 +
+
- 드래그하여 손쉽게 편지를 정리해봐요 - - 행성은 폴더의 역할과 같아요 -
- 원하는 행성 안에 편지를 보관할 수 있어요 -
+ + 드래그하여 손쉽게 편지를 정리해봐요 + + 행성은 폴더의 역할과 같아요 +
+ 원하는 행성 안에 편지를 보관할 수 있어요 +
+
@@ -78,12 +82,14 @@ const Onboarding = () => { ))} )} + +