From 2975bf998835e8b7c160de1e84bb31e414ee00cc Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Thu, 27 Feb 2025 17:20:38 +0900 Subject: [PATCH 1/5] Refactor: px to rem --- src/pages/Account/AccountCancel/styles.tsx | 18 ++++++------ src/pages/Account/AccountEdit/styles.tsx | 8 +++--- src/pages/Account/AccountSetting/styles.tsx | 10 +++---- src/pages/Profile/ButtonSecondary/styles.tsx | 8 +++--- src/pages/Profile/NavbarProfile/styles.tsx | 4 +-- src/pages/Profile/ProfileEdit/styles.tsx | 30 ++++++++++---------- src/pages/Profile/styles.tsx | 12 ++++---- 7 files changed, 45 insertions(+), 45 deletions(-) diff --git a/src/pages/Account/AccountCancel/styles.tsx b/src/pages/Account/AccountCancel/styles.tsx index e528432a..cb515c44 100644 --- a/src/pages/Account/AccountCancel/styles.tsx +++ b/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; diff --git a/src/pages/Account/AccountEdit/styles.tsx b/src/pages/Account/AccountEdit/styles.tsx index 65eb681d..743e12cd 100644 --- a/src/pages/Account/AccountEdit/styles.tsx +++ b/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` diff --git a/src/pages/Account/AccountSetting/styles.tsx b/src/pages/Account/AccountSetting/styles.tsx index 5b1ce005..ef19ecf5 100644 --- a/src/pages/Account/AccountSetting/styles.tsx +++ b/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; diff --git a/src/pages/Profile/ButtonSecondary/styles.tsx b/src/pages/Profile/ButtonSecondary/styles.tsx index af4a1820..5ecbc923 100644 --- a/src/pages/Profile/ButtonSecondary/styles.tsx +++ b/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; `; diff --git a/src/pages/Profile/NavbarProfile/styles.tsx b/src/pages/Profile/NavbarProfile/styles.tsx index ac142d87..f3e62b97 100644 --- a/src/pages/Profile/NavbarProfile/styles.tsx +++ b/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; diff --git a/src/pages/Profile/ProfileEdit/styles.tsx b/src/pages/Profile/ProfileEdit/styles.tsx index 014fd396..3ffc263e 100644 --- a/src/pages/Profile/ProfileEdit/styles.tsx +++ b/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,8 +72,8 @@ 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; @@ -81,12 +81,12 @@ export const Row = styled.div` `; 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; `; diff --git a/src/pages/Profile/styles.tsx b/src/pages/Profile/styles.tsx index 7db238d6..50c6463f 100644 --- a/src/pages/Profile/styles.tsx +++ b/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}; `; From ca1b7cd4dc4fee9afc679c555172f835cf601c99 Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Thu, 27 Feb 2025 17:25:49 +0900 Subject: [PATCH 2/5] =?UTF-8?q?Refactor:=20=EC=9C=A0=EC=A0=80=20=ED=94=84?= =?UTF-8?q?=EB=A1=9C=ED=95=84=20shadow=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Profile/UserProfile/style.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/pages/Profile/UserProfile/style.tsx b/src/pages/Profile/UserProfile/style.tsx index 4d2d07aa..b7fe4712 100644 --- a/src/pages/Profile/UserProfile/style.tsx +++ b/src/pages/Profile/UserProfile/style.tsx @@ -11,6 +11,10 @@ export const UserImg = styled.img` height: 4.5rem; object-fit: cover; border-radius: 50%; + box-shadow: + 0px 2px 8px 0px rgba(0, 0, 0, 0.12), + 0px 1px 4px 0px rgba(0, 0, 0, 0.08), + 0px 0px 1px 0px rgba(0, 0, 0, 0.08); `; export const UserDetailsContainer = styled.section` From 5a7b76124d81ac3087069f078d284c11fd75716d Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Thu, 6 Mar 2025 13:53:35 +0900 Subject: [PATCH 3/5] =?UTF-8?q?Refactor:=20=EC=82=AC=EC=9D=B4=EC=A6=88=20?= =?UTF-8?q?=EC=A1=B0=EC=A0=95=20=EB=B0=8F=20=EC=84=80=EB=8F=84=EC=9A=B0=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Profile/ProfileEdit/styles.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/pages/Profile/ProfileEdit/styles.tsx b/src/pages/Profile/ProfileEdit/styles.tsx index 3ffc263e..5c94df97 100644 --- a/src/pages/Profile/ProfileEdit/styles.tsx +++ b/src/pages/Profile/ProfileEdit/styles.tsx @@ -50,18 +50,22 @@ export const Button = styled.button` `; export const ProfilePic = styled.div` - width: 7.25rem; - height: 7.25rem; + width: 7.5rem; + height: 7.5rem; flex-shrink: 0; border-radius: 50%; overflow: hidden; - margin-top: 2.125rem; + margin-top: 2rem; margin-bottom: 0.9375rem; img { width: 100%; height: 100%; object-fit: cover; + box-shadow: + 0px 2px 8px 0px rgba(0, 0, 0, 0.12), + 0px 1px 4px 0px rgba(0, 0, 0, 0.08), + 0px 0px 1px 0px rgba(0, 0, 0, 0.08); } `; From 6cca016dfe053ee829b2199d417390a8e35ad339 Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Wed, 12 Mar 2025 09:00:17 +0900 Subject: [PATCH 4/5] =?UTF-8?q?Fix:=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20UI=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Profile/ButtonSecondary/styles.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/Profile/ButtonSecondary/styles.tsx b/src/pages/Profile/ButtonSecondary/styles.tsx index 5ecbc923..14b7e3f7 100644 --- a/src/pages/Profile/ButtonSecondary/styles.tsx +++ b/src/pages/Profile/ButtonSecondary/styles.tsx @@ -1,7 +1,7 @@ import { styled } from 'styled-components'; export const Button = styled.button` - width: 100%; + width: 90%; margin: 1rem auto; height: 3.1rem; text-align: center; @@ -11,4 +11,5 @@ export const Button = styled.button` border: 0.0625rem solid; border-radius: 0.625rem; padding: 0.625rem; + padding-inline: 1rem; `; From 62bc596377912e734a836a713e33a99643e26215 Mon Sep 17 00:00:00 2001 From: Ajin Park <108174693+lalaurrel@users.noreply.github.com> Date: Wed, 12 Mar 2025 09:01:59 +0900 Subject: [PATCH 5/5] =?UTF-8?q?Fix:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Profile/NavbarProfile/styles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Profile/NavbarProfile/styles.tsx b/src/pages/Profile/NavbarProfile/styles.tsx index f3e62b97..2726d440 100644 --- a/src/pages/Profile/NavbarProfile/styles.tsx +++ b/src/pages/Profile/NavbarProfile/styles.tsx @@ -17,7 +17,7 @@ export const Nav = styled.nav` export const IconContainer = styled.div` display: flex; align-items: center; - margin-right: 1.125rem; + margin-right: 5px; a { display: flex;