Skip to content

Commit d273ed3

Browse files
yyypearlyyypearl
authored
Merge pull request #157 from ASAP-Lettering/feat/#155
[Design] 온보딩 반응형 및 보낸 편지함 규격 수정
2 parents 3e48753 + 6eb4d8d commit d273ed3

4 files changed

Lines changed: 110 additions & 72 deletions

File tree

‎src/app/mypage/page.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -226,11 +226,7 @@ const ProfileHeader = styled.div`
226226
flex-direction: row;
227227
justify-content: flex-start;
228228
align-items: center;
229-
gap: 25px;
230-
231-
@media (max-width: 370px) {
232-
gap: 10px;
233-
}
229+
gap: 10px;
234230
`;
235231

236232
const ProfileImage = styled.img`

‎src/app/mypage/send/[id]/page.tsx‎

Lines changed: 33 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,25 @@ const SendDetailPage = () => {
2020
const [letterCode, setLetterCode] = useState('');
2121

2222
const [maxLinesPerPage, setMaxLinesPerPage] = useState(12);
23+
const [fontSize, setFontSize] = useState<string>('16px');
2324

2425
useEffect(() => {
2526
const updateMaxLines = () => {
2627
if (window.innerHeight > 780) {
27-
setMaxLinesPerPage(10);
28-
} else if (window.innerHeight > 630) {
29-
setMaxLinesPerPage(7);
28+
setMaxLinesPerPage(11);
29+
setFontSize('16px');
30+
} else if (window.innerHeight > 660) {
31+
setMaxLinesPerPage(9);
32+
setFontSize('16px');
33+
} else if (window.innerHeight > 628) {
34+
setMaxLinesPerPage(8);
35+
setFontSize('16px');
3036
} else if (window.innerHeight > 580) {
31-
setMaxLinesPerPage(5);
37+
setMaxLinesPerPage(7);
38+
setFontSize('16px');
3239
} else {
33-
setMaxLinesPerPage(6);
40+
setMaxLinesPerPage(8);
41+
setFontSize('11px');
3442
}
3543
};
3644

@@ -71,12 +79,16 @@ const SendDetailPage = () => {
7179
<MainWrapper>
7280
<Header>
7381
<LetterCount>
74-
편지 정보 | {letterData.content.length}자{' '}
82+
{letterData.sendDate} | {letterData.content.length}자{' '}
7583
{letterData.images.length > 0 &&
7684
` · 사진 ${letterData.images.length}장`}
7785
</LetterCount>
7886
</Header>
79-
<LetterContainer>
87+
<LetterContainer
88+
$hasChangeButton={
89+
letterData.content.length > 0 && letterData.images.length > 0
90+
}
91+
>
8092
<Letter
8193
key={`${key}-${maxLinesPerPage}`}
8294
showType="send"
@@ -85,12 +97,12 @@ const SendDetailPage = () => {
8597
name={letterData.receiverName}
8698
content={letterData.content}
8799
images={letterData.images}
88-
date={letterData.sendDate}
89100
readOnly={true}
90101
isImage={isImage}
91102
width="100%"
92103
height="100%"
93104
maxLines={maxLinesPerPage}
105+
fontSize={fontSize}
94106
/>
95107
</LetterContainer>
96108
<WhiteSpace />
@@ -170,48 +182,40 @@ const Header = styled.div`
170182
width: 100%;
171183
`;
172184

173-
const LetterContainer = styled.div`
185+
const LetterContainer = styled.div<{ $hasChangeButton: boolean }>`
174186
display: flex;
175187
justify-content: center;
176188
width: 100%;
177189
max-width: 345px;
178190
min-height: 398px;
179191
max-height: 398px;
192+
margin-bottom: ${({ $hasChangeButton }) => ($hasChangeButton ? '0' : '80px')};
180193
181-
@media (max-height: 824px) {
182-
max-width: 320px;
183-
max-height: 350px;
194+
@media (max-height: 780px) {
184195
min-height: 350px;
196+
max-height: 350px;
185197
}
186198
187-
@media (max-height: 780px) {
188-
max-width: 300px;
199+
@media (max-height: 660px) {
189200
min-height: 330px;
190201
max-height: 330px;
191202
}
192203
193-
@media (max-height: 680px) {
194-
max-width: 300px;
195-
min-height: 330px;
196-
max-height: 330px;
204+
@media (max-height: 628px) {
205+
min-height: 310px;
206+
max-height: 310px;
197207
}
198208
199-
@media (max-height: 630px) {
200-
max-width: 300px;
209+
@media (max-height: 580px) {
201210
min-height: 280px;
202211
max-height: 280px;
203212
}
204213
205-
@media (max-height: 580px) {
206-
max-width: 250px;
207-
min-height: 250px;
208-
max-height: 250px;
209-
}
210-
211214
@media (max-height: 550px) {
212-
max-width: 250px;
213-
min-height: 250px;
214-
max-height: 250px;
215+
min-height: 260px;
216+
max-height: 260px;
217+
margin-bottom: ${({ $hasChangeButton }) =>
218+
$hasChangeButton ? '0' : '55px'};
215219
}
216220
`;
217221

‎src/app/onboarding/page.tsx‎

Lines changed: 68 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -49,20 +49,24 @@ const Onboarding = () => {
4949
<ContentWrapper {...handlers}>
5050
<ContentSlider style={{ transform: `translateX(${xOffset}%)` }}>
5151
<Content active={currentPage === 0}>
52-
<MainTitle>채팅방 속 잠들어 있는 편지를 보관하세요</MainTitle>
53-
<SubTitle>
54-
소중한 사람에게 받은 메신저 편지를
55-
<br /> 레터링에 모아둘 수 있어요
56-
</SubTitle>
52+
<Text>
53+
<MainTitle>채팅방 속 잠들어 있는 편지를 보관하세요</MainTitle>
54+
<SubTitle>
55+
소중한 사람에게 받은 메신저 편지를
56+
<br /> 레터링에 모아둘 수 있어요
57+
</SubTitle>
58+
</Text>
5759
<ContentImage src="/assets/onboarding/onboarding-pic2.png" />
5860
</Content>
5961
<Content active={currentPage === 1}>
60-
<MainTitle>드래그하여 손쉽게 편지를 정리해봐요</MainTitle>
61-
<SubTitle>
62-
행성은 폴더의 역할과 같아요
63-
<br />
64-
원하는 행성 안에 편지를 보관할 수 있어요
65-
</SubTitle>
62+
<Text>
63+
<MainTitle>드래그하여 손쉽게 편지를 정리해봐요</MainTitle>
64+
<SubTitle>
65+
행성은 폴더의 역할과 같아요
66+
<br />
67+
원하는 행성 안에 편지를 보관할 수 있어요
68+
</SubTitle>
69+
</Text>
6670
<ContentImage src="/assets/gif/onboarding_final.gif" />
6771
</Content>
6872
</ContentSlider>
@@ -78,12 +82,14 @@ const Onboarding = () => {
7882
))}
7983
</LetterImageContainer>
8084
)}
85+
</MainContainer>
86+
<ButtonWrapper>
8187
<Button
8288
buttonType="primary"
8389
text={currentPage === 0 ? '다음' : '시작하기'}
8490
onClick={handleBtnClick}
8591
/>
86-
</MainContainer>
92+
</ButtonWrapper>
8793
</Container>
8894
);
8995
};
@@ -106,10 +112,10 @@ const Container = styled.div`
106112
display: flex;
107113
flex-direction: column;
108114
width: 100%;
109-
min-width: 393px;
110115
height: 100%;
116+
min-height: 550px;
111117
justify-content: space-between;
112-
color: white;
118+
color: ${theme.colors.white};
113119
background-image: url('/assets/mypage/img_background.png');
114120
background-size: cover;
115121
background-position: center;
@@ -120,13 +126,14 @@ const Container = styled.div`
120126
const MainContainer = styled.div`
121127
display: flex;
122128
flex-direction: column;
129+
width: 100%;
123130
height: 100%;
131+
min-height: 550px;
124132
align-items: center;
125133
justify-content: space-between;
126-
padding: 24px;
134+
padding: 24px 24px 80px 24px;
127135
overflow: hidden;
128136
box-sizing: border-box;
129-
width: 100%;
130137
touch-action: none; /* 기본 스크롤 방지 */
131138
transition: transform 0.3s ease-in-out; /* 페이지 전환 애니메이션 */
132139
`;
@@ -148,26 +155,46 @@ const ContentSlider = styled.div`
148155

149156
const Content = styled.div<{ active: boolean }>`
150157
width: 100%;
151-
min-height: 800px;
158+
height: 100vh;
159+
min-height: 550px;
152160
flex-shrink: 0;
153161
overflow: hidden;
154162
display: flex;
155163
flex-direction: column;
156164
align-items: center;
157-
justify-content: center;
165+
justify-content: flex-start;
158166
overflow: hidden;
159167
position: relative;
160168
`;
161169

170+
const Text = styled.div`
171+
width: 100%;
172+
flex-direction: column;
173+
align-items: center;
174+
justify-content: center;
175+
padding-top: 100px;
176+
177+
@media (max-height: 850px) {
178+
padding-top: 80px;
179+
}
180+
@media (max-height: 800px) {
181+
padding-top: 60px;
182+
}
183+
@media (max-height: 700px) {
184+
padding-top: 30px;
185+
}
186+
@media (max-height: 628px) {
187+
padding-top: 10px;
188+
}
189+
@media (max-height: 580px) {
190+
padding-top: 0px;
191+
}
192+
`;
193+
162194
const MainTitle = styled.div`
163-
color: white;
195+
color: ${theme.colors.white};
164196
text-align: center;
165-
font-family: Pretendard;
166-
font-size: 20px;
167-
font-style: normal;
168-
font-weight: 600;
169-
line-height: 34px;
170-
letter-spacing: -0.6px;
197+
${theme.fonts.title01};
171198
box-sizing: border-box;
172199
padding-top: 31px;
173200
user-select: none;
@@ -196,18 +223,20 @@ const LetterImage = styled.img`
196223
aspect-ratio: 1; // 정사각형 비율 유지
197224
border-radius: 5px;
198225
object-fit: cover;
199-
background-color: black;
200226
`;
201227

202228
const ContentImage = styled.img`
203-
width: 80%;
204-
min-width: 280px;
205-
min-height: 600px;
206-
margin-top: 36px;
229+
max-width: 346px;
230+
max-height: 60vh;
231+
height: auto;
207232
align-items: center;
208233
border-radius: 12px;
209234
border: 4px solid ${theme.colors.gray800};
210235
object-fit: contain;
236+
position: absolute;
237+
bottom: 65px;
238+
left: 50%;
239+
transform: translateX(-50%);
211240
212241
//드래그방지
213242
-webkit-user-select: none;
@@ -230,3 +259,12 @@ const LoaderContainer = styled.div`
230259
align-items: center;
231260
justify-content: center;
232261
`;
262+
263+
const ButtonWrapper = styled.div`
264+
width: 100%;
265+
padding: 0 24px;
266+
position: absolute;
267+
bottom: 24px;
268+
left: 50%;
269+
transform: translateX(-50%);
270+
`;

‎src/app/planet/page.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -531,14 +531,14 @@ const PlanetPage = () => {
531531
onOrbitTouch={handleTagTouch}
532532
/>
533533
</BottomWrapper>
534-
{showTooltip && (
535-
<Tooltip
536-
message={`먼저 편지를 보관한 후, 행성으로 끌어 당겨보세요`}
537-
close={true}
538-
bottom="230px"
539-
onClose={() => setShowTooltip(false)}
540-
/>
541-
)}
534+
{/* {showTooltip && ( */}
535+
<Tooltip
536+
message={`먼저 편지를 보관한 후, 행성으로 끌어 당겨보세요`}
537+
close={true}
538+
bottom="230px"
539+
onClose={() => setShowTooltip(false)}
540+
/>
541+
{/* )} */}
542542
</Container>
543543
</>
544544
)}

0 commit comments

Comments
 (0)