게임모드공유웹 <ModHub> 제작기 - 로그인창 구현하기

navigation.jsx

<Nav className="ms-auto">
            <Nav.Link href="login">로그인</Nav.Link>
          </Nav>

네비게이션바에 로그인 섹션 추가

💡me-auto와 ms-auto

• me-auto(margin-end auto)
  요소의 오른쪽(end)마진을 자동으로 설정
  주로 요소를 왼쪽으로 정렬할 때 사용
• ms-auto(margin-start auto)
  요소의 왼쪽(start)마진을 자동으로 설정
  주로 요소를 오른쪽으로 정렬할 때 사용

login.jsx

import React from "react";

const Login = () => {
    return (
        <>
            <h2>로그인</h2>
        </>
    )
}

export default Login;

로그인 페이지 생성

resist.jsx

import React from "react";

const Resist = () => {
    return (
        <>
            <h2>회원가입</h2>
        </>
    )
}

export default Resist;

회원가입 페이지 생성

login.jsx

import React from "react";
import Form from "react-bootstrap/Form";
import { Button } from "bootstrap";
import Container from "react-bootstrap/Container";
import Card from "react-bootstrap/Card";
import 'bootstrap/dist/css/bootstrap.min.css';

const Login = () => {
    return (
        <Container className="d-flex justify-content-center align-items-center" style={{ minHeight: "100vh" }}>
            <Card style={{ width: "25rem", padding: "20px", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)" }}>
                <h2 className="text-center mb-4">로그인</h2>
                <Form>
                    {/* {아이디 입력칸} */}
                    <Form.Group classNAme="mb-3" contorllId="formBasicEmail">
                        <Form.Label>아이디</Form.Label>
                        <Form.Control type="email" placeholder="아이디를 입력해주세요."/>
                    </Form.Group>

                    {/* {비밀번호 입력칸} */}
                    <Form.Group className="mb-3" controllId="formBasicPassword">
                        <Form.Label>비밀번호</Form.Label>
                        <Form.Control type="password" placeholder="비밀번호를 입력해주세요." />
                    </Form.Group>

                    {/* 회원가입 버튼 */}
                    <Button variant="regist" type="submit" className="w-100">회원가입</Button>

                    {/* 로그인 버튼 */}
                    <Button variant="login" type="submit" className="w-100">로그인</Button>
                </Form>
            </Card>
        </Container>
    )
}

export default Login;

• 필요한 컴포넌트 임포트
• 카드 형식으로 폼 구성

route.jsx

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

라우터에도 로그인 경로 추가

정상적으로 출력되는 로그인창