이번 편은 조금 길어질 수 있어 프론트엔드와 백엔드로 나눠서 포스팅하겠습니다. 우선 이번 포스팅에서는 React + react-bootstrap으로 페이지를 구성하고 백엔드에 요청을 보내는 페이지를 만들겠습니다. 이전에 맛보기로 만든 FormTest.js 컴포넌트를 지우고 시작하겠습니다.
컴포넌트 구성 및 Blueprint
components 폴더에 LoginForm.js 컴포넌트를, pages 폴더를 만들고 Login.js를 추가합니다. Login.js는 로그인 페이지 자체를 표현하고, LoginForm.js는 로그인을 위한 폼들이 구현되는 컴포넌트입니다. 여기에도 역시 react-bootstrap을 적용해서 페이지를 만들어 보겠습니다.
지금 만드는 로그인 페이지는 기존 홈페이지의 로그인과 조금 다릅니다. IoT시스템에 접근할 수 있는 인원들을 DB에 미리 넣어놓고, 이들이 인증 절차를 거쳤을 때 IoT 시스템에 접근할 권한을 주려 합니다. 개인 신원을 확인하기 위해 휴대폰 인증을 할 것이며, 외부 휴대폰 인증 솔루션을 따로 사용하지 않습니다. 따라서 Login페이지에서 유저에게 전화번호와 방문목적 두 가지 정보를 받고, 두 정보가 모두 유효했을 때 인증번호를 유저의 휴대폰으로 보내 인증을 완료하는 방식으로 구현해보겠습니다.
LoginForm.js
//client/src/components/LoginForm.js
import React, { useState } from "react";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import Collapse from "react-bootstrap/Collapse";
const LoginForm = (props) => {
return (
<Form>
{/* 인증번호 화면이 뜰지 안뜰지 설정 / props.showAuthCode가 true이면 안보입니다. */}
<Collapse in={!props.showAuthCode}>
<Form.Group controlId="exampleForm.SelectCustom">
<Form.Label>phone number</Form.Label>
<Form.Control
type="text"
placeholder="phone number"
value={props.phone}
onChange={props.handlePhone}
/>
<Form.Label>Visit Purpose</Form.Label>
<Form.Control
as="select"
custom
value={props.purpose}
onChange={props.handleSelect}
>
<option>Why are you here to visit?</option>
<option>As a Guest</option>
<option>As a Owner</option>
</Form.Control>
<Button variant="primary" type="submit">
Submit
</Button>
</Form.Group>
</Collapse>
{/* 인증번호 화면이 뜰지 안뜰지 설정 / props.showAuthCode가 true이면 나타납니다. */}
<Collapse in={props.showAuthCode}>
<Form.Group>
<Form.Label>Authentification Code</Form.Label>
<Form.Control
type="text"
placeholder=""
value={props.code}
onChange={props.handleCode}
/>
<Button variant="primary" type="submit">
Confirm
</Button>
</Form.Group>
</Collapse>
</Form>
);
};
export default LoginForm;
LoginForm 컴포넌트에는 Input, select, button, collapse 요소가 들어갑니다. LoginForm은 필요에 따라 요소가 보일지, 사라질지를 정하는 인자를 만들었으며, 부모 컴포넌트인 Login에서 이를 조작할 수 있도록 했습니다.
Login.js
//client/src/pages/Login.js
import React, { useState } from "react";
import LoginForm from "../components/LoginForm";
import Card from "react-bootstrap/Card";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
const Login = () => {
const [phone, setPhone] = useState("");
const [purpose, setPurpose] = useState("");
const [code, setCode] = useState("");
const handlePhone = (e) => {
setPhone(e.target.value);
};
const handleSelect = (e) => {
setPurpose(e.target.value);
};
const handleCode = (e) => {
setCode(e.target.value);
};
const handleSubmit = (e) => {
};
return (
<Row>
<Col xs={1} md={3}></Col>
<Col xs={10} md={6}>
<Card body style={{ marginTop: "1rem", borderRadius: "10px" }}>
<h3>Cranberry</h3>
<h5>Home IoT System</h5>
<LoginForm
phone={phone}
purpose={purpose}
showAuthCode={false}
handlePhone={handlePhone}
handleSelect={handleSelect}
handleSubmit={handleSubmit}
handleCode={handleCode}
/>
</Card>
</Col>
<Col xs={1} md={3}></Col>
</Row>
);
};
export default Login;
Login컴포넌트는 bootstrap의 Grid System을 활용했습니다. fetch를 두 번 사용하는데, 유저로부터 받은 전화번호와 방문 목적이 유효한지 확인하는데 한 번, 인증번호를 확인하는데 한 번 사용됩니다.
Done!
react-bootstrap을 사용하니 큰 어려움 없이 어느정도 깔끔한 느낌의 UI를 만들어 내는 데 성공했습니다. 다음 페이지에서는 이들과 Express와의 연동을 통해 정상적으로 작동할 수 있도록 해 보겠습니다.
긴 글 읽어주셔서 감사합니다. 도움이 되셨다면 공감 + 광고 클릭 부탁드립니다. 감사함은 표현하는 가장 쉬운 방법입니다.
