Skip to content

GitLab

Commit 796349ba authored by 우지원's avatar 우지원
Browse files

로그인, 회원가입 페이지(Nav추가)

parent 2a94cd4d
Hide whitespace changes
Inline Side-by-side
client/src/Pages/LogInPage.js
View file @ 796349ba
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Button, Form, Container } from 'react-bootstrap'; import { Button, Form, Container, Navbar } from 'react-bootstrap';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
function LogIn() { function LogIn() {
...@@ -16,42 +16,50 @@ function LogIn() { ...@@ -16,42 +16,50 @@ function LogIn() {
}; };
return ( return (
<Form noValidate validated={validated} onSubmit={handleSubmit}> <>
<Container className="d-flex justify-content-center"> <Navbar bg="dark" variant="dark">
<div className="mt-5 p-5 shadow w-75"> <Navbar.Brand>YDK Messenger</Navbar.Brand>
</Navbar>
<h2 className="text-center ">로그인</h2>
<Form noValidate validated={validated} onSubmit={handleSubmit}>
<Form.Group controlId="formGroupEmail"> <Container className="d-flex justify-content-center">
<Form.Label>이메일</Form.Label> <div className="mt-5 p-5 shadow w-75">
<Form.Control
required <h2 className="text-center ">로그인</h2>
type="text"
placeholder="이메일을 입력해주세요" /> <Form.Group controlId="formGroupEmail">
<Form.Control.Feedback type="invalid"> <Form.Label>이메일</Form.Label>
필수 정보입니다! 이메일을 입력해주세요! <Form.Control
required
type="text"
placeholder="이메일을 입력해주세요" />
<Form.Control.Feedback type="invalid">
필수 정보입니다! 이메일을 입력해주세요!
</Form.Control.Feedback> </Form.Control.Feedback>
</Form.Group> </Form.Group>
<Form.Group controlId="formGroupPassword"> <Form.Group controlId="formGroupPassword">
<Form.Label>비밀번호</Form.Label> <Form.Label>비밀번호</Form.Label>
<Form.Control <Form.Control
required required
type="text" type="text"
placeholder="비밀번호를 입력해주세요" /> placeholder="비밀번호를 입력해주세요" />
<Form.Control.Feedback type="invalid"> <Form.Control.Feedback type="invalid">
필수 정보입니다! 비밀번호를 입력해주세요! 필수 정보입니다! 비밀번호를 입력해주세요!
</Form.Control.Feedback> </Form.Control.Feedback>
</Form.Group> </Form.Group>
<Button type="submit" variant="outline-success" size="lg" className="mr-4" block>로그인</Button> <Link to="./homepage">
<Button type="submit" variant="outline-success" size="lg" className="mr-4" block>로그인</Button>
<Link to="./signuppage"> </Link>
<h6 type="button" className="text-right mt-2" style={{ cursor: 'pointer' }}>회원가입</h6>
</Link> <Link to="./signuppage">
</div> <h6 type="button" className="text-right mt-2" style={{ cursor: 'pointer' }}>회원가입</h6>
</Container> </Link>
</Form> </div>
</Container>
</Form>
</>
); );
} }
......
client/src/Pages/SignUpPage.js
View file @ 796349ba
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Button, Form, Container } from 'react-bootstrap'; import { Button, Form, Container, Navbar } from 'react-bootstrap';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
function SingUp() { function SingUp() {
...@@ -16,64 +16,70 @@ function SingUp() { ...@@ -16,64 +16,70 @@ function SingUp() {
}; };
return ( return (
<div> <>
<Form noValidate validated={validated} onSubmit={handleSubmit}> <Navbar bg="dark" variant="dark">
<Container className="d-flex justify-content-center"> <Navbar.Brand>YDK Messenger</Navbar.Brand>
<div className="mt-5 p-5 shadow w-75"> </Navbar>
<h2 className="text-center ">회원가입</h2> <div>
<Form noValidate validated={validated} onSubmit={handleSubmit}>
<Container className="d-flex justify-content-center">
<div className="mt-5 p-5 shadow w-75">
<Form.Group controlId="formGroupUsername"> <h2 className="text-center ">회원가입</h2>
<Form.Label>이름</Form.Label>
<Form.Control <Form.Group controlId="formGroupUsername">
required <Form.Label>이름</Form.Label>
type="text" <Form.Control
placeholder="이름을 입력해주세요" /> required
<Form.Control.Feedback type="invalid"> type="text"
필수 정보입니다! 이름을 입력해주세요! placeholder="이름을 입력해주세요" />
<Form.Control.Feedback type="invalid">
필수 정보입니다! 이름을 입력해주세요!
</Form.Control.Feedback> </Form.Control.Feedback>
</Form.Group> </Form.Group>
<Form.Group controlId="formGroupNickname"> <Form.Group controlId="formGroupNickname">
<Form.Label>별명</Form.Label> <Form.Label>별명</Form.Label>
<Form.Control <Form.Control
required required
type="text" type="text"
placeholder="별명을 입력해주세요" /> placeholder="별명을 입력해주세요" />
<Form.Control.Feedback type="invalid"> <Form.Control.Feedback type="invalid">
필수 정보입니다! 별명을 입력해주세요! 필수 정보입니다! 별명을 입력해주세요!
</Form.Control.Feedback> </Form.Control.Feedback>
</Form.Group> </Form.Group>
<Form.Group controlId="formGroupEmail"> <Form.Group controlId="formGroupEmail">
<Form.Label>이메일</Form.Label> <Form.Label>이메일</Form.Label>
<Form.Control <Form.Control
required required
type="text" type="text"
placeholder="이메일을 입력해주세요" /> placeholder="이메일을 입력해주세요" />
<Form.Control.Feedback type="invalid"> <Form.Control.Feedback type="invalid">
필수 정보입니다! 이메일을 입력해주세요! 필수 정보입니다! 이메일을 입력해주세요!
</Form.Control.Feedback> </Form.Control.Feedback>
</Form.Group> </Form.Group>
<Form.Group controlId="formGroupPassword"> <Form.Group controlId="formGroupPassword">
<Form.Label>비밀번호</Form.Label> <Form.Label>비밀번호</Form.Label>
<Form.Control <Form.Control
required required
type="text" type="text"
placeholder="비밀번호를 입력해주세요" /> placeholder="비밀번호를 입력해주세요" />
<Form.Control.Feedback type="invalid"> <Form.Control.Feedback type="invalid">
필수 정보입니다! 비밀번호를 입력해주세요! 필수 정보입니다! 비밀번호를 입력해주세요!
</Form.Control.Feedback> </Form.Control.Feedback>
</Form.Group> </Form.Group>
<Link to="./homepage"> <Link to="./">
<Button type="submit" variant="outline-success" size="lg" className="mr-4" block>가입</Button> <Button type="submit" variant="outline-success" size="lg" className="mr-4" block>가입</Button>
</Link> </Link>
</div> </div>
</Container> </Container>
</Form> </Form>
</div > </div >
</>
) )
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment