dpot-frontend/app/(main)/(account)/navTabs.tsx

'use client';

import './style.scss';
import { useCallback } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import useDragScroll from '@/hooks/useDragScroll';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';

const SCROLL_AMOUNT = 120;

export default function NavTabs()
{
	const pathname = usePathname();
	const dragScroll = useDragScroll<HTMLDivElement>();

	const scroll = useCallback((dir: 'left' | 'right') => {
		const el = dragScroll.ref.current;
		if (!el) {
			return;
		}

		el.scrollBy({ left: dir === 'left' ? -SCROLL_AMOUNT : SCROLL_AMOUNT, behavior: 'smooth' });
	}, [dragScroll.ref]);

    return (
		<div id="tabs-wrapper">
			<button type='button' className='scroll-arrow left' onClick={() => scroll('left')} aria-label='왼쪽 스크롤'>
				<FontAwesomeIcon icon={faChevronLeft} />
			</button>
			<div id="tabs" ref={dragScroll.ref} onMouseDown={dragScroll.onMouseDown} onMouseMove={dragScroll.onMouseMove} onMouseUp={dragScroll.onMouseUp} onMouseLeave={dragScroll.onMouseLeave}>
				{[
					{ href: "/profile", label: "내 정보" },
					{ href: "/change-password", label: "비밀번호 변경" },
					{ href: "/my-posts", label: "작성 게시글" },
					{ href: "/my-comments", label: "작성 댓글" },
					{ href: "/charge-logs", label: "(P) 충전 내역" },
					{ href: "/exp-logs", label: "경험치 내역" },
					{ href: "/login-log", label: "로그인 기록" },
					{ href: "/withdraw", label: "회원탈퇴" }
				].map(({ href, label }) => (
					<Link key={href} href={href} className={pathname === href ? 'active' : undefined}>{label}</Link>
				))}
			</div>
			<button type='button' className='scroll-arrow right' onClick={() => scroll('right')} aria-label='오른쪽 스크롤'>
				<FontAwesomeIcon icon={faChevronRight} />
			</button>
		</div>
	);
}