TIL 홈페이지 만들기 10

pages/login.tsx

import React, {useEffect, useState} from 'react';
import styled from '@emotion/styled'
import Layout from "../components/Layout";
import { useDispatch, useSelector } from 'react-redux';
import { ReducerType } from '../reducers';
import { User, USER_ADD_REQUEST, USER_LOG_IN_REQUEST } from '../reducers/userReducer';

const Login = () => {
	const [email, setEmail] = useState('');
	const [password, setPassword] = useState('');
	const { me } = useSelector<ReducerType, User>(state=> state.userReducer);
	const dispatch = useDispatch();
	useEffect(() => {
		console.log(me);
	}, [])

	const signupOnSubmit = (e) => {
		e.preventDefault();
		const signupData = {
			email,
			password
		}
		dispatch(USER_ADD_REQUEST(signupData))
	}

	const loginOnSubmit = (e) => {
		e.preventDefault();
		const loginData = {
			email,
			password
		}
		dispatch(USER_LOG_IN_REQUEST(loginData))
	}

	const emailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
		setEmail(e.target.value);
	}

	const passwordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
		setPassword(e.target.value);
	}

	return(
		<>
			<Layout>
				<FormBox>
					<form onSubmit={signupOnSubmit}>
						<p>회원가입</p>
						<input type="text" value={email} onChange={emailChange}  />
						<input type="password" value={password} onChange={passwordChange}  />
						<button type="submit">회원가입</button>
					</form>
				</FormBox>
				<FormBox>
					<form onSubmit={loginOnSubmit}>
						<p>로그인</p>
						<input type="text" value={email} onChange={emailChange}  />
						<input type="password" value={password} onChange={passwordChange}  />
						<button type="submit">로그인</button>
					</form>
				</FormBox>
			</Layout>
		</>
	)
}

const FormBox = styled.div`
	margin: 30px auto 0;
	text-align: center;
`;

export default Login;

위와 같이 작성을 하면 회원가입, 로그인이 정상적으로 작동된다.

pages/index.tsx

import React, {useEffect, useState} from "react";
import Layout from "../components/Layout";
import wrapper from '../store';
import {END, Task} from 'redux-saga';
import axios from 'axios';
import {useDispatch, useSelector} from "react-redux";
import {ReducerType} from "../reducers";
import {LOAD_MY_INFO_REQUEST, User} from '../reducers/userReducer';
import {Store} from "redux";

interface SagaStore extends Store {
  sagaTask?: Task;
}


const IndexPage = () => {
  const { me } = useSelector<ReducerType, User>(state=> state.userReducer);
  const dispatch = useDispatch();

  useEffect(() => {
    console.log('me', me)
  }, [me])

  useEffect(() => {
    // dispatch(LOAD_MY_INFO_REQUEST());
  }, [])

  return (
    <>
      <Layout>
        <div>
          Home
          {me && me.email}
        </div>
      </Layout>
    </>
  );
}

export const getServerSideProps = wrapper.getServerSideProps(async (context) => {
  const cookie = context.req ? context.req.headers.cookie : '';
  axios.defaults.headers.Cookie = '';
  // 쿠키가 브라우저에 있는경우만 넣어서 실행
  // (주의, 아래 조건이 없다면 다른 사람으로 로그인 될 수도 있음)
  if (context.req && cookie) {
    axios.defaults.headers.Cookie = cookie;
  }

  await context.store.dispatch(LOAD_MY_INFO_REQUEST());

  context.store.dispatch(END);
  await (context.store as SagaStore).sagaTask.toPromise();

  return {
    props: {},
  };
})

export default IndexPage;

위와 같이 작성을 하면 ssr 을 할 수가 있다.