From a7d1c8fd3dc10a29b3b0d3b77d00e9adfd8edf3c Mon Sep 17 00:00:00 2001 From: kimjuyoung99 Date: Mon, 25 Nov 2024 16:20:48 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=90=9B=20fix=20:=20=EB=B0=98=EC=9D=91?= =?UTF-8?q?=ED=98=95=20=EC=9E=98=EB=A6=AC=EB=8A=94=20bug=20=EC=83=81?= =?UTF-8?q?=EB=8C=80=20=EB=8B=A8=EC=9C=84(rem,em,vh)=20=ED=86=B5=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 11 ++++++-- src/pages/LoginPage/index.tsx | 11 ++++---- src/pages/LoginPage/styles.ts | 47 ++++++++++++++++++++--------------- 3 files changed, 42 insertions(+), 27 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 83f8369..08c70d0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -50,9 +50,16 @@ const MobileWrapper = styled.div` background-color: ${({ theme }) => theme.colors.brand.lighten_3}; /* 배경색 (GC_4) */ min-width: 340px; max-width: 430px; - min-height: calc(var(--vh, 1vh) * 100); + + /* min-height: 667px; */ + height: 100dvh; + max-height: 932px; margin: auto; - position: relative; + position: fixed; + left: 50%; + top: 50%; + translate: -50% -50%; + -ms-overflow-style: none; scrollbar-width: none; diff --git a/src/pages/LoginPage/index.tsx b/src/pages/LoginPage/index.tsx index 5c3fc82..20abde5 100644 --- a/src/pages/LoginPage/index.tsx +++ b/src/pages/LoginPage/index.tsx @@ -9,8 +9,10 @@ const SOCIAL_LOGIN_BUTTONS = [ const TitleSection = () => ( - 건강한 반려 생활{'\n'} - 댕과 함께해요! + + 건강한 반려 생활{'\n'} + 댕과 함께해요! + ) @@ -31,7 +33,7 @@ const SocialLoginButtons = (): JSX.Element => { export default function LoginPage() { return ( - + DDang | 로그인 @@ -40,7 +42,6 @@ export default function LoginPage() { 로고 - - + ) } diff --git a/src/pages/LoginPage/styles.ts b/src/pages/LoginPage/styles.ts index 74b63da..0e587b5 100644 --- a/src/pages/LoginPage/styles.ts +++ b/src/pages/LoginPage/styles.ts @@ -10,30 +10,31 @@ const SOCIAL_COLORS = { } as const const LAYOUT = { - ICON_SIZE: '24px', - ICON_LEFT_PADDING: '24px', + ICON_SIZE: '1.5rem', + ICON_LEFT_PADDING: '1.5rem', } as const - -export const LoginPageContainer = styled.div` +//height: 100%를 추가, padding을 clamp() 사용 반응형으로 조정 +export const LoginPage = styled.div` background-color: ${({ theme }) => theme.colors.grayscale.gc_4}; - min-height: 100dvh; + display: flex; align-items: center; justify-content: space-between; flex-direction: column; - height: 100dvh; + height: 100%; - padding: 50px 20px; - position: relative; + padding: clamp(1.5rem, 5vh, 3rem) 1.25rem; ` +//flex-grow: 1을 추가 margin 대신 flex를 활용하여 공간을 조절 export const TitleSection = styled.div` color: ${({ theme }) => theme.colors.grayscale.font_1}; - font-size: 28px; + font-size: clamp(1.5rem, 4vw, 1.75rem); font-weight: 700; white-space: pre-line; //줄바꿈! text-align: center; - margin-top: 20%; - margin-bottom: 30px; + flex-grow: 1; + display: flex; + align-items: center; ` export const BrandText = styled.span` color: ${({ theme }) => theme.colors.brand.default}; @@ -46,34 +47,40 @@ export const Logo = styled.div` display: flex; justify-content: center; align-items: center; + flex-shrink: 0; + margin: clamp(1rem, 3vh, 2rem) 0; background-color: ${({ theme }) => theme.colors.brand.lighten_2}; font-size: ${({ theme }) => theme.typography._24}; color: ${({ theme }) => theme.colors.grayscale.font_1}; ` //소셜로그인 +//flex container로 변경하고 flex-grow: 1을 추가하여 남은 공간 활용 export const SocialLoginSection = styled.div` width: 100%; max-width: 350px; - height: 200px; - margin-top: 50px; + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: center; + margin-top: clamp(1rem, 3vh, 2rem); ` +//높이와 여백을 반응형으로 조정 const SocialButtonBase = styled.div<{ weight: FontWeight }>` - width: calc(100% - 12px); - height: 52px; - border-radius: 12px; + width: 100%; + height: clamp(3rem, 8vh, 3.25rem); + border-radius: 0.75rem; font-size: ${({ theme }) => theme.typography._14}; - font-weight: ${({ weight }) => weight}; display: flex; align-items: center; justify-content: center; position: relative; - margin: 10px 6px; + margin: 0.625rem 0; cursor: pointer; svg { position: absolute; - left: 24px; + left: 1.5rem; width: ${LAYOUT.ICON_SIZE}; height: ${LAYOUT.ICON_SIZE}; } @@ -92,7 +99,7 @@ export const Google = styled(SocialButtonBase)` ` const IconBase = styled.svg` position: absolute; - left: 24px; + left: 1.5rem; top: 50%; transform: translateY(-50%); width: ${LAYOUT.ICON_SIZE}; From cce2e87763cbcffb110d3af844017bcd47350fb4 Mon Sep 17 00:00:00 2001 From: kimjuyoung99 Date: Mon, 25 Nov 2024 17:01:01 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=93=9D=20Doc=20:=20=EC=A3=BC=EC=84=9D?= =?UTF-8?q?=EC=8B=9D=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/LoginPage/styles.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/pages/LoginPage/styles.ts b/src/pages/LoginPage/styles.ts index 0e587b5..03e7290 100644 --- a/src/pages/LoginPage/styles.ts +++ b/src/pages/LoginPage/styles.ts @@ -13,7 +13,6 @@ const LAYOUT = { ICON_SIZE: '1.5rem', ICON_LEFT_PADDING: '1.5rem', } as const -//height: 100%를 추가, padding을 clamp() 사용 반응형으로 조정 export const LoginPage = styled.div` background-color: ${({ theme }) => theme.colors.grayscale.gc_4}; @@ -25,7 +24,6 @@ export const LoginPage = styled.div` padding: clamp(1.5rem, 5vh, 3rem) 1.25rem; ` -//flex-grow: 1을 추가 margin 대신 flex를 활용하여 공간을 조절 export const TitleSection = styled.div` color: ${({ theme }) => theme.colors.grayscale.font_1}; font-size: clamp(1.5rem, 4vw, 1.75rem); @@ -55,7 +53,6 @@ export const Logo = styled.div` color: ${({ theme }) => theme.colors.grayscale.font_1}; ` //소셜로그인 -//flex container로 변경하고 flex-grow: 1을 추가하여 남은 공간 활용 export const SocialLoginSection = styled.div` width: 100%; max-width: 350px; @@ -65,7 +62,6 @@ export const SocialLoginSection = styled.div` justify-content: center; margin-top: clamp(1rem, 3vh, 2rem); ` -//높이와 여백을 반응형으로 조정 const SocialButtonBase = styled.div<{ weight: FontWeight }>` width: 100%; height: clamp(3rem, 8vh, 3.25rem);