[TIL/React] 2023/08/03

프로젝트에 로그인 적용 🟠

1. Firebase에서 프로젝트를 생성함

프로젝트 설정에서 태그(</>) 클릭, 앱 등록을 마치면 Firebase 초기화와 관련된 코드를 받을 수 있음

2. VSCode 설정

src 디렉터리 내부에 firebase.js 파일 생성

firebase를 install한 후에 위 코드를 입력

import { signInWithEmailAndPassword } from "firebase/auth";
import React, { useState } from "react";
import styled from "@emotion/styled";
import { auth } from "../firebase";

const LogInTitle = styled.p`
  text-align: center;
  margin: 100px;
  font-weight: bolder;
  font-size: 40px;
`;

const LogInFormWrapper = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 400px;
  height: 500px;
  margin: 0 auto;
`;

const FormLabel = styled.label`
  font-size: 16px;
  margin-bottom: 8px;
`;

const FormInput = styled.input`
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
`;

const SubmitButton = styled.button`
  background-color: black;
  color: #fff;
  padding: 20px;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  &:hover {
    background-color: #fff;
    color: black;
    border: 2px solid black;
  }
`;

const SignIn = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const signIn = (e) => {
    e.preventDefault();
    signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        console.log(userCredential);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  return (
    <div style={{ height: "1000px" }}>
      <form onSubmit={signIn}>
        <LogInTitle>로그인</LogInTitle>
        <LogInFormWrapper>
          <h2>이메일 로그인</h2>

          <FormLabel>Email</FormLabel>
          <FormInput
            type="email"
            placeholder="아이디(이메일 주소)를 입력하세요"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />

          <FormLabel>Password</FormLabel>
          <FormInput
            type="password"
            placeholder="비밀번호를 입력하세요"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />

          <SubmitButton>로그인</SubmitButton>
        </LogInFormWrapper>
      </form>
    </div>
  );
};

export default SignIn;

로그인 페이지를 살짝 꾸며본다...