체크박스 클릭시 폼 제출오류 수정

package.json

@@ -14,16 +14,23 @@
   "dependencies": {
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",
+    "axios": "^0.21.1",
     "next": "^10.0.7",
+    "next-redux-wrapper": "^6.0.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-hook-form": "^6.15.1",
-    "react-icons": "^4.2.0"
+    "react-icons": "^4.2.0",
+    "react-redux": "^7.2.2",
+    "redux": "^4.0.5",
+    "redux-promise": "^0.6.0",
+    "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
     "@types/node": "^14.14.28",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1",
+    "redux-devtools-extension": "^2.13.9",
     "typescript": "^4.1.5"
   }
 }

src/_actions/types.ts

@@ -0,0 +1,3 @@
+// reducer type 모음
+export const LOGIN_USER = "login_user";
+export const REGISTER_USER = "register_user";

src/_actions/user_action.ts

@@ -0,0 +1,27 @@
+import axios from 'axios';
+import {
+    LOGIN_USER,
+    REGISTER_USER
+} from './types';
+
+export function loginUser(dataTosubmit : any){
+    // state의 입력된 정보 서버로 전송
+    const request = axios.post('https://vjsel.herrokuapp.com/user/login', dataTosubmit)
+        .then(response => response.data) // 서버에서 받은 데이터 request에 저장
+        // request reducer에 넘기기
+        return {
+            type : LOGIN_USER,
+            payload : request,
+        }
+}
+
+export function registerUser(dataTosubmit : any){
+    // state의 입력된 정보 서버로 전송    
+    const request = axios.post('https://vjsel.herrokuapp.com/user/register', dataTosubmit)
+        .then(response => response.data) // 서버에서 받은 데이터 request에 저장
+        // request reducer에 넘기기
+        return {
+            type : REGISTER_USER,
+            payload : request,
+        }        
+}

src/_reducers/index.ts

@@ -0,0 +1,11 @@
+// store의 reducer들을 root reducer에서 하나로 합쳐줌
+import {combineReducers} from 'redux';
+import user from './user_reducer';
+
+// combineReducers 을 rootReducer로 합쳐줌
+const rootReducer = combineReducers({
+    user
+})
+
+
+export default rootReducer;

src/_reducers/user_reducer.ts

@@ -0,0 +1,17 @@
+import{
+    LOGIN_USER, 
+    REGISTER_USER,
+} from '../_actions/types';
+
+export default function (state = {}, action : any) {
+    switch (action.type) {
+        case LOGIN_USER :
+            return { ...state, loginSuccess: action.payload }
+            break;
+            case REGISTER_USER : 
+            return { ...state, register : action.payload }
+            break;         
+        default : 
+            return state;
+    }
+}

src/components/agreement.tsx

@@ -15,7 +15,7 @@ export const Agreement = () => {
     if(isChecked1 && isChecked2 && isChecked3 && isChecked4 && isChecked5) setCheckedAll(true)
     else setCheckedAll(false)
   });
-
+  
   const checkAllfunction = () => {
     setCheckedAll(!isCheckedAll)
     setChecked1(!isCheckedAll)

src/pages/_app.tsx

@@ -11,4 +11,4 @@ function MyApp({ Component, pageProps }: AppProps) {
   );
 }
 
-export default MyApp;
+export default MyApp;

src/pages/login.tsx

@@ -1,8 +1,25 @@
-import React from "react";
+import React, {useState} from 'react';
 import styled from "@emotion/styled";
+import Router from 'next/router';
+import { loginUser } from "../_actions/user_action";
+import {isEmail, isPassword} from "components/check";
 
 function LoginPage(){
 
+    const [typingEmail, setEmail] = useState("");
+    const [typingPassword, setPassword] = useState("");
+
+    const onSubmitHandler = (event : any) => {
+        event.preventDefault(); // 로그인 버튼 클릭시 리프레시 막아줌
+
+        let body = {
+            email : typingEmail,
+            password : typingPassword
+        }
+        console.log(body)
+
+        loginUser(body)
+    }
 
     return(
     <Background>
@@ -14,6 +31,16 @@ function LoginPage(){
             {/*오른쪽 로그인*/}
             <LoginFrame>
                 <LoginHeader>로그인</LoginHeader>
+                <LoginForm onSubmit = {onSubmitHandler}>
+                    <EmailInput type = "email" value={typingEmail} placeholder ="이메일을 입력하세요"  onChange = {(event) => setEmail(event.currentTarget.value)}/>
+                    <PasswordInput type = "password" value={typingPassword} placeholder ="비밀번호를 입력해주세요"  onChange = {(event) => setPassword(event.currentTarget.value)} />
+                    <LoginSubmit disabled = {!((isEmail(typingEmail) && (isPassword(typingPassword))))} type = "submit">로그인</LoginSubmit>
+                    <div style={{display : 'flex', flexDirection : 'row'}}>
+                        <KeepLogin type="checkbox"/>
+                        <KeepLoginName>로그인 유지</KeepLoginName>
+                    </div>
+                </LoginForm>
+                <RegisterButton onClick = {() => Router.push('./register')}>크몽 회원가입 하기</RegisterButton>
             </LoginFrame>
         </Container>
 
@@ -22,7 +49,12 @@ function LoginPage(){
     )
 }
 
-const Background = styled.div``;
+const Background = styled.div`
+    position : fixed;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+`;
 
 const Container = styled.div`
     width: 1022px;
@@ -52,7 +84,7 @@ const LoginFrame = styled.div`
 
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: flex-start;
     padding: 40px;
 
 `;
@@ -71,7 +103,86 @@ const LoginHeader = styled.div`
 
 
     color: #303441;
+`;
+
+const LoginForm = styled.form``;
+
+const EmailInput = styled.input`
+    width: 340px;
+    height: 52px;
+
+    margin-top : 24px;
+    background: #FFFFFF;
+    border: 1px solid #E6E6E6;
+    box-sizing: border-box;
+    border-radius: 6px;   
+`;
+
+const PasswordInput = styled.input`
+    width: 340px;
+    height: 52px;
+    margin-top : 15px;
+
+    background: #FFFFFF;
+    border: 1px solid #E6E6E6;
+    box-sizing: border-box;
+    border-radius: 6px; 
+`;
+
+const LoginSubmit = styled.button`
+    cursor : pointer;
+    width: 340px;
+    height: 58px;
+    margin-top : 15px;
+
+    background: #FFD400;
+    border: 1px solid #FFD400;
+    box-sizing: border-box;
+    border-radius: 4px;
 
+    font-style: normal;
+    font-weight: normal;
+    font-size: 16px;
+    line-height: 26px;    
+`;
+
+const KeepLogin = styled.input`
+    width: 18px;
+    height: 18px;
+    left: 0px;
+    top: 2px;
+
+    background: #FFD400;
+    border-radius: 3px;
+`;
+
+const KeepLoginName = styled.div`
+    left: 26px;
+    top: 0px;
+    margin-left : 3px; 
+
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 13px;
+    line-height: 22px;
+    /* identical to box height, or 166% */
+
+
+    color: #555969;
+`;
+
+const RegisterButton = styled.button`
+    cursor : pointer;
+    width: 340px;
+    height: 58px;
+
+    margin-top : 246px;
+
+    background: #FFFFFF;
+    border: 1px solid #116AD4;
+    box-sizing: border-box;
+    border-radius: 4px;
 `;
 
 export default LoginPage;