Merge pull request #504 from Mile-Writings/feat/#503/loginMobileView

Mile-Writings · Dec 19, 2024 · ddaa62d · ddaa62d
2 parents ab77956 + eb6e267
commit ddaa62d
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx
@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { HeaderLogoIc, KakaoLoginBtnIc } from '../../assets/svgs';
 import Spacing from '../../components/commons/Spacing';
+import { MOBILE_MEDIA_QUERY } from '../../styles/mediaQuery';
 import loginIlust from '/src/assets/images/loginIlust.png';
 import loginWebP from '/src/assets/webps/login.webp';
 
@@ -31,7 +32,6 @@ const Login = () => {
         <HeaderLogoIcon onClick={handleNavigateMain} />
         <HeaderBtnLayout />
       </HeaderWrapper>
-      <Spacing marginBottom="13.2" />
       <LoginLayout>
         <LoginContainer>
           <LoginTextBox>
@@ -42,7 +42,7 @@ const Login = () => {
           <Spacing marginBottom="2.4" />
           <picture>
             <source srcSet={loginWebP} type="image/webp" />
-            <img src={loginIlust} />
+            <LoginImg src={loginIlust} />
           </picture>
           <Spacing marginBottom="2.4" />
           <KakaoLoginBtnIcon onClick={handleKakaoLogin} />
@@ -83,11 +83,19 @@ const LoginTextBox = styled.div`
 const HeadText = styled.h1`
   color: ${({ theme }) => theme.colors.black};
   ${({ theme }) => theme.fonts.title2};
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    ${({ theme }) => theme.fonts.title13}
+  }
 `;
 
 const SubText = styled.p`
   color: ${({ theme }) => theme.colors.gray90};
   ${({ theme }) => theme.fonts.subtitle4};
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    ${({ theme }) => theme.fonts.mSubtitle5}
+  }
 `;
 
 const HeaderWrapper = styled.div`
@@ -96,11 +104,16 @@ const HeaderWrapper = styled.div`
   justify-content: space-between;
   width: 100%;
   height: 6.4rem;
+  margin-bottom: 13.2rem;
   padding-right: 6rem;
   padding-left: 6rem;
 
   background-color: ${({ theme }) => theme.colors.white};
   border-bottom: 1px solid ${({ theme }) => theme.colors.gray30};
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    margin-bottom: 10.8rem;
+  }
 `;
 
 const HeaderBtnLayout = styled.div`
@@ -123,4 +136,18 @@ const LoginLayout = styled.div`
 
   background-color: ${({ theme }) => theme.colors.white};
   border-radius: 0.8rem;
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    width: 33.5rem;
+  }
+`;
+
+const LoginImg = styled.img`
+  width: 21.8rem;
+  height: 18rem;
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    width: 18rem;
+    height: 15rem;
+  }
 `;
diff --git a/src/styles/emotion.d.ts b/src/styles/emotion.d.ts
@@ -68,6 +68,7 @@ declare module '@emotion/react' {
       mSubtitle2: SerializedStyles;
       mSubtitle3: SerializedStyles;
       mSubtitle4: SerializedStyles;
+      mSubtitle5: SerializedStyles;
       body1: SerializedStyles;
       body2: SerializedStyles;
       body3: SerializedStyles;

diff --git a/src/styles/theme.ts b/src/styles/theme.ts
@@ -260,6 +260,13 @@ export const theme = {
       font-style: normal;
       line-height: 120%; /* 19.2px */
     `,
+    mSubtitle5: css`
+      font-weight: 400;
+      font-size: 1.6rem;
+      font-family: 'Pretendard Variable', sans-serif;
+      font-style: normal;
+      line-height: 120%;
+    `,
     body1: css`
       font-weight: 500;
       font-size: 1.6rem;