Skip to content

[Design] 온보딩 반응형 및 보낸 편지함 규격 수정 #157

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yyypearl merged 4 commits into from
Feb 27, 2025
Merged

[Design] 온보딩 반응형 및 보낸 편지함 규격 수정 #157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2de066d
💄 design(#155): 온보딩 반응형 수정
yyypearl Feb 27, 2025
b053352
💄 design(#155): 마이페이지 프로필 gap 조정
yyypearl Feb 27, 2025
5e848a2
💄 design(#155): 보낸 편지와 편지 열람 편지지 규격 통일
yyypearl Feb 27, 2025
6eb4d8d
💄 design(#155): 보낸 편지 컴포넌트 내부 날짜 페이지 내로 위치 수정
yyypearl Feb 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions src/app/mypage/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,11 +226,7 @@ const ProfileHeader = styled.div`
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 25px;

@media (max-width: 370px) {
gap: 10px;
}
gap: 10px;
`;

const ProfileImage = styled.img`
Expand Down
62 changes: 33 additions & 29 deletions src/app/mypage/send/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,25 @@ const SendDetailPage = () => {
const [letterCode, setLetterCode] = useState('');

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

useEffect(() => {
const updateMaxLines = () => {
if (window.innerHeight > 780) {
setMaxLinesPerPage(10);
} else if (window.innerHeight > 630) {
setMaxLinesPerPage(7);
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(5);
setMaxLinesPerPage(7);
setFontSize('16px');
} else {
setMaxLinesPerPage(6);
setMaxLinesPerPage(8);
setFontSize('11px');
}
};

Expand Down Expand Up @@ -71,12 +79,16 @@ const SendDetailPage = () => {
<MainWrapper>
<Header>
<LetterCount>
편지 정보 | {letterData.content.length}자{' '}
{letterData.sendDate} | {letterData.content.length}자{' '}
{letterData.images.length > 0 &&
` · 사진 ${letterData.images.length}장`}
</LetterCount>
</Header>
<LetterContainer>
<LetterContainer
$hasChangeButton={
letterData.content.length > 0 && letterData.images.length > 0
}
>
<Letter
key={`${key}-${maxLinesPerPage}`}
showType="send"
Expand All @@ -85,12 +97,12 @@ const SendDetailPage = () => {
name={letterData.receiverName}
content={letterData.content}
images={letterData.images}
date={letterData.sendDate}
readOnly={true}
isImage={isImage}
width="100%"
height="100%"
maxLines={maxLinesPerPage}
fontSize={fontSize}
/>
</LetterContainer>
<WhiteSpace />
Expand Down Expand Up @@ -170,48 +182,40 @@ const Header = styled.div`
width: 100%;
`;

const LetterContainer = styled.div`
const LetterContainer = styled.div<{ $hasChangeButton: boolean }>`
display: flex;
justify-content: 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;
max-height: 350px;
@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: 330px;
max-height: 330px;
@media (max-height: 628px) {
min-height: 310px;
max-height: 310px;
}

@media (max-height: 630px) {
max-width: 300px;
@media (max-height: 580px) {
min-height: 280px;
max-height: 280px;
}

@media (max-height: 580px) {
max-width: 250px;
min-height: 250px;
max-height: 250px;
}

@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'};
}
`;

Expand Down
98 changes: 68 additions & 30 deletions src/app/onboarding/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,20 +49,24 @@ const Onboarding = () => {
<ContentWrapper {...handlers}>
<ContentSlider style={{ transform: `translateX(${xOffset}%)` }}>
<Content active={currentPage === 0}>
<MainTitle>채팅방 속 잠들어 있는 편지를 보관하세요</MainTitle>
<SubTitle>
소중한 사람에게 받은 메신저 편지를
<br /> 레터링에 모아둘 수 있어요
</SubTitle>
<Text>
<MainTitle>채팅방 속 잠들어 있는 편지를 보관하세요</MainTitle>
<SubTitle>
소중한 사람에게 받은 메신저 편지를
<br /> 레터링에 모아둘 수 있어요
</SubTitle>
</Text>
<ContentImage src="/assets/onboarding/onboarding-pic2.png" />
</Content>
<Content active={currentPage === 1}>
<MainTitle>드래그하여 손쉽게 편지를 정리해봐요</MainTitle>
<SubTitle>
행성은 폴더의 역할과 같아요
<br />
원하는 행성 안에 편지를 보관할 수 있어요
</SubTitle>
<Text>
<MainTitle>드래그하여 손쉽게 편지를 정리해봐요</MainTitle>
<SubTitle>
행성은 폴더의 역할과 같아요
<br />
원하는 행성 안에 편지를 보관할 수 있어요
</SubTitle>
</Text>
<ContentImage src="/assets/gif/onboarding_final.gif" />
</Content>
</ContentSlider>
Expand All @@ -78,12 +82,14 @@ const Onboarding = () => {
))}
</LetterImageContainer>
)}
</MainContainer>
<ButtonWrapper>
<Button
buttonType="primary"
text={currentPage === 0 ? '다음' : '시작하기'}
onClick={handleBtnClick}
/>
</MainContainer>
</ButtonWrapper>
</Container>
);
};
Expand All @@ -106,10 +112,10 @@ const Container = styled.div`
display: flex;
flex-direction: column;
width: 100%;
min-width: 393px;
height: 100%;
min-height: 550px;
justify-content: space-between;
color: white;
color: ${theme.colors.white};
background-image: url('/assets/mypage/img_background.png');
background-size: cover;
background-position: center;
Expand All @@ -120,13 +126,14 @@ const Container = styled.div`
const MainContainer = styled.div`
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-height: 550px;
align-items: center;
justify-content: space-between;
padding: 24px;
padding: 24px 24px 80px 24px;
overflow: hidden;
box-sizing: border-box;
width: 100%;
touch-action: none; /* 기본 스크롤 방지 */
transition: transform 0.3s ease-in-out; /* 페이지 전환 애니메이션 */
`;
Expand All @@ -148,26 +155,46 @@ const ContentSlider = styled.div`

const Content = styled.div<{ active: boolean }>`
width: 100%;
min-height: 800px;
height: 100vh;
min-height: 550px;
flex-shrink: 0;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-content: flex-start;
overflow: hidden;
position: relative;
`;

const Text = styled.div`
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 100px;

@media (max-height: 850px) {
padding-top: 80px;
}
@media (max-height: 800px) {
padding-top: 60px;
}
@media (max-height: 700px) {
padding-top: 30px;
}
@media (max-height: 628px) {
padding-top: 10px;
}
@media (max-height: 580px) {
padding-top: 0px;
}
`;

const MainTitle = styled.div`
color: white;
color: ${theme.colors.white};
text-align: center;
font-family: Pretendard;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 34px;
letter-spacing: -0.6px;
${theme.fonts.title01};
box-sizing: border-box;
padding-top: 31px;
user-select: none;
Expand Down Expand Up @@ -196,18 +223,20 @@ const LetterImage = styled.img`
aspect-ratio: 1; // 정사각형 비율 유지
border-radius: 5px;
object-fit: cover;
background-color: black;
`;

const ContentImage = styled.img`
width: 80%;
min-width: 280px;
min-height: 600px;
margin-top: 36px;
max-width: 346px;
max-height: 60vh;
height: auto;
align-items: center;
border-radius: 12px;
border: 4px solid ${theme.colors.gray800};
object-fit: contain;
position: absolute;
bottom: 65px;
left: 50%;
transform: translateX(-50%);

//드래그방지
-webkit-user-select: none;
Expand All @@ -230,3 +259,12 @@ const LoaderContainer = styled.div`
align-items: center;
justify-content: center;
`;

const ButtonWrapper = styled.div`
width: 100%;
padding: 0 24px;
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
`;
16 changes: 8 additions & 8 deletions src/app/planet/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -531,14 +531,14 @@ const PlanetPage = () => {
onOrbitTouch={handleTagTouch}
/>
</BottomWrapper>
{showTooltip && (
<Tooltip
message={`먼저 편지를 보관한 후, 행성으로 끌어 당겨보세요`}
close={true}
bottom="230px"
onClose={() => setShowTooltip(false)}
/>
)}
{/* {showTooltip && ( */}
<Tooltip
message={`먼저 편지를 보관한 후, 행성으로 끌어 당겨보세요`}
close={true}
bottom="230px"
onClose={() => setShowTooltip(false)}
/>
{/* )} */}
</Container>
</>
)}
Expand Down