Merge pull request #284 from INFP-Study/feature/signInPeristalsis

로그인, 로그아웃 구현 및 로컬스토리지 토큰 저장방식 적용 #282
INFP-Study · Jan 22, 2022 · a81a82e · a81a82e
2 parents fc01db5 + b6ed396
commit a81a82e
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 15 deletions.
diff --git a/frontend/src/components/common/layout/header.js b/frontend/src/components/common/layout/header.js
@@ -1,11 +1,12 @@
-import React from 'react';
-import { Affix, Layout } from 'antd';
-import { SIGN_IN, TITLE } from '../../../constants';
+import React, { useEffect, useState } from 'react';
+import { Affix, Button, Layout, notification } from 'antd';
+import { SIGN_IN, SIGN_OUT, SIGN_OUT_SUCCESS, TITLE } from '../../../constants';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 import { MAIN_URL, SIGN_IN_URL } from '../../../constants/urls';
 import { MdAccountCircle } from 'react-icons/md';
 import { theme } from '../../../style/theme';
+import { useSelector } from 'react-redux';
 
 const { Header } = Layout;
 
@@ -41,16 +42,33 @@ const UserInfo = styled(Link)`
 `;
 
 function SiteHeader() {
+  const signOut = () => {
+    notification.success({
+      message: 'CIAT',
+      description: SIGN_OUT_SUCCESS,
+    });
+    localStorage.removeItem('token');
+  };
+
   return (
     <Affix offsetTop={0}>
       <Header style={HeaderStyle}>
         <Logo to={MAIN_URL}>{TITLE}</Logo>
-        <UserInfo to={SIGN_IN_URL}>
-          <MdAccountCircle
-            style={{ fontSize: theme.fontSizeIcon, margin: '0px 10px' }}
-          />
-          {SIGN_IN}
-        </UserInfo>
+        {localStorage.getItem('token') === null ? (
+          <UserInfo to={SIGN_IN_URL}>
+            <MdAccountCircle
+              style={{ fontSize: theme.fontSizeIcon, margin: '0px 10px' }}
+            />
+            {SIGN_IN}
+          </UserInfo>
+        ) : (
+          <UserInfo to={MAIN_URL} onClick={signOut}>
+            <MdAccountCircle
+              style={{ fontSize: theme.fontSizeIcon, margin: '0px 10px' }}
+            />
+            {SIGN_OUT}
+          </UserInfo>
+        )}
       </Header>
     </Affix>
   );

diff --git a/frontend/src/constants/index.js b/frontend/src/constants/index.js
@@ -24,6 +24,7 @@ export const EMPTY_NICKNAME = '닉네임을 입력해주세요.';
 export const EMPTY_PASSWORD = '비밀번호를 입력해주세요.';
 export const EMPTY_PASSWORD_CONFIRM = '비밀번호 확인을 입력해주세요.';
 export const SIGN_UP_SUCCESS = '회원가입이 완료되었습니다.';
+export const SIGN_OUT_SUCCESS = '정상적으로 로그아웃 되었습니다.';
 export const REQUIRED_CHECK = '필수항목을 입력해주세요.';
 export const EMAIL_CHECK = '이메일 형식이 올바르지 않습니다.';
 export const NICKNAME_CHECK =

diff --git a/frontend/src/containers/auth/sign-in-container.js b/frontend/src/containers/auth/sign-in-container.js
@@ -1,5 +1,5 @@
 import { message } from 'antd';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import SignIn from '../../components/auth/sign-in';

diff --git a/frontend/src/saga/auth.js b/frontend/src/saga/auth.js
@@ -20,7 +20,7 @@ function* signInSaga(action) {
       type: authStore.signInSuccess,
       payload: success.config.headers.Authorization,
     });
-
+    localStorage.setItem('token', success.config.headers.Authorization);
     window.location.href = '/';
   } catch (error) {
     message.error(SIGN_IN_ERROR, 5);
@@ -46,7 +46,7 @@ function* signUpSaga(action) {
     }, 1500);
   } catch (e) {
     // 이메일 중복 확인 로직 추가예정
-    alert('이미 등록된 이메일입니다.');
+    alert('알수없는 오류가 발생하였습니다.');
     if (axios.isAxiosError(e)) {
       console.log(e.response);
     }

diff --git a/frontend/src/utils/api/auth.js b/frontend/src/utils/api/auth.js
@@ -6,10 +6,10 @@ export const authAPI = {
 };
 
 export const SIGN_UP_API =
-  'https://ciat-bakend.choicloudlab.com/api/v1/user/signup';
+  'https://ciat-dev.choicloudlab.com/api/v1/user/signup';
 
 export const SIGN_IN_API =
-  'https://ciat-bakend.choicloudlab.com/api/v1/user/signin';
+  'https://ciat-dev.choicloudlab.com/api/v1/user/signin';
 
 export const IS_SUCCESS =
-  'https://ciat-bakend.choicloudlab.com/api/v1/user/success';
+  'https://ciat-dev.choicloudlab.com/api/v1/user/success';