React 마지막 간단한 프로젝트 3일차- 로그인

완성본:https://github.com/qjawns0222/hompage.git

드디어 JSP하고 시간짜내면서 한다고 드디어 완성햇습니다.

우선 프로젝트 열어주시고  우선 데이터를 넣어주기위해 로그인데이터가 들어갈수 있도록 하겠습니다.

src/context/item.js

const item = {

  data: [

    {

      id: 0,

      gim: 2,

      odeng: 0,

      addition: "ㅇㅁㄴㅇㅇㄴㅇㅁㄴㅇㅁㄴㅇㄴㅁㅇ",

      summary: "ㅇㅁㄴㅇㅇㄴㅇㅁㄴㅇㅁ....",

      date: "14:27",

      user: "qjawns0222",

    },

    {

      id: 1,

      gim: 2,

      odeng: 0,

      addition: "ㅇㅁㄴㅇㅇㄴㅇㅁㄴㅇㅁㄴㅇㄴㅁㅇ",

      summary: "ㅇㅁㄴㅇㅇㄴㅇㅁㄴㅇㅁ....",

      date: "14:27",

      user: "qjawns02221",

    },

  ],

  id: 0,

  user: "",

  login: false,

  alert: false,

  auth: false,

  authdata: [

    { id: "qjawns0222", password: "qjawns123" },

    { id: "qjawns02221", password: "qjawns123" },

  ],

};

export default item;

작성

authdata는 실제 로그인 정보가 들어있는 저장소

auth는 관리자인지 아닌지 확인시켜주는 변수

login은 로그인됬는지 안됬는지 보는 변수

user 어떤 계정이 로그인됬는지 알려주는 저장소

alert:알려줄때 여러번 알려주는걸 방지하기위해 넣었습니다.

이제 css container component page 이렇게 4개를 만들어주세요

우선App.js로 가서 login 주소를 만들어 주겠습니다.

import "./App.css";

import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";

import Home from "./pages/Home";

import Menu from "./pages/Menu";

import Buy from "./pages/Buy";

import Detail from "./pages/Detail";

import Login from "./pages/Login";

import Create from "./pages/Create";

function App() {

  return (

    <BrowserRouter>

      <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/menu" element={<Menu />} />

        <Route path="/order" element={<Buy />} />

        <Route path="/detail:id" element={<Detail />} />

        <Route path="/login" element={<Login />} />

        <Route path="/create" element={<Create />} />

        <Route path="*" element={<Navigate replace to="/" />} />

      </Routes>

    </BrowserRouter>

  );

}

export default App;

이제 로그인을 할수있게 router를 만들었고

pages/Login.jsx

import React from "react";

import Logincontainer from "../container/Logincontainer";

export default function Login() {

  return <Logincontainer />;

}

Login.module.css

.loginbox {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  height: 50vh;

}

.inputbox {

  display: flex;

  flex-flow: column;

  width: 100%;

}

.option {

  display: flex;

  flex-direction: row;

  margin: auto;

  justify-content: center;

  font-weight: bolder;

  font-size: 20px;

}

.option > .name {

  width: 90px;

}

.option > .value > input {

  font-size: 20px;

}

.buttonbox {

  display: flex;

  justify-content: flex-end;

  width: 30%;

}

.buttonbox > * {

  margin-left: 10px;

  font-weight: bolder;

  font-size: 20px;

}

.buttonbox > * > * {

  margin-left: 10px;

  font-weight: bolder;

  font-size: 20px;

}

Componenets/Login.jsx

import React from "react";

import { Link } from "react-router-dom";

import style from "./css/Login.module.css";

import Form from "./Form";

export default function Login({

  id,

  password,

  idchange,

  passwordchange,

  login,

  loginkey,

}) {

  return (

    <Form>

      <div className={style.loginbox}>

        <div className={style.inputbox}>

          <div className={style.option}>

            <div className={style.name}>아이디</div>:

            <div className={style.value}>

              <input

                type="text"

                value={id}

                className={style.id}

                placeholder="아이디를 입력해주세요"

                onChange={idchange}

                onKeyPress={loginkey}

              />

            </div>

          </div>

          <div className={style.option}>

            <div className={style.name}>비밀번호</div>:

            <div className={style.value}>

              <input

                type="password"

                value={password}

                placeholder="비밀번호 입력해주세요"

                className={style.password}

                onChange={passwordchange}

                onKeyPress={loginkey}

              />

            </div>

          </div>

        </div>

        <div className={style.buttonbox}>

          <button className={style.login} onClick={login}>

            로그인

          </button>

          <Link to={"/create"}>

            <button className={style.makecount}>회원가입</button>

          </Link>

        </div>

      </div>

    </Form>

  );

}

작성

여기서 보면 우선 아이디랑 비밀번호 입력하는 부분에 입력시마다 데이터가 자동으로 id에 저장되도록 onchange에 함수를 넣어서 했습니다.

onkeypress로 엔터 쳐도 로그인이 되도록 설정을 했고 로그인 키와 회원가입 키를 만들었습니다.

Logincontainer.jsx

import React, { useContext, useState } from "react";

import store from "../context/store";

import Login from "../Components/Login";

import { useNavigate } from "react-router-dom";

export default function Logincontainer() {

  const value = useContext(store);

  const navigate = useNavigate();

  const [id, setId] = useState("");

  const [password, setPassword] = useState("");

  const idchange = (e) => {

    setId(e.target.value);

  };

  const passwordchange = (e) => {

    setPassword(e.target.value);

  };

  const login = () => {

    value.authdata.map((p) => {

      if (value.alert) {

        return p;

      }

      if (p.id === id && p.password === password) {

        value.login = true;

        value.user = p.id;

        setId("");

        setPassword("");

        if (p.id === "qjawns0222") {

          value.auth = true;

        } else {

          value.auth = false;

        }

        navigate("/");

      } else if (p.id !== id && p.password !== password) {

        alert("비밀번호와아이디를 확인해주세요.");

        value.alert = true;

      } else if (p.id === id && p.password !== password) {

        alert("비밀번호가 틀렸습니다.");

        value.alert = true;

      }

      return p;

    });

    value.alert = false;

  };

  const loginkey = (e) => {

    if (e.charCode === 13) {

      value.authdata.map((p) => {

        if (value.alert) {

          return p;

        }

        if (p.id === id && p.password === password) {

          value.login = true;

          value.user = p.id;

          setId("");

          setPassword("");

          if (p.id === "qjawns0222") {

            value.auth = true;

          } else {

            value.auth = false;

          }

          navigate("/");

        } else if (p.id !== id && p.password !== password) {

          alert("비밀번호와아이디를 확인해주세요.");

          value.alert = true;

        } else if (p.id === id && p.password !== password) {

          alert("비밀번호가 틀렸습니다.");

          value.alert = true;

        }

        return p;

      });

    }

    value.alert = false;

  };

  return (

    <Login

      id={id}

      password={password}

      idchange={idchange}

      passwordchange={passwordchange}

      login={login}

      loginkey={loginkey}

    />

  );

}

작성

뒤에 change 붙어있는건  입력하면 id의 변수 값도 같이 변경하는 함수 입니다.

login함수를 살펴 보면

 if (p.id === id && p.password === password) {

        value.login = true;

        value.user = p.id;

        setId("");

        setPassword("");

        if (p.id === "qjawns0222") {

          value.auth = true;

        } else {

          value.auth = false;

        }

        navigate("/");

      }

여기서 authdate를 돌면서 id도 같고 paswword도 같은 두조건 모두 만족시키는데 있으면 login을 true로바꾸고

user에 저장된 id값을 넣습니다.

그리고 그 id가 qjawns0222면 관리자 이므로 auth를 true로 바꺼주고 아니면 false로 바꿉니다.false로 바꾸는 이유는 

관리자로 로그인하고 다시 일반 아이디로 로그인했을때 auth가 남아있는것을 방지하기 위해서 입니다.

 if (value.alert) {

        return p;

      }

else if (p.id !== id && p.password !== password) {

        alert("비밀번호와아이디를 확인해주세요.");

        value.alert = true;

      } else if (p.id === id && p.password !== password) {

        alert("비밀번호가 틀렸습니다.");

        value.alert = true;

      }

      return p;

 여기서 아이디나  비밀번호가 틀리면  alert로 알려주고 alert를 true 로 바꺼서 alert가 두번 실행되는걸 막아 줍니다.

그리고 데이터를 변경해줄꺼는 없으므로 return p로 그대로 내보내 버립니다.

const loginkey = (e) => {

    if (e.charCode === 13) {

      value.authdata.map((p) => {

        if (value.alert) {

          return p;

        }

        if (p.id === id && p.password === password) {

          value.login = true;

          value.user = p.id;

          setId("");

          setPassword("");

          if (p.id === "qjawns0222") {

            value.auth = true;

          } else {

            value.auth = false;

          }

          navigate("/");

        } else if (p.id !== id && p.password !== password) {

          alert("비밀번호와아이디를 확인해주세요.");

          value.alert = true;

        } else if (p.id === id && p.password !== password) {

          alert("비밀번호가 틀렸습니다.");

          value.alert = true;

        }

        return p;

      });

    }

    value.alert = false;

  };

여기서는 로그인과 다를건 크게없고 e.charCode 를 활용해서 엔터키인 다른 키인지를 구별 해주게 합니다.

엔터키는 13이므로 13일때만 작동하도록 합니다. 

이렇게 로그인 창을 완성했고 로그인이 됩니다.

 

제가 신나서 만든다고 여러기능을 넣었는데 다 기억이 안나네요 ㅎㅎ login으로 넣었던 기능을 다음 게시글에서 알려드리겠습니다.