🚩 React

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

📝 설명

• 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, { useState } from "react";
import { Link } from "react-router-dom";
import { HiPencilAlt } from "react-icons/hi";
import { login, logout } from "../api/firebase";

export default function Navbar() {
  const [user, setUser] = useState();

  // 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>
            <Link to="/products/new">
              <HiPencilAlt />
            </Link>
            {!user && <button onClick={handleLogin}>login</button>}
            {user && <button onClick={handleLogout}>logout</button>}
          </nav>
        </header>
      </div>
    </div>
  );
}

firebase.js

import { initializeApp } from "firebase/app";
import { getAuth, signInWithPopup, GoogleAuthProvider, signOut } from "firebase/auth";

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();

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

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

js

출력

• 이미지로 대체
  

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

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

• firebase
• firebase 빌드
• React icons
• tailwind

---