완성본:https://github.com/qjawns0222/hompage.git
우선 프로젝트여시고 Component/menu.jsx
import React from "react";
import Form from "./Form";
import style from "./css/Menu.module.css";
export default function Menu({
gimbab,
odeng,
addition,
gimminus,
gimplus,
odengminus,
odengplus,
odengchange,
gimchange,
additionchange,
addorder,
value,
}) {
return (
<Form>
<div className={value.auth || value.user ? style.form : style.formnone}>
<div className={style.menus}>
<div className={style.item}>
<div className={style.imgs}>
<img
width={200}
className={style.img}
alt="#"
/>
</div>
<div className={style.name}>김밥</div>
<div className={style.price}>2000원</div>
<div className={style.buttons}>
<button className={style.minus} onClick={gimminus}>
-
</button>
<input
type="number"
onChange={gimchange}
value={gimbab}
className={style.menuinput}
/>
<button className={style.plus} onClick={gimplus}>
+
</button>
</div>
</div>
<div className={style.item}>
<div className={style.imgs}>
<img
className={style.img}
width={200}
alt="#"
/>
</div>
<div className={style.name}>오뎅</div>
<div className={style.price}>500원</div>
<div className={style.buttons}>
<button className={style.minus} onClick={odengminus}>
-
</button>
<input
type="number"
onChange={odengchange}
value={odeng}
className={style.menuinput}
/>
<button className={style.plus} onClick={odengplus}>
+
</button>
</div>
</div>
</div>
<div className={style.addition}>
<h3 className={style.title}>요청 사항</h3>
<hr className={style.hr}></hr>
<div className={style.requests}>
<textarea
value={addition}
onChange={additionchange}
className={style.request}
placeholder="요청사항을 입력하세요"
/>
</div>
</div>
<div className={style.orders}>
<button className={style.order} onClick={addorder}>
주문
</button>
</div>
</div>
</Form>
);
}
이부분을 보시면 저장소의 auth 와 user 둘중 한개라도 있으면 form을 넣어서 원래 기존처럼 놔두고 아니면 formnone을 이용해서 클릭이 안되게 합니다.
이렇게 하면 로그인 하지 않은 사람들은 클릭이 되지 않게 됩니다. 그렇게 함으로써 로그인 한사람만 주문을 하게 만들었습니다.
Component/Home.jsx
import React from "react";
import Form from "./Form";
import style from "./css/Home.module.css";
import { Link } from "react-router-dom";
export default function Home({ value, logout }) {
return (
<Form>
<h1 className={style.name}>천생슈퍼</h1>
<div className={style.image}>
<img
className={style.img}
alt="메인"
/>
</div>
<div className={style.description}>
30년 전동의 김밥 가게
<br />
김밥과 오뎅이 주 메뉴이다
</div>
{value.login === true ? (
<button className={style.login} onClick={logout}>
로그아웃
</button>
) : (
<Link to={"/login"}>
<button className={style.login}>로그인</button>
</Link>
)}
</Form>
);
}
Homecontainer.jsx
import React, { useContext } from "react";
import { useNavigate } from "react-router-dom";
import Home from "../Components/Home";
import store from "../context/store";
export default function Homecontainer() {
const value = useContext(store);
const navigate = useNavigate();
const logout = () => {
value.login = false;
value.auth = false;
value.user = "";
navigate("/");
};
return <Home value={value} logout={logout} />;
}
이렇게 login값이 true이면 로그아웃 버튼을 보여줘서 자기가 로그인 됬다는것을 확인 시켜주고 또한 로그아웃이 가능하게 구현 했습니다.
반대로 로그인 이 false 면 로그인 버튼을 보여줘서 로그인 안될걸 알려주고 로그인 가능하게 버튼을 활성화시켰습니다.
로그아웃은 logout할때 login auth 둘다 false로 만들어주고 user도 비워 줘서 로그아웃 한 설정을 만들어 줍니다.
Component/Buy.jsx
import React from "react";
import Form from "./Form";
import style from "./css/Buy.module.css";
import { Link } from "react-router-dom";
export default function Buy({ value, delvalue }) {
return (
<Form>
<div className={style.orderboxs}>
<div className={style.orderbox}>
<div className={style.id}>순번</div>
<div className={style.gim}>김밥</div>
<div className={style.odeng}>오뎅</div>
<div className={style.addition}>요청사항</div>
<div className={style.date}>시간</div>
<div className={style.button}>삭제</div>
</div>
<hr className={style.line} />
{value.data.map((p) => {
return (
<div key={p.id} className={style.data}>
<div className={style.orderbox}>
<div className={style.id}>
<Link to={`/detail${p.id}`}>{p.id}</Link>
</div>
<div className={style.gim}>
<Link to={`/detail${p.id}`}>{p.gim}</Link>
</div>
<div className={style.odeng}>
<Link to={`/detail${p.id}`}>{p.odeng}</Link>
</div>
<div className={style.addition}>
<Link to={`/detail${p.id}`}>{p.summary}</Link>
</div>
<div className={style.date}>
<Link to={`/detail${p.id}`}>{p.date}</Link>
</div>
<div className={style.button}>
<button
id={p.id}
onClick={delvalue}
className={
value.auth || p.user === value.user
? style.delete
: style.disable
}
>
삭제
</button>
</div>
</div>
<hr className={style.line} />
</div>
);
})}
</div>
</Form>
);
}
여기 보시면 auth가 true이거나 데이터의 user 랑 저장소의 user가 같을때만 클릭이 가능하게 했습니다.
이로써 삭제는 본인과 관리자만 할수 있습니다.
Component/Detail.jsx
import React from "react";
import Form from "./Form";
import style from "./css/Menu.module.css";
export default function Menu({
gimbab,
odeng,
addition,
gimminus,
gimplus,
odengminus,
odengplus,
odengchange,
gimchange,
additionchange,
addorder,
value,
user,
}) {
return (
<Form>
<div
className={
value.auth || user === value.user ? style.form : style.formnone
}
>
<div className={style.menus}>
<div className={style.item}>
<div className={style.imgs}>
<img
width={200}
className={style.img}
alt="#"
/>
</div>
<div className={style.name}>김밥</div>
<div className={style.price}>2000원</div>
<div className={style.buttons}>
<button className={style.minus} onClick={gimminus}>
-
</button>
<input
type="number"
onChange={gimchange}
value={gimbab}
className={style.menuinput}
/>
<button className={style.plus} onClick={gimplus}>
+
</button>
</div>
</div>
<div className={style.item}>
<div className={style.imgs}>
<img
width={200}
className={style.img}
alt="#"
/>
</div>
<div className={style.name}>오뎅</div>
<div className={style.price}>500원</div>
<div className={style.buttons}>
<button className={style.minus} onClick={odengminus}>
-
</button>
<input
type="number"
onChange={odengchange}
value={odeng}
className={style.menuinput}
/>
<button className={style.plus} onClick={odengplus}>
+
</button>
</div>
</div>
</div>
<div className={style.addition}>
<h3 className={style.title}>요청 사항</h3>
<hr className={style.hr}></hr>
<div className={style.requests}>
<textarea
value={addition}
onChange={additionchange}
className={style.request}
placeholder="요청사항을 입력하세요"
/>
</div>
</div>
<div className={style.orders}>
<button className={style.order} onClick={addorder}>
주문
</button>
</div>
</div>
</Form>
);
}
여기도 위에랑 똑같이 auth 이거나 저장소의 user 가 해당 데이터의user 랑 같으면 클릭이 가능하게 만들어서 관리자나 주문한 사람만 수정이 가능하게 만들었습니다.
이상으로 로그인 이용한 기능입니다.
내일은 아이디 만드는것을 해보겠습니다.
'React를 같이 배워보자' 카테고리의 다른 글
| React 마지막 간단한 프로젝트 4일차- 회원 가입/마지막 React (0) | 2022.03.07 |
|---|---|
| React 마지막 간단한 프로젝트 3일차- 로그인 (0) | 2022.03.06 |
| React 마지막 간단한 프로젝트 3일차- detail화면 (0) | 2022.03.02 |
| React 마지막 간단한 프로젝트 2일차- order화면 (0) | 2022.03.01 |
| React 마지막 간단한 프로젝트 2일차- menu화면 (0) | 2022.03.01 |
