From 4e439bc0cf81ff2d1b1444bb8f2e588ae6372941 Mon Sep 17 00:00:00 2001
From: wukddang <43228743+funkyblues@users.noreply.github.com>
Date: Thu, 9 Nov 2023 23:34:19 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84=20-=20Spacing=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20css=20props=20=EB=B0=9B=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20-=20max-width:=20280px?=
 =?UTF-8?q?=EC=9D=B8=20=EA=B0=A4=EB=9F=AD=EC=8B=9C=20=ED=8F=B4=EB=93=9C?=
 =?UTF-8?q?=EB=A5=BC=20=EC=A4=91=EC=8B=AC=EC=9C=BC=EB=A1=9C=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/Buttons/IconButton/KakaoButton.tsx | 42 ++++++++--------
 .../common/Buttons/IconButton/NaverButton.tsx | 12 ++---
 .../common/Buttons/IconButton/index.tsx       |  5 ++
 src/components/common/HeroImage/index.tsx     |  5 ++
 src/components/common/Spacing/index.tsx       | 25 +++++++---
 src/pages/login/Login.tsx                     | 49 ++++++++++++++++---
 6 files changed, 95 insertions(+), 43 deletions(-)

diff --git a/src/components/common/Buttons/IconButton/KakaoButton.tsx b/src/components/common/Buttons/IconButton/KakaoButton.tsx
index 80e7351b..f3a37c99 100644
--- 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
index 93649060..712d45e8 100644
--- 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
index a39b7a78..a27158be 100644
--- 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
index 31962069..1d437d04 100644
--- 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
index 75ac5d3a..b32d4253 100644
--- 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
index 2735f31b..6a20c112 100644
--- 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,21 +31,49 @@ 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
@@ -52,7 +81,14 @@ const Login = () => {
               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