update containers related to Auth

 import React, { useState } from "react";
-import styled from "styled-components";
 import { useMutation } from "@apollo/react-hooks";
-import { LOGIN } from "./AuthQueries";
-import Input from "../../Components/Input";
-import Button from "../../Components/Button";
+import { LOGIN, SIGNUP } from "./AuthQueries";
 import useInput from "../../Hooks/useInput";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faFacebook,
-  faTwitter,
-  faGithub,
-  faGoogle,
-} from "@fortawesome/free-brands-svg-icons";
-
-const Wrapper = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-`;
-
-const Box = styled.div`
-  display: flex;
-`;
-
-const TitleContainer = styled(Box)`
-  margin-bottom: 20px;
-`;
-
-const Title = styled.span`
-  font-size: 30px;
-  font-family: "Raleway", sans-serif;
-`;
-
-const StateChanger = styled(Box)`
-  margin-bottom: 15px;
-`;
-
-const Link = styled.span`
-  cursor: pointer;
-  color: #0652dd;
-`;
-
-const Form = styled(Box)`
-  form {
-    display: flex;
-    flex-direction: column;
-    padding: 5px 5px;
-    margin-bottom: 15px;
-    input {
-      font-size: 15px;
-      margin-bottom: 10px;
-    }
-    button {
-      background-color: #1b9cfc;
-      color: white;
-      border-radius: 10px;
-      padding: 10px 5px;
-      font-size: 15px;
-    }
-  }
-`;
-
-const SocialLogin = styled(Box)`
-  display: flex;
-  svg {
-    &:not(:last-child) {
-      margin-right: 20px;
-    }
-  }
-  font-size: 30px;
-  opacity: 0.8;
-`;
+import { toast } from "react-toastify";
+import AuthPresenter from "./AuthPresenter";
 
 export default () => {
   const [action, setAction] = useState("logIn");
@@ -82,10 +13,24 @@ export default () => {
   const password2 = useInput("");
   const phoneNum = useInput("");
   const username = useInput("");
+
+  // mutations
   const loginMutation = useMutation(LOGIN, {
     variables: { email: email.value, password: password.value },
   });
 
+  const createAccountMutation = useMutation(SIGNUP, {
+    variables: {
+      email: email.value,
+      username: username.value,
+      password: password.value,
+      password2: password2.value,
+      phoneNum: phoneNum.value,
+    },
+  });
+
+  // TODO: make login success query.
+
   const onSubmit = async (e) => {
     if (action === "logIn") {
       if (email.value !== "") {
@@ -94,59 +39,65 @@ export default () => {
           const {
             data: { login }, // AuthQueries 에 정의된 mutation 값
           } = await loginMutation();
+          if (!login) {
+            toast.warn("you need to make your own account");
+            setAction("signUp");
+          } else {
+            toast.success("login success");
+            setAction("confirm");
+          }
         } catch (e) {}
+      } else {
+        // TODO: inform "email is required" using toastify
+        toast.error("email is required!", {
+          position: "top-center",
+          autoClose: 3000,
+          closeOnClick: true,
+          draggable: true,
+        });
       }
     } else if (action === "signUp") {
+      if (
+        (email.value !== "",
+        username.value !== "",
+        password.value !== "",
+        password2.value !== "",
+        phoneNum.value !== "")
+      ) {
+        try {
+          const {
+            data: { signUp },
+          } = await createAccountMutation();
+          if (!signUp) {
+            toast.warn("you need to sign up first");
+            setAction("signUp");
+          } else {
+            toast.success("login success");
+            setAction("logIn");
+          }
+        } catch (e) {
+          // TODO: can't find data: signUp
+          toast.error("can't sign up, please check input data");
+        }
+      } else {
+        // TODO: inform user need to input values that required for sign up with toastify
+        toast.error("you need to input with vaild data");
+      }
     } else if (action === "confirm") {
+      // TODO: when login success, go to Main Container
     }
   };
 
   return (
-    <Wrapper>
-      <TitleContainer>
-        <Title>KhuChat</Title>
-      </TitleContainer>
-      <Form>
-        {action === "logIn" ? (
-          <form onSubmit={onSubmit}>
-            <Input placeholder={"Email"} type="email" {...email} />
-            <Input placeholder={"Password"} type="password" {...password} />
-            <Button text={"Log In"} />
-          </form>
-        ) : (
-          <form onSubmit={onSubmit}>
-            <Input placeholder={"Email"} type="email" {...email} />
-            <Input placeholder={"UserName"} {...username} />
-            <Input placeholder={"PhoneNumber"} {...phoneNum} />
-            <Input placeholder={"Password"} type="password" {...password} />
-            <Input
-              placeholder={"Password for validation"}
-              type="password"
-              {...password2}
-            />
-            <Button text={"Sign Up"} />
-          </form>
-        )}
-      </Form>
-      <StateChanger>
-        {action === "logIn" ? (
-          <>
-            Don't you have an account ?
-            <Link onClick={() => setAction("signUp")}> Sign Up </Link>
-          </>
-        ) : (
-          <>
-            Did you have an account ?
-            <Link onClick={() => setAction("logIn")}> Log in </Link>
-          </>
-        )}
-      </StateChanger>
-      <SocialLogin>
-        <FontAwesomeIcon icon={faFacebook} />
-        <FontAwesomeIcon icon={faGoogle} />
-        <FontAwesomeIcon icon={faTwitter} />
-        <FontAwesomeIcon icon={faGithub} />
-      </SocialLogin>
-    </Wrapper>
+    <AuthPresenter
+      setAction={setAction}
+      action={action}
+      email={email}
+      password={password}
+      password2={password2}
+      username={username}
+      phoneNum={phoneNum}
+      onSubmit={onSubmit}
+    />
   );
 };

+import React from "react";
+import styled from "styled-components";
+import { Helmet } from "react-helmet";
+import Input from "../../Components/Input";
+import Button from "../../Components/Button";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faFacebook,
+  faTwitter,
+  faGithub,
+  faGoogle,
+} from "@fortawesome/free-brands-svg-icons";
+
+const Wrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Box = styled.div`
+  display: flex;
+`;
+
+const TitleContainer = styled(Box)`
+  margin-bottom: 20px;
+`;
+
+const Title = styled.span`
+  font-size: 30px;
+  font-family: "Raleway", sans-serif;
+`;
+
+const StateChanger = styled(Box)`
+  margin-bottom: 15px;
+`;
+
+const Link = styled.span`
+  cursor: pointer;
+  color: #0652dd;
+`;
+
+const Form = styled(Box)`
+  form {
+    display: flex;
+    flex-direction: column;
+    padding: 5px 5px;
+    margin-bottom: 15px;
+    input {
+      font-size: 15px;
+      margin-bottom: 10px;
+    }
+    button {
+      background-color: #1b9cfc;
+      color: white;
+      border-radius: 10px;
+      padding: 10px 5px;
+      font-size: 15px;
+    }
+  }
+`;
+
+const SocialLogin = styled(Box)`
+  display: flex;
+  svg {
+    &:not(:last-child) {
+      margin-right: 20px;
+    }
+  }
+  font-size: 30px;
+  opacity: 0.8;
+`;
+
+export default ({
+  action,
+  setAction,
+  email,
+  password,
+  password2,
+  username,
+  phoneNum,
+  onSubmit,
+}) => (
+  <Wrapper>
+    <TitleContainer>
+      <Title>KhuChat</Title>
+    </TitleContainer>
+    <Form>
+      {action === "logIn" ? (
+        <>
+          <Helmet>
+            <title>Log In</title>
+          </Helmet>
+          <form onSubmit={onSubmit}>
+            <Input placeholder={"Email"} type="email" {...email} />
+            <Input placeholder={"Password"} type="password" {...password} />
+            <Button text={"Log In"} />
+          </form>
+        </>
+      ) : (
+        <>
+          <Helmet>
+            <title>Sign Up</title>
+          </Helmet>
+          <form onSubmit={onSubmit}>
+            <Input placeholder={"Email"} type="email" {...email} />
+            <Input placeholder={"UserName"} {...username} />
+            <Input placeholder={"PhoneNumber"} {...phoneNum} />
+            <Input placeholder={"Password"} type="password" {...password} />
+            <Input
+              placeholder={"Password for validation"}
+              type="password"
+              {...password2}
+            />
+            <Button text={"Sign Up"} />
+          </form>
+        </>
+      )}
+    </Form>
+    <StateChanger>
+      {action === "logIn" ? (
+        <>
+          Don't you have an account ?
+          <Link onClick={() => setAction("signUp")}> Sign Up </Link>
+        </>
+      ) : (
+        <>
+          Did you have an account ?
+          <Link onClick={() => setAction("logIn")}> Log in </Link>
+        </>
+      )}
+    </StateChanger>
+    <SocialLogin>
+      <FontAwesomeIcon icon={faFacebook} />
+      <FontAwesomeIcon icon={faGoogle} />
+      <FontAwesomeIcon icon={faTwitter} />
+      <FontAwesomeIcon icon={faGithub} />
+    </SocialLogin>
+  </Wrapper>
+);

@@ -5,3 +5,21 @@ export const LOGIN = gql`
     login(email: $email, password: $password)
   }
 `;
+
+export const SIGNUP = gql`
+  mutation signUp(
+    $email: String!
+    $username: String!
+    $password: String!
+    $password2: String!
+    $phoneNum: String!
+  ) {
+    signUp(
+      email: $email
+      username: $username
+      password: $password
+      password2: $password2
+      phoneNum: $phoneNum
+    )
+  }
+`;