[#51] 이메일 인증 페이지 생성

src/App.jsx

@@ -9,6 +9,7 @@ import Timetable from './views/Timetable';
 import Login from './views/login/index';
 import PrivacyPolicy from './views/PrivacyPolicy';
 import Admin from './views/admin';
+import EmailAuth from './views/EmailAuth';
 
 function ErrorPage() {
   return <h1>404 Not Found</h1>;
@@ -25,6 +26,7 @@ function App() {
               <Route exact path="/login" component={Login} />
               <Route exact path="/admin" component={Admin} />
               <Route path="/privacy_policy" component={PrivacyPolicy} />
+              <Route exact path="/auth" component={EmailAuth} />
               <Route path="*" component={ErrorPage} />
             </Switch>
           </Router>

src/utils/api.js

@@ -51,9 +51,12 @@ const DELETE = url => ({ method: 'DELETE', url });
 // API CONFIG LIST
 
 export const API_LOGIN = makeAPI(POST, '/user/login');
+export const API_MY_INFO = makeAPI(GET, '/user');
 export const API_SIGN_UP = makeAPI(POST, '/user');
 export const API_FIND_ID = makeAPI(GET, '/user/id');
 export const API_FIND_PW = makeAPI(GET, '/user/password');
+export const API_SEND_CODE = makeAPI(POST, 'user/auth');
+export const API_AUTH_EMAIL = (userID, code) => makeAPI(POST, `user/auth/${userID}/${code}`);
 export const API_GET_SEMESTERS = makeAPI(GET, '/semesters');
 export const API_GET_ALL_NOTICES = makeAPI(GET, '/notice/all');
 export const API_CREATE_NOTICE = makeAPI(POST, '/notice');

src/views/EmailAuth.jsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react';
+import { requestAPI, API_SEND_CODE, API_AUTH_EMAIL, API_MY_INFO } from '@utils/api';
+import { Button, Box, makeStyles, Container, Typography } from '@material-ui/core';
+import UosInput from '@components/UosInput';
+
+
+export default function EmailAuth() {
+    const userID = window.localStorage.getItem('userID');
+    const [userEmail,setUserEmail] = useState(null);
+    const [isCodeSend, setIsCodeSend] = useState(false);
+    const [code, setCode] = useState(null);
+
+    useEffect(async()=> {
+        try{
+            const res = await requestAPI(API_MY_INFO, userID);
+            setUserEmail(res.data.email);
+        }
+        catch(err){
+            alert(err);
+            throw err;
+        }
+    },[])
+
+    const inputOnChange = (e) => {
+        setCode(e.target.value);
+    };
+
+    const onEnterPress = (e) => {
+        if(e.key == 'Enter') {
+          handleAuth();
+        }
+    };
+
+    const handleSendCode = async () => {
+        console.log(userEmail);
+        try{
+            await requestAPI(API_SEND_CODE(), {email: userEmail});
+        }
+        catch(err){
+            alert(err.message);
+            throw err;
+        }
+    }
+
+    const handleAuth = async () => {
+        console.log(userID, code);
+        try{
+            const res = await requestAPI(API_AUTH_EMAIL(userID, code));
+            if(res.status === 204){
+                alert('이메일이 성공적으로 인증되었습니다!');
+            }
+        }
+        catch(err){
+            alert(err)
+            throw err;
+        }
+    }
+
+    return( //TODO: 컴포넌트로 나누기
+        <Container>  
+            <Container>
+                <Typography>이메일 인증</Typography>
+                <Container>
+                    <Typography>{userEmail}</Typography> 
+                    <Button onClick={handleSendCode}>
+                        인증 코드 전송
+                    </Button>
+                </Container>
+            </Container>
+
+            {isCodeSend &&
+            <Container>
+            <UosInput
+                type='password' 
+                name='code' 
+                label='인증코드' 
+                onChange={inputOnChange} 
+                onKeyPress={onEnterPress}
+                value={code}
+            />
+            <Button onClick={handleAuth}>인증</Button>
+            </Container>}
+        </Container>
+    )
+}