Skip to content

Commit 7e56c30

Browse files
yyypearlyyypearl
authored
Merge pull request #144 from ASAP-Lettering/feat/#141
[Design] 편지지 반응형 수정 및 이미지 압축 해제
2 parents 87e01af + b9365ab commit 7e56c30

6 files changed

Lines changed: 94 additions & 57 deletions

File tree

‎src/app/independent/[id]/page.tsx‎

Lines changed: 35 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -29,17 +29,25 @@ const IndependentLetterPage = () => {
2929
const [isDelete, setIsDelete] = useState(false);
3030

3131
const [maxLinesPerPage, setMaxLinesPerPage] = useState(12);
32+
const [fontSize, setFontSize] = useState<string>('16px');
3233

3334
useEffect(() => {
3435
const updateMaxLines = () => {
35-
if (window.innerHeight > 800) {
36-
setMaxLinesPerPage(10);
37-
} else if (window.innerHeight > 680) {
36+
if (window.innerHeight > 780) {
37+
setMaxLinesPerPage(11);
38+
setFontSize('16px');
39+
} else if (window.innerHeight > 660) {
40+
setMaxLinesPerPage(9);
41+
setFontSize('16px');
42+
} else if (window.innerHeight > 628) {
3843
setMaxLinesPerPage(8);
39-
} else if (window.innerHeight > 600) {
40-
setMaxLinesPerPage(6);
44+
setFontSize('16px');
45+
} else if (window.innerHeight > 580) {
46+
setMaxLinesPerPage(7);
47+
setFontSize('16px');
4148
} else {
42-
setMaxLinesPerPage(5);
49+
setMaxLinesPerPage(8);
50+
setFontSize('11px');
4351
}
4452
};
4553

@@ -143,7 +151,11 @@ const IndependentLetterPage = () => {
143151
)}
144152
</IconWrapper>
145153
<MainWrapper>
146-
<LetterContainer>
154+
<LetterContainer
155+
$hasChangeButton={
156+
letterData.content.length > 0 && letterData.images.length > 0
157+
}
158+
>
147159
<Letter
148160
key={`${key}-${maxLinesPerPage}`}
149161
showType="receive"
@@ -158,6 +170,7 @@ const IndependentLetterPage = () => {
158170
width="100%"
159171
height="100%"
160172
maxLines={maxLinesPerPage}
173+
fontSize={fontSize}
161174
/>
162175
</LetterContainer>
163176
{letterData.images.length > 0 && letterData.content.length > 0 ? (
@@ -332,42 +345,41 @@ const PopupBtn = styled.button`
332345
}
333346
`;
334347

335-
const LetterContainer = styled.div`
348+
const LetterContainer = styled.div<{ $hasChangeButton: boolean }>`
336349
display: flex;
337350
justify-content: center;
351+
align-items: center;
338352
width: 100%;
339353
max-width: 345px;
340354
min-height: 398px;
341355
max-height: 398px;
356+
margin-bottom: ${({ $hasChangeButton }) => ($hasChangeButton ? '0' : '80px')};
342357
343-
@media (max-height: 824px) {
344-
max-width: 320px;
358+
@media (max-height: 780px) {
345359
min-height: 350px;
346360
max-height: 350px;
347361
}
348362
349-
@media (max-height: 780px) {
350-
max-width: 300px;
363+
@media (max-height: 660px) {
351364
min-height: 330px;
352365
max-height: 330px;
353366
}
354367
355-
@media (max-height: 680px) {
356-
max-width: 300px;
357-
min-height: 300px;
358-
max-height: 300px;
368+
@media (max-height: 628px) {
369+
min-height: 310px;
370+
max-height: 310px;
359371
}
360372
361-
@media (max-height: 600px) {
362-
max-width: 250px;
363-
min-height: 250px;
364-
max-height: 250px;
373+
@media (max-height: 580px) {
374+
min-height: 280px;
375+
max-height: 280px;
365376
}
366377
367378
@media (max-height: 550px) {
368-
max-width: 250px;
369-
min-height: 250px;
370-
max-height: 250px;
379+
min-height: 260px;
380+
max-height: 260px;
381+
margin-bottom: ${({ $hasChangeButton }) =>
382+
$hasChangeButton ? '0' : '55px'};
371383
}
372384
`;
373385

‎src/app/letter/[id]/page.tsx‎

Lines changed: 35 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,25 @@ const LetterPage = () => {
2828
const { showToast } = useToast();
2929

3030
const [maxLinesPerPage, setMaxLinesPerPage] = useState(12);
31+
const [fontSize, setFontSize] = useState<string>('16px');
3132

3233
useEffect(() => {
3334
const updateMaxLines = () => {
34-
if (window.innerHeight > 800) {
35-
setMaxLinesPerPage(10);
36-
} else if (window.innerHeight > 680) {
35+
if (window.innerHeight > 780) {
36+
setMaxLinesPerPage(11);
37+
setFontSize('16px');
38+
} else if (window.innerHeight > 660) {
39+
setMaxLinesPerPage(9);
40+
setFontSize('16px');
41+
} else if (window.innerHeight > 628) {
3742
setMaxLinesPerPage(8);
38-
} else if (window.innerHeight > 600) {
39-
setMaxLinesPerPage(6);
43+
setFontSize('16px');
44+
} else if (window.innerHeight > 580) {
45+
setMaxLinesPerPage(7);
46+
setFontSize('16px');
4047
} else {
41-
setMaxLinesPerPage(5);
48+
setMaxLinesPerPage(8);
49+
setFontSize('11px');
4250
}
4351
};
4452

@@ -196,7 +204,11 @@ const LetterPage = () => {
196204
)}
197205
</IconWrapper>
198206
<MainWrapper>
199-
<LetterContainer>
207+
<LetterContainer
208+
$hasChangeButton={
209+
letterData.content.length > 0 && letterData.images.length > 0
210+
}
211+
>
200212
<Letter
201213
key={`${key}-${maxLinesPerPage}`}
202214
showType="receive"
@@ -213,6 +225,7 @@ const LetterPage = () => {
213225
width="100%"
214226
height="100%"
215227
maxLines={maxLinesPerPage}
228+
fontSize={fontSize}
216229
/>
217230
</LetterContainer>
218231
{letterData.images.length > 0 && letterData.content.length > 0 ? (
@@ -392,42 +405,41 @@ const PopupBtn = styled.button`
392405
}
393406
`;
394407

395-
const LetterContainer = styled.div`
408+
const LetterContainer = styled.div<{ $hasChangeButton: boolean }>`
396409
display: flex;
397410
justify-content: center;
411+
align-items: center;
398412
width: 100%;
399413
max-width: 345px;
400414
min-height: 398px;
401415
max-height: 398px;
416+
margin-bottom: ${({ $hasChangeButton }) => ($hasChangeButton ? '0' : '80px')};
402417
403-
@media (max-height: 824px) {
404-
max-width: 320px;
418+
@media (max-height: 780px) {
405419
min-height: 350px;
406420
max-height: 350px;
407421
}
408422
409-
@media (max-height: 780px) {
410-
max-width: 300px;
423+
@media (max-height: 660px) {
411424
min-height: 330px;
412425
max-height: 330px;
413426
}
414427
415-
@media (max-height: 680px) {
416-
max-width: 300px;
417-
min-height: 300px;
418-
max-height: 300px;
428+
@media (max-height: 628px) {
429+
min-height: 310px;
430+
max-height: 310px;
419431
}
420432
421-
@media (max-height: 600px) {
422-
max-width: 250px;
423-
min-height: 250px;
424-
max-height: 250px;
433+
@media (max-height: 580px) {
434+
min-height: 280px;
435+
max-height: 280px;
425436
}
426437
427438
@media (max-height: 550px) {
428-
max-width: 250px;
429-
min-height: 250px;
430-
max-height: 250px;
439+
min-height: 260px;
440+
max-height: 260px;
441+
margin-bottom: ${({ $hasChangeButton }) =>
442+
$hasChangeButton ? '0' : '55px'};
431443
}
432444
`;
433445

‎src/app/send/(process)/content/page.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -158,16 +158,10 @@ const SendContentPage = () => {
158158

159159
const imageUrls: string[] = [];
160160
for (const file of validImages) {
161-
const compressedFile = await imageCompression(file, {
162-
maxSizeMB: 500,
163-
maxWidthOrHeight: 512,
164-
useWebWorker: true
165-
});
166-
167161
try {
168162
setImageUploadLoading(true);
169163

170-
const response = await postImage(compressedFile);
164+
const response = await postImage(file);
171165
console.log('이미지 업로드 성공', response.data);
172166
imageUrls.push(response.data.imageUrl);
173167
} catch (error) {

‎src/app/send/(process)/preview/page.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,21 +26,26 @@ const SendPreviewPage = () => {
2626
const [isLoading, setIsLoading] = useState<boolean>(false);
2727
const [isSharing, setIsSharing] = useState<boolean>(false);
2828
const [maxLinesPerPage, setMaxLinesPerPage] = useState(12);
29+
const [fontSize, setFontSize] = useState<string>('16px');
2930

3031
useEffect(() => {
3132
setIsImage(!!!(content.length > 0));
3233
}, []);
3334

3435
useEffect(() => {
3536
const updateMaxLines = () => {
36-
if (window.innerHeight > 670) {
37+
if (window.innerHeight > 660) {
3738
setMaxLinesPerPage(12);
39+
setFontSize('16px');
3840
} else if (window.innerHeight > 628) {
3941
setMaxLinesPerPage(8);
42+
setFontSize('16px');
4043
} else if (window.innerHeight > 580) {
4144
setMaxLinesPerPage(7);
45+
setFontSize('16px');
4246
} else {
4347
setMaxLinesPerPage(9);
48+
setFontSize('11px');
4449
}
4550
};
4651

@@ -155,6 +160,7 @@ const SendPreviewPage = () => {
155160
padding="38px 28px"
156161
nameSize="18px"
157162
maxLines={maxLinesPerPage}
163+
fontSize={fontSize}
158164
/>
159165
</LetterContainer>
160166
{content.length > 0 && images.length > 0 && (
@@ -248,6 +254,7 @@ const LetterContainer = styled.div<{ $hasChangeButton: boolean }>`
248254
249255
@media (max-height: 660px) {
250256
min-height: 350px;
257+
max-height: 350px;
251258
}
252259
253260
@media (max-height: 628px) {

‎src/app/store/preview/page.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,21 +28,26 @@ const LetterPreviewPage = () => {
2828
const [isImage, setIsImage] = useState<boolean>(false);
2929
const resetLetterState = useResetRecoilState(registerLetterState);
3030
const [maxLinesPerPage, setMaxLinesPerPage] = useState(12);
31+
const [fontSize, setFontSize] = useState<string>('16px');
3132

3233
useEffect(() => {
3334
setIsImage(!!!(content.length > 0));
3435
}, []);
3536

3637
useEffect(() => {
3738
const updateMaxLines = () => {
38-
if (window.innerHeight > 670) {
39+
if (window.innerHeight > 660) {
3940
setMaxLinesPerPage(12);
41+
setFontSize('16px');
4042
} else if (window.innerHeight > 628) {
4143
setMaxLinesPerPage(8);
44+
setFontSize('16px');
4245
} else if (window.innerHeight > 580) {
4346
setMaxLinesPerPage(7);
47+
setFontSize('16px');
4448
} else {
4549
setMaxLinesPerPage(9);
50+
setFontSize('11px');
4651
}
4752
};
4853

@@ -135,6 +140,7 @@ const LetterPreviewPage = () => {
135140
padding="38px 28px"
136141
nameSize="18px"
137142
maxLines={maxLinesPerPage}
143+
fontSize={fontSize}
138144
/>
139145
</LetterContainer>
140146
{content.length > 0 && images.length > 0 && (
@@ -224,13 +230,14 @@ const LetterWrapper = styled.div`
224230
const LetterContainer = styled.div<{ $hasChangeButton: boolean }>`
225231
display: flex;
226232
justify-content: center;
233+
align-items: center;
227234
width: 100%;
228235
max-width: 345px;
229236
min-height: 443px;
230237
max-height: 443px;
231238
margin-bottom: ${({ $hasChangeButton }) => ($hasChangeButton ? '0' : '80px')};
232239
233-
@media (max-height: 670px) {
240+
@media (max-height: 660px) {
234241
min-height: 350px;
235242
max-height: 350px;
236243
}

‎src/components/draft/DraftList.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,12 @@ const DraftList = (props: DraftListProps) => {
8787
<>
8888
<Container onClick={handleConfirmModal}>
8989
<Top>
90-
{name.length > 0 ? <Name>{name}</Name> : <Blank>이름 없음</Blank>}|
90+
{name && name.length > 0 ? (
91+
<Name>{name}</Name>
92+
) : (
93+
<Blank>이름 없음</Blank>
94+
)}
95+
|
9196
{content && content.length > 0 ? (
9297
<Content>{content}</Content>
9398
) : (

0 commit comments

Comments
 (0)