next+ts 로그인 페이지 전체 코드 둘러보기(Component+container)

component

import { RefObject } from "react";

import { useSelector } from "react-redux";

import { useDispatch } from "react-redux";

import { CounterState, RootState } from "../store/types/state";

const Login = ({

  idref,

  passwordref,

  login,

}: {

  idref: RefObject<HTMLInputElement>;

  passwordref: RefObject<HTMLInputElement>;

  login: () => void;

}) => {

  return (

    <div>

      <div className="section">

        <div className="inputboxs">

          <div className="title">로그인 해주세요</div>

          <div className="idbox">

            <div className="title">아이디:</div>

            <input ref={idref} className="id" />

          </div>

          <div className="passwordbox">

            <div className="title">비밀번호:</div>

            <input ref={passwordref} className="password" type="password" />

          </div>

          <div className="buttons">

            <button onClick={login} className="login">

              로그인

            </button>

          </div>

        </div>

      </div>

      <style jsx>

        {`

          .section {

            height: 850px;

            width: 100%;

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            background-color: yellow;

          }

          .inputboxs {

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            min-height: 40%;

            min-width: 30%;

            max-width: 100%;

            background-color: #1afff3;

            border: 4px solid #1afff3;

            border-radius: 10px;

          }

          .inputboxs > .title {

            height: 20%;

            color: #c24889;

            font-size: 28px;

            font-weight: bolder;

          }

          .inputboxs > .idbox,

          .passwordbox {

            display: flex;

            justify-content: center;

            margin: 1%;

            width: 100%;

          }

          .inputboxs > .idbox,

          .passwordbox > .title {

            font-size: 18px;

            font-weight: bolder;

          }

          .inputboxs > .idbox > .title {

            padding-left: 18px;

          }

          .inputboxs > .buttons {

            display: flex;

            width: 90%;

            justify-content: flex-end;

            font-size: 28px;

            font-weight: bolder;

          }

          .inputboxs > .buttons > .login {

            font-size: 18px;

            font-weight: bolder;

            padding: 2%;

            background-color: #6856f8;

            border-radius: 10px;

          }

        `}

      </style>

    </div>

  );

};

export default Login;

 

container

import { useRouter } from "next/router";

import { useRef } from "react";

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

import Login from "../components/login";

import { LOGIN } from "../store/actions/action";

import { CounterState, LoginData, RootState } from "../store/types/state";

const LoginContainer = () => {

  const dispatch = useDispatch();

  const idref = useRef<HTMLInputElement>(null);

  const passwordref = useRef<HTMLInputElement>(null);

  const { main }: { main: CounterState } = useSelector(

    (state: RootState) => state

  );

  const router = useRouter();

  const login = () => {

    if (idref.current?.value && passwordref.current?.value) {

      const logindata: LoginData = {

        id: idref.current!.value,

        password: passwordref.current!.value,

      };

      dispatch(LOGIN(logindata, router));

    } else {

      alert("아이디와 비밀번호를 모두 입력하세요");

    }

  };

  return (

    <div>

      <Login idref={idref} passwordref={passwordref} login={login} />

    </div>

  );

};

export default LoginContainer;

 

 

 

 const idref = useRef<HTMLInputElement>(null);

  const passwordref = useRef<HTMLInputElement>(null);

 

ref를 이용해서 input부분을 선택할수 있도록 설정했습니다.

  const { main }: { main: CounterState } = useSelector(

    (state: RootState) => state

  );

redux에서 저장되어있는데이터를 받아오는 부분입ㄴ디ㅏ.

 const login = () => {

    if (idref.current?.value && passwordref.current?.value) {

      const logindata: LoginData = {

        id: idref.current!.value,

        password: passwordref.current!.value,

      };

 

      dispatch(LOGIN(logindata, router));

    } else {

      alert("아이디와 비밀번호를 모두 입력하세요");

    }

  };

id와 비밀번호가 둘다있으면 로그인형식으로 데이터를 만들고 dispatch롤 데이터를 보내고 로그인끝내고 화면이동되도록 router도 같이 보냈습니다.

그리고 비어있으면 alert로 비어있다고 알려주도록 설정했습니다.