Skip to content

Commit 295a01d

Browse files
gustn99gustn99
authored
Merge pull request #136 from oodd-team/OD-197
[OD-197] UI 점검 및 자잘한 수정
2 parents 75866e1 + 62bc596 commit 295a01d

8 files changed

Lines changed: 58 additions & 49 deletions

File tree

‎src/pages/Account/AccountCancel/styles.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,30 +16,30 @@ export const SubTitle = styled.h3`
1616
margin-bottom: 0.625rem;
1717
text-align: center;
1818
text-align: left;
19-
margin-top: 10px;
19+
margin-top: 0.625rem;
2020
padding: 1.25rem;
2121
`;
2222

2323
export const Text = styled.p`
2424
font-size: 0.875rem;
25-
margin-bottom: 5px;
25+
margin-bottom: 0.3125rem;
2626
text-align: left;
27-
margin-top: 10px;
27+
margin-top: 0.625rem;
2828
padding: 0rem 1.25rem;
2929
`;
3030

3131
export const InfoBox = styled.div`
3232
background: ${({ theme }) => theme.colors.background.secondary};
33-
padding: 70px;
34-
margin-top: 10px;
35-
border-radius: 10px;
36-
margin: 10px 20px 1.25rem 20px;
33+
padding: 4.375rem;
34+
margin-top: 0.625rem;
35+
border-radius: 0.625rem;
36+
margin: 0.625rem 1.25rem 1.25rem 1.25rem;
3737
`;
3838

3939
export const InfoItem = styled.p`
4040
font-size: 0.875rem;
4141
margin-bottom: 0.625rem;
42-
padding: 2px 10px;
42+
padding: 0.125rem 0.625rem;
4343
display: flex;
4444
justify-content: center;
4545
align-items: center;
@@ -51,7 +51,7 @@ export const CheckboxWrapper = styled.div`
5151
display: flex;
5252
align-items: center;
5353
margin-bottom: 1.25rem;
54-
padding: 0rem 15px;
54+
padding: 0rem 0.9375rem;
5555
5656
input[type='checkbox'] {
5757
margin-right: 0.625rem;

‎src/pages/Account/AccountEdit/styles.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { styled } from 'styled-components';
22

33
export const ProfileEditContainer = styled.div`
4-
max-width: 512px;
4+
max-width: 32rem;
55
display: flex;
66
flex-direction: column;
77
position: relative;
@@ -11,7 +11,7 @@ export const Section = styled.div`
1111
margin-top: 1.875rem;
1212
margin-bottom: 1.875rem;
1313
width: 100%;
14-
padding: 0px 30px;
14+
padding: 0rem 1.875rem;
1515
`;
1616

1717
export const SectionTitle = styled.div`
@@ -62,7 +62,7 @@ export const SnsConnection = styled.div`
6262
export const MemberInfo = styled.div`
6363
display: flex;
6464
flex-direction: column;
65-
margin-top: 35px;
65+
margin-top: 2.1875rem;
6666
width: 100%;
6767
`;
6868

@@ -71,7 +71,7 @@ export const MemberInfoRow = styled.div`
7171
align-items: center;
7272
justify-content: flex-start;
7373
margin-bottom: 0.625rem;
74-
margin-top: 10px;
74+
margin-top: 0.625rem;
7575
`;
7676

7777
export const Label = styled.div`

‎src/pages/Account/AccountSetting/styles.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const ProfilePicWrapper = styled.div`
1414
flex-direction: column;
1515
align-items: center;
1616
margin-bottom: 1.25rem;
17-
margin-top: 24px;
17+
margin-top: 1.5rem;
1818
`;
1919

2020
export const ProfilePic = styled.div`
@@ -42,7 +42,7 @@ export const Row = styled.div`
4242
justify-content: center;
4343
align-items: center;
4444
width: 100%;
45-
margin-bottom: 10px;
45+
margin-bottom: 0.625rem;
4646
4747
${Label} {
4848
width: auto;
@@ -59,15 +59,15 @@ export const List = styled.ul`
5959
padding: 0;
6060
margin: 0;
6161
list-style: none;
62-
border-top: 0px solid ${({ theme }) => theme.colors.background.divider};
62+
border-top: 0rem solid ${({ theme }) => theme.colors.background.divider};
6363
position: absolute;
64-
bottom: 20px;
64+
bottom: 1.25rem;
6565
`;
6666

6767
export const ListItem = styled.li`
6868
display: flex;
6969
align-items: center;
70-
padding: 15px 1.25rem;
70+
padding: 0.9375rem 1.25rem;
7171
border-bottom: 0px solid ${({ theme }) => theme.colors.background.divider};
7272
cursor: pointer;
7373

‎src/pages/Profile/ButtonSecondary/styles.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { styled } from 'styled-components';
22

33
export const Button = styled.button`
4-
width: 100%;
5-
margin: 16px auto;
4+
width: 90%;
5+
margin: 1rem auto;
66
height: 3.1rem;
77
text-align: center;
88
color: ${({ theme }) => theme.colors.brand.primary};
99
cursor: pointer;
1010
box-sizing: border-box;
11-
border: 1px solid;
12-
border-radius: 10px;
13-
padding: 10px;
11+
border: 0.0625rem solid;
12+
border-radius: 0.625rem;
13+
padding: 0.625rem;
14+
padding-inline: 1rem;
1415
`;

‎src/pages/Profile/NavbarProfile/styles.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export const Nav = styled.nav`
44
display: flex;
55
justify-content: space-between;
66
align-items: center;
7-
padding: 8px 20px;
7+
padding: 0.5rem 1.25rem;
88
position: fixed;
99
top: 0;
1010
left: 0;
@@ -17,7 +17,7 @@ export const Nav = styled.nav`
1717
export const IconContainer = styled.div`
1818
display: flex;
1919
align-items: center;
20-
margin-right: 18px;
20+
margin-right: 5px;
2121
2222
a {
2323
display: flex;

‎src/pages/Profile/ProfileEdit/styles.tsx‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const ProfilePicWrapper = styled.div`
1414
display: flex;
1515
flex-direction: column;
1616
align-items: center;
17-
margin-bottom: 10px;
17+
margin-bottom: 0.625rem;
1818
position: relative;
1919
`;
2020

@@ -25,19 +25,19 @@ export const Label = styled.label`
2525

2626
export const Input = styled.input`
2727
width: 100%;
28-
padding: 25px;
29-
margin: 10px 0;
30-
border: 0px;
28+
padding: 1.5625rem;
29+
margin: 0.625rem 0;
30+
border: 0rem;
3131
box-sizing: border-box;
32-
border-radius: 10px;
32+
border-radius: 0.625rem;
3333
background-color: ${({ theme }) => theme.colors.background.secondary};
3434
text-align: left;
3535
`;
3636

3737
export const Button = styled.button`
3838
position: absolute;
39-
bottom: 10px;
40-
right: 10px;
39+
bottom: 0.625rem;
40+
right: 0.625rem;
4141
z-index: 1;
4242
width: 1.7rem;
4343
height: 1.7rem;
@@ -50,18 +50,22 @@ export const Button = styled.button`
5050
`;
5151

5252
export const ProfilePic = styled.div`
53-
width: 7.25rem;
54-
height: 7.25rem;
53+
width: 7.5rem;
54+
height: 7.5rem;
5555
flex-shrink: 0;
5656
border-radius: 50%;
5757
overflow: hidden;
58-
margin-top: 2.125rem;
59-
margin-bottom: 15px;
58+
margin-top: 2rem;
59+
margin-bottom: 0.9375rem;
6060
6161
img {
6262
width: 100%;
6363
height: 100%;
6464
object-fit: cover;
65+
box-shadow:
66+
0px 2px 8px 0px rgba(0, 0, 0, 0.12),
67+
0px 1px 4px 0px rgba(0, 0, 0, 0.08),
68+
0px 0px 1px 0px rgba(0, 0, 0, 0.08);
6569
}
6670
`;
6771

@@ -72,21 +76,21 @@ export const Row = styled.div`
7276
flex-direction: column;
7377
align-items: stretch;
7478
width: 100%;
75-
margin-top: 0px;
76-
padding: 0px 20px;
79+
margin-top: 0rem;
80+
padding: 0rem 1.25rem;
7781
7882
${Label} {
7983
width: 6.25rem;
8084
}
8185
`;
8286

8387
export const EmailInput = styled.input`
84-
margin-bottom: 120px;
88+
margin-bottom: 7.5rem;
8589
width: 100%;
86-
padding: 25px;
90+
padding: 1.5625rem;
8791
border: 0px;
8892
box-sizing: border-box;
89-
border-radius: 10px;
93+
border-radius: 0.625rem;
9094
background-color: ${({ theme }) => theme.colors.background.secondary};
9195
text-align: left;
9296
`;
@@ -100,9 +104,9 @@ export const UserInfo = styled.div``;
100104
export const Username = styled.button`
101105
color: ${({ theme }) => theme.colors.text.primary};
102106
font-family: Pretendard;
103-
font-size: 22px;
107+
font-size: 1.375rem;
104108
font-style: normal;
105109
font-weight: 700;
106110
line-height: 136.4%;
107-
letter-spacing: -0.427px;
111+
letter-spacing: -0.0267rem;
108112
`;

‎src/pages/Profile/UserProfile/style.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ export const UserImg = styled.img`
1111
height: 4.5rem;
1212
object-fit: cover;
1313
border-radius: 50%;
14+
box-shadow:
15+
0px 2px 8px 0px rgba(0, 0, 0, 0.12),
16+
0px 1px 4px 0px rgba(0, 0, 0, 0.08),
17+
0px 0px 1px 0px rgba(0, 0, 0, 0.08);
1418
`;
1519

1620
export const UserDetailsContainer = styled.section`

‎src/pages/Profile/styles.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const ProfileContainer = styled.div`
1313
`;
1414

1515
export const Header = styled.div`
16-
margin: 8px 20px;
16+
margin: 0.5rem 1.25rem;
1717
display: flex;
1818
align-items: center;
1919
padding: 0rem;
@@ -57,9 +57,9 @@ export const PostsContainer = styled.div`
5757
display: flex;
5858
flex-wrap: wrap;
5959
justify-content: space-between;
60-
gap: 15px;
60+
gap: 0.9375rem;
6161
margin-bottom: 100px;
62-
padding: 20px;
62+
padding: 1.25rem;
6363
`;
6464

6565
export const AddButton = styled.button`
@@ -79,7 +79,7 @@ export const NoPostWrapper = styled.div`
7979
display: flex;
8080
justify-content: center;
8181
align-items: center;
82-
margin-top: 80px;
82+
margin-top: 5rem;
8383
`;
8484

8585
export const Button = styled.button`
@@ -90,7 +90,7 @@ export const Button = styled.button`
9090
color: ${({ theme }) => theme.colors.text.contrast};
9191
cursor: pointer;
9292
box-sizing: border-box;
93-
border-radius: 10px;
94-
padding: 10px;
93+
border-radius: 0.625rem;
94+
padding: 0.625rem;
9595
background: ${({ theme }) => theme.colors.brand.gradient};
9696
`;

0 commit comments

Comments
 (0)