ANTOOZA-FRONTEND/app/(main)/channel/[identifier]/_component/ChannelTabs.tsx

'use client';

import Link from 'next/link';
import { useSelectedLayoutSegment } from 'next/navigation';

type Props = {
	identifier: string;
};

export default function ChannelTabs({ identifier }: Props) {
	const segment = useSelectedLayoutSegment();
	const encoded = encodeURIComponent(identifier);

	const tabs = [
		{ key: null, label: '소개', href: `/channel/${encoded}` },
		{ key: 'posts', label: '게시물', href: `/channel/${encoded}/posts` }
	];

	return (
		<nav className="channel-page__tabs" aria-label="채널 탭">
			{tabs.map((tab) => {
				const active = segment === tab.key;
				return (
					<Link
						key={tab.label}
						href={tab.href}
						className={`channel-page__tab${active ? ' channel-page__tab--active' : ''}`}
						aria-current={active ? 'page' : undefined}
					>
						{tab.label}
					</Link>
				);
			})}
		</nav>
	);
}