feat: set global login state

use global state via recoil, when login and signup

#128

src/assets/css/Auth/Auth.scss

@@ -2,7 +2,7 @@
 
 .auth--wrapper {
   @include medium_kor;
-  min-height: 450px;
+  min-height: 300px;
   @include desktop {
     @include basic--wrappers;
   }
@@ -11,15 +11,6 @@
   }
 }
 
-.auth--hello {
-  @include medium_kor;
-  text-align: center;
-}
-
-.signup {
-  margin-bottom: 100px;
-}
-
 .auth--profile {
   text-align: center;
   margin-top: 30px;
@@ -38,18 +29,59 @@
   }
 }
 
-.auth--guide {
-  @include medium_kor;
+.auth--signup_form {
   text-align: center;
   margin-top: 50px;
 }
 
-.auth--mode_change {
-  @include medium_kor;
+.authForm {
+  position: relative;
+  margin: 0 auto;
+  margin-top: 50px;
+  @include desktop {
+    width: 300px;
+  }
+  @include mobile {
+    width: 80%;
+  }
   text-align: center;
-  color: #1e4df5 !important;
+}
+
+.authForm--input {
+  height: 24px;
+  border: none;
+  border-bottom: 1px solid $darkgrey_default;
+  font-size: $default_small_13;
+  text-align: center;
+  &:focus {
+    outline: none;
+  }
+  @include desktop {
+    width: 240px;
+    margin-left: 10px;
+  }
+  @include mobile {
+    width: 75%;
+  }
+}
+
+.authForm--button {
+  padding: 0;
+  border: none;
+  color: $darkgrey_default;
+  background-color: lavender;
+  padding: 5px;
+  border-radius: 10px;
+  margin-top: 10px;;
   &:hover {
     cursor: pointer;
     transform: scale(1.1);
   }
 }
+
+.authForm--error_message {
+  @include medium_kor;
+  color: $pinkred;
+  display: flex;
+  align-items: center;
+}

src/components/Auth/AuthCallback.tsx

@@ -2,16 +2,29 @@ import React, { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { saveToken } from '@cert/TokenStorage';
 import { useNavigate } from 'react-router-dom';
+import { saveAuth, getAuth } from '@cert/AuthStorage';
+import GlobalLoginState from '@recoil/GlobalLoginState';
+import { useSetRecoilState } from 'recoil';
+import { set } from 'date-fns';
 
 const AuthCallback = () => {
   const location = useLocation();
   const searchParams = new URLSearchParams(location.search);
   const token = searchParams.get('token');
   const navigate = useNavigate();
+  const setLoginState = useSetRecoilState(GlobalLoginState);
 
   useEffect(() => {
-    console.log('LoginSucess', token);
     saveToken(token);
+    saveAuth(token);
+    setLoginState(() => {
+      return {
+        id: getAuth().id,
+        isLogin: true,
+        isAdmin: false,
+        profileUrl: getAuth().url,
+      };
+    });
     navigate('/');
   }, []);
 

src/components/Auth/AuthSignUp.tsx

@@ -1,24 +1,30 @@
-import React from 'react';
+import React, { useState } from 'react';
 import '@css/Auth/Auth.scss';
 import { useNavigate } from 'react-router';
 import { useSetRecoilState, useRecoilValue } from 'recoil';
 import errorAlert from '@globalObj/function/errorAlert';
 import apiClient from '@service/apiClient';
 import { saveToken } from '@cert/TokenStorage';
+import { saveAuth } from '@cert/AuthStorage';
 import ProfileChangeModalShow from '@recoil/ProfileChangeModalShow';
 import SignUpProfileState from '@recoil/SignUpProfileState';
 import ProfileModal from '@auth/ProfileModal';
+import GlobalLoginState from '@recoil/GlobalLoginState';
 
 const AuthSignUp = () => {
   const navigate = useNavigate();
   const setOpenProfileModal = useSetRecoilState(ProfileChangeModalShow);
   const openProfileModal = useRecoilValue(ProfileChangeModalShow);
   const profileImage = useRecoilValue(SignUpProfileState);
+  const setLoginState = useSetRecoilState(GlobalLoginState);
+  const [nicknameError, setNicknameError] = useState(false);
 
   const handleSubmit = (e: any) => {
     e.preventDefault();
-    console.log('submit', e.target[0].value);
-    console.log('submit', e.target[1].value);
+    if (!e.target[0].value) {
+      setNicknameError(true);
+      return;
+    }
     apiClient
       .post('/auth/signup', {
         nickname: e.target[0].value,
@@ -28,6 +34,15 @@ const AuthSignUp = () => {
       .then((res) => {
         console.log('success', res.data);
         saveToken(res.data.access_token);
+        saveAuth(res.data.access_token);
+        setLoginState(() => {
+          return {
+            id: res.data.id,
+            isLogin: true,
+            isAdmin: false,
+            profileUrl: res.data.url,
+          };
+        });
         navigate('/');
       })
       .catch((err) => {
@@ -40,20 +55,23 @@ const AuthSignUp = () => {
   };
 
   return (
-    <div>
-      <div className={`auth--wrapper ${'signup'} `}>
+    <>
+      <div className={`auth--wrapper`}>
         <div className="auth--profile">
           <img src={profileImage} alt="profile" />
           <p onClick={onClickOpenProfile}>프로필 변경</p>
         </div>
         {openProfileModal && <ProfileModal />}
+        <form className={`authForm`} onSubmit={handleSubmit}>
+          <input type="text" placeholder="닉네임을 입력해주세요" maxLength={10} className={`authForm--input`} />
+          {nicknameError && <p className={`authForm--error_message`}>닉네임을 입력해주세요.</p>}
+          <br />
+          <input type="text" placeholder="slack id" maxLength={20} className={`authForm--input`} />
+          <br />
+          <button className={`authForm--button`}>Sign Up</button>
+        </form>
       </div>
-      <form onSubmit={handleSubmit}>
-        <input type="text" placeholder="nick name" maxLength={10} />
-        <input type="text" placeholder="slack id" maxLength={20} />
-        <button>Sign Up</button>
-      </form>
-    </div>
+    </>
   );
 };