create Auth files

+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 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;
+`;
+
+export default () => {
+  const [action, setAction] = useState("logIn");
+
+  const email = useInput("");
+  const password = useInput("");
+  const password2 = useInput("");
+  const phoneNum = useInput("");
+  const username = useInput("");
+  const loginMutation = useMutation(LOGIN, {
+    variables: { email: email.value, password: password.value },
+  });
+
+  const onSubmit = async (e) => {
+    if (action === "logIn") {
+      if (email.value !== "") {
+        try {
+          // QL 을 통해서 data 를 가져온다.
+          const {
+            data: { login }, // ?
+          } = await loginMutation();
+        } catch (e) {}
+      }
+    } else if (action === "signUp") {
+    }
+  };
+
+  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>
+  );
+};

+import { gql } from "apollo-boost";
+
+export const LOGIN = gql`
+  mutation login($email: String!, $password: String!) {
+    login(email: $email, password: $password)
+  }
+`;