refactor: 로그인 페이지 반응형 구현

- Spacing 컴포넌트 css props 받도록 리팩토링 - max-width: 280px인 갤럭시 폴드를 중심으로 리팩토링
coffee-meet · Nov 9, 2023 · 4e439bc · 4e439bc
1 parent 8e204a3
commit 4e439bc
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 43 deletions.
diff --git a/src/components/common/Buttons/IconButton/KakaoButton.tsx b/src/components/common/Buttons/IconButton/KakaoButton.tsx
@@ -5,27 +5,9 @@ import { OAuthButtonProps, StyledIconWrapper } from '@/components/common/Buttons
 import { Text } from '@/components/common/Text'
 import { palette } from '@/styles/palette'
 
-export const ButtonWrapper = styled.button<{
-  buttonTheme: 'kakao' | 'naver'
-  onClick: () => void
-}>`
-  width: 320px;
-  height: 60px;
-  background-color: ${(props) => (props.buttonTheme === 'naver' ? palette.GREEN : palette.YELLOW)};
-  border-radius: 15px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
-`
-
 const KakaoButton = ({ moveToOAuthProvider }: OAuthButtonProps) => (
-  <ButtonWrapper buttonTheme={'kakao'} onClick={moveToOAuthProvider}>
-    <StyledIconWrapper
-      style={{
-        margin: '4px 38px 4px 20px',
-      }}
-    >
+  <StyledButtonWrapper buttonTheme={'kakao'} onClick={moveToOAuthProvider}>
+    <StyledIconWrapper>
       <KakaoIcon width={53} height={53} iconWidth={35} iconHeight={35} borderRadius={10} />
     </StyledIconWrapper>
     <Text
@@ -36,7 +18,25 @@ const KakaoButton = ({ moveToOAuthProvider }: OAuthButtonProps) => (
     >
       {'카카오톡으로 시작'}
     </Text>
-  </ButtonWrapper>
+  </StyledButtonWrapper>
 )
 
+export const StyledButtonWrapper = styled.button<{
+  buttonTheme: 'kakao' | 'naver'
+  onClick: () => void
+}>`
+  width: 320px;
+  height: 60px;
+  background-color: ${(props) => (props.buttonTheme === 'naver' ? palette.GREEN : palette.YELLOW)};
+  border-radius: 15px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
+
+  @media (max-width: 280px) {
+    width: 250px;
+  }
+`
+
 export default KakaoButton
diff --git a/src/components/common/Buttons/IconButton/NaverButton.tsx b/src/components/common/Buttons/IconButton/NaverButton.tsx
@@ -1,16 +1,12 @@
 import NaverIcon from '@/assets/icons/NaverIcon'
 import { OAuthButtonProps, StyledIconWrapper } from '@/components/common/Buttons/IconButton'
-import { ButtonWrapper } from '@/components/common/Buttons/IconButton/KakaoButton'
+import { StyledButtonWrapper } from '@/components/common/Buttons/IconButton/KakaoButton'
 import { Text } from '@/components/common/Text'
 import { palette } from '@/styles/palette'
 const NaverButton = ({ moveToOAuthProvider }: OAuthButtonProps) => {
   return (
-    <ButtonWrapper buttonTheme={'naver'} onClick={moveToOAuthProvider}>
-      <StyledIconWrapper
-        style={{
-          margin: '4px 53px 4px 20px',
-        }}
-      >
+    <StyledButtonWrapper buttonTheme={'naver'} onClick={moveToOAuthProvider}>
+      <StyledIconWrapper>
         <NaverIcon width={53} height={53} iconWidth={20} iconHeight={20} borderRadius={10} />
       </StyledIconWrapper>
       <Text
@@ -26,7 +22,7 @@ const NaverButton = ({ moveToOAuthProvider }: OAuthButtonProps) => {
       >
         {'네이버로 시작'}
       </Text>
-    </ButtonWrapper>
+    </StyledButtonWrapper>
   )
 }
 

diff --git a/src/components/common/Buttons/IconButton/index.tsx b/src/components/common/Buttons/IconButton/index.tsx
@@ -47,11 +47,16 @@ export const StyledIconWrapper = styled.div<{
 }>`
   width: 35px;
   height: 35px;
+  margin: 4px 38px 4px 20px;
   border-radius: ${(props) => props.borderRadius};
   background-color: ${(props) => props.backgroundColor};
   display: flex;
   justify-content: center;
   align-items: center;
+
+  @media (max-width: 280px) {
+    margin: 2px 10px 2px 10px;
+  }
 `
 
 export { InterestButton, KakaoButton, NaverButton, ParticularTopicButton, RandomMatchingButton }
diff --git a/src/components/common/HeroImage/index.tsx b/src/components/common/HeroImage/index.tsx
@@ -19,6 +19,11 @@ const StyleHeroImage = styled.img`
   border-radius: 20px;
   width: 350px;
   height: 350px;
+
+  @media (max-width: 375px) {
+    width: 250px;
+    height: 250px;
+  }
 `
 
 export default HeroImage
diff --git a/src/components/common/Spacing/index.tsx b/src/components/common/Spacing/index.tsx
@@ -1,17 +1,26 @@
 /** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react'
+import { css, SerializedStyles } from '@emotion/react'
 
 import { KeyOfPalette, theme } from '@/styles/theme'
 
-const Spacing = ({ size, color }: { size: number; color?: KeyOfPalette }) => {
+type SpacingProps = {
+  size: number
+  color?: KeyOfPalette
+  css?: SerializedStyles
+}
+
+const Spacing = ({ size, color, css: customCss }: SpacingProps) => {
   return (
     <div
-      css={css`
-        height: ${size}px;
-        width: 100%;
-        background-color: ${color ? `${theme.palette[color]}` : 'transparent'};
-      `}
-    ></div>
+      css={[
+        css`
+          height: ${size}px;
+          width: 100%;
+          background-color: ${color ? `${theme.palette[color]}` : 'transparent'};
+        `,
+        customCss, // 사용자 정의 스타일을 적용
+      ]}
+    />
   )
 }
 

diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx
@@ -1,3 +1,4 @@
+import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 
 import { KakaoButton, NaverButton } from '@/components/common/Buttons/IconButton'
@@ -30,29 +31,64 @@ const Login = () => {
         }}
       />
       <StyledLoginContainer>
-        <Spacing size={45} />
+        <Spacing
+          size={45}
+          css={css`
+            @media (max-width: 375px) {
+              height: ${45 * 0.75}px;
+            }
+          `}
+        />
         <Text font={'Body_32'} fontWeight={700} letterSpacing={-1}>
           {'☕️커피밋'}
         </Text>
-        <Spacing size={50} />
+        <Spacing
+          size={50}
+          css={css`
+            @media (max-width: 375px) {
+              height: ${50 * 0.75}px;
+            }
+          `}
+        />
 
         <Text font={'Body_18'} fontWeight={500} letterSpacing={-1}>
           {'회사의 경계를 넘어, '}
         </Text>
-        <Spacing size={10} />
+        <Spacing
+          size={10}
+          css={css`
+            @media (max-width: 375px) {
+              height: ${10 * 0.75}px;
+            }
+          `}
+        />
 
         <Text font={'Body_18'} fontWeight={500} letterSpacing={-1}>
           {' 새로운 대화의 세계를 탐험하세요!'}
         </Text>
-        <Spacing size={80} />
+        <Spacing
+          size={80}
+          css={css`
+            @media (max-width: 375px) {
+              height: ${80 * 0.75}px;
+            }
+          `}
+        />
 
         <StyledOauthWrapper>
           <NaverButton
             moveToOAuthProvider={() => {
               handleMoveToAuthProvider('naver')
             }}
           />
-          <Spacing size={16} />
+          <Spacing
+            size={16}
+            css={css`
+              @media (max-width: 375px) {
+                height: ${16 * 0.75}px;
+              }
+            `}
+          />
           <KakaoButton
             moveToOAuthProvider={() => {
               handleMoveToAuthProvider('kakao')
@@ -66,11 +102,11 @@ const Login = () => {
 
 const StyledLoginOuterWrapper = styled.div`
   background-color: ${palette.SKY_BLUE};
+  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 100vh;
 `
 
 const StyledOauthWrapper = styled.div`
@@ -87,5 +123,6 @@ const StyledLoginContainer = styled.div`
   background-color: ${palette.WHITE};
   border-radius: 20px;
   text-align: center;
+  padding-bottom: 10%;
 `
 export default Login