ANTOOZA-FRONTEND/app/component/Layout.tsx

'use client';

import { useState, useCallback } from 'react';
import Styles from '../styles/layout.module.scss';
import Header from './Header';
import Footer from './Footer'
import ChannelSidebar from '@/app/component/channel/ChannelSidebar';
import { ChannelListItem } from '@/types/channel';

type Props = {
	children: React.ReactNode;
	initialChannels?: ChannelListItem[];
};

export default function Layout({ children, initialChannels }: Props) {
	const [sidebarOpen, setSidebarOpen] = useState(false);

	const toggleSidebar = useCallback(() => {
		setSidebarOpen((prev) => !prev);
	}, []);

	const closeOverlay = useCallback(() => {
		setSidebarOpen(false);
	}, []);

	return (
		<>
			<div id='container' className={`${Styles.container}${sidebarOpen ? ` ${Styles.sidebarOpen}` : ''}`}>

				<Header sidebarOpen={sidebarOpen} onToggle={toggleSidebar} />

				{/* 모바일 오버레이 */}
				<div className={Styles.overlay} onClick={closeOverlay} />

				{/* 좌측 채널 사이드바 */}
				<aside id='aside' className={Styles.aside}>
					<ChannelSidebar initialChannels={initialChannels} />
				</aside>

				{/* 메인 내용 */}
				<main id='main' className={`${Styles.main} relative`}>
					{children}
				</main>

				{/* 하단 */}
				<Footer />

			</div>
		</>
	);
}