ADD :: 로그인 완성

src/components/common/ButtonLayout/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import * as _ from './style';
+
+interface OwnProps {
+  value: string;
+  onClick(): void;
+  width: string;
+  state: boolean;
+}
+
+const ButtonLayout = ({
+  value = '',
+  onClick, 
+  width = '100%',
+  state = false
+}: OwnProps) => {
+  return (
+    <_.ButtonLayout_Container width={width}>
+      <_.ButtonLayout_Button
+        onClick={onClick} 
+        width={width}
+        disabled={!state}
+      >
+        {value}
+      </_.ButtonLayout_Button>
+    </_.ButtonLayout_Container>
+  );
+};
+
+export default ButtonLayout;

src/components/common/ButtonLayout/style.ts

@@ -0,0 +1,21 @@
+import { theme } from 'lib/utils/style/theme';
+import styled from 'styled-components';
+
+export const ButtonLayout_Container = styled.div<{ width: string }>`
+  width: ${({ width }) => width};
+`;
+
+export const ButtonLayout_Button = styled.button<{ width: string }>`
+  width: ${({ width }) => width};
+  height: 50px;
+  background-color: ${theme.primary[6]};
+  color: ${theme.gray.white};
+  border-radius: 10px;
+  font-size: 16px;
+
+  &:disabled {
+    background-color: ${theme.gray[200]};
+    cursor: not-allowed;
+    color: ${theme.gray[400]};
+  }
+`;

src/pages/Auth/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import * as _ from './style';
 import AuthLogo from 'assets/image/authLogo.png';
 import Bubble from 'assets/image/Bubble';
+import ButtonLayout from 'components/common/ButtonLayout';
 
 const Auth = () => {
   return (
@@ -18,7 +19,18 @@ const Auth = () => {
         </_.Auth_MainImg_Bubble>
       </_.Auth_MainImg>
 
-
+      <_.Auth_Buttons>
+        <ButtonLayout
+          value="로그인"
+          onClick={() => {
+            return 0;
+          }}
+          width="100%"
+          state={true}
+        />
+        또는
+        <_.Auth_Buttons_Register>회원가입</_.Auth_Buttons_Register>
+      </_.Auth_Buttons>
     </_.Auth_Container>
   );
 };

src/pages/Auth/style.ts

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 export const Auth_Container = styled.div`
   width: 100vw;
   height: 100vh;
-  padding: 70px 0 0 24px;
+  padding: 70px 24px 0 24px;
   display: flex;
   flex-direction: column;
 `;
@@ -28,8 +28,8 @@ export const Auth_Title_Highlight = styled.span`
 
 export const Auth_MainImg = styled.div`
   text-align: center;
-  margin-right: 24px;
   margin-top: 100px;
+  margin-bottom: 100px;
 `;
 
 export const Auth_MainImg_Bubble = styled.div`
@@ -39,3 +39,18 @@ export const Auth_MainImg_Bubble = styled.div`
   transform: translate(0%, -50%);
   z-index: -1;
 `;
+
+export const Auth_Buttons = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: ${theme.gray[400]};
+`;
+
+export const Auth_Buttons_Register = styled.div`
+  font-size: 16px;
+  color: ${theme.gray.black};
+`;