Merge pull request #144 from ASAP-Lettering/feat/#141

[Design] 편지지 반응형 수정 및 이미지 압축 해제
ASAP-Lettering · Feb 5, 2025 · 7e56c30 · 7e56c30
2 parents 87e01af + b9365ab
commit 7e56c30
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 57 deletions.
diff --git a/src/app/independent/[id]/page.tsx b/src/app/independent/[id]/page.tsx
@@ -29,17 +29,25 @@ const IndependentLetterPage = () => {
   const [isDelete, setIsDelete] = useState(false);
 
   const [maxLinesPerPage, setMaxLinesPerPage] = useState(12);
+  const [fontSize, setFontSize] = useState<string>('16px');
 
   useEffect(() => {
     const updateMaxLines = () => {
-      if (window.innerHeight > 800) {
-        setMaxLinesPerPage(10);
-      } else if (window.innerHeight > 680) {
+      if (window.innerHeight > 780) {
+        setMaxLinesPerPage(11);
+        setFontSize('16px');
+      } else if (window.innerHeight > 660) {
+        setMaxLinesPerPage(9);
+        setFontSize('16px');
+      } else if (window.innerHeight > 628) {
         setMaxLinesPerPage(8);
-      } else if (window.innerHeight > 600) {
-        setMaxLinesPerPage(6);
+        setFontSize('16px');
+      } else if (window.innerHeight > 580) {
+        setMaxLinesPerPage(7);
+        setFontSize('16px');
       } else {
-        setMaxLinesPerPage(5);
+        setMaxLinesPerPage(8);
+        setFontSize('11px');
       }
     };
 
@@ -143,7 +151,11 @@ const IndependentLetterPage = () => {
         )}
       </IconWrapper>
       <MainWrapper>
-        <LetterContainer>
+        <LetterContainer
+          $hasChangeButton={
+            letterData.content.length > 0 && letterData.images.length > 0
+          }
+        >
           <Letter
             key={`${key}-${maxLinesPerPage}`}
             showType="receive"
@@ -158,6 +170,7 @@ const IndependentLetterPage = () => {
             width="100%"
             height="100%"
             maxLines={maxLinesPerPage}
+            fontSize={fontSize}
           />
         </LetterContainer>
         {letterData.images.length > 0 && letterData.content.length > 0 ? (
@@ -332,42 +345,41 @@ const PopupBtn = styled.button`
   }
 `;
 
-const LetterContainer = styled.div`
+const LetterContainer = styled.div<{ $hasChangeButton: boolean }>`
   display: flex;
   justify-content: center;
+  align-items: 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;
+  @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: 300px;
-    max-height: 300px;
+  @media (max-height: 628px) {
+    min-height: 310px;
+    max-height: 310px;
   }
 
-  @media (max-height: 600px) {
-    max-width: 250px;
-    min-height: 250px;
-    max-height: 250px;
+  @media (max-height: 580px) {
+    min-height: 280px;
+    max-height: 280px;
   }
 
   @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/letter/[id]/page.tsx b/src/app/letter/[id]/page.tsx
@@ -28,17 +28,25 @@ const LetterPage = () => {
   const { showToast } = useToast();
 
   const [maxLinesPerPage, setMaxLinesPerPage] = useState(12);
+  const [fontSize, setFontSize] = useState<string>('16px');
 
   useEffect(() => {
     const updateMaxLines = () => {
-      if (window.innerHeight > 800) {
-        setMaxLinesPerPage(10);
-      } else if (window.innerHeight > 680) {
+      if (window.innerHeight > 780) {
+        setMaxLinesPerPage(11);
+        setFontSize('16px');
+      } else if (window.innerHeight > 660) {
+        setMaxLinesPerPage(9);
+        setFontSize('16px');
+      } else if (window.innerHeight > 628) {
         setMaxLinesPerPage(8);
-      } else if (window.innerHeight > 600) {
-        setMaxLinesPerPage(6);
+        setFontSize('16px');
+      } else if (window.innerHeight > 580) {
+        setMaxLinesPerPage(7);
+        setFontSize('16px');
       } else {
-        setMaxLinesPerPage(5);
+        setMaxLinesPerPage(8);
+        setFontSize('11px');
       }
     };
 
@@ -196,7 +204,11 @@ const LetterPage = () => {
         )}
       </IconWrapper>
       <MainWrapper>
-        <LetterContainer>
+        <LetterContainer
+          $hasChangeButton={
+            letterData.content.length > 0 && letterData.images.length > 0
+          }
+        >
           <Letter
             key={`${key}-${maxLinesPerPage}`}
             showType="receive"
@@ -213,6 +225,7 @@ const LetterPage = () => {
             width="100%"
             height="100%"
             maxLines={maxLinesPerPage}
+            fontSize={fontSize}
           />
         </LetterContainer>
         {letterData.images.length > 0 && letterData.content.length > 0 ? (
@@ -392,42 +405,41 @@ const PopupBtn = styled.button`
   }
 `;
 
-const LetterContainer = styled.div`
+const LetterContainer = styled.div<{ $hasChangeButton: boolean }>`
   display: flex;
   justify-content: center;
+  align-items: 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;
+  @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: 300px;
-    max-height: 300px;
+  @media (max-height: 628px) {
+    min-height: 310px;
+    max-height: 310px;
   }
 
-  @media (max-height: 600px) {
-    max-width: 250px;
-    min-height: 250px;
-    max-height: 250px;
+  @media (max-height: 580px) {
+    min-height: 280px;
+    max-height: 280px;
   }
 
   @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/send/(process)/content/page.tsx b/src/app/send/(process)/content/page.tsx
@@ -158,16 +158,10 @@ const SendContentPage = () => {
 
       const imageUrls: string[] = [];
       for (const file of validImages) {
-        const compressedFile = await imageCompression(file, {
-          maxSizeMB: 500,
-          maxWidthOrHeight: 512,
-          useWebWorker: true
-        });
-
         try {
           setImageUploadLoading(true);
 
-          const response = await postImage(compressedFile);
+          const response = await postImage(file);
           console.log('이미지 업로드 성공', response.data);
           imageUrls.push(response.data.imageUrl);
         } catch (error) {

diff --git a/src/app/send/(process)/preview/page.tsx b/src/app/send/(process)/preview/page.tsx
@@ -26,21 +26,26 @@ const SendPreviewPage = () => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [isSharing, setIsSharing] = useState<boolean>(false);
   const [maxLinesPerPage, setMaxLinesPerPage] = useState(12);
+  const [fontSize, setFontSize] = useState<string>('16px');
 
   useEffect(() => {
     setIsImage(!!!(content.length > 0));
   }, []);
 
   useEffect(() => {
     const updateMaxLines = () => {
-      if (window.innerHeight > 670) {
+      if (window.innerHeight > 660) {
         setMaxLinesPerPage(12);
+        setFontSize('16px');
       } else if (window.innerHeight > 628) {
         setMaxLinesPerPage(8);
+        setFontSize('16px');
       } else if (window.innerHeight > 580) {
         setMaxLinesPerPage(7);
+        setFontSize('16px');
       } else {
         setMaxLinesPerPage(9);
+        setFontSize('11px');
       }
     };
 
@@ -155,6 +160,7 @@ const SendPreviewPage = () => {
                 padding="38px 28px"
                 nameSize="18px"
                 maxLines={maxLinesPerPage}
+                fontSize={fontSize}
               />
             </LetterContainer>
             {content.length > 0 && images.length > 0 && (
@@ -248,6 +254,7 @@ const LetterContainer = styled.div<{ $hasChangeButton: boolean }>`
 
   @media (max-height: 660px) {
     min-height: 350px;
+    max-height: 350px;
   }
 
   @media (max-height: 628px) {

diff --git a/src/app/store/preview/page.tsx b/src/app/store/preview/page.tsx
@@ -28,21 +28,26 @@ const LetterPreviewPage = () => {
   const [isImage, setIsImage] = useState<boolean>(false);
   const resetLetterState = useResetRecoilState(registerLetterState);
   const [maxLinesPerPage, setMaxLinesPerPage] = useState(12);
+  const [fontSize, setFontSize] = useState<string>('16px');
 
   useEffect(() => {
     setIsImage(!!!(content.length > 0));
   }, []);
 
   useEffect(() => {
     const updateMaxLines = () => {
-      if (window.innerHeight > 670) {
+      if (window.innerHeight > 660) {
         setMaxLinesPerPage(12);
+        setFontSize('16px');
       } else if (window.innerHeight > 628) {
         setMaxLinesPerPage(8);
+        setFontSize('16px');
       } else if (window.innerHeight > 580) {
         setMaxLinesPerPage(7);
+        setFontSize('16px');
       } else {
         setMaxLinesPerPage(9);
+        setFontSize('11px');
       }
     };
 
@@ -135,6 +140,7 @@ const LetterPreviewPage = () => {
                 padding="38px 28px"
                 nameSize="18px"
                 maxLines={maxLinesPerPage}
+                fontSize={fontSize}
               />
             </LetterContainer>
             {content.length > 0 && images.length > 0 && (
@@ -224,13 +230,14 @@ const LetterWrapper = styled.div`
 const LetterContainer = styled.div<{ $hasChangeButton: boolean }>`
   display: flex;
   justify-content: center;
+  align-items: center;
   width: 100%;
   max-width: 345px;
   min-height: 443px;
   max-height: 443px;
   margin-bottom: ${({ $hasChangeButton }) => ($hasChangeButton ? '0' : '80px')};
 
-  @media (max-height: 670px) {
+  @media (max-height: 660px) {
     min-height: 350px;
     max-height: 350px;
   }

diff --git a/src/components/draft/DraftList.tsx b/src/components/draft/DraftList.tsx
@@ -87,7 +87,12 @@ const DraftList = (props: DraftListProps) => {
     <>
       <Container onClick={handleConfirmModal}>
         <Top>
-          {name.length > 0 ? <Name>{name}</Name> : <Blank>이름 없음</Blank>}|
+          {name && name.length > 0 ? (
+            <Name>{name}</Name>
+          ) : (
+            <Blank>이름 없음</Blank>
+          )}
+          |
           {content && content.length > 0 ? (
             <Content>{content}</Content>
           ) : (