11월 2일 kaikas login 및 회원가입 처리

 

 

front login page

먼저 kaikas 로그인 버튼을 누르면 onClick 함수가 실행되어 kaikas 가 설치되었는지 확인한다.

설치가 되어 있다면 kaikasLogin 함수를 실행된다.

front login component

 kaikasLogin 함수에서는 먼저 window.klaytn.enable() 로 

팝업창을 띄어주어 카이카스 로그인을 시킨다.

client 에서 카이카스로 로그인을 하면 지갑 주소를 받아와서

dispatch 로 이 지갑주소로 회원가입한 적이 있는지 확인한다.

saga에서 axios로 요청을 보내어 회원가입 한적이 있다면 기존의 로그인 정보를 불러와서 

reduser 안에 user  state에 저장을 해준다.

가입한 정보가 없다면 가입페이지로 넘어가게 작업했다.

reducer user (login 작업)

 

 

saga user (login 작업)

reduser user (login 정보 저장하는 부분)

우리 페이지에 회원가입한 적이 있다면 login 처리 되지만 회원가입 한 적이 없다면

join 페이지로 넘어가게된다.

 

front join page

프로필 사진과 닉네임, 이메일 주소 , 3개의 체크박스를 체크해야 회원가입 버튼이 생기게 작업하였다.

 

import Link from 'next/link'

import CameraAltIcon from '@mui/icons-material/CameraAlt';

import { Logo, Circle, Copyed, Small_Contain, Check_Content, Line, Btn_Box } from './Join.css.jsx'

import { Wrap } from '../../component/Wrap/Popup_back.jsx';

import useInput from '../../hooks/useInput.jsx';

import { useEffect, useState } from 'react';

import Input from '../Input'

import Button from '../Button';

import { useSelector,useDispatch } from 'react-redux';

import { UserJoin_REQUEST } from '../../reducers/user.js';

import Router from "next/router"

import axios from 'axios'

import { url } from '../../saga/url.js';

const Join = (data) => {

 

const [check,setCheck] = useState('')

const [checkBox1,setCheckBox1] = useState(false)

const [checkBox2,setCheckBox2] = useState(false)

const [checkBox3,setCheckBox3] = useState(false)

const dispatch = useDispatch()

// const state_data = useSelector(state => state.user)

 

const nickname = useInput('');

const email = useInput('');

const handleSumit = () => {

const wallet = window.klaytn.selectedAddress

const userinfo = {

"nickname": nickname.value,

"email": email.value,

"wallet": wallet,

"picture": '1'

}

console.log(userinfo);

 

dispatch(UserJoin_REQUEST(userinfo))

Router.push('/')

}

 

const checking = async() =>{

console.log(email);

let name = {

name :nickname.value

}

if(nickname.value !== ''){

let result = await axios.post(`${url}/user/name_check`,name)

console.log(result);

if(result){

setCheck(result.data)

}else{

setCheck(result.data)

}

}else{

setCheck('')

}

 

}

 

const hadleCheck1 = () =>{

setCheckBox1(!checkBox1)

}

const hadleCheck2 = () =>{

setCheckBox2(!checkBox2)

}

const hadleCheck3 = () =>{

setCheckBox3(!checkBox3)

}

return (

<>

<Wrap>

<Link href='/'>

<a>

<Logo>

<img src="/logo.png" alt="" /></Logo>

</a>

</Link>

<div>

 

<h1>회원가입</h1>

<Circle> <CameraAltIcon /> </Circle>

 

<Small_Contain>

<label htmlFor="nickname">닉네임</label>

<td>* 5~20자의 한글, 영문 대소문자, 숫자, 특수기호(_),(-),(.)만 사용 가능합니다.</td>

<Input {...nickname} func={checking} msg="닉네임을 입력해 주세요" type="text" id="nickname" placeholder="닉네임을 입력해주세요" />

</Small_Contain>

{check !== '' ? check ==true ?<span style={{color:'blue'}}>사용할수있는 닉네임 입니다.</span>: <span style={{color:"red"}}>사용할수없는 닉네임 입니다.</span> : ''}

<Small_Contain>

<label htmlFor="email_address">이메일 주소</label>

<Input {...email} msg="이메일을 입력해 주세요" id="email_address" placeholder="이메일을 입력해주세요" />

</Small_Contain>

<Check_Content>

<input type="checkbox" id="age" onChange={hadleCheck1}/> &nbsp;

<label htmlFor="age">만 19세 이상입니다.</label>

</Check_Content>

<Check_Content>

<input type="checkbox" id="law" onChange={hadleCheck2}/> &nbsp;

<label htmlFor="law">(필수) <Link href='/'><a>서비스 이용약관</a></Link>에 동의합니다.</label>

</Check_Content>

<Check_Content>

<input type="checkbox" id="agrry" onChange={hadleCheck3}/> &nbsp;

<label htmlFor="agrry">(필수) <Link href='/'><a>개인정보 수집 및 이용</a></Link>에 동의합니다.</label>

</Check_Content>

<Line />

<Btn_Box>

<Button value="취소" url="/" />

{checkBox1 && checkBox2 && checkBox3 && check && email.value !== '' ? <Button value="회원가입" color="sky" func={handleSumit} /> : ''}

 

</Btn_Box>

&nbsp;

</div>

<Copyed>Copyright © 2021 GroundX.All rights reserved.</Copyed>

</Wrap>

 

</>

)

}

 

export default Join

 

join component code

 

안에 내용을 채우고 체크박스를 모두 체크하면 회원가입 버튼이 나온다.

회원가입을 누르면 안에 내용을 dispatch 로 reduser 로 saga 가 middleware 로 axios 로 백단에 요청을 보내어

백단에서 db에 값을 저장 합니다.

login 과 똑같은 형태로 작업이 진행된다.

const initalState = {

loadding: false,

IsLogin: false,

user_info:{},

name_check:''

}

 

const USER_LOGIN_REQUEST = "USER_LOGIN_REQUEST"

const USER_LOGIN_SUCCESS = "USER_LOGIN_SUCCESS"

const USER_LOGIN_ERROR = "USER_LOGIN_ERROR"

const USER_LOGOUT = "USER_LOGOUT"

 

const USER_JOIN_REQUEST = "USER_JOIN_REQUEST"

const USER_JOIN_SUCCESS = "USER_JOIN_SUCCESS"

const USER_JOIN_ERROR = "USER_JOIN_ERROR"

 

export const User_Join_Check = (data) =>{

return{

type: USER_JOIN_CHECK,

data

}

}

 

export const User_Logout = () => {

return {

type: USER_LOGOUT

}

}

 

export const UserLogin_REQUEST = data => {

return {

type: USER_LOGIN_REQUEST,

data,

}

}

 

export const UserJoin_REQUEST = data => {

return {

type: USER_JOIN_REQUEST,

data

}

}

 

const reducer = (state = initalState,action) => {

switch (action.type) {

 

case USER_LOGIN_REQUEST:

console.log(action);

return {

...state,

user_info:action.data,

loadding: true,

}

 

case USER_LOGIN_SUCCESS:

console.log(action);

return {

...state,

IsLogin: true,

loadding: false,

data: action.data,

user_info: action.user_info,

}

case USER_LOGIN_ERROR:

return {

...state,

loadding: false,

data: action.data,

}

 

case USER_JOIN_REQUEST:

console.log("reducer");

return {

...state,

user_info:action.user_info

}

 

case USER_JOIN_SUCCESS:

return {

...state,

loadding: false,

user_info: action.user_info

}

 

case USER_JOIN_ERROR:

return {

...state,

loadding: false,

}

case USER_LOGOUT:

return {

...state,

IsLogin: false,

user_info: {},

data: 'logout'

 

}

 

default:

return state

}

}

 

export default reducer

reduser user.js code

 

import axios from "axios";

import { all, call, takeLatest,fork,put} from "redux-saga/effects";

import {url} from './url'

function joinAPI(data){

// const options = {'Content-type':'application/json'}

return axios.post(`${url}/user/join`,data)

 

}

function* join(action){

 

console.log("action++++++++",action);

let result = yield call(joinAPI,action.data)

let {data} = result

 

if (data !== null) {

yield put({

type: 'USER_JOIN_SUCCESS',

data: 'OK',

user_info:data

})

} else {

yield put({

type: 'USER_JOIN_ERROR',

data: '아이디와 비밀번호를 확인해주세요'

})

}

 

}

 

function loginAPI(data){

return axios.post(`${url}/user/login`,data)

}

 

function* login(action){

console.log('성공');

let result = yield call(loginAPI,action.data)

let {data} = result

 

if (data !== undefined) {

yield put({

type: 'USER_LOGIN_SUCCESS',

data: 'OK',

user_info:data

})

} else {

yield put({

type: 'USER_LOGIN_ERROR',

data: '아이디와 비밀번호를 확인해주세요'

})

}

 

}

 

function* watchUser(){

yield takeLatest('USER_LOGIN_REQUEST',login)

yield takeLatest('USER_JOIN_REQUEST',join)

}

 

export default function* userSaga(){

yield all([

fork(watchUser)

])

}

saga user.js code