[React] TMDB API를 활용한 넷플릭스 클론 코딩 - 4. 사용자 인증 및 로그인 및 회원가입 팝업 구현

로그인 및 회원가입 팝업 구현

이 포스팅에서는 사용자가 로그인할 수 있도록 로그인 팝업을 구현했습니다. 팝업 안에서 로그인과 회원가입 기능을 모두 지원하며, 로그인 유지 기능도 추가하여 사용자가 로그인 상태를 유지할 수 있습니다. 또한, 로컬 스토리지를 활용하여 사용자의 인증 정보를 저장하고 관리합니다.

---

1. 주요 기능

1.1 로그인

로그인 기능은 사용자가 입력한 이메일과 비밀번호를 로컬 스토리지에 저장된 사용자 목록과 비교하여 인증합니다. 인증에 성공하면 isLoggedIn 값을 로컬 스토리지에 저장하여 사용자가 로그인된 상태로 앱을 이용할 수 있게 합니다.

1.2 회원가입

회원가입은 사용자가 입력한 이메일과 비밀번호를 기반으로 새로운 사용자 정보를 로컬 스토리지에 저장합니다. 또한, 비밀번호 확인 필드를 제공하여 사용자가 비밀번호를 정확히 입력했는지 확인할 수 있습니다.

1.3 로그인 유지 기능

로그인 유지 체크박스를 사용하여 사용자가 로그인 상태를 유지할 수 있도록 했습니다. 사용자가 로그인 시 keepLogin 값을 로컬 스토리지에 저장하면, 이후에 사용자가 새로 고침을 하거나 페이지를 벗어났다가 돌아와도 로그인 상태를 유지할 수 있습니다.

---

2. 사용자 인증 관리

사용자 인증은 웹 애플리케이션에서 중요한 기능 중 하나입니다. 이번 프로젝트에서는 사용자의 로그인 상태를 sessionStorage를 사용하여 관리하고, 로그인 여부에 따라 화면을 다르게 표시하는 방식으로 구현했습니다.

2.1 로그인 상태 관리

사용자가 로그인하면 sessionStorage에 로그인 정보를 저장하고, 로그아웃 시 해당 정보를 제거합니다. 이를 통해 사용자가 사이트를 떠나도 로그인 상태를 유지할 수 있습니다.

// App.js
useEffect(() => {
  const loggedIn = sessionStorage.getItem("isLoggedIn") === "true";
  setIsLoggedIn(loggedIn);
  setIsPopupVisible(!loggedIn); // 로그아웃 상태면 팝업 표시
}, []);

2.2 로그인 및 로그아웃 처리

로그인 시 sessionStorage에 로그인 정보를 저장하고, 로그아웃 시 해당 정보를 제거합니다. 로그아웃 후 팝업을 다시 표시하여 사용자가 다시 로그인할 수 있도록 합니다.

// App.js
const handleLogin = () => {
  sessionStorage.setItem("isLoggedIn", true);
  setIsLoggedIn(true);
  setIsPopupVisible(false); // 팝업 닫기
};

const handleLogout = () => {
  sessionStorage.removeItem("isLoggedIn");
  setIsLoggedIn(false);
  setIsPopupVisible(true); // 로그아웃 후 팝업 다시 표시
};

2.3 사용자 정보 초기화

로컬 스토리지에 사용자 정보가 없을 경우 빈 배열을 저장하는 코드도 추가했습니다. initializeUserStorage 함수는 애플리케이션 시작 시 실행되며, "users"라는 키로 빈 배열을 저장하여 사용자가 없을 경우 기본값을 설정합니다.

// utils/storage.js
export const initializeUserStorage = () => {
  if (!getFromLocalStorage("users")) {
    saveToLocalStorage("users", []);
  }
};

이 함수는 애플리케이션이 시작될 때 호출되며, 로컬 스토리지에 사용자 정보가 없을 경우 빈 배열을 저장합니다. 이는 사용자가 애플리케이션을 처음 사용할 때 빈 사용자 목록을 설정하고, 이후에 새로운 사용자 정보가 저장될 수 있도록 합니다.

---

3. 코드 설명

3.1 상태 관리

로그인 팝업 컴포넌트는 isSignUp, form, error, keepLogin 상태를 관리합니다.

• isSignUp: true일 경우 회원가입 폼을 표시하고, false일 경우 로그인 폼을 표시합니다.
• form: 사용자가 입력한 email, password, confirmPassword 값을 저장합니다.
• error: 에러 메시지를 저장하여 유효성 검사 실패 시 사용자에게 오류를 알려줍니다.
• keepLogin: 로그인 유지 체크박스 상태를 관리합니다.

const [isSignUp, setIsSignUp] = useState(false); // true면 회원가입 모드
const [form, setForm] = useState({
  email: "",
  password: "",
  confirmPassword: "",
});
const [error, setError] = useState("");
const [keepLogin, setKeepLogin] = useState(false);

3.2 로컬 스토리지 초기화

initializeUserStorage 함수는 컴포넌트가 렌더링될 때 로컬 스토리지를 초기화하는 역할을 합니다. users라는 키로 저장된 사용자 목록이 없으면 빈 배열을 저장하여, 이후 로그인 및 회원가입에서 사용자가 정상적으로 등록되도록 합니다.

useEffect(() => {
  initializeUserStorage();
}, []);

3.3 로그인 처리

사용자가 로그인 버튼을 클릭하면, 입력한 이메일과 비밀번호를 로컬 스토리지에서 가져온 사용자 목록과 비교하여 인증합니다. 로그인 성공 시, isLoggedIn 값을 로컬 스토리지에 저장하고, keepLogin 체크박스 상태에 따라 로그인 상태를 유지합니다.

const handleLogin = () => {
  const { email, password } = form;
  if (!email || !password) {
    setError("아이디와 비밀번호를 입력해주세요.");
    return;
  }

  const users = getFromLocalStorage("users");
  const user = users.find(
    (user) => user.email === email && user.password === password
  );

  if (!user) {
    setError("아이디 또는 비밀번호가 잘못되었습니다.");
    return;
  }

  saveToLocalStorage("isLoggedIn", true);
  if (keepLogin) {
    saveToLocalStorage("keepLogin", true);
  }

  alert("로그인 성공!");
  onLogin();
  onClose();
};

3.4 회원가입 처리

회원가입 기능에서는 이메일과 비밀번호 확인을 통해 새로운 사용자를 로컬 스토리지에 저장합니다. 사용자가 입력한 이메일이 이미 등록되어 있는지 확인하고, 비밀번호가 일치하는지 확인하는 유효성 검사를 수행합니다.

const handleSignUp = () => {
  const { email, password, confirmPassword } = form;
  if (!email || !password || !confirmPassword) {
    setError("모든 필드를 입력해주세요.");
    return;
  }
  if (password !== confirmPassword) {
    setError("비밀번호가 일치하지 않습니다.");
    return;
  }

  // 유저 데이터 가져오기
  const users = getFromLocalStorage("users");
  const isEmailUsed = users.some((user) => user.email === email);

  if (isEmailUsed) {
    setError("이미 사용 중인 이메일입니다.");
    return;
  }

  // 새로운 유저 추가
  const newUser = { email, password };
  saveToLocalStorage("users", [...users, newUser]);

  alert("회원가입 성공! 로그인 해주세요.");
  setIsSignUp(false);
  setForm({ email: "", password: "", confirmPassword: "" });
};

3.5 화면 전환

사용자가 로그인 팝업에서 로그인 또는 회원가입을 전환할 수 있도록 버튼을 제공합니다. isSignUp 상태에 따라 로그인과 회원가입 화면을 전환할 수 있습니다.

<button type="button" onClick={() => setIsSignUp(!isSignUp)}>
  {isSignUp ? "이미 계정이 있나요? 로그인" : "계정이 없나요? 회원가입"}
</button>

3.6 전체 코드

SignInPopup.js

//components/SignInPopup.js

import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import {
  saveToLocalStorage,
  getFromLocalStorage,
  initializeUserStorage,
} from "../utils/storage";
import "../styles/components/SignInPopup.css";

const SignInPopup = ({ onClose, onLogin }) => {
  const [isSignUp, setIsSignUp] = useState(false); // true면 회원가입 모드
  const [form, setForm] = useState({
    email: "",
    password: "",
    confirmPassword: "",
  });
  const [error, setError] = useState("");
  const [keepLogin, setKeepLogin] = useState(false);
  const navigate = useNavigate();

  useEffect(() => {
    initializeUserStorage();
  }, []);

  const handleInputChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleLogin = () => {
    const { email, password } = form;
    if (!email || !password) {
      setError("아이디와 비밀번호를 입력해주세요.");
      return;
    }

    const users = getFromLocalStorage("users");
    const user = users.find(
      (user) => user.email === email && user.password === password
    );

    if (!user) {
      setError("아이디 또는 비밀번호가 잘못되었습니다.");
      return;
    }

    saveToLocalStorage("isLoggedIn", true);
    if (keepLogin) {
      saveToLocalStorage("keepLogin", true);
    }

    alert("로그인 성공!");
    onLogin();
    onClose();
  };

  const handleSignUp = () => {
    const { email, password, confirmPassword } = form;
    if (!email || !password || !confirmPassword) {
      setError("모든 필드를 입력해주세요.");
      return;
    }
    if (password !== confirmPassword) {
      setError("비밀번호가 일치하지 않습니다.");
      return;
    }

    // 유저 데이터 가져오기
    const users = getFromLocalStorage("users");
    const isEmailUsed = users.some((user) => user.email === email);

    if (isEmailUsed) {
      setError("이미 사용 중인 이메일입니다.");
      return;
    }

    // 새로운 유저 추가
    const newUser = { email, password };
    saveToLocalStorage("users", [...users, newUser]);

    alert("회원가입 성공! 로그인 해주세요.");
    setIsSignUp(false);
    setForm({ email: "", password: "", confirmPassword: "" });
  };

  const handleSignUpRedirect = () => {
    navigate("/signUp");
    onClose();
  };

  return (
    <div className="popup-overlay">
      <div className="popup-content">
        <h1>{isSignUp ? "회원가입" : "로그인"}</h1>
        <form>
          <input
            type="email"
            name="email"
            placeholder="이메일"
            value={form.email}
            onChange={handleInputChange}
          />
          <input
            type="password"
            name="password"
            placeholder="비밀번호"
            value={form.password}
            onChange={handleInputChange}
          />
          {isSignUp && (
            <input
              type="password"
              name="confirmPassword"
              placeholder="비밀번호 확인"
              value={form.confirmPassword}
              onChange={handleInputChange}
            />
          )}
          {error && <p className="error">{error}</p>}
          {isSignUp ? (
            <button type="button" onClick={handleSignUp}>
              회원가입
            </button>
          ) : (
            <>
              <label>
                <input
                  type="checkbox"
                  checked={keepLogin}
                  onChange={() => setKeepLogin(!keepLogin)}
                />
                로그인 유지
              </label>
              <button type="button" onClick={handleLogin}>
                로그인
              </button>
            </>
          )}
        </form>
        <button type="button" onClick={() => setIsSignUp(!isSignUp)}>
          {isSignUp ? "이미 계정이 있나요? 로그인" : "계정이 없나요? 회원가입"}
        </button>
        <button className="signUp-btn" onClick={handleSignUpRedirect}>
          회원가입 페이지로 이동
        </button>
      </div>
    </div>
  );
};

export default SignInPopup;

---

🚀 결과 화면

• 로그인 팝업

• 회원가입 팝업

 

• 사용자 인증

---

💡 정리

이번 포스팅에서는 로그인 팝업을 React로 구현하는 방법을 다뤘습니다. 로그인 및 회원가입 기능을 하나의 팝업에서 처리하고, 로컬 스토리지를 활용하여 사용자 인증 정보를 관리했습니다. 이를 통해 사용자는 로그인 상태를 유지하고, 간편하게 회원가입을 진행할 수 있습니다.