dpot-frontend/app/component/Header.tsx

'use client';

import Styles from '../styles/layout.module.scss';
import { useCallback } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import useAuth from '@/hooks/useAuth';
import useDragScroll from '@/hooks/useDragScroll';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars, faXmark } from '@fortawesome/free-solid-svg-icons';
import NotificationBell from '@/app/component/NotificationBell';
import Profile from '@/app/component/Profile';
import PointChargeIcon from '@/public/icons/layout/point.svg';

const navItems = [
	{ href: '/', label: '생방송' },
	{ href: '/feed', label: '피드' },
	{ href: '/ranking', label: '순위' },
	{ href: '/market', label: '상점' },
	{ href: '/attendance', label: '출석부' },
	{ href: '/board/notice', label: '고객지원' },
];

type Props = {
	sidebarOpen: boolean;
	onToggle: () => void;
};

export default function Header({ sidebarOpen, onToggle }: Props)
{
	const { isAuthenticated } = useAuth();
	const pathname = usePathname();
	const dragScroll = useDragScroll<HTMLDivElement>();

	const handlePopupCharge = useCallback(() => {
		const w = 450, h = 635;
		const left = window.screenX + (window.outerWidth - w) / 2;
		const top = window.screenY + (window.outerHeight - h) / 2;
		window.open('/charge', 'charge', `width=${w},height=${h},left=${left},top=${top},scrollbars=no,resizable=no`);
	}, []);

	return (
		<header id='header' className={Styles.header}>

			{/* 1줄: 로고 + 우측 아이콘 (PC에서는 전체 내비) */}
			<div className={Styles.headerRow1}>
				<button type='button' className={Styles.hamburger} onClick={onToggle} aria-label='메뉴'>
					<FontAwesomeIcon icon={sidebarOpen ? faXmark : faBars} />
				</button>

				<Link href='/' className={Styles.logo}>
					<picture>
						<source src="image.webp" type="image/webp" />
						{/* <img src="/resources/logo.jpg" alt="DPOT" /> */}
						로고 자리
					</picture>
				</Link>

				{/* PC 내비게이션 */}
				<nav className={Styles.pcNav}>
					<ul className='flex gap-4'>
						{navItems.map(item => (
							<li key={item.label}>
								<Link href={item.href}>{item.label}</Link>
							</li>
						))}
					</ul>
				</nav>

				{/* 우측 아이콘 (항상 표시) */}
				<div className={Styles.headerActions}>
					{isAuthenticated && (
						<>
							<button type="button" className={Styles.chargeBtn} onClick={handlePopupCharge} title="포인트 충전">
								<PointChargeIcon width={24} height={24} />
							</button>
							<NotificationBell />
						</>
					)}
					<Profile />
				</div>
			</div>

			{/* 2줄: 모바일 전용 가로 스크롤 탭 */}
			<div className={Styles.headerRow2}>
				<div
					className={Styles.mobileTabScroll}
					ref={dragScroll.ref}
					onMouseDown={dragScroll.onMouseDown}
					onMouseMove={dragScroll.onMouseMove}
					onMouseUp={dragScroll.onMouseUp}
					onMouseLeave={dragScroll.onMouseLeave}
				>
					{navItems.map(item => (
						<Link
							key={item.label}
							href={item.href}
							className={`${Styles.mobileTab}${pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href)) ? ` ${Styles.mobileTabActive}` : ''}`}
						>
							{item.label}
						</Link>
					))}
				</div>
			</div>
		</header>
	);
}