제7강: Composer 기능 활용

import React, { createContext, useState, useContext, useEffect } from 'react';
import { auth } from '../services/firebase';

const AuthContext = createContext();

export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within AuthProvider');
  }
  return context;
};

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setUser(user);
      setLoading(false);
    });

    return unsubscribe;
  }, []);

  const login = async (email, password) => {
    return auth.signInWithEmailAndPassword(email, password);
  };

  const signup = async (email, password) => {
    return auth.createUserWithEmailAndPassword(email, password);
  };

  const logout = async () => {
    return auth.signOut();
  };

  const value = {
    user,
    loading,
    login,
    signup,
    logout
  };

  return (
    
      {children}
    
  );
};

import React, { useState } from 'react';
import { useAuth } from '../contexts/AuthContext';
import { useNavigate } from 'react-router-dom';

const LoginForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  
  const { login } = useAuth();
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    try {
      setError('');
      setLoading(true);
      await login(email, password);
      navigate('/dashboard');
    } catch (error) {
      setError('Failed to log in: ' + error.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    

      
Login
      {error && 
{error}
}
      
       setEmail(e.target.value)}
        required
      />
      
       setPassword(e.target.value)}
        required
      />
      
      
        {loading ? 'Logging in...' : 'Login'}
      
    
  );
};