dom상에서는 nfront-extrabold의classname이 마지막에 존재해서 bold가 적용될 줄 알았습니다

또한 원형이 되는 chadcnui의 table을 받아서 쓰기때문에 제가 정의한부분은 나중에 적용되여 css우선순위가 높을거라 생각했는데 그렇지 않은 이유

그래서 그냥 table의 nfont-medium을 제거했는데 어떻게 하는것이 좋았을지

동일한 방식으로 적용한 tablebody는 bold가 적용됩니다

"use client";
import { useState, useEffect } from "react";
import { auth } from "@/firebase";
import { onAuthStateChanged } from "firebase/auth";
import { useRouter } from "next/navigation";

const useAuth = () => {
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(true);
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  onAuthStateChanged(auth, (user) => {
    if (!user) {
      router.push("/login");
    } else {
      setIsAuthenticated(true);
    }
    setIsLoading(false);
  });

  return { isLoading, isAuthenticated };
};

export default useAuth;

import { onAuthStateChanged } from "firebase/auth";
import { NextResponse, NextRequest } from "next/server";
import { auth } from "./firebase";
import { useSelector } from "react-redux";

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;
  console.log("middleware");

  // 로그인 상태 확인, 쿠키 사용
  let isLoggedIn = request.cookies.get("token")?.value;

  console.log("isLoggedIn", isLoggedIn);
  console.log("pathname", pathname);
  // 로그인 페이지 접근 시 로그인 상태에 따라 처리
  if (pathname === "/login") {
    if (isLoggedIn) {
      console.log("로그인상태입니다");
      return NextResponse.redirect(new URL("/pay", request.url));
    } else {
      console.log("로그인상태가 아닙니다");
      return NextResponse.next();
    }
  }

  // 로그인 상태가 아니고 로그인 페이지가 아닌 다른 페이지에 접근 시 /login으로 리디렉션
  if (!isLoggedIn && pathname !== "/login") {
    console.log(
      "로그인 상태가 아니고 로그인 페이지가 아닌 다른 페이지에 접근 시 /login으로 리디렉션"
    );
    return NextResponse.redirect(new URL("/login", request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: "/((?!api|_next/static|_next/image|favicon.ico).*)",
};

useAuth와 미들웨어

미들웨어에서 파이어베이스 인증이나 리덕스를 못가져옴.

해결→ 리덕스에서 쿠키설정을 했음

파이어베이스 유저인증로직

  onAuthStateChanged(auth, (user) => {
    if (user) {
      isLoggedIn = user;
      console.log("로그인입니다");
    } else {
      console.log(user);
    }
  });