From 9e22fb616f3fe4695f854aee025c4660875923e4 Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Sat, 7 Dec 2024 05:03:15 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20design(#108):=20=ED=8E=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A4=84?=
 =?UTF-8?q?=EB=84=98=EA=B9=80=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/independent/[id]/page.tsx | 25 +++++++++++--------------
 src/app/letter/[id]/page.tsx      | 28 +++++++++++-----------------
 src/app/letter/preview/page.tsx   |  2 +-
 src/app/send/preview/page.tsx     |  2 +-
 src/components/letter/Letter.tsx  |  4 +++-
 5 files changed, 27 insertions(+), 34 deletions(-)

diff --git a/src/app/independent/[id]/page.tsx b/src/app/independent/[id]/page.tsx
index 877919bf..a655b7a2 100644
--- a/src/app/independent/[id]/page.tsx
+++ b/src/app/independent/[id]/page.tsx
@@ -78,6 +78,7 @@ const IndependentLetterPage = () => {
           <Letter
             showType="receive"
             key={key}
+            contentType="all"
             id={letterId}
             templateType={letterData.templateType}
             name={letterData.senderName}
@@ -236,20 +237,15 @@ const LetterContainer = styled.div`
   }
 
   @media (max-height: 780px) {
-    max-width: 280px;
-    min-height: 320px;
-    max-height: 320px;
-  }
-
-  @media (max-height: 700px) {
-    min-height: 300px;
-    max-height: 300px;
+    max-width: 300px;
+    min-height: 330px;
+    max-height: 330px;
   }
 
   @media (max-height: 680px) {
-    max-width: 250px;
-    min-height: 280px;
-    max-height: 280px;
+    max-width: 300px;
+    min-height: 330px;
+    max-height: 330px;
   }
 
   @media (max-height: 580px) {
@@ -259,9 +255,9 @@ const LetterContainer = styled.div`
   }
 
   @media (max-height: 550px) {
-    max-width: 220px;
-    min-height: 220px;
-    max-height: 220px;
+    max-width: 250px;
+    min-height: 250px;
+    max-height: 250px;
   }
 `;
 
@@ -347,6 +343,7 @@ const PaginationWrapper = styled.div`
   ${(props) => props.theme.fonts.body07};
   color: ${(props) => props.theme.colors.gray500};
   gap: 24px;
+  margin-bottom: 120px;
 
   @media (max-height: 730px) {
     padding: 20px 4px;
diff --git a/src/app/letter/[id]/page.tsx b/src/app/letter/[id]/page.tsx
index 4fda9dbc..a6110ee4 100644
--- a/src/app/letter/[id]/page.tsx
+++ b/src/app/letter/[id]/page.tsx
@@ -95,6 +95,7 @@ const LetterPage = () => {
           <Letter
             showType="receive"
             key={key}
+            contentType="all"
             pageType="space"
             id={letterId}
             templateType={letterData.templateType}
@@ -186,8 +187,6 @@ const Container = styled.div`
   width: 100%;
   height: 100%;
   color: ${theme.colors.white};
-  /* overflow-y: auto;
-  overflow-x: hidden; */
   background: ${(props) => props.theme.colors.bg};
   position: relative;
 `;
@@ -262,20 +261,15 @@ const LetterContainer = styled.div`
   }
 
   @media (max-height: 780px) {
-    max-width: 280px;
-    min-height: 320px;
-    max-height: 320px;
-  }
-
-  @media (max-height: 700px) {
-    min-height: 300px;
-    max-height: 300px;
+    max-width: 300px;
+    min-height: 330px;
+    max-height: 330px;
   }
 
   @media (max-height: 680px) {
-    max-width: 250px;
-    min-height: 280px;
-    max-height: 280px;
+    max-width: 300px;
+    min-height: 330px;
+    max-height: 330px;
   }
 
   @media (max-height: 580px) {
@@ -285,9 +279,9 @@ const LetterContainer = styled.div`
   }
 
   @media (max-height: 550px) {
-    max-width: 220px;
-    min-height: 220px;
-    max-height: 220px;
+    max-width: 250px;
+    min-height: 250px;
+    max-height: 250px;
   }
 `;
 
@@ -373,7 +367,7 @@ const PaginationWrapper = styled.div`
   ${(props) => props.theme.fonts.body07};
   color: ${(props) => props.theme.colors.gray500};
   gap: 24px;
-  margin-bottom: 100px;
+  margin-bottom: 120px;
 
   @media (max-height: 730px) {
     padding: 20px 4px;
diff --git a/src/app/letter/preview/page.tsx b/src/app/letter/preview/page.tsx
index 41cfbce3..5e141d1d 100644
--- a/src/app/letter/preview/page.tsx
+++ b/src/app/letter/preview/page.tsx
@@ -246,7 +246,7 @@ const LetterContainer = styled.div`
   }
 
   @media (max-height: 628px) {
-    max-width: 280px;
+    max-width: 320px;
     min-height: 320px;
     max-height: 320px;
   }
diff --git a/src/app/send/preview/page.tsx b/src/app/send/preview/page.tsx
index 9f32ed05..cc2b062d 100644
--- a/src/app/send/preview/page.tsx
+++ b/src/app/send/preview/page.tsx
@@ -227,7 +227,7 @@ const LetterContainer = styled.div`
   }
 
   @media (max-height: 628px) {
-    max-width: 280px;
+    max-width: 320px;
     min-height: 320px;
     max-height: 320px;
   }
diff --git a/src/components/letter/Letter.tsx b/src/components/letter/Letter.tsx
index b38dac8c..ab3dfcb5 100644
--- a/src/components/letter/Letter.tsx
+++ b/src/components/letter/Letter.tsx
@@ -31,6 +31,7 @@ interface LetterProps {
   padding?: string;
   readOnly?: boolean;
   nextLetterId?: string;
+  maxLineWidth?: number;
 }
 
 const Letter = (props: LetterProps) => {
@@ -50,6 +51,7 @@ const Letter = (props: LetterProps) => {
     padding,
     readOnly = false,
     nextLetterId,
+    maxLineWidth,
   } = props;
   const router = useRouter();
   const [currentPage, setCurrentPage] = useState(0);
@@ -86,7 +88,7 @@ const Letter = (props: LetterProps) => {
 
       if (context) {
         context.font = "16px Pretendard";
-        const maxWidth = contentType === "one" ? 200 : 280;
+        const maxWidth = contentType === "one" ? 180 : 230;
         let currentLine = "";
         let lines: string[] = [];