💄 design(#72): Letter 컴포넌트 반응형 되게 수정

Author: yyypearl

src/app/letter/preview/page.tsx

@@ -180,6 +180,7 @@ const Container = styled.div`
 `;
 
 const Column = styled.div`
+  width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -196,6 +197,7 @@ const Label = styled.div`
 `;
 
 const LetterWrapper = styled.div`
+  width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;

src/app/send/preview/page.tsx

@@ -150,6 +150,7 @@ const Container = styled.div`
 `;
 
 const Column = styled.div`
+  width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -166,6 +167,7 @@ const Label = styled.div`
 `;
 
 const LetterWrapper = styled.div`
+  width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;

src/components/letter/Letter.tsx

@@ -264,7 +264,6 @@ const Container = styled.div<{
   height: auto;
   padding: ${({ $padding }) => ($padding ? $padding : "34px")};
   max-width: ${({ $width }) => ($width ? $width : "345px")};
-  min-width: ${({ $width }) => ($width ? $width : "345px")};
   max-height: ${({ $height }) => ($height ? $height : "349px")};
   min-height: ${({ $height }) => ($height ? $height : "349px")};
   background-image: ${({ $templateType }) =>