Skip to content

Commit

Permalink
💄 Design: 설정 화면 UI 수정 (#29)
Browse files Browse the repository at this point in the history
  • Loading branch information
@SuKyeong2002
SuKyeong2002 committed Aug 31, 2024
1 parent 4349dec commit 8d8f4db
Showing 1 changed file with 152 additions and 81 deletions.
233 changes: 152 additions & 81 deletions src/pages/settings/Settings.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,9 @@ const Settings = () => {
<>
<Menubar />
<Box>
<LogoText>M</LogoText>
<Link to="/" style={{ textDecoration: "none" }}>
<LogoText>M</LogoText>
</Link>
<MyText>내정보</MyText>
<ProfileSection>
<ProfileImage src={ProfileIcon} alt="Profile" />
Expand All @@ -92,18 +94,17 @@ const Settings = () => {
</ProfileSection>
</Box>
<Container>
<Link to="/information-setting">
<LinkWrapper>
<InformationImg src={UserInformIcon} alt="UserInform" />
<TextWrapper>
<Text>사용자 정보</Text>
<SubText>사용자의 정보를 조회할 수 있습니다.</SubText>
</TextWrapper>
<Img src={FrontArrowIcon} alt="FrontArrow" />
</LinkWrapper>
</Link>
<StyledWrapper as={Link} to="/information-setting">
<InformationImg src={UserInformIcon} alt="UserInform" />
<TextWrapper>
<Text>사용자 정보</Text>
<SubText>사용자의 정보를 조회할 수 있습니다.</SubText>
</TextWrapper>
<Img src={FrontArrowIcon} alt="FrontArrow" />
</StyledWrapper>
<Separator />
<FeedbackWrapper
<StyledWrapper
as="a"
href="https://open.kakao.com/o/sSeRtsGg"
target="_blank"
rel="noopener noreferrer"
Expand All @@ -114,27 +115,25 @@ const Settings = () => {
<SubText>개발자에게 피드백을 할 수 있습니다.</SubText>
</FeedbackTextWrapper>
<Img src={FrontArrowIcon} alt="FrontArrow" />
</FeedbackWrapper>
</StyledWrapper>
<Separator />
<LogoutWrapper onClick={handleLogoutClick}>
<StyledWrapper as="div" onClick={handleLogoutClick}>
<LogoutImg src={LogoutIcon} alt="Logout" />
<TextWrapper>
<Text>로그아웃</Text>
<SubText>일시적으로 계정을 나갈 수 있습니다.</SubText>
</TextWrapper>
<Img src={FrontArrowIcon} alt="FrontArrow" />
</LogoutWrapper>
</StyledWrapper>
<Separator />
<Link to="/Withdrawal-setting">
<WithdrawalWrapper>
<WithdrawalImg src={WithdrawalIcon} alt="Withdrawal" />
<TextWrapper>
<Text>회원탈퇴</Text>
<SubText>영구적으로 계정을 지울 수 있습니다.</SubText>
</TextWrapper>
<Img src={FrontArrowIcon} alt="FrontArrow" />
</WithdrawalWrapper>
</Link>
<StyledWrapper as={Link} to="/Withdrawal-setting">
<WithdrawalImg src={WithdrawalIcon} alt="Withdrawal" />
<TextWrapper>
<Text>회원탈퇴</Text>
<SubText>영구적으로 계정을 지울 수 있습니다.</SubText>
</TextWrapper>
<Img src={FrontArrowIcon} alt="FrontArrow" />
</StyledWrapper>
</Container>
</>
);
Expand Down Expand Up @@ -167,10 +166,19 @@ const ProfileSection = styled.div`
`;

const ProfileImage = styled.img`
width: 100px;
height: 100px;
border-radius: 50%;
margin: 20px 5px;
@media (max-width: 430px) and (max-height: 932px) {
width: 120px;
height: 120px;
margin: 30px 10px;
}
@media (max-width: 360px) and (max-height: 780px) {
width: 100px;
height: 100px;
margin: 25px 10px;
}
`;

const ProfileInfo = styled.div`
Expand All @@ -179,40 +187,19 @@ const ProfileInfo = styled.div`
gap: 10px;
`;

const EditProfile = styled.span`
font-size: 14px;
color: #007bff;
cursor: pointer;
text-decoration: underline;
`;

const LinkWrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
`;

const FeedbackWrapper = styled.a`
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
`;

const LogoutWrapper = styled.div`
const StyledWrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 10px 0;
cursor: pointer;
`;
text-decoration: none;
color: inherit;
const WithdrawalWrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
&:hover {
background-color: #f9f9f9;
}
`;

const Separator = styled.div`
Expand All @@ -221,90 +208,174 @@ const Separator = styled.div`
margin: 20px 0;
`;

const FeedbackImg = styled.img`
const InformationImg = styled.img`
cursor: pointer;
width: 25px;
height: 25px;
@media (max-width: 430px) and (max-height: 932px) {
width: 35px;
height: 35px;
}
@media (max-width: 360px) and (max-height: 780px) {
width: 30px;
height: 30px;
}
`;

const InformationImg = styled.img`
const FeedbackImg = styled.img`
cursor: pointer;
width: 30px;
height: 30px;
margin: 0 0 0 -50px;
@media (max-width: 430px) and (max-height: 932px) {
width: 30px;
height: 30px;
}
@media (max-width: 360px) and (max-height: 780px) {
width: 25px;
height: 25px;
}
`;

const LogoutImg = styled.img`
cursor: pointer;
width: 30px;
height: 30px;
@media (max-width: 430px) and (max-height: 932px) {
width: 35px;
height: 35px;
}
@media (max-width: 360px) and (max-height: 780px) {
width: 30px;
height: 30px;
}
`;

const WithdrawalImg = styled.img`
cursor: pointer;
width: 30px;
height: 30px;
opacity: 40%;
margin: 0;
@media (max-width: 430px) and (max-height: 932px) {
width: 35px;
height: 35px;
}
@media (max-width: 360px) and (max-height: 780px) {
width: 30px;
height: 30px;
}
`;

const Img = styled.img`
width: 25px;
height: 25px;
margin-left: 10px;
`;
const TextWrapper = styled.div`
display: flex;
flex-direction: column;
@media (max-width: 430px) and (max-height: 932px) {
width: 35px;
height: 35px;
margin-left: 15px;
}
@media (max-width: 360px) and (max-height: 780px) {
width: 25px;
height: 25px;
margin-left: 10px;
}
`;

const InformTextWrapper = styled.div`
const TextWrapper = styled.div`
display: flex;
flex-direction: column;
margin-left: 10px;
`;

const FeedbackTextWrapper = styled.div`
display: flex;
flex-direction: column;
margin-left: 15px;
`;

const Text = styled.span`
font-size: 16px;
color: #333;
cursor: pointer;
@media (max-width: 430px) and (max-height: 932px) {
font-size: 18px;
}
@media (max-width: 360px) and (max-height: 780px) {
font-size: 16px;
}
`;

const LogoText = styled.span`
font-size: 18pt;
font-weight: bold;
color: #ffffff;
cursor: pointer;
@media (max-width: 430px) and (max-height: 932px) {
font-size: 30px;
}
@media (max-width: 360px) and (max-height: 780px) {
font-size: 18pt;
}
`;

const MyText = styled.span`
margin: 10px;
font-size: 18px;
color: #ffffff;
cursor: pointer;
@media (max-width: 430px) and (max-height: 932px) {
font-size: 25px;
}
@media (max-width: 360px) and (max-height: 780px) {
font-size: 14pt;
}
`;

const Name = styled.span`
margin-left: 20px;
font-size: 16px;
color: #ffffff;
cursor: pointer;
@media (max-width: 430px) and (max-height: 932px) {
margin-left: 25px;
font-size: 21px;
}
@media (max-width: 360px) and (max-height: 780px) {
margin-left: 20px;
font-size: 16px;
}
`;

const Email = styled.span`
margin-left: 20px;
font-size: 12px;
color: #bbbbbb;
cursor: pointer;
@media (max-width: 430px) and (max-height: 932px) {
margin-left: 25px;
font-size: 16px;
}
@media (max-width: 360px) and (max-height: 780px) {
margin-left: 20px;
font-size: 12px;
}
`;

const SubText = styled.span`
font-size: 12px;
color: #666;
margin-top: 5px;
@media (max-width: 430px) and (max-height: 932px) {
font-size: 14px;
opacity: 70%;
}
@media (max-width: 360px) and (max-height: 780px) {
font-size: 12px;
}
`;

0 comments on commit 8d8f4db

Please sign in to comment.