🚩 React

리액트와 파이어베이스를 사용하여 쇼핑몰 사이트 구현하기 2일차

📝 설명

• react와 firebase를 이용하여 쇼핑몰 사이트 구현하기
• 상단 헤더와 네비게이션 바, firebase 로그인/로그아웃 구현
• 로그인하면 로그아웃으로 글씨 변경되게 구현(반대도 구현)

✒️ 코드 작성

입력

App.js

import './App.css';
import { Outlet } from 'react-router-dom';
import Navbar from './components/Navbar';

function App() {
  return (
    <>
      <Navbar />
      <Outlet />
    </>
  );
}

export default App;

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Playfair+Display&display=swap");

body {
  margin: 0;
  font-family: Noto Sans KR;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  @apply text-slate-900;
}

#root {
  @apply w-full text-inherit;
}

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import "./index.css";
import App from "./App";
import NotFound from "./pages/NotFound";
import Home from "./pages/Home";
import AllProducts from "./pages/AllProducts";
import NewProduct from "./pages/NewProduct";
import ProductDetail from "./pages/ProductDetail";
import MyCart from "./pages/MyCart";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    errorElement: <NotFound />,
    children: [
      { index: true, path: "/", element: <Home /> },
      { path: "/products", element: <AllProducts /> },
      { path: "/products/new", element: <NewProduct /> },
      { path: "/products/:id", element: <ProductDetail /> },
      { path: "/cart", element: <MyCart /> },
    ],
  },
]);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

Navbar.jsx

import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { HiPencilAlt } from "react-icons/hi";
import { login, logout, onUserStateChange } from "../api/firebase";
import User from "./User";
import Button from "./ui/Button";

// * 1-1. useState 선언
export default function Navbar() {
  const [user, setUser] = useState();

  // * 2. 화면이 마운트될 때(reload될 때) 로그인이 되어있는지 아닌지 상태를 알아보는 함수 호출
  useEffect(() => {
    onUserStateChange((user) => {
      setUser(user);
      console.log("user? : ", user); // admin을 만들고 싶은 유저의 uid를 확인하기 위해 작성
    });
  }, []);

  // * 1-2. onClick에 login 함수를 넣지 않고 이렇게 작성하는 이유는 firebase.js에 있는 user를 받아와서 useState에 집어넣기 위함
  /**
   * 로그인할 때 사용되는 함수
   */
  // 리팩토링
  // const handleLogin = () => {
  //   login().then(setUser);
  // };
  // const handleLogout = () => {
  //   logout().then(setUser); // useState의 user를 비운다. (null 상태로 만듦)
  // };

  return (
    <div className="border-b border-t-slate-300">
      <div className="w-full max-w-screen-2xl m-auto">
        <header className="flex justify-between items-center p-5">
          <h1 className="text-3xl font-logoFont tracking-widest">
            RALPH<span className="pl-3 md:pl-6">LAUREN</span>
          </h1>

          <nav className="flex items-center gap-4">
            <Link to="/products">Product</Link>
            <Link to="/cart">Cart</Link>
            {/* // * 5. isAdmin이 true일 때만 보이도록 */}
            {user && user.isAdmin && (<Link to="/products/new"><HiPencilAlt /></Link>)}

            {/* // *3. User.jsx - user가 없을 경우 실행 */}
            {user && <User user={user} />}

            {/*// * 1-2. */}
            {/* // * 2-1. 따로 선언하지 않고 firebase 안에 있는 함수를 바로 호출 */}
            {/* // * 6. Button 컴포넌트로 전환 */}
            {!user && <Button onClick={login} text={"login"} />}
            {user && <Button onClick={logout} text={"logout"} />}
          </nav>
        </header>
      </div>
    </div>
  );
}

User.jsx

import React from "react";

// * 3. 유저를 나타내는 User.jsx 만듦
export default function User({ user: { displayName, photoURL } }) {
  // console.log("user: ", user);
  return (
    // shrink : 부모 영역이 줄면 자식 item들도 같이 줄어듦 - shrink-0은 그것을 방지해줌
    <div className="flex items-center shrink-0">
      <img
        className="w-10 h-10 rounded-full mr-2"
        src={photoURL}
        alt={displayName}
      />
      <span className="hidden md:block">{displayName}</span>
    </div>
  );
}

Button.jsx

import React from "react";

export default function Button({ onClick, text }) {
  return (
    <button
      className="bg-brand text-white py-2 px-4 rounded-full hover:brightness-200 text-sm"
      onClick={onClick}
    >
      {text}
    </button>
  );
}

firebase.js

import { initializeApp } from "firebase/app";
import {
  getAuth,
  signInWithPopup,
  GoogleAuthProvider,
  signOut,
  onAuthStateChanged,
} from "firebase/auth";
import { getDatabase, get, ref } from "firebase/database";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  databaseURL: process.env.REACT_APP_FIREBASE_DB_URL,
};

const app = initializeApp(firebaseConfig);
const provider = new GoogleAuthProvider();
const auth = getAuth();

// * 1-1. 함수 선언은 firebase 안에서 함
export function login() {
  return signInWithPopup(auth, provider) // 아래 리턴된 user 값을 받아와서 결과값으로 내보내기 위해 return 작성
    .then((result) => {
      // 로그인 되었는지 결과를 얻어옴
      const user = result.user;
      // console.log("user? : ", user);
      return user;
    })
    .catch(console.error);
}

export async function logout() {
  return signOut(auth) // null값이 리턴됨
    .then(() => null); // null
  // .catch((error) => {});
}

// * 2. 화면이 마운트될 때(reload될 때) 로그인이 되어있는지 아닌지 상태를 알아보는 함수 선언 (callback)
export function onUserStateChange(callback) {
  // 만약 user가 있을 경우
  onAuthStateChanged(auth, async (user) => {
    // ? 1. 사용자가 로그인 한 경우
    // user && adminUser(user);
    const updatedUser = user ? await adminUser(user) : null ;
    callback(updatedUser);
  });
}

// * 4. 실시간 데이터베이스 사용 선언
const database = getDatabase(app);

// ? 2. 사용자가 어드민 권한이 있는지 확인 -> isAdmin을 user 안에 넣음
// 데이터베이스 안에 있는 admins를 참조하는 함수
function adminUser(user) {
  // database 안에 admins key가 있음
  return get(ref(database, "admins")) // ref(database이름, key값)
    // 만약 snapshot(결과값)이 존재하면
    .then((snapshot) => {
      if (snapshot.exists()) {
        const admins = snapshot.val(); // snapshot의 value
        // admins가 user.uid를 포함함
        const isAdmin = admins.includes(user.uid);
        return { ...user, isAdmin }; // 많은 user들의 항목 중에서 isAdmin만 끼워넣음
      }
    });
}

/*
  1. 사용자가 로그인 한 경우
  2. 사용자가 어드민 권한이 있는지 확인
  3. 사용자에게 알려줌
 */

js

출력

• 이미지로 대체
  

• 이미 로그인 되어 있기 때문에 아래와 같이 로그인 창이 뜨지 않고 바로 로그아웃으로 넘어감
  
  

🔗 참고 링크 & 도움이 되는 링크

• firebase
• firebase 빌드
• React icons
• tailwind

---