🎨 Style: Sns로그인 페이지 스타일 컴포넌트 분리 (#204)

FRONTENDSCHOOL5 · Jul 12, 2023 · 8347f51 · 8347f51
1 parent 07c922a
commit 8347f51
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 106 deletions.
diff --git a/src/pages/SnsLoginPage/SnsLoginPage.jsx b/src/pages/SnsLoginPage/SnsLoginPage.jsx
@@ -1,20 +1,29 @@
 import React from 'react';
-import styled from 'styled-components';
 import SnsLogo from '../../assets/images/login-logo.svg';
 import { Link } from 'react-router-dom';
 import GlovalSprite from '../../assets/sprite/GlovalSprite';
 import WhiteTitle from '../../assets/images/main-title(w).svg';
 
+import { 
+  Container,
+  Main,
+  Logo,
+  SnsMainLogo,
+  MainTitle,
+  LoginSection,
+  SnsLoginLink
+} from './SnsLoginPageStyle';
+
 const SnsLoginPage = () => {
   return (
-    <SnsLoginContainer>
+    <Container>
       <h1 className='a11y-hidden'>Sns 로그인 페이지</h1>
-      <ContentWrapper>
-        <ImgContainer>
+      <Main>
+        <Logo>
           <SnsMainLogo src={SnsLogo} alt='들숨날숨 로고' />
           <MainTitle src={WhiteTitle} alt="들숨날숨" />
-        </ImgContainer>
-        <SnsLoginMain>
+        </Logo>
+        <LoginSection>
           <button className='kakao-login'>
             <GlovalSprite id='message-circle' />
             카카오톡 계정으로 로그인
@@ -31,106 +40,10 @@ const SnsLoginPage = () => {
             <Link to='/login' className='login-link'>이메일로 로그인</Link>
             <Link to='/signup'>회원가입</Link>
           </SnsLoginLink>
-        </SnsLoginMain>
-      </ContentWrapper>
-    </SnsLoginContainer>
+        </LoginSection>
+      </Main>
+    </Container>
   )
 }
 
-const SnsLoginContainer = styled.main`
-  background-color: ${({ theme }) => theme.colors.mainColor};
-  width: 39rem;
-  padding: 10.4rem;
-  height: 85rem;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-`
-
-const ContentWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`
-
-const ImgContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 1rem;
-`
-
-const SnsMainLogo = styled.img`
-  width: 20rem;
-  height: 21rem;
-  margin-bottom: 1rem;
-`
-
-const MainTitle = styled.img`
-  width: 13rem;
-  height: 4rem;
-  margin-top: 1.8rem;
-`
-
-const SnsLoginMain = styled.section`
-position: fixed;
-bottom: 0;
-  width: 39rem;
-  height: 30rem;
-  border-top-left-radius: 2rem;
-  border-top-right-radius: 2rem;
-  padding: 5rem 3.4rem;
-  background: ${({ theme }) => theme.colors.whiteText};
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 1rem;
-    border-radius: 4.4rem;
-    width: 32rem;
-    height: 4.4rem;
-    font-size: ${({ theme }) => theme.fontSize.medium};
-    color: ${({ theme }) => theme.colors.textColor};
-    margin-bottom: 1rem;
-    justify-content: flex-start;
-    svg {
-      margin-left: 1rem;
-      margin-right: 5rem;
-    }
-  }
-
-  button:nth-child(2) {
-    svg {
-      margin-right: 6.3rem;
-    }
-  }
-
-  .kakao-login {
-    border: 0.1rem solid ${({ theme }) => theme.colors.kakaoColor};
-  }
-  .google-login {
-    border: 0.1rem solid ${({ theme }) => theme.colors.googleColor};
-  }
-  .facebook-login {
-    border: 0.1rem solid ${({ theme }) => theme.colors.facebookColor};
-    margin-bottom: 2rem;
-  }
-`
-
-const SnsLoginLink = styled.div`
-  text-align: center;
-  color: ${({ theme }) => theme.colors.textColor};
-  font-size: ${({ theme }) => theme.fontSize.small};
-  .login-link::after {
-    content: '|';
-    padding: 1rem;
-    color: ${({ theme }) => theme.colors.placeHolderColor};
-  }
-`
-
-export default SnsLoginPage;
+export default SnsLoginPage;
diff --git a/src/pages/SnsLoginPage/SnsLoginPageStyle.jsx b/src/pages/SnsLoginPage/SnsLoginPageStyle.jsx
@@ -0,0 +1,97 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  background-color: ${({ theme }) => theme.colors.mainColor};
+  width: 39rem;
+  padding: 10.4rem;
+  height: 85rem;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+`
+
+export const Main = styled.main`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`
+
+export const Logo = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 1rem;
+`
+
+export const SnsMainLogo = styled.img`
+  width: 20rem;
+  height: 21rem;
+  margin-bottom: 1rem;
+`
+
+export const MainTitle = styled.img`
+  width: 13rem;
+  height: 4rem;
+  margin-top: 1.8rem;
+`
+
+export const LoginSection = styled.section`
+position: fixed;
+bottom: 0;
+  width: 39rem;
+  height: 30rem;
+  border-top-left-radius: 2rem;
+  border-top-right-radius: 2rem;
+  padding: 5rem 3.4rem;
+  background: ${({ theme }) => theme.colors.whiteText};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem;
+    border-radius: 4.4rem;
+    width: 32rem;
+    height: 4.4rem;
+    font-size: ${({ theme }) => theme.fontSize.medium};
+    color: ${({ theme }) => theme.colors.textColor};
+    margin-bottom: 1rem;
+    justify-content: flex-start;
+    svg {
+      margin-left: 1rem;
+      margin-right: 5rem;
+    }
+  }
+
+  button:nth-child(2) {
+    svg {
+      margin-right: 6.3rem;
+    }
+  }
+
+  .kakao-login {
+    border: 0.1rem solid ${({ theme }) => theme.colors.kakaoColor};
+  }
+  .google-login {
+    border: 0.1rem solid ${({ theme }) => theme.colors.googleColor};
+  }
+  .facebook-login {
+    border: 0.1rem solid ${({ theme }) => theme.colors.facebookColor};
+    margin-bottom: 2rem;
+  }
+`
+
+export const SnsLoginLink = styled.div`
+  text-align: center;
+  color: ${({ theme }) => theme.colors.textColor};
+  font-size: ${({ theme }) => theme.fontSize.small};
+  .login-link::after {
+    content: '|';
+    padding: 1rem;
+    color: ${({ theme }) => theme.colors.placeHolderColor};
+  }
+`