💄 design(#155): 보낸 편지와 편지 열람 편지지 규격 통일

Author: yyypearl

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<string>('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');
       }
     };
 
@@ -76,7 +84,11 @@ const SendDetailPage = () => {
               ` · 사진 ${letterData.images.length}장`}
           </LetterCount>
         </Header>
-        <LetterContainer>
+        <LetterContainer
+          $hasChangeButton={
+            letterData.content.length > 0 && letterData.images.length > 0
+          }
+        >
           <Letter
             key={`${key}-${maxLinesPerPage}`}
             showType="send"
@@ -91,6 +103,7 @@ const SendDetailPage = () => {
             width="100%"
             height="100%"
             maxLines={maxLinesPerPage}
+            fontSize={fontSize}
           />
         </LetterContainer>
         <WhiteSpace />
@@ -170,48 +183,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'};
   }
 `;