From 141aa7baae71757e90a5fbfd78c6a4e804b9b6ab Mon Sep 17 00:00:00 2001
From: Chelim Lee <leecr1215@naver.com>
Date: Mon, 17 Oct 2022 20:34:10 +0900
Subject: [PATCH] refactor: add text atom

---
 src/components/atoms/text.jsx           | 39 +++++++++++++++++++++++++
 src/components/molecules/flexColumn.jsx |  4 ++-
 src/components/organisms/header.jsx     |  2 +-
 src/components/pages/signUp.jsx         | 15 +++++++++-
 4 files changed, 57 insertions(+), 3 deletions(-)
 create mode 100644 src/components/atoms/text.jsx

diff --git a/src/components/atoms/text.jsx b/src/components/atoms/text.jsx
new file mode 100644
index 0000000..7441b8b
--- /dev/null
+++ b/src/components/atoms/text.jsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+const Text = ({
+  children,
+  fontSize = 1.2,
+  fontWeight = "normal",
+  color = "black",
+  marginTop = "0vh",
+  onClick,
+}) => {
+  return onClick ? (
+    <button
+      type="button"
+      style={{
+        fontSize: `${fontSize}rem`,
+        fontWeight: fontWeight,
+        fontFamily: "inter",
+        color: color,
+      }}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  ) : (
+    <span
+      style={{
+        fontSize: `${fontSize}rem`,
+        fontWeight: fontWeight,
+        color: color,
+        marginTop: marginTop,
+        fontFamily: "inter",
+      }}
+    >
+      {children}
+    </span>
+  );
+};
+
+export default Text;
diff --git a/src/components/molecules/flexColumn.jsx b/src/components/molecules/flexColumn.jsx
index ce6900e..fd0cfd5 100644
--- a/src/components/molecules/flexColumn.jsx
+++ b/src/components/molecules/flexColumn.jsx
@@ -14,6 +14,8 @@ const Container = styled.div`
   padding-left: ${(props) => `${props.horizontalPadding}rem`};
   padding-right: ${(props) => `${props.horizontalPadding}rem`};
   align-content: center;
+  text-align: center;
+  vertical-align: middle;
 `;
 
 const FlexColumn = ({
@@ -21,7 +23,7 @@ const FlexColumn = ({
   justifyContent = "space-between",
   verticalPadding = 0,
   horizontalPadding = 0,
-  height = 85,
+  height = 100,
   width = 25,
 }) => {
   return (
diff --git a/src/components/organisms/header.jsx b/src/components/organisms/header.jsx
index 74fc36d..69c4d0e 100644
--- a/src/components/organisms/header.jsx
+++ b/src/components/organisms/header.jsx
@@ -5,7 +5,7 @@ import theme from "../../styles/theme";
 
 const Head = styled.div`
   width: 100%;
-  height: 5em;
+  height: 8vh;
   background-color: ${theme.primaryColor};
 `;
 
diff --git a/src/components/pages/signUp.jsx b/src/components/pages/signUp.jsx
index 3444963..8d2dc59 100644
--- a/src/components/pages/signUp.jsx
+++ b/src/components/pages/signUp.jsx
@@ -13,6 +13,8 @@ import Input from "../atoms/input";
 import FlexColumn from "../molecules/flexColumn";
 import { useNavigate } from "react-router-dom";
 import Header from "../organisms/header";
+import Text from "../atoms/text";
+import theme from "../../styles/theme";
 
 const Logo = styled.img`
   width: 20rem;
@@ -59,7 +61,7 @@ const SignUp = () => {
   };
 
   return (
-    <div style={{ height: "100vh" }}>
+    <div style={{ height: "92vh" }}>
       <FlexColumn justifyContent="space-evenly" width={25}>
         <Logo src={logo} alt="oohub" />
         <Input
@@ -99,6 +101,17 @@ const SignUp = () => {
         >
           Sign Up
         </Button>
+        <div>
+          <Text>Do you have an account? </Text>
+          <Text
+            onClick={() => {
+              navigate("/logIn");
+            }}
+            color={theme.primaryColor}
+          >
+            SIGNIN!
+          </Text>
+        </div>
       </FlexColumn>
     </div>
   );