Refactor: px to rem

Author: lalaurrel

src/pages/Account/AccountCancel/styles.tsx

@@ -16,30 +16,30 @@ export const SubTitle = styled.h3`
 	margin-bottom: 0.625rem;
 	text-align: center;
 	text-align: left;
-	margin-top: 10px;
+	margin-top: 0.625rem;
 	padding: 1.25rem;
 `;
 
 export const Text = styled.p`
 	font-size: 0.875rem;
-	margin-bottom: 5px;
+	margin-bottom: 0.3125rem;
 	text-align: left;
-	margin-top: 10px;
+	margin-top: 0.625rem;
 	padding: 0rem 1.25rem;
 `;
 
 export const InfoBox = styled.div`
 	background: ${({ theme }) => theme.colors.background.secondary};
-	padding: 70px;
-	margin-top: 10px;
-	border-radius: 10px;
-	margin: 10px 20px 1.25rem 20px;
+	padding: 4.375rem;
+	margin-top: 0.625rem;
+	border-radius: 0.625rem;
+	margin: 0.625rem 1.25rem 1.25rem 1.25rem;
 `;
 
 export const InfoItem = styled.p`
 	font-size: 0.875rem;
 	margin-bottom: 0.625rem;
-	padding: 2px 10px;
+	padding: 0.125rem 0.625rem;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -51,7 +51,7 @@ export const CheckboxWrapper = styled.div`
 	display: flex;
 	align-items: center;
 	margin-bottom: 1.25rem;
-	padding: 0rem 15px;
+	padding: 0rem 0.9375rem;
 
 	input[type='checkbox'] {
 		margin-right: 0.625rem;

src/pages/Account/AccountEdit/styles.tsx

@@ -1,7 +1,7 @@
 import { styled } from 'styled-components';
 
 export const ProfileEditContainer = styled.div`
-	max-width: 512px;
+	max-width: 32rem;
 	display: flex;
 	flex-direction: column;
 	position: relative;
@@ -11,7 +11,7 @@ export const Section = styled.div`
 	margin-top: 1.875rem;
 	margin-bottom: 1.875rem;
 	width: 100%;
-	padding: 0px 30px;
+	padding: 0rem 1.875rem;
 `;
 
 export const SectionTitle = styled.div`
@@ -62,7 +62,7 @@ export const SnsConnection = styled.div`
 export const MemberInfo = styled.div`
 	display: flex;
 	flex-direction: column;
-	margin-top: 35px;
+	margin-top: 2.1875rem;
 	width: 100%;
 `;
 
@@ -71,7 +71,7 @@ export const MemberInfoRow = styled.div`
 	align-items: center;
 	justify-content: flex-start;
 	margin-bottom: 0.625rem;
-	margin-top: 10px;
+	margin-top: 0.625rem;
 `;
 
 export const Label = styled.div`

src/pages/Account/AccountSetting/styles.tsx

@@ -14,7 +14,7 @@ export const ProfilePicWrapper = styled.div`
 	flex-direction: column;
 	align-items: center;
 	margin-bottom: 1.25rem;
-	margin-top: 24px;
+	margin-top: 1.5rem;
 `;
 
 export const ProfilePic = styled.div`
@@ -42,7 +42,7 @@ export const Row = styled.div`
 	justify-content: center;
 	align-items: center;
 	width: 100%;
-	margin-bottom: 10px;
+	margin-bottom: 0.625rem;
 
 	${Label} {
 		width: auto;
@@ -59,15 +59,15 @@ export const List = styled.ul`
 	padding: 0;
 	margin: 0;
 	list-style: none;
-	border-top: 0px solid ${({ theme }) => theme.colors.background.divider};
+	border-top: 0rem solid ${({ theme }) => theme.colors.background.divider};
 	position: absolute;
-	bottom: 20px;
+	bottom: 1.25rem;
 `;
 
 export const ListItem = styled.li`
 	display: flex;
 	align-items: center;
-	padding: 15px 1.25rem;
+	padding: 0.9375rem 1.25rem;
 	border-bottom: 0px solid ${({ theme }) => theme.colors.background.divider};
 	cursor: pointer;
 

src/pages/Profile/ButtonSecondary/styles.tsx

@@ -2,13 +2,13 @@ import { styled } from 'styled-components';
 
 export const Button = styled.button`
 	width: 100%;
-	margin: 16px auto;
+	margin: 1rem auto;
 	height: 3.1rem;
 	text-align: center;
 	color: ${({ theme }) => theme.colors.brand.primary};
 	cursor: pointer;
 	box-sizing: border-box;
-	border: 1px solid;
-	border-radius: 10px;
-	padding: 10px;
+	border: 0.0625rem solid;
+	border-radius: 0.625rem;
+	padding: 0.625rem;
 `;

src/pages/Profile/NavbarProfile/styles.tsx

@@ -4,7 +4,7 @@ export const Nav = styled.nav`
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	padding: 8px 20px;
+	padding: 0.5rem 1.25rem;
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -17,7 +17,7 @@ export const Nav = styled.nav`
 export const IconContainer = styled.div`
 	display: flex;
 	align-items: center;
-	margin-right: 18px;
+	margin-right: 1.125rem;
 
 	a {
 		display: flex;

src/pages/Profile/ProfileEdit/styles.tsx

@@ -14,7 +14,7 @@ export const ProfilePicWrapper = styled.div`
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	margin-bottom: 10px;
+	margin-bottom: 0.625rem;
 	position: relative;
 `;
 
@@ -25,19 +25,19 @@ export const Label = styled.label`
 
 export const Input = styled.input`
 	width: 100%;
-	padding: 25px;
-	margin: 10px 0;
-	border: 0px;
+	padding: 1.5625rem;
+	margin: 0.625rem 0;
+	border: 0rem;
 	box-sizing: border-box;
-	border-radius: 10px;
+	border-radius: 0.625rem;
 	background-color: ${({ theme }) => theme.colors.background.secondary};
 	text-align: left;
 `;
 
 export const Button = styled.button`
 	position: absolute;
-	bottom: 10px;
-	right: 10px;
+	bottom: 0.625rem;
+	right: 0.625rem;
 	z-index: 1;
 	width: 1.7rem;
 	height: 1.7rem;
@@ -56,7 +56,7 @@ export const ProfilePic = styled.div`
 	border-radius: 50%;
 	overflow: hidden;
 	margin-top: 2.125rem;
-	margin-bottom: 15px;
+	margin-bottom: 0.9375rem;
 
 	img {
 		width: 100%;
@@ -72,21 +72,21 @@ export const Row = styled.div`
 	flex-direction: column;
 	align-items: stretch;
 	width: 100%;
-	margin-top: 0px;
-	padding: 0px 20px;
+	margin-top: 0rem;
+	padding: 0rem 1.25rem;
 
 	${Label} {
 		width: 6.25rem;
 	}
 `;
 
 export const EmailInput = styled.input`
-	margin-bottom: 120px;
+	margin-bottom: 7.5rem;
 	width: 100%;
-	padding: 25px;
+	padding: 1.5625rem;
 	border: 0px;
 	box-sizing: border-box;
-	border-radius: 10px;
+	border-radius: 0.625rem;
 	background-color: ${({ theme }) => theme.colors.background.secondary};
 	text-align: left;
 `;
@@ -100,9 +100,9 @@ export const UserInfo = styled.div``;
 export const Username = styled.button`
 	color: ${({ theme }) => theme.colors.text.primary};
 	font-family: Pretendard;
-	font-size: 22px;
+	font-size: 1.375rem;
 	font-style: normal;
 	font-weight: 700;
 	line-height: 136.4%;
-	letter-spacing: -0.427px;
+	letter-spacing: -0.0267rem;
 `;

src/pages/Profile/styles.tsx

@@ -13,7 +13,7 @@ export const ProfileContainer = styled.div`
 `;
 
 export const Header = styled.div`
-	margin: 8px 20px;
+	margin: 0.5rem 1.25rem;
 	display: flex;
 	align-items: center;
 	padding: 0rem;
@@ -57,9 +57,9 @@ export const PostsContainer = styled.div`
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
-	gap: 15px;
+	gap: 0.9375rem;
 	margin-bottom: 100px;
-	padding: 20px;
+	padding: 1.25rem;
 `;
 
 export const AddButton = styled.button`
@@ -79,7 +79,7 @@ export const NoPostWrapper = styled.div`
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	margin-top: 80px;
+	margin-top: 5rem;
 `;
 
 export const Button = styled.button`
@@ -90,7 +90,7 @@ export const Button = styled.button`
 	color: ${({ theme }) => theme.colors.text.contrast};
 	cursor: pointer;
 	box-sizing: border-box;
-	border-radius: 10px;
-	padding: 10px;
+	border-radius: 0.625rem;
+	padding: 0.625rem;
 	background: ${({ theme }) => theme.colors.brand.gradient};
 `;