8/19 TIL

1. Next.js 13에서의 useRouter 사용법 변경

• 변경 사항: Next.js 13부터는 useRouter를 next/router가 아닌 next/navigation에서 가져와야 합니다.
• 이점: 이를 통해 클라이언트 사이드에서 페이지 네비게이션을 보다 간편하게 처리할 수 있습니다.

2. 모바일 헤더에서 "뒤로 가기" 버튼 추가하기

• 구현: 새로운 BackHeader 컴포넌트를 만들어 뒤로 가기 버튼을 포함시켰습니다.
• 기능: 이 버튼을 클릭하면 router.back() 메서드를 사용하여 이전 페이지로 이동할 수 있습니다.

3. 조건에 따라 헤더 전환하기

• 구현: 기본 Header 컴포넌트에 showBackHeader라는 프롭을 추가하여, 특정 조건에 따라 기본 헤더와 뒤로 가기 헤더를 전환할 수 있도록 구현했습니다.
• 로직: showBackHeader가 true일 경우 BackHeader가 렌더링되고, 그렇지 않으면 기본 헤더가 렌더링됩니다.

4. 코드 예제

• BackHeader.tsx: useRouter를 사용하여 뒤로 가기 기능 구현.

// BackHeader.tsx
"use client";
import React from "react";
import { useRouter } from "next/navigation"; // next/navigation에서 useRouter 가져오기
import Logo from "../atoms/Logo";

const BackHeader = () => {
  const router = useRouter();

  const handleBackButtonClick = () => {
    router.back(); // 이전 페이지로 돌아가기
  };

  return (
    <header className="fixed top-0 left-0 right-0 z-20 flex flex-row items-center justify-between p-4 bg-white h-[67px] shadow-md">
      <button onClick={handleBackButtonClick} className="bg-blue-500 text-white p-2 rounded">
        뒤로 가기
      </button>
      <Logo />
    </header>
  );
};

export default BackHeader;

• Header.tsx: showBackHeader 프롭을 통해 헤더 전환 로직 구현.

// Header.tsx
"use client";
import React, { useEffect, useState } from "react";
import { useAuthStore } from "@/store/auth";
import { supabase } from "@/utils/supabase/client";
import LoginNav from "./LoginNav";
import Navigation from "./navigation";
import Logo from "../atoms/Logo";
import ImageButton from "../atoms/ImageButton";
import Sidebar from "./SideBar";
import BackHeader from "./BackHeader"; // 뒤로 가기 헤더 임포트

const Header = ({ showBackHeader }: { showBackHeader: boolean }) => {
  const { user, setUser } = useAuthStore();
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  useEffect(() => {
    const checkAndSetUser = async () => {
      if (!user) {
        try {
          const { data: { user: authUser } } = await supabase.auth.getUser();
          if (authUser) {
            const { data: userData, error } = await supabase
              .from("users")
              .select("*")
              .eq("id", authUser.id)
              .single();
            if (error) {
              console.error("Error fetching user data:", error);
              return;
            }
            if (userData) {
              setUser(userData);
            }
          }
        } catch (error) {
          console.error("Error checking user authentication:", error);
        }
      }
    };
    checkAndSetUser();
  }, [user, setUser]);

  const toggleSidebar = () => {
    setIsSidebarOpen((prev) => !prev);
  };

  return (
    <>
      {showBackHeader ? (
        <BackHeader />
      ) : (
        <>
          <header className="fixed top-0 left-0 right-0 z-20 flex desktop:hidden flex-row items-center justify-between p-4 bg-white h-[67px] shadow-md">
            <Logo />
            <ImageButton src="/hambergerbtn.svg" alt="햄버거 버튼" onClick={toggleSidebar} />
          </header>
          <header className="fixed top-0 left-0 right-0 z-20 hidden desktop:flex flex-row items-center justify-between p-4 bg-white h-[67px] shadow-md">
            <Logo />
            <div className="absolute left-1/2 transform -translate-x-1/2">
              <Navigation />
            </div>
            <LoginNav />
          </header>
          <div className="absolute z-20 desktop:hidden">
            <Sidebar isOpen={isSidebarOpen} onClose={toggleSidebar} />
          </div>
        </>
      )}
    </>
  );
};

export default Header;

결론

• 학습 내용: Next.js 13에서의 변화와 헤더 컴포넌트를 효율적으로 관리하는 방법을 배웠습니다.
• 적용: 이 내용을 통해 클라이언트 사이드 네비게이션과 헤더 전환 로직을 이해하고 구현할 수 있게 되었습니다.