Merge pull request #64 from Yapp-17th/feat/#63

로그인페이지 및 auth router제작

package.json

@@ -68,6 +68,8 @@
   "dependencies": {
     "@reduxjs/toolkit": "^1.4.0",
     "axios": "^0.20.0",
+    "babel-polyfill": "^6.26.0",
+    "dotenv": "^8.2.0",
     "immutability-helper": "^3.1.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",

src/App.js

@@ -1,15 +1,18 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 
+import AuthRoute from './components/AuthRoute';
 import ConferenceButton from './components/ConferenceButton';
 import ConferenceRoom from './pages/ConferenceRoom';
 import NotFound from './pages/404';
+import LoginPage from './pages/LoginPage';
 
 export default function App() {
   return (
     <>
       <Switch>
-        <Route exact path="/" component={ConferenceButton} />
+        <Route exact path="/" component={LoginPage} />
+        <AuthRoute path="/conference" component={ConferenceButton} />
         <Route path="/room/:roomID" component={ConferenceRoom} />
         <Route component={NotFound} />
       </Switch>

src/components/AuthRoute/AuthRoute.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Route, Redirect } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { get } from '../../utils/snippet';
+
+export default function AuthRoute({ component: Component, render, ...rest }) {
+  const authSelector = useSelector(get('auth'));
+  return (
+    <Route
+      {...rest}
+      render={(props) => (authSelector.isLogin ? (
+        render ? (
+          render(props)
+        ) : (
+          <Component {...props} />
+        )
+      ) : (
+        <Redirect
+          to={{ pathname: '/', state: { from: props.location } }}
+        />
+      ))}
+    />
+  );
+}
+
+AuthRoute.propTypes = {
+  component: PropTypes.any,
+  render: PropTypes.any,
+  location: PropTypes.any,
+};

src/components/AuthRoute/index.js

@@ -0,0 +1 @@
+export { default } from './AuthRoute';

src/components/Icon/Icon.js

@@ -98,7 +98,7 @@ background-position: ${({ type }) => (type === 'bubble_white' ? '-44px -36px'
 `;
 
 export default function Icon({
-  type, alt, style, src
+  type, alt, style, src,
 }) {
   const [size, setSize] = useState('md');
   useEffect(() => {

src/components/Rangebar/RangeBar.js

@@ -113,7 +113,6 @@ export default function RangeBar({
     const inputRightRange = inputRight.current;
     const min = parseInt(inputRightRange.min);
     const max = parseInt(inputRightRange.max);
-
     inputRightRange.value = Math.max(
       parseInt(inputRightRange.value), parseInt(inputLeft.current.value) + 1,
     );

src/context/serverContext.js

@@ -1,13 +1,11 @@
 import Axios from 'axios';
 
-const SERVER_URL = process.env.REACT_APP_SERVER_URL || '';
-// const REST_API_KEY = process.env.REACT_APP_REST_API_KEY || '';
+const SERVER_URL = process.env.REACT_APP_API_SERVER_URL || 'https://api.witherview.com';
 
 const api = ({ url, type = 'get', param }) => Axios({
   method: type,
   url: `${SERVER_URL}${url}`,
   data: param,
-  // 영상 처리할 때 상황에 따라 header가 바뀔수도 있을 것 같습니다.
   headers: {
     'Content-Type': 'application/json',
     'Access-Control-Allow-Origin': '*',

src/mocks/QuestionMock.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/prefer-default-export */
 export const QuestionMock = [
   {
     id: 1,

src/pages/LoginPage/LoginPage.js

@@ -0,0 +1,68 @@
+/* eslint-disable no-useless-escape */
+import React, { useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { Redirect } from 'react-router-dom';
+import styled from 'styled-components';
+import { get } from '../../utils/snippet';
+import { setLogin } from '../../store/Auth/auth';
+import LoginApi from '../../repository/loginRepository';
+
+const Wrapper = styled.div`
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+`;
+
+export default function LoginPage() {
+  const dispatch = useDispatch();
+  const authSelector = useSelector(get('auth'));
+
+  const [loginForm, setLoginForm] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleInput = (e) => {
+    setLoginForm({
+      ...loginForm,
+      [e.target.name]: e.target.value,
+    });
+  };
+  const handleLogin = () => {
+    LoginApi(JSON.stringify(loginForm)).then((response) => {
+      const user = JSON.stringify(response.data.email).replace(/\"/g, '');
+      dispatch(setLogin({ user }));
+    }).catch(() => {
+      alert('로그인 실패');
+    });
+  };
+
+  return (
+    <Wrapper>
+      {authSelector.isLogin && <Redirect to="/conference" />}
+      <div>
+        <h3>아이디</h3>
+        <input
+          placeholder="아이디(이메일)"
+          value={loginForm.id}
+          onChange={handleInput}
+          name="email"
+        />
+      </div>
+      <div>
+        <h3>비밀번호</h3>
+        <input
+          placeholder="비밀번호"
+          value={loginForm.password}
+          onChange={handleInput}
+          name="password"
+          type="password"
+        />
+      </div>
+
+      <button onClick={handleLogin} type="button">로그인</button>
+    </Wrapper>
+  );
+}

src/pages/LoginPage/index.js

@@ -0,0 +1 @@
+export { default } from './LoginPage';

src/repository/loginRepository.js

@@ -0,0 +1,10 @@
+/* eslint-disable no-return-await */
+import api from '../context/serverContext';
+
+const LoginApi = async (param) => await api({
+  url: '/login',
+  type: 'post',
+  param,
+});
+
+export default LoginApi;

src/store/Auth/auth.js

@@ -0,0 +1,29 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const authReducer = createSlice({
+  name: 'auth',
+  initialState: {
+    isLogin: false,
+    user: '',
+  },
+  reducers: {
+    setLogin(state, { payload: { user } }) {
+      return {
+        ...state,
+        isLogin: true,
+        user,
+      };
+    },
+    setLogout(state) {
+      return {
+        ...state,
+        isLogin: false,
+        user: '',
+      };
+    },
+  },
+});
+
+export const { setLogin, setLogout } = authReducer.actions;
+
+export default authReducer.reducer;

src/store/index.js

@@ -1,10 +1,12 @@
 import { configureStore, combineReducers } from '@reduxjs/toolkit';
 import timeReducer from './Time/time';
+import authReducer from './Auth/auth';
 import modalReducer from './Modal/modal';
 
 export const reducers = combineReducers({
   modal: modalReducer,
   time: timeReducer,
+  auth: authReducer,
 });
 
 const store = configureStore({ reducer: reducers });

webpack.config.js

@@ -65,6 +65,17 @@ module.exports = {
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
+          options: {
+            presets: [
+              ['@babel/preset-env', {
+                targets: {
+                  browsers: ['last 2 chrome versions'],
+                },
+                debug: true,
+              }],
+              '@babel/preset-react'],
+            plugins: ['@babel/plugin-proposal-class-properties'],
+          },
         },
       },
       {