[#32] login 구현하기

front/src/atoms/Login.jsx

@@ -0,0 +1,7 @@
+//@ts-check
+import { atom } from 'recoil';
+
+export const LoginState = atom({
+  key: 'src/atoms/Login.jsx-LoginState',
+  default: false,
+});

front/src/components/Signin.jsx

@@ -1,27 +1,21 @@
 //@ts-check
 
-import { atom } from 'recoil';
-import { recoilPersist } from 'recoil-persist';
+import { useRecoilState } from 'recoil';
+import { useState } from 'react';
+import { useEffect } from 'react';
+import { LoginState } from '../atoms/Login';
+import { postUsersLogin } from '../remotes';
 
-const { persistAtom } = recoilPersist();
-const [isLoggedIn, setIsLoggedIn] = useRecoilState(LoginState);
-const token = window.location.href.split('?token=')[1];
-
-export const LoginState =
-  atom <
-  boolean >
-  {
-    key: 'LoginState',
-    default: false,
-    effects_UNSTABLE: { persistAtom },
-  };
+const Signin = () => {
+  const [isLoggedIn, setIsLoggedIn] = useRecoilState(LoginState);
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
 
-useEffect(() => {
-  if (token) localStorage.setItem('4242-token', token);
-  if (localStorage.getItem('4242-token')) setIsLoggedIn(true);
-}, []);
+  useEffect(() => {
+    if (isLoggedIn) {
+    }
+  }, [isLoggedIn]);
 
-const Signin = () => {
   return (
     <div>
       <div className="auth-page">
@@ -37,19 +31,32 @@ const Signin = () => {
                 <li>That email is already taken</li>
               </ul>
 
-              <form>
+              <form
+                onSubmit={(e) => {
+                  e.preventDefault();
+
+                  postUsersLogin({ email, password }).then((res) => {
+                    if (res.user) {
+                      setIsLoggedIn(true);
+                      localStorage.setItem('token', res.user.token);
+                    }
+                  });
+                }}
+              >
                 <fieldset className="form-group">
                   <input
                     className="form-control form-control-lg"
                     type="text"
                     placeholder="Email"
+                    onChange={(e) => setEmail(e.target.value)}
                   />
                 </fieldset>
                 <fieldset className="form-group">
                   <input
                     className="form-control form-control-lg"
                     type="password"
                     placeholder="Password"
+                    onChange={(e) => setPassword(e.target.value)}
                   />
                 </fieldset>
                 <button className="btn btn-lg btn-primary pull-xs-right">

front/src/remotes/index.jsx

@@ -3,7 +3,12 @@
 import axios from 'axios';
 
 const conduitAxios = axios.create({
-  baseURL: 'https://conduit.productionready.io/api',
+  baseURL:
+    // 'https://api.realworld.io/api-docs/#/User%20and%20Authentication/Login',
+    'https://api.realworld.io/api-docs/',
+  // headers: {
+  //   'Content-Type': 'application/json',
+  // },
 });
 
 /**
@@ -63,7 +68,7 @@ const conduitAxios = axios.create({
 // ㅡㅡㅡㅡㅡ User ㅡㅡㅡㅡㅡ
 /**
  * @param {{ email: string; password: string;}} user
- * @returns {Promise<{ data: { user: User }}>}
+ * @returns {Promise<{ user: User }>}
  */
 const postUsersLogin = (user) => conduitAxios.post(`/users/login`);