Merge pull request #90 from prgrms-web-devcourse-final-project/21-des…

…ign/social-login-ui [BUG] #89 레이아웃 비율 변경 시 UI 잘리는 버그 수정
prgrms-web-devcourse-final-project · Nov 25, 2024 · adf4b13 · adf4b13
2 parents e6d571c + cce2e87
commit adf4b13
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 24 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -50,6 +50,7 @@ const MobileContainer = styled.div`
   background-color: ${({ theme }) => theme.colors.brand.lighten_3};
   min-width: 340px;
   max-width: 430px;
+
   min-height: 667px;
   height: 100dvh;
   max-height: 932px;

diff --git a/src/pages/LoginPage/index.tsx b/src/pages/LoginPage/index.tsx
@@ -9,8 +9,10 @@ const SOCIAL_LOGIN_BUTTONS = [
 
 const TitleSection = () => (
   <S.TitleSection>
-    건강한 반려 생활{'\n'}
-    <S.BrandText>댕</S.BrandText>과 함께해요!
+    <span>
+      건강한 반려 생활{'\n'}
+      <S.BrandText>댕</S.BrandText>과 함께해요!
+    </span>
   </S.TitleSection>
 )
 
@@ -31,7 +33,7 @@ const SocialLoginButtons = (): JSX.Element => {
 
 export default function LoginPage() {
   return (
-    <S.LoginPageContainer>
+    <S.LoginPage>
       <Helmet>
         <title>DDang | 로그인</title>
         <meta name='robots' content='noindex' />
@@ -40,6 +42,6 @@ export default function LoginPage() {
       <TitleSection />
       <S.Logo>로고</S.Logo>
       <SocialLoginButtons />
-    </S.LoginPageContainer>
+    </S.LoginPage>
   )
 }
diff --git a/src/pages/LoginPage/styles.ts b/src/pages/LoginPage/styles.ts
@@ -10,30 +10,29 @@ 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`
+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;
 `
 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,6 +45,8 @@ 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};
@@ -55,25 +56,27 @@ export const Logo = styled.div`
 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 +95,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};