✨ #12 이메일 로그인, 로그아웃 기능 구현

src/main.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
-import './index.css'
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(

src/pages/LoginPage.tsx

@@ -1,48 +1,111 @@
 import styled from '@emotion/styled'
-import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth'
+import React from 'react'
+import { GoogleAuthProvider, signInWithEmailAndPassword, signInWithPopup } from 'firebase/auth'
 import { auth } from '../firebase/firebaseConfig'
+import { useState } from 'react'
 
 const LoginPage = () => {
-  const handleGoogleLogin = async () => {
-    const provider = new GoogleAuthProvider()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [loginSuccess, setLoginSuccess] = useState(true)
+
+  const handleEmailLogin = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
     try {
-      const res = await signInWithPopup(auth, provider)
-      localStorage.setItem('userData', JSON.stringify(res.user))
+      const userCredential = await signInWithEmailAndPassword(auth, email, password)
+      localStorage.setItem('userData', JSON.stringify(userCredential.user))
+      setLoginSuccess(true)
     } catch (error) {
-      console.error(error)
+      setPassword('')
+      setLoginSuccess(false)
     }
   }
 
+  const handleGoogleLogin = async () => {
+    const provider = new GoogleAuthProvider()
+    const res = await signInWithPopup(auth, provider)
+    localStorage.setItem('userData', JSON.stringify(res.user))
+  }
+
   return (
     <Contaier>
-      <div className="google_login">
-        <button className="google_btn" onClick={handleGoogleLogin}>
-          <img
-            className="google_logo"
-            width="20"
-            height="20"
-            src="https://img.icons8.com/color/48/google-logo.png"
-            alt="google-logo"
-          />
-          구글 로그인
+      <form className="email_login" onSubmit={handleEmailLogin}>
+        <input
+          className="login_id"
+          type="text"
+          placeholder="이메일을 입력해주세요."
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <input
+          className="login_pw"
+          type="password"
+          placeholder="비밀번호를 입력해주세요."
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        {!loginSuccess && (
+          <span className="login_notice">아이디 또는 비밀번호를 입력해주세요.</span>
+        )}
+        <button className="login_btn" type="submit">
+          로그인
         </button>
-      </div>
+      </form>
+      <span className="forgot_password">비밀번호를 잊으셨나요?</span>
+      <div className="grayline" />
+      <button className="google_btn" onClick={handleGoogleLogin}>
+        <img
+          className="google_logo"
+          width="20"
+          height="20"
+          src="https://img.icons8.com/color/48/google-logo.png"
+          alt="google-logo"
+        />
+        구글 로그인
+      </button>
     </Contaier>
   )
 }
 
 export default LoginPage
 
 const Contaier = styled.div`
-  .google_logo {
-    align-items: center;
+  display: flex;
+  flex-direction: column;
+  width: 300px;
+  .login_notice {
+    color: red;
+    font-size: 15px;
   }
-  .google_login {
+  .forgot_password {
+    margin: 10px 0px 20px 0px;
+    font-size: 15px;
+    text-align: center;
+  }
+  .email_login {
     display: flex;
+    gap: 3px;
     flex-direction: column;
   }
+  .login_id,
+  .login_pw,
+  .login_btn {
+    padding: 10px;
+  }
+  .login_btn {
+    margin-top: 3px;
+  }
+  .grayline {
+    background-color: gray;
+    margin-bottom: 10px;
+    height: 0.3px;
+  }
+  .google_logo {
+    align-items: center;
+  }
   .google_btn {
     border-radius: 0.3rem;
+    padding: 10px;
     vertical-align: center;
     justify-content: center;
     align-items: center;