Refactor: 헤더가 메인 페이지일 때 네비게이트나 다른 아이콘이 안 뜨도록 함

This commit is contained in:
정현조 2024-09-09 14:58:12 +09:00
parent cb434115ff
commit 01baf090f2

View File

@ -1,10 +1,15 @@
import * as React from 'react'; import * as React from 'react';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { Bell, User } from 'lucide-react'; import { Bell, User } from 'lucide-react';
import { useLocation } from 'react-router-dom';
export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {} export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
export default function Header({ className, ...props }: HeaderProps) { export default function Header({ className, ...props }: HeaderProps) {
const location = useLocation();
const isHomePage = location.pathname === '/';
return ( return (
<header <header
className={cn( className={cn(
@ -20,19 +25,27 @@ export default function Header({ className, ...props }: HeaderProps) {
> >
WorLabel WorLabel
</div> </div>
<nav className="hidden items-center gap-5 md:flex">
<div className={cn('text-color-text-default-default', 'font-body-strong', 'text-sm sm:text-base md:text-lg')}> {!isHomePage && (
workspace <nav className="hidden items-center gap-5 md:flex">
</div> <div
<div className={cn('text-color-text-default-default', 'font-body', 'text-sm sm:text-base md:text-lg')}> className={cn('text-color-text-default-default', 'font-body-strong', 'text-sm sm:text-base md:text-lg')}
labeling >
</div> workspace
</nav> </div>
</div> <div className={cn('text-color-text-default-default', 'font-body', 'text-sm sm:text-base md:text-lg')}>
<div className="flex items-center gap-4 md:gap-5"> labeling
<Bell className="h-4 w-4 text-black sm:h-5 sm:w-5" /> </div>
<User className="h-4 w-4 text-black sm:h-5 sm:w-5" /> </nav>
)}
</div> </div>
{!isHomePage && (
<div className="flex items-center gap-4 md:gap-5">
<Bell className="h-4 w-4 text-black sm:h-5 sm:w-5" />
<User className="h-4 w-4 text-black sm:h-5 sm:w-5" />
</div>
)}
</header> </header>
); );
} }