Skip to content

Commit 523af2a

Browse files
hyo-4hyo-4
authored
Merge pull request #140 from ASAP-Lettering/fix/#139
[Fix] 편지 관련 QA
2 parents c86ca13 + c9dcbb3 commit 523af2a

File tree

15 files changed

+527
-304
lines changed

15 files changed

+527
-304
lines changed

‎src/app/guide/page.tsx‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,9 @@ const GuidePage = () => {
7373
//Letter
7474
const letterData = LETTER_DUMMY[0];
7575
const imageData = [
76-
'https://via.assets.so/album.png?id=6&q=95&w=360&h=360&fit=fill',
77-
'https://via.assets.so/album.png?id=2&q=95&w=360&h=360&fit=fill',
78-
'https://via.assets.so/album.png?id=3&q=95&w=360&h=360&fit=fill'
76+
'https://lettering-images.s3.amazonaws.com/0192e660-0efb-7729-b107-19f5ed4a7fb9/4c182685-da2a-49fd-8251-ecc8914733c6',
77+
'https://lettering-images.s3.amazonaws.com/0192e660-0efb-7729-b107-19f5ed4a7fb9/4c182685-da2a-49fd-8251-ecc8914733c6',
78+
'https://lettering-images.s3.amazonaws.com/0192e660-0efb-7729-b107-19f5ed4a7fb9/4c182685-da2a-49fd-8251-ecc8914733c6'
7979
];
8080

8181
//bottomSheet
@@ -235,44 +235,36 @@ const GuidePage = () => {
235235
isImage={true}
236236
/>
237237
<Letter
238-
showType="previewReceive"
238+
showType="send"
239239
contentType="all"
240240
id={letterData.id.toString()}
241241
templateType={letterData.templateType}
242242
name={letterData.sender}
243243
content={letterData.content}
244244
date={letterData.date}
245245
isImage={false}
246+
height="450px"
246247
/>
247248
<Letter
248-
showType="previewReceive"
249+
showType="send"
249250
contentType="one"
250251
id={letterData.id.toString()}
251252
templateType={letterData.templateType}
252253
name={letterData.sender}
253-
content={letterData.content}
254-
date={letterData.date}
255-
isImage={false}
256-
/>
257-
<Letter
258-
showType="previewSend"
259-
contentType="all"
260-
id={letterData.id.toString()}
261-
templateType={letterData.templateType}
262-
name={letterData.sender}
263254
images={imageData}
264255
date={letterData.date}
265256
isImage={true}
257+
height="450px"
266258
/>
267259
<Letter
268-
showType="previewSend"
260+
showType="url"
269261
contentType="one"
270262
id={letterData.id.toString()}
271263
templateType={letterData.templateType}
272264
name={letterData.sender}
273-
images={imageData}
265+
content={letterData.content}
274266
date={letterData.date}
275-
isImage={true}
267+
isImage={false}
276268
/>
277269
<h3>BottomSheet</h3>
278270
<ButtonContainer>

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

Lines changed: 33 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Button from '@/components/common/Button';
55
import Loader from '@/components/common/Loader';
66
import NavigatorBar from '@/components/common/NavigatorBar';
77
import Letter from '@/components/letter/Letter';
8-
import { useToast } from '@/hooks/useToast';
98
import { registerLetterState } from '@/recoil/letterStore';
109
import { theme } from '@/styles/theme';
1110
import { IndependentLetterType, LetterDetailType } from '@/types/letter';
@@ -20,7 +19,6 @@ const IndependentLetterPage = () => {
2019
const { id } = useParams();
2120
const letterId = Array.isArray(id) ? id[0] : id;
2221
const [key, setKey] = useState(1);
23-
//const searchParams = useSearchParams();
2422
const [letterData, setLetterData] = useState<IndependentLetterType | null>(
2523
null
2624
);
@@ -29,7 +27,29 @@ const IndependentLetterPage = () => {
2927
const [letterState, setLetterState] = useRecoilState(registerLetterState);
3028
const [isPopup, setIsPopup] = useState(false);
3129
const [isDelete, setIsDelete] = useState(false);
32-
const { showToast } = useToast();
30+
31+
const [maxLinesPerPage, setMaxLinesPerPage] = useState(12);
32+
33+
useEffect(() => {
34+
const updateMaxLines = () => {
35+
if (window.innerHeight > 800) {
36+
setMaxLinesPerPage(10);
37+
} else if (window.innerHeight > 680) {
38+
setMaxLinesPerPage(8);
39+
} else if (window.innerHeight > 600) {
40+
setMaxLinesPerPage(6);
41+
} else {
42+
setMaxLinesPerPage(5);
43+
}
44+
};
45+
46+
updateMaxLines();
47+
window.addEventListener('resize', updateMaxLines);
48+
49+
return () => {
50+
window.removeEventListener('resize', updateMaxLines);
51+
};
52+
}, []);
3353

3454
//편지 수정 버튼 클릭
3555
const handleModify = () => {
@@ -125,8 +145,8 @@ const IndependentLetterPage = () => {
125145
<MainWrapper>
126146
<LetterContainer>
127147
<Letter
148+
key={`${key}-${maxLinesPerPage}`}
128149
showType="receive"
129-
key={key}
130150
contentType="all"
131151
id={letterId || ''}
132152
templateType={letterData.templateType}
@@ -137,6 +157,7 @@ const IndependentLetterPage = () => {
137157
isImage={isImage}
138158
width="100%"
139159
height="100%"
160+
maxLines={maxLinesPerPage}
140161
/>
141162
</LetterContainer>
142163
{letterData.images.length > 0 && letterData.content.length > 0 ? (
@@ -242,6 +263,10 @@ const MainWrapper = styled.div`
242263
padding: 18px;
243264
overflow-y: auto;
244265
overflow-x: hidden;
266+
267+
@media (max-height: 680px) {
268+
justify-content: flex-start;
269+
}
245270
`;
246271

247272
const PopupContainer = styled.div`
@@ -307,44 +332,6 @@ const PopupBtn = styled.button`
307332
}
308333
`;
309334

310-
/*const Header = styled.div`
311-
display: flex;
312-
flex-direction: row;
313-
padding-bottom: 15px;
314-
width: 100%;
315-
`;
316-
317-
const HeaderTitle = styled.div`
318-
width: 100%;
319-
${(props) => props.theme.fonts.heading01};
320-
flex: 2;
321-
span {
322-
${(props) => props.theme.fonts.heading02};
323-
white-space: nowrap;
324-
}
325-
326-
@media (max-height: 780px) {
327-
${theme.fonts.title01};
328-
span {
329-
${(props) => props.theme.fonts.body03};
330-
}
331-
}
332-
333-
@media (max-height: 628px) {
334-
${theme.fonts.subtitle};
335-
span {
336-
${(props) => props.theme.fonts.body07};
337-
}
338-
}
339-
340-
@media (max-height: 580px) {
341-
${theme.fonts.subtitle};
342-
span {
343-
${(props) => props.theme.fonts.body07};
344-
}
345-
}
346-
`; */
347-
348335
const LetterContainer = styled.div`
349336
display: flex;
350337
justify-content: center;
@@ -356,6 +343,7 @@ const LetterContainer = styled.div`
356343
@media (max-height: 824px) {
357344
max-width: 320px;
358345
min-height: 350px;
346+
max-height: 350px;
359347
}
360348
361349
@media (max-height: 780px) {
@@ -366,11 +354,11 @@ const LetterContainer = styled.div`
366354
367355
@media (max-height: 680px) {
368356
max-width: 300px;
369-
min-height: 330px;
370-
max-height: 330px;
357+
min-height: 300px;
358+
max-height: 300px;
371359
}
372360
373-
@media (max-height: 580px) {
361+
@media (max-height: 600px) {
374362
max-width: 250px;
375363
min-height: 250px;
376364
max-height: 250px;
@@ -383,17 +371,6 @@ const LetterContainer = styled.div`
383371
}
384372
`;
385373

386-
const LetterCount = styled.div`
387-
display: flex;
388-
${(props) => props.theme.fonts.caption03};
389-
color: ${(props) => props.theme.colors.gray400};
390-
flex: 1;
391-
flex-direction: column;
392-
text-align: end;
393-
justify-content: end;
394-
padding: 5px;
395-
`;
396-
397374
const ButtonContainer = styled.div`
398375
width: 100%;
399376
position: absolute;

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

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,29 @@ const LetterPage = () => {
2727
const [isDelete, setIsDelete] = useState(false);
2828
const { showToast } = useToast();
2929

30+
const [maxLinesPerPage, setMaxLinesPerPage] = useState(12);
31+
32+
useEffect(() => {
33+
const updateMaxLines = () => {
34+
if (window.innerHeight > 800) {
35+
setMaxLinesPerPage(10);
36+
} else if (window.innerHeight > 680) {
37+
setMaxLinesPerPage(8);
38+
} else if (window.innerHeight > 600) {
39+
setMaxLinesPerPage(6);
40+
} else {
41+
setMaxLinesPerPage(5);
42+
}
43+
};
44+
45+
updateMaxLines();
46+
window.addEventListener('resize', updateMaxLines);
47+
48+
return () => {
49+
window.removeEventListener('resize', updateMaxLines);
50+
};
51+
}, []);
52+
3053
const handleButtonClick = (id: string) => {
3154
router.push(`/letter/${id}`);
3255
};
@@ -175,8 +198,8 @@ const LetterPage = () => {
175198
<MainWrapper>
176199
<LetterContainer>
177200
<Letter
201+
key={`${key}-${maxLinesPerPage}`}
178202
showType="receive"
179-
key={key}
180203
contentType="all"
181204
pageType="space"
182205
id={letterId || ''}
@@ -189,6 +212,7 @@ const LetterPage = () => {
189212
nextLetterId={letterData.next_letter?.letter_id}
190213
width="100%"
191214
height="100%"
215+
maxLines={maxLinesPerPage}
192216
/>
193217
</LetterContainer>
194218
{letterData.images.length > 0 && letterData.content.length > 0 ? (
@@ -289,6 +313,10 @@ const MainWrapper = styled.div`
289313
padding: 0 18px;
290314
overflow-y: auto;
291315
overflow-x: hidden;
316+
317+
@media (max-height: 680px) {
318+
justify-content: flex-start;
319+
}
292320
`;
293321

294322
const IconWrapper = styled.div`
@@ -375,21 +403,22 @@ const LetterContainer = styled.div`
375403
@media (max-height: 824px) {
376404
max-width: 320px;
377405
min-height: 350px;
406+
max-height: 350px;
378407
}
379408
380409
@media (max-height: 780px) {
381-
//max-width: 300px;
410+
max-width: 300px;
382411
min-height: 330px;
383412
max-height: 330px;
384413
}
385414
386415
@media (max-height: 680px) {
387416
max-width: 300px;
388-
min-height: 330px;
389-
max-height: 330px;
417+
min-height: 300px;
418+
max-height: 300px;
390419
}
391420
392-
@media (max-height: 580px) {
421+
@media (max-height: 600px) {
393422
max-width: 250px;
394423
min-height: 250px;
395424
max-height: 250px;

‎src/app/mypage/page.tsx‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,6 @@ const MyPage = () => {
1919
const [letterCount, setLetterCount] = useState(0);
2020
const [loading, setLoading] = useState(true);
2121

22-
const goToProfile = () => {
23-
router.push('/profile');
24-
};
25-
2622
useEffect(() => {
2723
fetchUserInfo();
2824
fetchGetCount();
@@ -225,23 +221,24 @@ const MainWrapper = styled.div`
225221
`;
226222

227223
const ProfileHeader = styled.div`
224+
height: 144px;
228225
display: flex;
229226
flex-direction: row;
230-
justify-content: space-between;
227+
justify-content: flex-start;
231228
align-items: center;
229+
gap: 25px;
230+
231+
@media (max-width: 370px) {
232+
gap: 10px;
233+
}
232234
`;
233235

234236
const ProfileImage = styled.img`
235-
width: 100%;
237+
width: 143px;
236238
height: auto;
237239
238-
@media (max-height: 760px) {
239-
width: 180px;
240-
}
241-
242-
@media (max-width: 400px) {
243-
width: 130px;
244-
height: 130px;
240+
@media (max-width: 370px) {
241+
width: 100px;
245242
}
246243
`;
247244

@@ -250,6 +247,7 @@ const ProfileInfo = styled.div`
250247
flex-direction: column;
251248
justify-content: center;
252249
gap: 4px;
250+
white-space: nowrap;
253251
`;
254252

255253
const ProfileName = styled.div`

0 commit comments

Comments
 (0)