refactor: 로그인 페이지 폰트 크기 반응형으로 수정

coffee-meet · Nov 9, 2023 · d35a905 · d35a905
1 parent 4e439bc
commit d35a905
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 12 deletions.
diff --git a/src/components/common/Buttons/IconButton/KakaoButton.tsx b/src/components/common/Buttons/IconButton/KakaoButton.tsx
@@ -10,14 +10,14 @@ const KakaoButton = ({ moveToOAuthProvider }: OAuthButtonProps) => (
     <StyledIconWrapper>
       <KakaoIcon width={53} height={53} iconWidth={35} iconHeight={35} borderRadius={10} />
     </StyledIconWrapper>
-    <Text
+    <StyledButtonText
       font={'Body_18'}
       fontWeight={600}
       letterSpacing={-1}
       style={{ flex: 1, textAlign: 'left', marginLeft: 20 }}
     >
       {'카카오톡으로 시작'}
-    </Text>
+    </StyledButtonText>
   </StyledButtonWrapper>
 )
 
@@ -39,4 +39,10 @@ export const StyledButtonWrapper = styled.button<{
   }
 `
 
+export const StyledButtonText = styled(Text)`
+  @media (max-width: 280px) {
+    font-size: 16px;
+  }
+`
+
 export default KakaoButton
diff --git a/src/components/common/Buttons/IconButton/NaverButton.tsx b/src/components/common/Buttons/IconButton/NaverButton.tsx
@@ -1,15 +1,17 @@
 import NaverIcon from '@/assets/icons/NaverIcon'
 import { OAuthButtonProps, StyledIconWrapper } from '@/components/common/Buttons/IconButton'
-import { StyledButtonWrapper } from '@/components/common/Buttons/IconButton/KakaoButton'
-import { Text } from '@/components/common/Text'
+import {
+  StyledButtonText,
+  StyledButtonWrapper,
+} from '@/components/common/Buttons/IconButton/KakaoButton'
 import { palette } from '@/styles/palette'
 const NaverButton = ({ moveToOAuthProvider }: OAuthButtonProps) => {
   return (
     <StyledButtonWrapper buttonTheme={'naver'} onClick={moveToOAuthProvider}>
       <StyledIconWrapper>
         <NaverIcon width={53} height={53} iconWidth={20} iconHeight={20} borderRadius={10} />
       </StyledIconWrapper>
-      <Text
+      <StyledButtonText
         font={'Body_18'}
         fontWeight={600}
         letterSpacing={-1}
@@ -21,7 +23,7 @@ const NaverButton = ({ moveToOAuthProvider }: OAuthButtonProps) => {
         }}
       >
         {'네이버로 시작'}
-      </Text>
+      </StyledButtonText>
     </StyledButtonWrapper>
   )
 }

diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx
@@ -39,9 +39,9 @@ const Login = () => {
             }
           `}
         />
-        <Text font={'Body_32'} fontWeight={700} letterSpacing={-1}>
+        <StyledHeaderText font={'Body_32'} fontWeight={700} letterSpacing={-1}>
           {'☕️커피밋'}
-        </Text>
+        </StyledHeaderText>
         <Spacing
           size={50}
           css={css`
@@ -51,9 +51,9 @@ const Login = () => {
           `}
         />
 
-        <Text font={'Body_18'} fontWeight={500} letterSpacing={-1}>
+        <StyledSubText font={'Body_18'} fontWeight={500} letterSpacing={-1}>
           {'회사의 경계를 넘어, '}
-        </Text>
+        </StyledSubText>
         <Spacing
           size={10}
           css={css`
@@ -63,9 +63,9 @@ const Login = () => {
           `}
         />
 
-        <Text font={'Body_18'} fontWeight={500} letterSpacing={-1}>
+        <StyledSubText font={'Body_18'} fontWeight={500} letterSpacing={-1}>
           {' 새로운 대화의 세계를 탐험하세요!'}
-        </Text>
+        </StyledSubText>
         <Spacing
           size={80}
           css={css`
@@ -125,4 +125,16 @@ const StyledLoginContainer = styled.div`
   text-align: center;
   padding-bottom: 10%;
 `
+
+const StyledHeaderText = styled(Text)`
+  @media (max-width: 280px) {
+    font-size: 24px;
+  }
+`
+
+const StyledSubText = styled(Text)`
+  @media (max-width: 280px) {
+    font-size: 14px;
+  }
+`
 export default Login