[팀 프로젝트] 헤더 조건부 렌더링

팀원이 만든 헤더 컴포넌트를 수정했다
모바일 환경에서 볼 때 햄버거 버튼이 있는데 특정 게시물의 상세 페이지에 들어갔을때 뒤로가기 버튼으로 바꿔줘야한다

기존에 헤더 컴포넌트에 usePathname 를 사용해서 구현하기로 했다

'use client';

import useSidebarStore from '@/zustand/sidebarStore';
import Image from 'next/image';
import Link from 'next/link';

interface MobileHeaderProp {
  number: number;
}

export default function MobileHeader({ number }: MobileHeaderProp) {
  const { sidebarOpen, searchBarOpen } = useSidebarStore();


  return (
     <div className="w-full flex justify-between items-center md:hidden">
       <Image src="/hamburger.svg" alt="메뉴 아이콘" width={24} height={24} onClick={sidebarOpen} />
       <Link href="/">
         <div className="w-40 h-16 flex items-center justify-center">
           {number === 0 ? (
             <Image src="/logo_eng.svg" alt="영어 로고" width={120} height={34} />
           ) : (
             <Image src="/logo_kor.svg" alt="한국어 로고" width={120} height={34} />
           )}
         </div>
       </Link>
       <Image src="/searchIcon.svg" alt="돋보기 아이콘" width={24} height={24} onClick={searchBarOpen} />
     </div>
  );
}

기존 코드에서 usePathname 와 자바스크립트 메소드인 startWith 를 사용했다

'use client';

import useSidebarStore from '@/zustand/sidebarStore';
import Image from 'next/image';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

interface MobileHeaderProp {
  number: number;
}

export default function MobileHeader({ number }: MobileHeaderProp) {
  const { sidebarOpen, searchBarOpen } = useSidebarStore();
  const pathname = usePathname()
  const isProDetailPage = pathname.startsWith('/pro/proDetail')

  return (
    <div className="w-full flex justify-between items-center md:hidden">
    {isProDetailPage ? (
      <Image
        src="/backIcon.svg" 
        alt="뒤로가기 아이콘"
        width={24}
        height={24}
        onClick={() => window.history.back()} 
      />
    ) : (
      <Image
        src="/hamburger.svg"
        alt="메뉴 아이콘"
        width={24}
        height={24}
        onClick={sidebarOpen}
      />
    )}
    <Link href="/">
      <div className="w-40 h-16 flex items-center justify-center">
        {number === 0 ? (
          <Image src="/logo_eng.svg" alt="영어 로고" width={120} height={34} />
        ) : (
          <Image src="/logo_kor.svg" alt="한국어 로고" width={120} height={34} />
        )}
      </div>
    </Link>
    <Image src="/searchIcon.svg" alt="돋보기 아이콘" width={24} height={24} onClick={searchBarOpen} />
  </div>
  );
}

usePathname 으로 URL의 경로를 반환하고 startWith 메서드로 경로가 /pro/Detail/ 로 시작하는지 확인한다. startWith 는 true, false를 반환한다
만약 isProDetailPage 이 true라면 뒤로가기 버튼을 렌더링하고 false라면 햄버거 버튼을 렌더링한다
그리고 뒤로가기 버튼을 누르면 window.history.back() 메서드로 이전 페이지로 돌아가도록 구현했다