feat: 이메일 인증 요청

package.json

@@ -65,5 +65,5 @@
     "http-proxy-middleware": "^2.0.6",
     "tailwindcss": "^3.4.0"
   },
-  "proxy": "https://172.20.10.7:8080"
+  "proxy": "http://test.wasabi.wiki"
 }

src/components/auth/AuthForm.js

@@ -39,7 +39,7 @@ const partMap = [
     },
 ];
 
-const AuthForm = ({type, form, onChange, onSubmit, onKeyPress, onSelectPart, isOpenModal, emailCode, handleChangeEmailCode, handleSendEmailCode}) => {
+const AuthForm = ({type, form, authCode, onChange, onSubmit, onKeyPress, onSelectPart, isOpenModal, handleVerifyEmail, handleChangeAuthCode, handleCheckCode}) => {
     const [isClicked, setIsClicked] = useState(false);
     const text = textMap[type];
     const {register, handleSubmit, watch, formState: {errors}} = useForm();
@@ -70,7 +70,7 @@ const AuthForm = ({type, form, onChange, onSubmit, onKeyPress, onSelectPart, isO
                     {type === 'signUp' ?
                         <button className='w-full py-3 text-text4 font-semibold rounded-md bg-gray-100 hover:bg-gray-200'
                                 type='button'
-                                onClick={() => { handleSendEmailCode(); setIsClicked(!isClicked);}}
+                                onClick={() => { handleVerifyEmail(); setIsClicked(!isClicked);}}
                         >
                             이메일 인증하기
                         </button>
@@ -83,12 +83,13 @@ const AuthForm = ({type, form, onChange, onSubmit, onKeyPress, onSelectPart, isO
                         <div className='px-2 py-1 border border-gray-200 bg-background2'>
                             <input className='border-none focus:outline-none'
                                    placeholder='인증코드'
-                                   name='emailConde'
-                                   value={emailCode}
-                                   onChange={handleChangeEmailCode}
+                                   name='authCode'
+                                   value={authCode}
+                                   onChange={handleChangeAuthCode}
                             />
                             <button className='w-fit float-right px-3 text-white font-semibold rounded-sm bg-brand hover:bg-brandAccent'
                                     type='button'
+                                    onClick={handleCheckCode}
                             >
                                 확인
                             </button>

src/containers/auth/SignUpForm.js

@@ -1,17 +1,18 @@
 import AuthForm from "../../components/auth/AuthForm";
 import {useDispatch, useSelector} from "react-redux";
-import {changeField, changeFieldEmailCode, initializeForm, signUp} from "../../modules/auth";
+import {changeField, initializeForm, signUp} from "../../modules/auth";
 import {useEffect, useState} from "react";
-import axios from "axios";
-import {sendEmailCode} from "../../modules/email";
+import {changeAuthCode, verifyEmail} from "../../modules/mail";
 
 const SignUpForm = () => {
     const [isOpenModal, setIsOpenModal] = useState(false);
     const dispatch = useDispatch();
-    const {form, email, emailCode} = useSelector(({auth}) => ({
+    const {form, email, authCode, code, codeError} = useSelector(({auth, mail}) => ({
         form: auth.signUp,
         email: auth.signUp.email,
-        emailCode: auth.emailCode,
+        authCode: mail.authCode,
+        code: mail.code,
+        codeError: mail.codeError
     }));
 
     const onChange = e => {
@@ -26,21 +27,33 @@ const SignUpForm = () => {
         );
     };
 
-    const handleChangeEmailCode = e => {
+    const handleVerifyEmail = () => {
+        dispatch(verifyEmail({
+                email,
+            }),
+        );
+    };
+
+    const handleChangeAuthCode = e => {
         const {name, value} = e.target;
 
-        dispatch(changeFieldEmailCode({
+        dispatch(changeAuthCode({
                 name,
                 value,
             }),
         );
     };
 
-    const handleSendEmailCode = () => {
-        dispatch(sendEmailCode({
-                email,
-            }),
-        );
+    const handleCheckCode = () => {
+        if (code && code.data.authCode) {
+            if (code.data.authCode === authCode) {
+                alert('인증되었습니다.');
+            } else if (code.data.authCode !== authCode) {
+                alert('다시 인증해주세요.');
+            }
+        }
+
+        if (codeError) alert(codeError);
     };
 
     const onSelectPart = e => {
@@ -65,13 +78,14 @@ const SignUpForm = () => {
     return (
         <AuthForm type="signUp"
                   form={form}
+                  authCode={authCode}
                   onChange={onChange}
                   onSubmit={onSubmit}
                   onSelectPart={onSelectPart}
                   isOpenModal={isOpenModal}
-                  emailCode={emailCode}
-                  handleChangeEmailCode={handleChangeEmailCode}
-                  handleSendEmailCode={handleSendEmailCode}
+                  handleVerifyEmail={handleVerifyEmail}
+                  handleChangeAuthCode={handleChangeAuthCode}
+                  handleCheckCode={handleCheckCode}
         />
     );
 };

src/lib/api/auth.js

@@ -4,4 +4,6 @@ export const signUp = ({email, password, checkPassword, name, phoneNumber, refer
     client.post("/auth/signup", ({email, password, checkPassword, name, phoneNumber, referenceUrl, part, organization, motto}));
 
 export const login = ({email, password}) =>
-    client.post("/auth/login", ({email, password}));
+    client.post("/auth/login", ({email, password}));
+
+export const verifyEmail = ({email}) => client.post('/auth/mail', ({email}));

src/modules/auth.js

@@ -6,7 +6,6 @@ import {takeLatest} from "redux-saga/effects";
 import client from "../lib/api/client";
 
 const CHANGE_FIELD = 'auth/CHANGE_FIELD';
-const CHANGE_FIELD_EMAIL_CODE = 'auth/CHANGE_FIELD_EMAIL_CODE';
 const INITIALIZE_FORM = 'auth/INITIALIZE_FORM';
 const [SIGNUP, SIGNUP_SUCCESS, SIGNUP_FAILURE] = createRequestActionTypes(
     'auth/SIGNUP',
@@ -20,11 +19,6 @@ export const changeField = createAction(
     ({form, key, value}) => ({form, key, value})
 );
 
-export const changeFieldEmailCode = createAction(
-    CHANGE_FIELD_EMAIL_CODE,
-    ({name, value}) => ({name, value})
-);
-
 export const initializeForm = createAction(
     INITIALIZE_FORM,
     form => form
@@ -66,7 +60,6 @@ const initialState = {
         organization: '',
         motto: '',
     },
-    emailCode: '',
     auth: null,
     authError: null,
 };
@@ -77,10 +70,6 @@ const auth = handleActions(
             state, draft => {
                 draft[form][key] = value;
             }),
-        [CHANGE_FIELD_EMAIL_CODE]: (state, {payload: {name, value}}) => ({
-            ...state,
-            [name]: value,
-        }),
         [INITIALIZE_FORM]: (state, {payload: form}) => ({
             ...state,
             [form]: initialState[form]

src/modules/index.js

@@ -10,7 +10,7 @@ import myPage, {myPageSaga} from "./mypage";
 import admin, {adminSaga} from "./admin";
 import search, {searchSaga} from "./search";
 import comment, {commentSaga} from "./comment";
-import email, {emailSaga} from "./email";
+import mail, {mailSaga} from "./mail";
 
 const rootReducer = combineReducers({
     loading,
@@ -23,11 +23,11 @@ const rootReducer = combineReducers({
     admin,
     search,
     comment,
-    email,
+    mail,
 });
 
 export function* rootSaga() {
-    yield all([authSaga(), writeSaga(), boardSaga(), likeSaga(), boardsSaga(), myPageSaga(), adminSaga(), searchSaga(), commentSaga(), emailSaga()]);
+    yield all([authSaga(), writeSaga(), boardSaga(), likeSaga(), boardsSaga(), myPageSaga(), adminSaga(), searchSaga(), commentSaga(), mailSaga()]);
 }
 
 export default rootReducer;

src/modules/mail.js

@@ -0,0 +1,47 @@
+import {createAction, handleActions} from "redux-actions";
+import createRequestSaga, {createRequestActionTypes} from "../lib/createRequestSaga";
+import {takeLatest} from "redux-saga/effects";
+import * as authAPI from "../lib/api/auth";
+
+const CHANGE_AUTH_CODE = 'mail/CHANGE_AUTH_CODE';
+const [VERIFY_EMAIL, VERIFY_EMAIL_SUCCESS, VERIFY_EMAIL_FAILURE] = createRequestActionTypes('mail/VERIFY_EMAIL');
+
+export const changeAuthCode = createAction(
+    CHANGE_AUTH_CODE,
+    ({name, value}) => ({name, value})
+);
+export const verifyEmail = createAction(
+    VERIFY_EMAIL,
+    ({email}) => ({email}),
+);
+
+const verifyEmailSaga = createRequestSaga(VERIFY_EMAIL, authAPI.verifyEmail);
+export function* mailSaga() {
+    yield takeLatest(VERIFY_EMAIL, verifyEmailSaga)
+}
+
+const initialState = {
+    authCode: '',
+    code: null,
+    codeError: null,
+};
+
+const mail = handleActions(
+    {
+        [CHANGE_AUTH_CODE]: (state, {payload: {name, value}}) => ({
+            ...state,
+            [name]: value,
+        }),
+        [VERIFY_EMAIL_SUCCESS]: (state, {payload: code}) => ({
+            ...state,
+            code,
+        }),
+        [VERIFY_EMAIL_FAILURE]: (state, {payload: codeError}) => ({
+            ...state,
+            codeError,
+        }),
+    },
+    initialState,
+);
+
+export default mail;