Merge pull request #185 from INFP-Study/feature/signupPeristalsis

[FEATURE] E4-S4 회원가입 유효성 검증 및  message 수정 #130

frontend/src/components/auth/sign-in.js

@@ -71,27 +71,35 @@ const SNSLogin = styled.div`
   padding: 30px;
 `;
 
-function SignIn() {
+function SignIn({ handleChange, handleSignIn }) {
   return (
     <Wrapper>
       <InnerWrapper>
         <Title>{SIGN_IN}</Title>
         <Div>
           {EMAIL}
           <Input
+            name="email"
             placeholder="이메일 주소를 입력해주세요."
             style={{ marginTop: '10px' }}
+            onChange={handleChange}
           />
         </Div>
         <Div>
           {PASSWORD}
           <Input.Password
+            name="password"
             placeholder="비밀번호를 입력해주세요."
             style={{ marginTop: '10px' }}
+            onChange={handleChange}
           />
         </Div>
         <Div>
-          <ButtonAntd type="primary" style={{ height: '44px' }}>
+          <ButtonAntd
+            type="primary"
+            style={{ height: '44px' }}
+            onClick={handleSignIn}
+          >
             {SIGN_IN}
           </ButtonAntd>
         </Div>

frontend/src/constants/index.js

@@ -23,10 +23,15 @@ export const EMPTY_EMAIL = '이메일 주소를 입력해주세요.';
 export const EMPTY_NICKNAME = '닉네임을 입력해주세요.';
 export const EMPTY_PASSWORD = '비밀번호를 입력해주세요.';
 export const EMPTY_PASSWORD_CONFIRM = '비밀번호 확인을 입력해주세요.';
+export const SIGN_IN_SUCCESS = '씨앗에 오신 것을 환영합니다.';
 export const SIGN_UP_SUCCESS = '회원가입이 완료되었습니다.';
 export const REQUIRED_CHECK = '필수항목을 입력해주세요.';
 export const EMAIL_CHECK = '이메일 형식이 올바르지 않습니다.';
-export const PASSWORD_CHECK = '입력한 비밀번호가 다릅니다.';
+export const NICKNAME_CHECK =
+  '닉네임은 한글, 영문, 숫자 최소 1개이상 입력해주세요 (길이 2자~12자)';
+export const PASSWORD_SAME_CHECK = '입력한 비밀번호가 다릅니다.';
+export const PASSWORD_CHECK =
+  '비밀번호는 영문, 숫자, 특수문자를 혼합하여 입력해주세요 (길이 8자~20자)';
 
 export const HOME = '홈으로';
 export const ERROR_CONTENT_F = '찾을수 없는 페이지 입니다.';

frontend/src/containers/auth/sign-in-container.js

@@ -1,7 +1,9 @@
+import { message } from 'antd';
 import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import SignIn from '../../components/auth/sign-in';
+import { signInSuccess } from '../../store/auth';
 
 const Wrapper = styled.div`
   width: 100%;
@@ -11,9 +13,32 @@ const Wrapper = styled.div`
 `;
 
 function SignInContainer() {
+  const dispatch = useDispatch();
+
+  const [info, setInfo] = useState({
+    email: '',
+    password: '',
+  });
+
+  const onChangeHandler = (e) => {
+    setInfo({
+      ...info,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const onSignInHandler = () => {
+    if (info.email === '') {
+      return message.error('이메일을 입력해주세요.');
+    } else if (info.password === '') {
+      return message.error('비밀번호를 입력해주세요.');
+    }
+    dispatch({ type: signInSuccess.type, data: info });
+  };
+
   return (
     <Wrapper>
-      <SignIn />
+      <SignIn handleChange={onChangeHandler} handleSignIn={onSignInHandler} />
     </Wrapper>
   );
 }

frontend/src/containers/auth/sign-up-container.js

@@ -1,10 +1,15 @@
 import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
-import { signUpSuccess } from '../../store/auth';
+import { signUp } from '../../store/auth';
 import SignUp from '../../components/auth/sign-up';
 import { message } from 'antd';
-import { EMAIL_CHECK, PASSWORD_CHECK } from '../../constants';
+import {
+  EMAIL_CHECK,
+  NICKNAME_CHECK,
+  PASSWORD_CHECK,
+  PASSWORD_SAME_CHECK,
+} from '../../constants';
 
 const Wrapper = styled.div`
   width: 100%;
@@ -34,8 +39,10 @@ function SignUpContainer() {
 
   const onSignUpHandler = (e) => {
     if (isEmail(info.email) === undefined) {
-      if (isSamePassword(info) === undefined) {
-        dispatch({ type: signUpSuccess.type, data: info });
+      if (isNickname(info.nickname) === undefined) {
+        if (isPassword(info) === undefined) {
+          dispatch({ type: signUp.type, data: info });
+        }
       }
     }
   };
@@ -45,15 +52,26 @@ function SignUpContainer() {
     const regExp =
       /^(([^<>()\[\].,;:\s@"]+(\.[^<>()\[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;
     if (!regExp.test(email)) {
-      console.log(email);
-      return message.error(EMAIL_CHECK);
+      return message.error(EMAIL_CHECK, 5);
     }
   };
 
-  // 비밀번호
-  const isSamePassword = (info) => {
-    if (info.password !== info.passwordConfirm) {
+  // 닉네임 검증
+  const isNickname = (nickname) => {
+    const regExp = /^[가-힣|a-z|A-Z|0-9|]{2,12}$/;
+    if (!regExp.test(nickname)) {
+      return message.error(NICKNAME_CHECK, 10);
+    }
+  };
+
+  // 비밀번호 검증
+  const isPassword = (info) => {
+    const regExp =
+      /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,20}$/;
+    if (!regExp.test(info.password)) {
       return message.error(PASSWORD_CHECK);
+    } else if (info.password !== info.passwordConfirm) {
+      return message.error(PASSWORD_SAME_CHECK, 10);
     }
   };
 

frontend/src/saga/auth.js

@@ -1,39 +1,49 @@
 import { put } from 'redux-saga/effects';
 import * as authStore from '../store/auth';
-import { SIGN_UP_API } from '../utils/api/auth';
+import { SIGN_IN_API, SIGN_UP_API } from '../utils/api/auth';
 import axios from 'axios';
-import { INNER_ERROR, SIGN_UP_SUCCESS } from '../constants';
+import { INNER_ERROR, SIGN_IN_SUCCESS, SIGN_UP_SUCCESS } from '../constants';
 import { finishLoading, startLoading } from '../store/loding';
 import { notification } from 'antd';
 
+// 로그인 사가 수정 예정
 function* signInSaga(action) {
-  /* let params = new URLSearchParams();
-  params.append('email', 'dawwdawdadawdaw');
-  params.append('password', '1234'); */
-  /* axios
+  try {
+    let params = new URLSearchParams();
+    params.append('email', '[email protected]');
+    params.append('password', '@test1234');
+    axios
       .post('https://ciat-bakend.choicloudlab.com/api/v1/user/login', params)
       .then((response) => {
         console.log('Success');
         console.log(response.status);
         console.log(response.headers);
       })
       .catch((error) => {
-        console.log('error');
+        console.debug('error');
         console.log(error.response.status);
-      }); */
+      });
+  } catch (error) {
+    console.debug(error);
+  } finally {
+    yield put(finishLoading(authStore.signInSuccess));
+  }
 }
 
 function* signUpSaga(action) {
   try {
-    yield put(startLoading(authStore.signUpSuccess));
+    yield put(startLoading(authStore.signUp));
     const { data } = yield axios.post(SIGN_UP_API, action.data);
     yield put({ type: authStore.signUpSuccess, payload: data });
     notification.success({
       message: 'CIAT',
       description: SIGN_UP_SUCCESS,
     });
+
     //수정 예정
-    window.location.href = '/';
+    setTimeout(() => {
+      window.location.href = '/';
+    }, 1500);
   } catch (e) {
     // 이메일 중복 확인 로직 추가예정
     alert('이미 등록된 이메일입니다.');
@@ -55,4 +65,4 @@ function* signUpSaga(action) {
   }
 }
 
-export { signUpSaga };
+export { signUpSaga, signInSaga };

frontend/src/store/auth.js

@@ -1,6 +1,6 @@
 import { takeLatest } from 'redux-saga/effects';
 import { createSlice } from '@reduxjs/toolkit';
-import { signUpSaga } from '../saga/auth';
+import { signUpSaga, signInSaga } from '../saga/auth';
 
 const initialState = {
   data: {
@@ -10,12 +10,14 @@ const initialState = {
     passwordConfirm: '',
   },
   userId: '',
+  isLogin: '',
   error: null,
 };
 const authSlice = createSlice({
   name: 'auth',
   initialState,
   reducers: {
+    signUp: (state) => state,
     signUpSuccess: (state, action) => {
       state.userId = action.payload;
       state.error = null;
@@ -26,15 +28,27 @@ const authSlice = createSlice({
       console.debug('error', action.payload);
       return state;
     },
+    signInSuccess: (state, action) => {
+      state.isLogin = action.payload;
+      state.error = null;
+      return state;
+    },
+    signInFail: (state, action) => {
+      state.error = action.payload;
+      console.debug('error', action.payload);
+      return state;
+    },
   },
 });
 
 const { actions, reducer: authReducer } = authSlice;
 
-export const { signUpSuccess, signUpFail } = actions;
+export const { signUp, signUpSuccess, signUpFail, signInSuccess, signInFail } =
+  actions;
 
 export { authReducer };
 
 export function* authSaga() {
-  yield takeLatest(signUpSuccess.type, signUpSaga);
+  yield takeLatest(signUp.type, signUpSaga);
+  yield takeLatest(signInSuccess.type, signInSaga);
 }