bitforum-frontend/app/component/Layout.tsx

'use client';

import { useState, useCallback, useEffect } from 'react';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import Styles from '../styles/common.module.scss';
import useAuth from '@/hooks/useAuth';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars, faXmark, faCoins, faComments, faNewspaper, faHeadset, faUser, faRightToBracket, faSun, faMoon } from '@fortawesome/free-solid-svg-icons';
import { faCommentDots, faClock } from '@fortawesome/free-regular-svg-icons';
import useTheme from '@/hooks/useTheme';
import ChatSidebar from '@/app/component/chat/ChatSidebar';

type Props = {
	children: React.ReactNode;
};

export default function Layout({ children }: Props) {
	const { isAuthenticated, isLoading, logout } = useAuth();
	const { toggleTheme, isDark } = useTheme();
	const [sidebarOpen, setSidebarOpen] = useState(false);
	const [chatOpen, setChatOpen] = useState(false);
	const pathname = usePathname();
	const router = useRouter();

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

	const toggleChat = useCallback(() => {
		setChatOpen((prev) => !prev);
	}, []);

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

	const [currentTime, setCurrentTime] = useState('');
	useEffect(() => {
		const updateTime = () => {
			const now = new Date();
			setCurrentTime(
				`${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
			);
		};
		updateTime();
		const timer = setInterval(updateTime, 1000);
		return () => clearInterval(timer);
	}, []);

	if (isLoading) {
		return <></>;
	}

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

                {/* 상단 내용 */}
                <header id='header' className={`${Styles.header} flex items-center w-full px-4`}>
					<button type='button' className={Styles.hamburger} onClick={toggleSidebar} 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.svg" alt="bitforum logo" />
						</picture>
					</Link>
                    <nav className={Styles.pcNav}>
                        <ul className='flex gap-4'>
                            <li>
                                <Link href='/'>
                                    코인
                                </Link>
                            </li>
                            <li>
                                <Link href='/latest'>
                                    토론
                                </Link>
                            </li>
                            <li>
                                <Link href='/news'>
                                    뉴스
                                </Link>
                            </li>
                            <li>
                                <Link href='/board/notice'>
                                    고객지원
                                </Link>
                            </li>
                        </ul>
						<ul className='flex gap-4 items-center'>
							<li>
								<button type='button' onClick={toggleTheme} aria-label='다크모드 전환' title={isDark ? '라이트 모드' : '다크 모드'}>
									<FontAwesomeIcon icon={isDark ? faSun : faMoon} />
								</button>
							</li>
							<li className={`${Styles.clock} text-sm opacity-70`} style={{ fontVariantNumeric: 'tabular-nums' }}>
								<FontAwesomeIcon icon={faClock} className='mr-1' />{currentTime}
							</li>
						{!isAuthenticated ? (
							<>
								<li>
									<a href='/login'>
										로그인
									</a>
								</li>
								<li>
									<a href='/register'>
										회원가입
									</a>
								</li>
							</>
						) : (
							<>
								<li>
									<Link href='/profile'>
										내 정보
									</Link>
								</li>
								<li>
									<button type='button' onClick={logout}>
										로그아웃
									</button>
								</li>
							</>
						)}
						</ul>
                    </nav>
					<button type='button' className={Styles.chatToggle} onClick={toggleChat} aria-label='채팅'>
						<FontAwesomeIcon icon={faCommentDots} />
					</button>
                </header>

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

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

				{/* 우측 채팅 사이드바 */}
				<aside id='chatAside' className={Styles.chatAside}>
					<ChatSidebar />
				</aside>

                {/* 하단 내용 */}
                <footer id='footer' className={`${Styles.footer} px-4`}>
                    <ol>
                        <li>
							<Link href='/docs/teams'>이용약관</Link>
						</li>

                        <li>
							<Link href='/docs/privacy'>개인정보처리방침</Link>
						</li>

                        {/* 저작권 표시 */}
                        <li>© 2025 PLAYR. All rights reserved.</li>
                    </ol>
                </footer>

				{/* 모바일 하단 탭바 */}
				<nav className={Styles.bottomTab}>
					<button
						type='button'
						className={pathname === '/' ? Styles.active : undefined}
						onClick={() => {
							if (pathname === '/') {
								window.dispatchEvent(new CustomEvent('crypto:showList'));
							} else {
								router.push('/');
							}
						}}
					>
						<FontAwesomeIcon icon={faCoins} />
						<span>코인</span>
					</button>
					<Link href='/latest' className={pathname.startsWith('/latest') || (pathname.startsWith('/board') && !pathname.startsWith('/board/notice')) || pathname.startsWith('/post') ? Styles.active : undefined}>
						<FontAwesomeIcon icon={faComments} />
						<span>토론</span>
					</Link>
					<Link href='/news' className={pathname.startsWith('/news') ? Styles.active : undefined}>
						<FontAwesomeIcon icon={faNewspaper} />
						<span>뉴스</span>
					</Link>
					<Link href='/board/notice' className={pathname.startsWith('/board/notice') || pathname.startsWith('/support') ? Styles.active : undefined}>
						<FontAwesomeIcon icon={faHeadset} />
						<span>고객지원</span>
					</Link>
					{isAuthenticated ? (
						<Link href='/profile' className={pathname.startsWith('/profile') ? Styles.active : undefined}>
							<FontAwesomeIcon icon={faUser} />
							<span>내 정보</span>
						</Link>
					) : (
						<a href='/login'>
							<FontAwesomeIcon icon={faRightToBracket} />
							<span>로그인</span>
						</a>
					)}
				</nav>
            </div>
        </>
    );
}