From 036e729e5a82d67486213f53d7bd99c6bdbb8e71 Mon Sep 17 00:00:00 2001 From: yyypearl Date: Wed, 5 Feb 2025 22:54:54 +0900 Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=90=9B=20fix(#141):=20=EB=AF=B8?= =?UTF-8?q?=EB=A6=AC=EB=B3=B4=EA=B8=B0=20=ED=8E=B8=EC=A7=80=EC=A7=80=20?= =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=ED=81=AC=EA=B8=B0=20=EC=9D=BC?= =?UTF-8?q?=EC=B9=98=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/send/(process)/preview/page.tsx | 3 ++- src/app/store/preview/page.tsx | 5 +++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/app/send/(process)/preview/page.tsx b/src/app/send/(process)/preview/page.tsx index effd76bf..95f08d09 100644 --- a/src/app/send/(process)/preview/page.tsx +++ b/src/app/send/(process)/preview/page.tsx @@ -33,7 +33,7 @@ const SendPreviewPage = () => { useEffect(() => { const updateMaxLines = () => { - if (window.innerHeight > 670) { + if (window.innerHeight > 660) { setMaxLinesPerPage(12); } else if (window.innerHeight > 628) { setMaxLinesPerPage(8); @@ -248,6 +248,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 index b4642835..38418095 100644 --- a/src/app/store/preview/page.tsx +++ b/src/app/store/preview/page.tsx @@ -35,7 +35,7 @@ const LetterPreviewPage = () => { useEffect(() => { const updateMaxLines = () => { - if (window.innerHeight > 670) { + if (window.innerHeight > 660) { setMaxLinesPerPage(12); } else if (window.innerHeight > 628) { setMaxLinesPerPage(8); @@ -224,13 +224,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; } From eddae9978c190e4816f873103cba9bfd2a864854 Mon Sep 17 00:00:00 2001 From: yyypearl Date: Wed, 5 Feb 2025 22:55:23 +0900 Subject: [PATCH 2/5] =?UTF-8?q?=E2=9C=A8=20feat(#141):=20=ED=8E=B8?= =?UTF-8?q?=EC=A7=80=20=EB=B3=B4=EB=82=B4=EA=B8=B0=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=EC=95=95=EC=B6=95=20=ED=95=B4=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/send/(process)/content/page.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/app/send/(process)/content/page.tsx b/src/app/send/(process)/content/page.tsx index 6300ee68..486129c5 100644 --- 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) { From 3f46eb1612e3c155f9f67c5bba93f94f51b44a16 Mon Sep 17 00:00:00 2001 From: yyypearl Date: Wed, 5 Feb 2025 23:06:53 +0900 Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=92=84=20design(#141):=20=ED=8E=B8?= =?UTF-8?q?=EC=A7=80=20=EC=97=B4=EB=9E=8C=20=ED=8E=B8=EC=A7=80=EC=A7=80=20?= =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EB=B6=84=EA=B8=B0=EC=A0=90=20?= =?UTF-8?q?=EB=B0=8F=20=ED=81=AC=EA=B8=B0=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/independent/[id]/page.tsx | 51 +++++++++++++++++-------------- src/app/letter/[id]/page.tsx | 51 +++++++++++++++++-------------- 2 files changed, 56 insertions(+), 46 deletions(-) diff --git a/src/app/independent/[id]/page.tsx b/src/app/independent/[id]/page.tsx index 28ab31bc..166c707f 100644 --- a/src/app/independent/[id]/page.tsx +++ b/src/app/independent/[id]/page.tsx @@ -32,14 +32,16 @@ const IndependentLetterPage = () => { useEffect(() => { const updateMaxLines = () => { - if (window.innerHeight > 800) { - setMaxLinesPerPage(10); - } else if (window.innerHeight > 680) { + if (window.innerHeight > 780) { + setMaxLinesPerPage(11); + } else if (window.innerHeight > 660) { + setMaxLinesPerPage(9); + } else if (window.innerHeight > 628) { setMaxLinesPerPage(8); - } else if (window.innerHeight > 600) { - setMaxLinesPerPage(6); + } else if (window.innerHeight > 580) { + setMaxLinesPerPage(7); } else { - setMaxLinesPerPage(5); + setMaxLinesPerPage(8); } }; @@ -143,7 +145,11 @@ const IndependentLetterPage = () => { )} - + 0 && letterData.images.length > 0 + } + > ` 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 index 88054df9..030f2bea 100644 --- a/src/app/letter/[id]/page.tsx +++ b/src/app/letter/[id]/page.tsx @@ -31,14 +31,16 @@ const LetterPage = () => { useEffect(() => { const updateMaxLines = () => { - if (window.innerHeight > 800) { - setMaxLinesPerPage(10); - } else if (window.innerHeight > 680) { + if (window.innerHeight > 780) { + setMaxLinesPerPage(11); + } else if (window.innerHeight > 660) { + setMaxLinesPerPage(9); + } else if (window.innerHeight > 628) { setMaxLinesPerPage(8); - } else if (window.innerHeight > 600) { - setMaxLinesPerPage(6); + } else if (window.innerHeight > 580) { + setMaxLinesPerPage(7); } else { - setMaxLinesPerPage(5); + setMaxLinesPerPage(8); } }; @@ -196,7 +198,11 @@ const LetterPage = () => { )} - + 0 && letterData.images.length > 0 + } + > ` 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'}; } `; From e17b83e3d709db0d43bc928fc06c74022c695a37 Mon Sep 17 00:00:00 2001 From: yyypearl Date: Wed, 5 Feb 2025 23:13:16 +0900 Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=92=84=20design(#141):=20=ED=8E=B8?= =?UTF-8?q?=EC=A7=80=EC=A7=80=20=ED=8F=B0=ED=8A=B8=EC=82=AC=EC=9D=B4?= =?UTF-8?q?=EC=A6=88=20=EB=B0=98=EC=9D=91=ED=98=95=20props?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/independent/[id]/page.tsx | 7 +++++++ src/app/letter/[id]/page.tsx | 7 +++++++ src/app/send/(process)/preview/page.tsx | 6 ++++++ src/app/store/preview/page.tsx | 6 ++++++ 4 files changed, 26 insertions(+) diff --git a/src/app/independent/[id]/page.tsx b/src/app/independent/[id]/page.tsx index 166c707f..97ef1a2b 100644 --- a/src/app/independent/[id]/page.tsx +++ b/src/app/independent/[id]/page.tsx @@ -29,19 +29,25 @@ const IndependentLetterPage = () => { const [isDelete, setIsDelete] = useState(false); const [maxLinesPerPage, setMaxLinesPerPage] = useState(12); + const [fontSize, setFontSize] = useState('16px'); useEffect(() => { const updateMaxLines = () => { if (window.innerHeight > 780) { 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(7); + setFontSize('16px'); } else { setMaxLinesPerPage(8); + setFontSize('11px'); } }; @@ -164,6 +170,7 @@ const IndependentLetterPage = () => { width="100%" height="100%" maxLines={maxLinesPerPage} + fontSize={fontSize} /> {letterData.images.length > 0 && letterData.content.length > 0 ? ( diff --git a/src/app/letter/[id]/page.tsx b/src/app/letter/[id]/page.tsx index 030f2bea..2fd7eb6d 100644 --- a/src/app/letter/[id]/page.tsx +++ b/src/app/letter/[id]/page.tsx @@ -28,19 +28,25 @@ const LetterPage = () => { const { showToast } = useToast(); const [maxLinesPerPage, setMaxLinesPerPage] = useState(12); + const [fontSize, setFontSize] = useState('16px'); useEffect(() => { const updateMaxLines = () => { if (window.innerHeight > 780) { 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(7); + setFontSize('16px'); } else { setMaxLinesPerPage(8); + setFontSize('11px'); } }; @@ -219,6 +225,7 @@ const LetterPage = () => { width="100%" height="100%" maxLines={maxLinesPerPage} + fontSize={fontSize} /> {letterData.images.length > 0 && letterData.content.length > 0 ? ( diff --git a/src/app/send/(process)/preview/page.tsx b/src/app/send/(process)/preview/page.tsx index 95f08d09..a285be9d 100644 --- a/src/app/send/(process)/preview/page.tsx +++ b/src/app/send/(process)/preview/page.tsx @@ -26,6 +26,7 @@ const SendPreviewPage = () => { const [isLoading, setIsLoading] = useState(false); const [isSharing, setIsSharing] = useState(false); const [maxLinesPerPage, setMaxLinesPerPage] = useState(12); + const [fontSize, setFontSize] = useState('16px'); useEffect(() => { setIsImage(!!!(content.length > 0)); @@ -35,12 +36,16 @@ const SendPreviewPage = () => { const updateMaxLines = () => { 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} /> {content.length > 0 && images.length > 0 && ( diff --git a/src/app/store/preview/page.tsx b/src/app/store/preview/page.tsx index 38418095..0b3f6327 100644 --- a/src/app/store/preview/page.tsx +++ b/src/app/store/preview/page.tsx @@ -28,6 +28,7 @@ const LetterPreviewPage = () => { const [isImage, setIsImage] = useState(false); const resetLetterState = useResetRecoilState(registerLetterState); const [maxLinesPerPage, setMaxLinesPerPage] = useState(12); + const [fontSize, setFontSize] = useState('16px'); useEffect(() => { setIsImage(!!!(content.length > 0)); @@ -37,12 +38,16 @@ const LetterPreviewPage = () => { const updateMaxLines = () => { 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} /> {content.length > 0 && images.length > 0 && ( From b9365ab3edeabe630149f7a073cbba053ebe5319 Mon Sep 17 00:00:00 2001 From: yyypearl Date: Wed, 5 Feb 2025 23:14:50 +0900 Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=90=9B=20fix(#141):=20DraftList=20nam?= =?UTF-8?q?e=20=EC=A1=B4=EC=9E=AC=20=EC=A1=B0=EA=B1=B4=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/draft/DraftList.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/draft/DraftList.tsx b/src/components/draft/DraftList.tsx index 6e9f180b..ea9d37a0 100644 --- a/src/components/draft/DraftList.tsx +++ b/src/components/draft/DraftList.tsx @@ -87,7 +87,12 @@ const DraftList = (props: DraftListProps) => { <> - {name.length > 0 ? {name} : 이름 없음}| + {name && name.length > 0 ? ( + {name} + ) : ( + 이름 없음 + )} + | {content && content.length > 0 ? ( {content} ) : (